PageBuilderBanner — Page Builder Banner¶
Extension for Magento 2¶
User Manual¶
CopeX GmbH
Web: https://copex.io
Email: office@copex.io
Table of Contents¶
| Section | Page |
|---|---|
| 1 Requirements | 2 |
| 2 Configuration | 2 |
| 3 Usage | 2 |
| 3.1 Adding a Banner Element in Page Builder | 2 |
| 3.2 Configuring Appearance and Background | 3 |
| 3.3 Configuring Content | 3 |
| 3.4 Advanced CSS Settings | 4 |
1 Requirements¶
- Magento 2.3 or higher (compatible with 2.4)
- PHP 8.1 or higher
- Magento Page Builder enabled
- Hyvä Theme or Luma Theme
2 Configuration¶
This module has no backend configuration. After installation, the banner element is immediately available in Page Builder.
3 Usage¶
3.1 Adding a Banner Element in Page Builder¶
After installing the module, an enhanced Banner content element is available in Magento Page Builder. It can be used in static pages, CMS blocks, and anywhere else Page Builder is available.
Adding a banner element:
- Open a CMS page or CMS block in the backend under Content > Pages or Content > Blocks.
- Click Edit and then open the Page Builder editor.
- In the left panel under Media, drag the Banner element to the desired position in the layout.
- The banner appears in the editor as a placeholder banner.
3.2 Configuring Appearance and Background¶
After adding the element, you can configure the banner through the settings dialog:
Tab: Appearance
| Setting | Description |
|---|---|
| Appearance | Placement of the banner on the page (Poster / Collage Centered / Collage Left / Collage Right) |
| Minimum Height | Minimum height of the banner (e.g. 300px or 50vh) |
Tab: Background
| Setting | Description |
|---|---|
| Background Color | Background color of the banner (CSS color value) |
| Background Type | Color or image |
| Background Image | Upload a desktop background image |
| Mobile Background Image | Upload a separate image for mobile view |
| Background Size | CSS background-size value (cover, contain, auto) |
| Background Position | CSS background-position value |
| Background Attachment | CSS background-attachment value (scroll or fixed) |
| Background Repeat | CSS background-repeat value |
3.3 Configuring Content¶
Tab: Content
| Setting | Description |
|---|---|
| Message Text | Text or HTML displayed over the banner background |
| Link | URL the banner links to |
| Show Button | Show a button in the banner (Yes / No) |
| Button Text | Text for the banner button |
| Button Type | Style of the button (Primary / Secondary / Link) |
| Show Overlay | Show a semi-transparent overlay (Yes / No) |
| Overlay Color | Color of the overlay |
Tab: Search Engine Optimization
| Setting | Description |
|---|---|
| Alternative Text | Alt text for the background image |
| Title Attribute | HTML title attribute of the banner |
3.4 Advanced CSS Settings¶
Tab: Advanced
| Setting | Description |
|---|---|
| Alignment | Horizontal alignment of the banner content |
| Border | Border style (none, solid, dashed, etc.) |
| Border Color | CSS color of the border |
| Border Width | Border width in pixels |
| Border Radius | Corner rounding in pixels |
| CSS Classes | Custom CSS classes |
| Margins | Outer spacing (margin) in pixels |
| Padding | Inner spacing (padding) in pixels |
License¶
Proprietary — CopeX GmbH. One license per production Magento instance. Test and development environments do not require an additional license.