Skip to content

ProUpdated 8 min readView demo

The Post Slider widget by Atomic Addons shows your posts one at a time as large slides. Each slide fills the widget with the post's featured image under a dark gradient, with the category, date, title, a short excerpt and the author's photo, name and role over it. Slides fade from one to the next, and the text moves in with a light parallax effect. It suits the top of a blog or home page. This guide covers adding the widget, choosing the posts and setting up the slides.

Enable the Post Slider Widget

Post Slider 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 Slider. You can also open the Posts / Dynamic category.

  4. 4

    Turn the Post Slider widget on.

  5. 5

    Click Save Settings.

Add the Post Slider Widget

Post Slider works on any page:

  1. 1

    Open the page in Elementor (Edit with Elementor).

  2. 2

    In the widget panel, search for Post Slider. 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 slide and what it shows:

  1. 1

    Height: The height of the slides, in px (200 to 1080) or vh. By default it scales with the screen, between about 470 and 650px.

  2. 2

    Content Max Width: The widest the text block can get, 200 to 1200px; 780px by default. The block sits in the middle of the slide.

  3. 3

    Content Alignment: Left, center or right alignment of the text, the category and date row, and the author.

  4. 4

    Image Resolution: Which image size WordPress serves for the slides, Full by default, so large slides stay sharp.

  5. 5

    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.

  6. 6

    Show Text: An excerpt under the title. A post's own excerpt is shown in full; otherwise the widget cuts the post content to the Text Limit, 20 words by default (0 shows the whole content). Ellipsis adds text after a cut excerpt, such as “…”, and Strip Shortcode (on by default) removes shortcodes from it.

  7. 7

    Show Category: The post's categories, linked to their archives, at the start of the row above the title. On by default.

  8. 8

    Show Author: The author's profile photo, name (linked to their posts) and user role, such as “administrator”, under the excerpt. On by default.

  9. 9

    Date: The publish date, beside the category; 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

    Separator: The character before the reading time, “·” by default.

  11. 11

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

  12. 12

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

Query

Content → Query decides which posts appear:

  1. 1

    Item Limit: How many slides the slider holds, 1 to 20, 3 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, which suits a slider built around images. 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 Slider 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 change slides. They can also swipe or drag.

  1. 1

    Navigation: Arrows and Dots, the default, adds previous and next buttons and a dot for each slide. Arrows and Fraction adds a counter such as “1 / 3” instead of dots. Arrows and Dots show one of the two, Progress a bar that fills as the slides change, 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 slides. It appears while the slider moves and fades out after.

  4. 4

    Arrows and Dots Position: Where the controls sit. Its name follows your choice above: Arrows and Dots Position, Arrows and Fraction Position and Arrows Position offer nine places around the slider, Center by default, which puts the arrows at the sides and the dots along the bottom; 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 slides change:

  1. 1

    Autoplay: Moves to the next slide by itself. On by default.

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

    Animation Speed (ms): How long the fade between slides takes, 500 by default.

  7. 7

    Observer: Turn it on when the slider 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 Post Slider

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

  • Items — the Overlay Color over the image, the content padding, and the slide's border and border radius.
  • Title — a hover Style (Default, Underline, Middle Underline, Overline or Middle Overline), color, hover color, spacing, typography, text shadow and text stroke.
  • Text — color, spacing and typography.
  • Author — Avatar Size, text color, spacing, and separate typography for the name and the role.
  • Meta and Category — colors, spacing and typography; the category links have Normal and Hover states with background, border, radius and padding.
  • 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