Skip to main content

Banner

With a large, eye-catching image and strong texts, you can perfectly grab the attention of your visitor. This section is often used at the top of the homepage (as a 'Hero banner'), but is also highly suitable for highlighting categories or promotions in between on other pages.

General Layout & Spacing​

  • Color scheme: Choose the color scheme for the texts on the banner. If you don't use a dark overlay (layer), make sure the text color contrasts well with the colors in your image!
  • Section display (Type): - Full width (Edge-to-edge): The image extends tightly to the edges of the screen.
    • Container (Box): The image is placed within a neat frame (with rounded corners, depending on your theme settings).
  • Spacing: Manage the margin (outer space) and padding (inner space) for the top and bottom to seamlessly integrate the banner with surrounding sections. Choose between the default settings or remove the space completely.

Images​

To ensure your banner always looks good, you have the option to specifically tailor the imagery:

  • Desktop Image: Upload a high-resolution, landscape image for large screens.
  • Desktop Height (Banner height): Determine the fixed height of the banner on computer screens (adjustable between 300 and 800 pixels). Note: the image will always be made to fit, which means edges may be cropped depending on the screen size.
  • Mobile Image: Because phones are held upright (portrait), a landscape photo often doesn't do well here. Therefore, upload a specific mobile (portrait) image for the best presentation. If you leave this field empty, the theme uses the desktop image.
  • Mobile Height: Determine the height of the banner specifically for mobile devices (between 150 and 600 pixels).

Background Overlay​

If your photo has a lot of detail, it is sometimes difficult to keep texts easily readable. The overlay feature is the perfect solution for this:

  • Enable overlay: Check this to apply a semi-transparent, dark haze over your photo. This immediately provides a beautiful contrast, making white letters stand out perfectly.
  • Transparency (Opacity): Use the slider (0-70%) to determine how dark this layer should be.

Content (Text & Buttons)​

Convey your message clearly through the text blocks:

  • Alignment (Overlay alignment): Choose whether the texts should be placed left, dead center, or right on the banner.
  • Title (Heading): Write your main, short message (e.g., "Summer Collection '24"). You can adjust the visual size (H1 to display) and font weight to your liking.
  • Subtitle (Subheading): An accompanying line below the title to give a bit more context. You can also adjust the size and font weight for this.
  • Action buttons (Buttons): Stimulate clicks by adding up to two buttons (e.g., "Shop Women's" and "Shop Men's").
    • Enter a label and the target link for each button.
    • Check the 'Secondary button style' option if you want the button to have a transparent look with a border, instead of a solid color.
    • Add an optional FontAwesome icon (such as an arrow).
    • Do you want to use the banner without buttons? Then simply leave the labels empty.