View Categories

Banner

2 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

Logo Image Settings

Logo Image

Upload a logo or badge image to display over the banner. Useful for showcasing your Kitchea brand mark or a promotional stamp over the hero image.

Logo Width

Set the display width of the logo image in pixels. Minimum 50px, maximum 600px.

Logo Position

Choose where the logo image appears on the banner

    • 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.

kitchea-banner

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.