Image banner
Overview:
The Image Banner section is designed to create visually engaging hero banners with images, promotional content, headings, descriptions, and call-to-action buttons. It supports desktop and mobile images, overlays, content positioning, typography customization, responsive layouts, color schemes, and spacing controls. This section is ideal for hero banners, promotional campaigns, seasonal offers, brand storytelling, or featured announcements.
Blocks Configuration
Heading Block
The Heading block displays the main title inside the Image Banner section.
Content:
| Setting |
Description |
| Heading |
Defines the main heading displayed inside the banner. Supports rich text formatting such as bold and italic styling. |
Typography:
| Setting |
Description |
| Heading Size |
Controls heading size such as H1–H6, Large, Medium, or Small. |
| Heading Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Heading Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Heading Tag |
Sets the HTML heading tag level from H1 to H6 for SEO and accessibility purposes. |
| Heading Font Family |
Allows switching between Default and Body font family styles. |
| Heading Color Style |
Applies predefined color styling to the heading text. |
| Heading Link Style |
Controls styling behavior of links used inside heading content. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the heading block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the heading block on mobile devices. |
Description Block
The Description block displays supporting content below the heading.
Content:
| Setting |
Description |
| Description Text |
Displays supporting text or promotional messaging inside the banner section. Supports rich text formatting. |
Typography:
| Setting |
Description |
| Text Size |
Controls description text size such as Large, Medium, or Small. |
| Text Weight |
Adjusts the font thickness ranging from Thin (100) to Black (900). |
| Text Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Text Font Family |
Allows switching between Default and Heading font family styles. |
| Text Color Style |
Applies predefined color styling to description text. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the description block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the description block on mobile devices. |
The Button block displays a call-to-action button inside the Image Banner section.
| Setting |
Description |
| Button Label |
Defines the text displayed on the button such as Shop Now or Learn More. |
| Button Link |
Adds a destination URL for the button. |
| Button Style |
Controls button appearance such as Primary or Secondary style. |
| Button Case |
Changes text transformation style such as Uppercase, Lowercase, Capitalize, or Default. |
| Open in New Tab |
Opens the button link in a new browser tab when enabled. |
Spacing:
| Setting |
Description |
| Bottom Margin (Desktop) |
Adds spacing below the button block on desktop devices. |
| Bottom Margin (Mobile) |
Adds spacing below the button block on mobile devices. |
Section Configuration
Background Settings:
| Setting |
Description |
| Desktop Image |
Uploads the main banner image displayed on desktop devices. |
| Desktop Overlay |
Adds a gradient or overlay effect over the desktop image. |
| Mobile Image |
Uploads a separate image displayed on mobile devices for responsive optimization. |
| Mobile Overlay |
Adds a gradient or overlay effect over the mobile image. |
Layout:
| Setting |
Description |
| Desktop Caption Width |
Controls the content width on desktop devices using percentage values. |
| Mobile Caption Width |
Controls the content width on mobile devices using percentage values. |
| Desktop Height |
Controls banner height on desktop devices such as Small, Medium, Large, or Full Height. |
| Mobile Height |
Controls banner height on mobile devices. |
| Desktop Content Position |
Controls content placement such as Top Left, Top Center, Top Right, Center Left, Center, Center Right, Bottom Left, Bottom Center, or Bottom Right. |
| Mobile Content Position |
Controls content placement on mobile devices. |
| Container Layout |
Determines whether the section uses Contained, Contained Content, or Full Width layout. |
| Container Width |
Controls the maximum width of the section container on desktop devices. |
| Text Alignment (Desktop) |
Sets text alignment on desktop devices (Left, Center, or Right). |
| Text Alignment (Mobile) |
Sets text alignment on mobile devices. |
Color Scheme:
| Setting |
Description |
| Section Color Scheme |
Applies a predefined color palette to the Image Banner section background and content. |