Image banner
Overview
The Image Banner section displays a responsive banner with separate desktop and mobile background images. It includes layout controls for banner height, container width, text alignment, color scheme, and spacing. The preset content structure supports caption content (tagline, heading, description) and a button group for calls to action.
Section Configuration:
Images
| Setting | Description |
|---|---|
| Desktop background image | Uploads the banner background image shown on desktop devices. |
| Mobile background image | Uploads an alternate banner background image shown on mobile devices. |
Layout
| Setting | Description |
|---|---|
| Desktop banner height | Sets the banner height on desktop (Small: 240px, Medium: 460px, Large: 567px). |
| Mobile banner height | Sets the banner height on mobile (Small: 200px, Medium: 300px, Large: 400px). |
| Container layout | Controls how the banner is sized on the page: page-width (boxed), contained-content, or container-fluid (full width). |
| Container size (Desktop) | Sets the maximum banner width on desktop as a percentage (50%–100%). |
| Text alignment (Desktop) | Controls text alignment on desktop (left, center, right). |
| Text alignment (Mobile) | Controls text alignment on mobile (left, center, right). |
| Color scheme | Applies a theme color scheme to the banner styling. |
Inner padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the banner’s inner content on desktop. |
| Bottom (Desktop) | Adds space below the banner’s inner content on desktop. |
| Left (Desktop) | Adds space to the left of the banner’s inner content on desktop. |
| Right (Desktop) | Adds space to the right of the banner’s inner content on desktop. |
| Top (Mobile) | Adds space above the banner’s inner content on mobile. |
| Bottom (Mobile) | Adds space below the banner’s inner content on mobile. |
| Left (Mobile) | Adds space to the left of the banner’s inner content on mobile. |
| Right (Mobile) | Adds space to the right of the banner’s inner content on mobile. |
Outer padding
| Setting | Description |
|---|---|
| Top (Desktop) | Adds space above the banner section on desktop. |
| Bottom (Desktop) | Adds space below the banner section on desktop. |
| Left (Desktop) | Adds space to the left of the banner section on desktop. |
| Right (Desktop) | Adds space to the right of the banner section on desktop. |
| Top (Mobile) | Adds space above the banner section on mobile. |
| Bottom (Mobile) | Adds space below the banner section on mobile. |
| Left (Mobile) | Adds space to the left of the banner section on mobile. |
| Right (Mobile) | Adds space to the right of the banner section on mobile. |
Blocks Configuration:
Caption Group
A container for the banner’s text content and button content, with controls for layout, positioning, and max width.
Caption Group settings
| Setting | Description |
|---|---|
| Box layout | Controls how the caption container is displayed (e.g., full-width style vs other supported layouts). |
| Content position (Full layout – Desktop) | Sets the caption container’s placement within the banner on desktop. |
| Content position (Full layout – Mobile) | Sets the caption container’s placement within the banner on mobile. |
| Max width (Desktop) | Limits the caption content width on desktop (percentage-based). |
| Max width (Mobile) | Limits the caption content width on mobile (percentage-based). |
Width Group
A nested container used to control the maximum width of the text stack (tagline/heading/description).
Width Group settings
| Setting | Description |
|---|---|
| Max width (Desktop) | Sets the maximum width of the text group on desktop. |
| Max width (Mobile) | Sets the maximum width of the text group on mobile. |
Width Group blocks
| Block | Description |
|---|---|
| Tagline | Displays a short line of text above the main heading. |
| Heading | Displays the primary banner title text. |
| Description | Displays supporting text below the heading. |
Buttons Group
A container for one or more buttons, with controls for direction, wrapping, alignment, spacing, and margins.
Buttons Group settings
| Setting | Description |
|---|---|
| Layout (Desktop) | Sets how buttons are arranged on desktop (row or column). |
| Layout (Mobile) | Sets how buttons are arranged on mobile (row or column). |
| Wrap (Desktop) | Allows buttons to wrap to a new line on desktop when space is limited. |
| Wrap (Mobile) | Allows buttons to wrap to a new line on mobile when space is limited. |
| Justify (Desktop) | Controls horizontal distribution of the buttons on desktop (e.g., left/center/right behavior). |
| Justify (Mobile) | Controls horizontal distribution of the buttons on mobile. |
| Alignment (Desktop) | Controls vertical alignment of buttons within the group on desktop. |
| Alignment (Mobile) | Controls vertical alignment of buttons within the group on mobile. |
| Gap (Desktop) | Sets spacing between buttons on desktop. |
| Gap (Mobile) | Sets spacing between buttons on mobile. |
| Margin (Desktop) | Adds space above/below the button group on desktop. |
| Margin (Mobile) | Adds space above/below the button group on mobile. |
Buttons Group blocks
| Block | Description |
|---|---|
| Button | Adds a button to the banner. |
Button block settings
| Setting | Description |
|---|---|
| Label | Sets the text shown on the button. |
| Button style | Selects the button style (for example, Primary vs Secondary styling depending on your theme). |
| Text case | Controls the capitalization style used for the button label. |
| Margin (Desktop) | Adds space above/below the button block on desktop. |
| Margin (Mobile) | Adds space above/below the button block on mobile. |