Skip to content
Atomic Addons

Updated 5 min readView demo

The Logo Carousel widget by Atomic Addons shows the logos of your clients, partners or sponsors in a row that slides. Each logo can link to the brand's website and show a tooltip with its name and a short description. The row can move on its own and has arrows, dots or both. This guide covers adding the widget, adding the logos and setting up the carousel.

Enable the Logo Carousel Widget

Logo Carousel is a Free widget and works with the free Atomic Addons plugin. Switch it on from the plugin dashboard:

  1. 1

    Go to WordPress Dashboard → Atomic Addons.

  2. 2

    Click the Widgets tab.

  3. 3

    Search for Logo Carousel. You can also open the Content category.

  4. 4

    Turn the Logo Carousel widget on.

  5. 5

    Click Save Settings.

Add the Logo Carousel Widget

Logo Carousel works on any page:

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Logo Carousel. The widget sits in the Atomic Addons category.

  3. 3

    Drag it into the page and set it up with the controls below.

  4. 4

    Click Publish (or Update).

Layout

Open the widget and go to Content → Layout:

  1. 1

    Columns: How many logos are visible at once: 1 to 6. 4 by default, 3 on tablets and 1 on phones.

  2. 2

    Column Gap: The space between the logos, 10px by default.

  3. 3

    Item Height: A fixed height for each logo tile, 100 to 500px.

  4. 4

    Image Resolution: Which image size WordPress serves for the logos. Large by default.

Logo Carousel Item

Content → Logo Carousel Item holds the logos. Eight placeholder logos are there to start with. Click one to open it:

  1. 1

    Logo Image: The logo, best as a transparent PNG or SVG.

  2. 2

    Website Url: Makes the whole tile a link. Use the gear icon for Open in new window, Add nofollow and custom attributes.

  3. 3

    Brand Name: The brand's name. With the description, it becomes the logo's alt text and the tooltip's heading.

  4. 4

    Description: A short line about the brand.

  5. 5

    Tooltip: Shows the name in bold and the description in a tooltip when a visitor points at the logo. It appears only when both Brand Name and Description are filled in. Off by default.

  6. 6

    Placement: With the tooltip on: where it opens: Top Left, Top (the default), Top Right, Bottom Left, Bottom, Bottom Right, Left or Right.

Tooltip Settings

Content → Tooltip Settings applies to every logo whose tooltip is on:

  1. 1

    Animation: How the tooltip appears: Shift-Toward (the default), Shift-Away, Fade, Scale or Perspective.

  2. 2

    Offset: Slides the tooltip along the edge of the logo, in pixels.

  3. 3

    Distance: The gap between the tooltip and the logo, in pixels.

  4. 4

    Arrow: Adds a small pointer to the tooltip. Off by default.

  5. 5

    Trigger on Click: Opens the tooltip on click instead of on hover.

Carousel Settings

Content → Carousel Settings:

  1. 1

    Auto Play: Moves the logos on their own. On by default. Autoplay Interval sets the pause between moves, 7000 ms by default.

  2. 2

    Pause on Hover: Stops the movement while a visitor points at the carousel. On by default.

  3. 3

    Loop: Goes on from the last logo back to the first without stopping. On by default; with it off, the carousel stops at the end.

  4. 4

    Center Slide: Centers the current logo in the row instead of starting at the left edge.

Visitors can also drag or swipe the row.

Navigation

Content → Navigation:

  1. 1

    Navigation: Arrows (the default), Arrows and Dots, Dots or None.

  2. 2

    Position: Where the controls sit: Arrows Position and Arrows and Dots Position are Center by default, which places the arrows at the two sides; Dots Position is Bottom Center. Other choices are the corners and edges of the carousel.

  3. 3

    Hide Arrow on Mobile: With arrows: hides them on screens narrower than 960px.

With Dots alone, or Arrows and Dots in the Center position, the dots show only on screens 960px and wider. On smaller screens visitors swipe through the logos.

Style the Logo Carousel

Everything below is on the Style tab:

  • Logo Carousel — the logo tiles in Normal and Hover states: background, border, border radius, padding, opacity and the logo's Image Size, plus the transition duration and a Hover Animation. A low normal opacity with full opacity on hover is a common look for logo rows.
  • Tooltip — width, text color and alignment (center by default), arrow color, background, padding, border, radius, shadow and typography.
  • Navigation — arrow size, colors, border, radius and padding; dot size, colors, radius and gap; and offsets to move the arrows and dots.

Can't find what you need?

Our support team can help with setup questions and anything the docs don't cover yet.

Contact support