The Banner section is a visually impactful area designed to display a large background image (or video) with optional text overlay content. It’s commonly used on landing pages such as About Us, Collections, or Home, to introduce the page with strong visuals and key messaging.
This section supports responsive design with separate desktop and mobile image uploads, and flexible layout options for aligning text and call-to-action elements.
Section Settings
Color scheme
Choose a predefined color scheme to match the section’s text and overlay elements with the rest of the theme design.
Section width
Control how wide the banner appears:
- Page: Keeps the banner within the page container width.
- Full: Spans edge-to-edge across the browser window for a full-width banner experience.
Desktop image
Upload a high-quality banner image optimized for larger screens.
Mobile image
Optionally upload a separate image optimized for mobile devices to ensure visual clarity and proper scaling.
Overlay opacity
Adjust the dark overlay transparency on top of the banner image. This helps improve text readability and contrast.
Direction
Choose how the content (title, text, buttons) is arranged.
- Vertical: Stacks elements top to bottom.
- Horizontal: Places elements side-by-side (ideal for wide banners).
Desktop content position
Defines where the overlay content is positioned within the banner. Options typically include:
Top padding / Bottom padding
Add vertical spacing above and below the banner content for better layout balance.
Section Blocks
You can enrich your banner with multiple content blocks to create a compelling visual + textual combo.
