View Categories

Banner

1 min read

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.