How To Use The Brand Carousel Widget By Atomic Addons

The Brand Carousel widget by Atomic Addons shows the logos of your partners, clients or the brands you stock as a row of tiles that slides sideways. Each tile has a small “+” tab in a corner. When a visitor points at it or clicks it, the tab opens over the whole tile and shows the brand's name and a link to its website. You choose how many tiles show at once and how visitors move through them: arrows, dots, a counter, a progress bar or autoplay. To show the same tiles in rows instead, use the Brand Grid widget. This guide covers adding the widget, adding brands and setting up the tiles and the carousel.

Enable the Brand Carousel Widget

Brand 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 Brand Carousel. You can also open the Content category.

4. 4

   Turn the Brand Carousel widget on.

5. 5

   Click Save Settings.

Add the Brand Carousel Widget

Brand Carousel works on any page:

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

   In the widget panel, search for Brand 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).

The widget starts with six placeholder brands, so you can see the layout before you add your own logos.

Brand Items

Open the widget and go to Content → Brand Items. Each item in the list is one tile; click an item to open it, use Add Item for another brand and drag items to change their order. An item has these fields:

1. 1

   Brand Image: The logo. Pick it from the media library.

2. 2

   Brand Name: The name shown when the tile opens. It is also the logo's alternative text and the item's name in the list.

3. 3

   Website Url: The brand's website, “#” by default. It opens in a new tab with nofollow on; change both with the cog. Clear the field to leave the link out.

4. 4

   Website Url Text: The link's text, “www.example.com” by default.

Under the list, Image Resolution picks which image size WordPress serves for the logos, Medium by default. Logos are shown no taller than 96px, so a medium image is usually sharp enough.

Additional Settings

Content → Additional Settings sets the layout and how the tiles open:

1. 1

   Columns: How many tiles show at once, 1 to 6: 3 by default, 2 on tablets and 1 on phones. Use the device icon to change the tablet and phone numbers.

2. 2

   Item Gap: The space between tiles, 20px by default.

3. 3

   Item Match Height: Stretches every tile to the height of the tallest one. On by default.

4. 4

   Show Brand Name: Shows the Brand Name when a tile opens. On by default.

5. 5

   Name HTML Tag: The name's markup: H1 to H6, div, span or p. H3 by default.

6. 6

   Show Link Text: Shows the website link when a tile opens. On by default.

7. 7

   Select Event: What opens a tile. Icon Hover, the default, opens it when the pointer reaches the “+” tab. Item Hover opens it as soon as the pointer is anywhere on the tile. Click opens it when the tab is clicked or tapped, and a second click closes it.

8. 8

   Icon Position: Where the “+” tab sits: Bottom Left (the default), Top Left, Top Right, Bottom Right or Center Center, which makes it a round button in the middle of the logo.

Keyboard users open a tile by tabbing to its link, or to the tab itself with Click. On touch screens, where there is no hover, Click is the most reliable choice.

Navigation

Content → Navigation sets the controls visitors use to move the carousel. They can also swipe or drag the tiles.

1. 1

   Navigation: Arrows, the default, adds previous and next buttons. Arrows and Dots adds a dot for each position as well, and Arrows and Fraction a counter such as “1 / 6”. Dots shows only the dots, Progress a bar that fills as the carousel moves, and None nothing.

2. 2

   Dynamic Bullets?: With dots: shows only a few dots at a time, smaller the further they are from the current one. Useful when the carousel holds many brands.

3. 3

   Show Scrollbar?: Adds a draggable bar under the tiles. It appears while the carousel moves and fades out a moment later.

4. 4

   Arrows and Dots Position: Where the controls sit. Its name follows your choice above: Arrows Position, Arrows and Fraction Position and Arrows and Dots Position offer nine places around the carousel, Center by default, which puts the arrows at the sides; Dots Position offers eight, Bottom Center by default. With Progress, Progress Position puts the bar at the Bottom (the default) or the Top.

5. 5

   Hide Arrow on Mobile: Hides the arrows on screens narrower than 960px, where visitors swipe. On by default.

Carousel Settings

Content → Carousel Settings controls how the carousel moves:

1. 1

   Layout: Carousel, the default, slides the tiles in a flat row. Coverflow turns the tiles beside the current one away in 3D.

2. 2

   Coverflow Effect: Coverflow only: Rotate sets how far the side tiles turn (50 by default), Stretch the space between them (0), Depth how far back they sit (100) and Modifier multiplies the whole effect (1).

3. 3

   Autoplay: Moves the carousel on by itself. On by default.

4. 4

   Autoplay Speed: How long each position stays, in milliseconds: 5000, or 5 seconds, by default.

5. 5

   Pause on Hover: Stops autoplay while the pointer is over the carousel. Off by default.

6. 6

   Slides to Scroll: How many tiles each move advances, 1 by default. Use the device icon to set it for tablets and phones.

7. 7

   Center Slide: Keeps the current tile in the middle, with the others on either side. The panel's hint suggests an even number of Columns.

8. 8

   Grab Cursor: Shows a hand cursor over the tiles, a hint that they can be dragged.

9. 9

   Drag Free Mode: Lets a drag or swipe glide on and stop anywhere, instead of snapping to the next tile.

10. 10

    Loop: Starts again from the first brand after the last one. On by default. When the carousel holds no more brands than it shows at once, loop turns itself off so the same tiles don't repeat side by side.

11. 11

    Animation Speed (ms): How long one move takes, 500 by default.

12. 12

    Observer: Turn it on when the carousel sits in a tab, an accordion or a popup that is hidden when the page loads, so it sizes itself when it appears.

13. 13

    Mousewheel: Lets visitors move the carousel with the mouse wheel or a trackpad while the pointer is over it.

Style the Brand Carousel

Everything below is on the Style tab. Sections that belong to a feature you turned off are hidden.

• Items — the tile: background, border, border radius, padding and shadow, with a Hover state for the border color and shadow. Match Padding adds space around the row so a shadow isn't cut off at the edges. Under Image, Size sets the logo's width and height (it lifts the 96px cap) and CSS Filters can, for example, turn the logos grey.
• Icon — the “+” tab: color, background, border, radius, margin, Size of the tab, Font Size of the plus and shadow. Under Panel, the Background and Padding of the opened tile.
• Name — color, typography and text shadow of the brand name.
• Text — the website link: color, hover color, spacing above it and typography.
• Navigation — the arrows in Normal and Hover states (color, background, border, radius, padding, size, spacing), the dots, the fraction counter, the progress bar and the scrollbar, plus Offset sliders that move the arrows and dots.