Skip to content

ProUpdated 9 min readView demo

The Post List Carousel widget by Atomic Addons shows your posts as a sliding row of compact, numbered cards. Each card has a large counter number, then the category, title and a meta row with the author, date, reading time or comment count. When a visitor points at a card, the post's featured image fades in behind it under a dark overlay and the text turns white. This guide covers adding the widget, choosing the posts and setting up the cards and the carousel.

Enable the Post List Carousel Widget

Post List Carousel is a Pro widget and needs Atomic Addons Pro. 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 Post List Carousel. You can also open the Posts / Dynamic category.

  4. 4

    Turn the Post List Carousel widget on.

  5. 5

    Click Save Settings.

Add the Post List Carousel Widget

Post List Carousel works on any page:

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Post List Carousel. The widget sits in the Atomic Addons Pro 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. Here you set both the carousel and what each card shows:

  1. 1

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

  2. 2

    Column Gap: The space between cards, 20px unless you change it.

  3. 3

    Image Resolution: Which image size WordPress serves for the hover image, Medium by default.

  4. 4

    Title: The post title, linked to the post. On by default. Title HTML Tag sets its markup: H1 to H6, div, span or p, H3 by default.

  5. 5

    Show Category: The post's categories above the title, each linked to its archive. On by default.

  6. 6

    Show Author: “by” and the author's name in the meta row, linked to their posts. On by default.

  7. 7

    Show Comments: The number of comments, such as “4 Comments”. Off by default.

  8. 8

    Separator: The character between the meta items, “·” by default.

  9. 9

    Date: The publish date, on by default. Human Different Time shows it as “3 days ago”, and Time Short Format shortens that to “3d ago”. Without the relative date, Show Time adds the time with a clock icon.

  10. 10

    Reading Time: An estimate such as “2 min 30 sec read”, worked out from the post's words and the Reading Speed, 200 words per minute by default.

  11. 11

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

  12. 12

    Item Wrapper Link: Makes the whole card a link to the post. As the panel warns, the title link then stops working on its own. Off by default.

  13. 13

    Vertical Align: Top, Center or Bottom: where the number and text sit in a card that is taller than its content.

The counter number follows the order of the posts in the carousel: 1 for the first post, 2 for the second and so on.

Query

Content → Query decides which posts appear:

  1. 1

    Item Limit: How many posts the carousel holds, 1 to 20, 6 by default.

  2. 2

    Source: Posts, the default, picks from your blog posts with the filters below. The list also has Pages and every other public post type on your site. Manual Selection shows only the posts you search for and pick in Search & Select, of any type. Current Query shows the posts of the page being viewed — a category, tag, author, date or search results page; the editor may not show them until you save and reload. Related shows, on a single post, other posts of the same type by the same author; narrow it down with Include By → Terms, and add Exclude By → Current Post to leave out the post itself.

  3. 3

    Include / Exclude: Include By keeps only posts in the Terms you pick (categories, tags, formats or custom taxonomy terms) or by the Authors you pick. Exclude By leaves out authors, the Current Post, posts you pick with Manual Selection, or terms.

  4. 4

    Offset: Skips this many posts from the start of the list, 0 by default.

  5. 5

    Date: All by default. Or only posts published in the Past Day, Past Week, Past Month, Past Quarter or Past Year, or between a Before and an After date with Custom.

  6. 6

    Order By: Date (the default), Title, ID, Author, Comment Count, Menu Order, Last Modified or Random.

  7. 7

    Order: DESC, the default, puts the newest (or highest) first; ASC reverses it.

  8. 8

    Ignore Sticky Posts: With the Posts source: on by default, so sticky posts take their normal place instead of being pinned to the top.

Only Featured Image Post leaves out posts without a featured image. Query ID is for developers: it gives the query a name that custom code can filter. The section also has a Limit field, but Post List Carousel doesn't use it: Item Limit sets the number of posts.

With Current Query the page's own query decides which posts show and in what order, so the filters and order settings are hidden. The Include and Exclude tabs are also hidden with Manual Selection.

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 / 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.

  3. 3

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

  4. 4

    Arrows Position: Where the controls sit. Its name follows your choice above: Arrows Position, Arrows and Dots Position and Arrows and Fraction 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 (default) or Top.

  5. 5

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

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), Modifier multiplies the whole effect (1) and Depth how far back they sit (100).

  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 drag glide freely instead of stopping on a card.

  10. 10

    Loop: Starts again from the first post after the last one. On by default.

  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 trackpad.

Style the Post List Carousel

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

  • Item — the card's Overlay Color over the image, border, border radius and padding, in Normal and Hover states.
  • Title — a hover Style (Underline by default, Middle Underline, Overline or Middle Overline), color, hover color, typography and text shadow.
  • Meta and Category — colors, spacing and typography; the meta has separator colors, and the category links have Normal and Hover states with background, border, radius and padding.
  • Counter Number — the number's color, border, radius, padding and typography, and the Line Color and Line Space Between of the divider beside it, in Normal and Hover states.
  • 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.

If no post matches the query, the widget shows nothing.

Can't find what you need?

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

Contact support