Image banner
Overview:
The Image Banner section is a visually impactful component designed to highlight a promotional message, key announcement, or featured image. It supports desktop and mobile-specific background images, configurable headings, rich text descriptions, and a call-to-action button. The layout, height, alignment, and colors are all fully customizable for responsive control.
Section Configuration:
Images
| Setting |
Description |
| Desktop Image |
Uploads the background image for desktop view. |
| Mobile Image |
Uploads a mobile-optimized version of the background image. |
Heading & Description
| Setting |
Description |
| Heading |
Main title displayed on top of the image. Supports rich text. |
| Heading Size |
Controls the heading tag (H1–H6) used for styling and SEO. |
| Heading Weight |
Defines the font weight of the heading (300–900). |
| Description |
Optional descriptive text below the heading. Supports rich formatting. |
| Description Size |
Sets the text size of the description. |
| Description Weight |
Controls the font weight of the description. |
| Setting |
Description |
| Button Label |
Sets the text displayed inside the call-to-action button. |
| Button Type |
Choose between primary or secondary button styles. |
| Button URL |
Sets the destination link for the button. |
| Open in New Tab |
If enabled, the link opens in a new browser tab. |
Layout
| Setting |
Description |
| Desktop Height |
Sets the banner height for desktop devices. Options: small (376px), medium (476px), large (576px). |
| Mobile Height |
Sets the banner height for mobile devices. |
| Desktop Content Position |
Defines the position of the text content within the banner on desktop. |
| Mobile Content Position |
Defines the position of the text content within the banner on mobile. |
| Content Max Width (Desktop) |
Sets the maximum content width as a percentage of the page width. |
| Container Layout |
Determines whether the section content is boxed (container) or full-width (container-fluid). |
| Container Padding |
Enables or disables horizontal padding within the container. |
| Text Alignment (Desktop) |
Controls the alignment of text content on larger screens. |
| Text Alignment (Mobile) |
Controls the alignment of text content on smaller screens. |
Color Scheme
| Setting |
Description |
| Color Scheme |
Applies a theme-wide color palette to the banner’s content and background. |
Spacing
| Setting |
Description |
| Top Padding |
Adds vertical spacing above the banner. |
| Bottom Padding |
Adds vertical spacing below the banner. |