How To Use The Static Carousel Widget By Atomic Addons

The Static Carousel widget by Atomic Addons shows a row of cards that slides sideways. Unlike a post carousel, the cards don't come from your posts: you add each one by hand, with an image, a title, a sub title, a text and a link. You choose how many cards show at once, what each card shows and how visitors move through them: arrows, dots, a counter, a progress bar or autoplay. This guide covers adding the widget, writing the cards and setting up the carousel.

Enable the Static Carousel Widget

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

4. 4

   Turn the Static Carousel widget on.

5. 5

   Click Save Settings.

Add the Static Carousel Widget

1. 1

   Open the page in Elementor (Edit with Elementor).

2. 2

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

Items

Content → Items holds the cards, four sample ones to start with. Click a card to open it, use Add Item for a new one, and drag cards to change their order. Each card has:

1. 1

   Image: The card's picture, a placeholder by default.

2. 2

   Title: The card's heading. It also names the card in the list.

3. 3

   Sub Title: A short line shown above the title.

4. 4

   Text: The body text, written in a text editor with bold, links, lists and so on.

5. 5

   Link: Where the card leads, # by default. The cog icon opens Elementor's link options: open in a new tab, add nofollow or custom attributes.

A part you leave empty is skipped on that card.

Additional Settings

Content → Additional Settings sets the layout and what every card shows:

1. 1

   Columns: How many cards 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 cards, 0 to 100px: 20px by default.

3. 3

   Item Match Height: Stretches every card to the height of the tallest one, so their edges line up. On by default.

4. 4

   Show Name: Shows the titles. On by default. Title HTML Tag sets their markup: H1 to H6, div, span or p, H3 by default.

5. 5

   Show Sub Title: Shows the sub titles. On by default. Sub Title HTML Tag sets their markup, H4 by default.

6. 6

   Show Text: Shows the body text. On by default.

7. 7

   Link to: Which part of the card opens its link. Button, the default, adds a Read More button under the text. Title, Image or Item Wrapper (the whole card) make that part clickable instead, with no button.

8. 8

   Show Image: Shows the images. On by default. Image Resolution picks which size WordPress serves, Medium by default; Custom lets you enter a width and height.

9. 9

   Alignment: Left, center, right or justified text in the cards, per screen size.

Read More

With Link to set to Button, Content → Read More sets up the button:

1. 1

   Read More Text: The button label, “Read More” by default.

2. 2

   Icon: An optional icon in the button.

3. 3

   Icon Position: With an icon: Left or Right (the default) of the label.

4. 4

   Icon Spacing: With an icon: the space between it and the label, 8px by default.

A card whose Link is empty shows no button.

Navigation

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

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 / 4”. 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 cards.

3. 3

   Show Scrollbar?: Adds a draggable bar under the cards. It appears while the carousel moves and fades out after.

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.

5. 5

   Progress Position: With Progress: the bar runs along the Bottom of the cards (the default) or the Top.

6. 6

   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 cards in a flat row. Coverflow turns the cards beside the current one away in 3D.

2. 2

   Coverflow Effect: Coverflow only: Rotate sets how far the side cards 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 cards each move advances, 1 by default. Use the device icon to set it for tablets and phones.

7. 7

   Center Slide: Keeps the current card 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 cards, a hint that they can be dragged.

9. 9

   Drag Free Mode: Lets a swipe glide the cards freely and stop anywhere, instead of snapping to the next card.

10. 10

    Loop: Starts again from the first card after the last one. On by default. When the carousel holds no more cards than it shows at once, loop turns itself off so the same cards 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.

Style the Static Carousel

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

• Items — the card: background, border, border radius, padding and shadow, with a Hover state. Match Padding adds room around the row of cards so a shadow isn't cut off at the edges.
• Content — the text area under the image: background, border, radius, padding, margin and shadow.
• Image — border, radius, padding, spacing below, CSS filters and shadow.
• Title, Sub Title and Text — color, spacing and typography; the title also has a text shadow.
• Read More — the button's colors, background, border, radius, padding and margin, with a Hover state and a hover animation.
• Navigation — the arrows, dots, counter, progress bar and scrollbar: colors, sizes and spacing, plus offsets to move the controls from their position.