Skip to main content

Brands

With the Brands section, you show an overview of the brands you sell, partners you work with, or media you have appeared in. This is an excellent way to project trust ('social proof').

When you add this section, you can choose from two handy presets: Logo list large (large logos with playful staggering) and Logo list small (a sleek, compact row with smaller logos).

General Layout & Background​

Set the basics of your brands section so that it fits perfectly on the page:

  • Color scheme: Choose a fitting color scheme for the background and text.
  • Spacing (Whitespace): Manage the margin (outer space) and padding (inner space) at the top and bottom. Choose between the default settings or remove the space completely.
  • Section display (Type): Determine whether the section spans the full width of the screen (Full width / Edge-to-edge) or is centered within a frame (Box / Container).
  • Background image: Optionally upload a background photo. To make this look good on every device, you can upload a separate image for desktop and mobile.
  • Height & Background height: Choose whether the section automatically grows with the logos (Auto) or use a fixed height (Fixed). With a fixed height, you can use a slider (0-100%) to determine how far the background color or image extends behind the blocks.

Display: Slider or Grid​

You have complete freedom in how the logos are presented. Choose your Display type:

  • Slider: The logos are placed in an interactive carousel that visitors can swipe through.
    • Number of slides: Determine how many brands are visible on desktop (3 to 8), tablet, and mobile. Use 'half' numbers (such as 1.5 or 2.5) on mobile devices to make it visually clear that visitors can swipe.
    • Pagination: Show clickable dots below the slider.
    • Playful staggering (Alternate offset): Check this to place the logo blocks alternately slightly higher or lower for a dynamic design.
    • Carousel overflow: Determine whether the slider is cut off cleanly at the frame, or whether it visually extends to the edge of the screen.
  • Grid: The logos are placed in a fixed grid on the page.
    • Columns: Determine exactly how many logos are placed next to each other on desktop (2 to 6), tablet (1 to 4), and mobile (1 to 3). The logos automatically fall onto a new line if there are more.

For both displays, you can set the Image ratio. For example, choose '1-1' for square areas or '16-9' for wide logo areas.

Text & Buttons​

Guide your logos with an introduction or send visitors directly to all your brands:

  • Alignment: Align your texts to the left, center, or right.
  • Title & Content: Add a heading (e.g., "Our Brands") and a short introduction. You can adjust the HTML tag, size, and font weight of the title.
  • Action buttons (Buttons): You can add up to two buttons below your logos (e.g., "View all brands"). Give the button a label, a link, and optionally a FontAwesome icon. Check Secondary button style for a transparent button with a colored outline. Leave the fields empty if you don't want to show any buttons.

Adding blocks (Brands)​

You build the content of this section with the brand blocks. Add a block for each brand you want to show:

  • Logo (Image): Upload the image of the logo here. Transparent PNG files or SVGs work best here.
  • Title: Enter the name (also good for the accessibility/SEO of the image).
  • Link: Make the logo clickable by linking a URL to it, for example to a collection page of that specific brand.