Skip to main content

Hero Banners

The Hero Banners section offers a visually appealing way to present multiple large images (banners) next to each other. This is perfect for highlighting important categories, special promotions, or seasonal lookbooks on your homepage.

To help you get started quickly, you will find three ready-made layouts under the presets: Large (large cards), Small (more compact, square cards), and Simple (just the cards, without introductory text above them).

General Layout & Background​

  • Color schemes: Set the color scheme for the background of the section, and choose a separate color scheme for the Hero cards themselves (this determines the text color inside the cards).
  • Section display (Type): Determine whether the background spans the full screen width (Full width / Edge-to-edge) or is centered within a frame (Box / Container).
  • Background image: Optionally upload a background image (with the option for a separate image on desktop and mobile).
  • Height & Background height: Choose whether the section automatically grows with the content (Auto) or work with a fixed height (Fixed). With a fixed height, you can use a slider (0-100%) to determine how far the background extends.

Spacing (Whitespace)​

Ensure the section connects nicely to the rest of the page by adjusting the margins (outer space) and padding (inner space).

Display: Slider or Grid​

Choose how the Hero cards are presented:

  • Slider: The cards are placed in a swipeable carousel.
    • Number of slides (Slides per view): Determine the number of visible cards on desktop (2 to 8), tablet, and mobile. Use 'half' views (e.g., 1.5) on mobile to visually invite visitors to swipe.
    • Extra options: Enable pagination (dots below the slider), let the cards playfully stagger up and down (Alternate offset), or let the slider extend outside the container frame (Carousel overflow).
  • Grid: The cards are placed in a fixed grid and automatically fall onto a new line if necessary.
    • Set exactly how many columns (cards next to each other) you want on desktop (2 to 6), tablet (1 to 4), and mobile (1 to 3).

Image ratio: For both display options, you can set the ratio of the images, ranging from square (1:1) to tall (3:4) or wide (16:9).

Card Design​

  • Title formatting: Determine the HTML tag, visual size (H1 to display), and the font weight for the title inside the hero card.
  • Gradient overlay: Check this to apply a dark overlay (gradient) over the bottom of the image. This ensures that the title, which is often at the bottom of the card, is always perfectly readable. You can adjust the darkness of this gradient with the slider (0-100%).

Text & Buttons (Introduction)​

Guide your Hero cards with a clear message above the display:

  • Alignment: Align the text to the left, center, or right.
  • Title & Content: Add an eye-catching heading and a short introduction.
  • Action buttons (Buttons): Add up to two buttons below the introductory text. Give them a label, a link, and optionally a FontAwesome icon. Check Secondary button style for a transparent button with a colored outline. Leave the labels empty if you don't want to show any buttons.

Adding blocks (Heroes)​

You build the actual content of this section with 'Hero' blocks. Add a block for each banner and configure the following:

  • Name (Title): The text that is shown on the banner.
  • Link: The target URL where the visitor goes when they click on the card.
  • Image: Upload the background photo for this specific hero card.