Logo Showcase Element in Funnel and Website Builder

The logo showcase element allows you to feature a number of logos on your pages in a scrolling bar to quickly allow you to showcase where you have been featured, who you have worked with etc.

In This Article:

• General Options
• Setting Your Images
• Ticker Options
• Carousel Options
• Styles Options

To add a logo showcase element, click on the plus sign in the upper left hand corner and select elements from the left side of the panel that opens. Find the Media section, select the Logo Showcase element and drag it to the desired location on the page.

General Options

Most of your logo showcase options will be set from the General Panel.

Layout: Choose between Ticker and Carousel.

Ticker Mode scrolls logos horizontally in a continuous loop.

• Smooth, endless scrolling for dynamic movement

  Great for displaying many logos in limited space

  Settings include:

  • Scroll Speed (1–10)
  • Smooth Scroll toggle
  • Pause on Hover option

Carousel mode offers slide-by-slide presentation with full interactivity.

• Supports up to 8 logos per slide

  Navigation: arrow buttons, pagination dots, swipe gestures

  Settings include:

  • Logos per Slide
  • Auto-Animation & Interval Timing
  • Infinite Loop
  • Pause on Hover
  • Animation Style (Slide or Fade)

Once you have chosen your mode, you will be able to choose the spacing between the logos (for both modes) and the number of logos per slide for carousel mode.

Setting Your Images

• The logo showcase automatically brings in 5 sample logos. Clicking on each logo will bring up logo specific options underneath.
• You can add your chosen logo image from the icon to the left of the URL under the Image heading. This will allow you to choose from your media library or add a new icon to your media library.
• The CTA link allows you to link up each logo if you wish to send the user to a website if they click that logo.
• If you want to delete a logo, you can click the trashcan icon next to the logo in the list.
• If you want to re-arrange the logos, you can click the two horizontal lines next to the logo in the list and drag it to a new place in the list.
• You can add a new logo by clicking the +Add Image button just below the list of logos.

Ticker Options

If you have chosen the ticker layout, you will have the following options:

• You can change the width of the entire logo showcase element under Size -> Width.
• The Logo Size -> Width adjusts the size of the individual logos within the element.
• The ticker speed allows you to set how fast you want the ticker to scroll through the logos.
• Pause on hover allows you to stop the ticker when a visitor hovers over the element.
• Background color allows you to set a background color for the entire element.

Carousel Options

If you have chosen the carousel layout, you will have the following options:

• You can change the width of the entire logo showcase element under Size -> Width.
• The Logo Size -> Width adjusts the size of the individual logos within the element.
• The carousel can include arrows to show the visitor how to navigate, pagination under the element or both.
  • The arrow styles allow you to turn arrows on and off, set the arrow color and specify if any animation should be applied to the arrows.
  • The pagination styles allow you to choose whether the pagination should show, the shape that it should be displayed (circle, box, oval), the color that the active (currently visible) page icon should be, the color of the icon for the non-active pages and the size of the icons.
• You can also set the animation effects to dictate how the slides should change.
  • You can set how the slides should appear when they change with the animation effect.
  • Whether they should auto change or just change when the visitor interacts with the arrows or pagination (auto-animate slides). If they do auto-animate, you will be able to choose how often they should change.
  • You can choose whether they should just keep looping infinitely or stop after getting to the end of the slides the first time.
• Pause on hover allows you to stop the ticker when a visitor hovers over the element.
• Background color allows you to set a background color for the entire element.

Styles Options

• Margin and Padding: There is a setting to manage the margin and padding for spacing adjustments. Margin will add spacing outside of the element, so outside of the orange outline, whereas padding adds space inside the element or inside the orange outline.
• Border: Set a border for the entire logo showcase element. You can set the border width, color, whether the border has rounded corners (corner radius) and your border style.
• Box Shadow: You can set a box shadow on the element for depth.
• Visibility: Turn on or off visibility on mobile or desktop. Blue icons means that it is visible on that device, whereas gray icons means that it is hidden on that device.
• Classes and CSS: Custom class and CSS selector allow you to make CSS adjustments that target this element.