Banner
The banner section supports two different images for desktop and mobile.
Color scheme
Select a color system for background, text, and button color.
Section width
Choose how wide the section spans on the page:
-
- Page – aligns with the site’s content width.
- Full – stretches across the full viewport width.
Desktop image
Select an image to show in the desktop view.
Mobile image
Select an image to show in the mobile view.
Overlay opacity
Control the transparency level of the overlay on background images. Increase opacity to darken the overlay and improve text readability.
Direction
Controls the layout flow of items inside the section.
You can choose how the content (such as text, images, or blocks) is arranged within the container.
-
-
Horizontal
Items are arranged side by side in a row (left to right).
Useful for carousels, side‑by‑side product features, or any layout where content should be aligned horizontally. -
Vertical
Items are stacked on top of each other in a column (top to bottom).
Useful for lists, stacked testimonials, or mobile-friendly single-column layouts.
-
Desktop content position
Select the most relevant area of the image for the content position on the desktop. Its options include:
-
- Top left
- Top center
- Top right
- Center left
- Center
- Center right
- Bottom left
- Bottom center
- Bottom right
Top Padding
Set top spacing in pixels.
Bottom Padding
Set bottom spacing in pixels.
Theme blocks
You can add the following theme blocks inside the banner:
-
- Title block – Add a heading to your banner.
- Text block – Include descriptive text or promotional messages.
- Button block – Add call-to-action buttons to drive user engagement.
