The Animated Post List widget by Atomic Addons shows posts as rows of large titles with their category and meta beside them. When a visitor points at a row, the post's featured image slides open next to the title and the title moves aside to make room. This guide covers adding the widget, choosing the posts and setting up the rows.
Enable the Animated Post List Widget
Animated Post List is a Pro widget and needs Atomic Addons Pro. Switch it on from the plugin dashboard:
- 1
Go to WordPress Dashboard → Atomic Addons.
- 2
Click the Widgets tab.
- 3
Search for Animated Post List. You can also open the Posts / Dynamic category.
- 4
Turn the Animated Post List widget on.
- 5
Click Save Settings.
Add the Animated Post List Widget
Animated Post List works on any page, post or saved template:
- 1
Open the page in Elementor (Edit with Elementor).
- 2
In the widget panel, search for Animated Post List. The widget sits in the Atomic Addons Pro category.
- 3
Drag it into the page and set it up with the controls below.
- 4
Click Publish (or Update).
Layout and Content
Open the widget and go to Content → Layout. The section holds both the layout and the parts each row shows:
- 1
Columns: 1 to 4 columns of rows, 1 by default. Use the device icon to set other numbers for tablets and phones.
- 2
Column Gap: The space between columns.
- 3
Row Gap: The space between rows.
- 4
Layout Style: Style 01 (the default) puts the image and title on the left and the category and meta on the right. Style 02 mirrors it.
- 5
Image Resolution: Which image size WordPress serves for the hover image. Medium by default.
- 6
Title: The post title, linked to the post. On by default.
- 7
Title HTML Tag: The title's markup: H1 to H6, div, span or p. H3 by default.
- 8
Show Category: The post's categories, beside the title. On by default.
- 9
Show Author: “by” and the author's name, linked to their posts. On by default.
- 10
Show Comments: The comment count, such as “4 Comments”. Off by default.
- 11
Separator: The character printed between the meta items, “·” by default.
- 12
Date: The publish date. On by default.
- 13
Human Different Time: Shows the date as elapsed time, such as “3 days ago”, instead of the date itself.
- 14
Time Short Format: With Human Different Time on: shortens it, such as “5h ago” or “3d ago”.
- 15
Show Time: With Human Different Time off: adds the publish time, with a clock icon, after the date.
- 16
Show Pagination: Page numbers under the widget, with previous and next arrows; the current page is highlighted. They appear only when there is more than one page. Off by default.
- 17
Item Wrapper Link: Makes the whole item clickable, opening its post in the same tab. Off by default.
The meta line shows the author, date and comment count in that order. Pointing at a category or the author's name rolls the text up to reveal a second copy of it. The widget has no reading time setting.
The hover image appears on tablets and desktops (768px and wider): 200px wide on tablets and 240px from 1024px, at 120px tall. On phones every row shows its image above the title all the time.
Query
Content → Query decides which posts appear:
- 1
Item Limit: How many posts to show, from 1 to 20. 6 by default. With Show Pagination on, it is the number per page.
- 2
Source: Which posts to pick from. The list has your public post types, such as Posts (the default), Pages and, with WooCommerce, Products, followed by three special sources. Manual Selection shows only the posts you search for and pick in Search & Select; they can be of any post type. Current Query shows the posts of the page being viewed — a blog, category, tag, author or search results page — which is what an archive template needs; 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 with Include By → Terms, and add Exclude By → Current Post to leave out the post itself.
- 3
Include / Exclude: Two tabs, hidden for Manual Selection and Current Query. Include By keeps only posts by the Authors you pick or in the Terms you pick (categories, tags, formats or custom taxonomy terms). Exclude By leaves out Authors, Terms, posts you pick with Manual Selection (in its own Search & Select field) or the Current Post.
- 4
Offset: Skips this many posts from the start of the list. 0 by default.
- 5
Date: All (the default), or only posts published in the Past Day, Past Week, Past Month, Past Quarter or Past Year. Custom adds a Before and an After date; both are inclusive.
- 6
Order By: Title, ID, Date (the default), Author, Comment Count, Menu Order, Last Modified or Random.
- 7
Order: DESC (the default) puts the newest or highest first; ASC reverses it.
- 8
Ignore Sticky Posts: With the Posts source only. On by default, so sticky posts keep their normal place instead of jumping 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 hook into through the atomel/query/{your-id} action.
The section also has a Limit field (6 by default). This widget does not use it: the number of posts comes from Item Limit at the top of the section.
With Current Query the page's own query decides which posts show and in what order, so the filters, Offset and order settings are hidden. Current Post works with the Related source, and with the Posts source while Ignore Sticky Posts is on.
Style the Animated Post List
Everything below is on the Style tab. Sections that belong to a part you turned off are hidden.
- Item — background, border, border radius, padding and shadow of each row, with a Hover tab for the background and border color.
- Image — the hover image's Width, Height, border and border radius.
- Title — a hover line Style (Underline, the default, Middle Underline, Overline or Middle Overline), color, hover color, typography and text shadow.
- Meta — color, hover color, spacing, space between and typography.
- Category — spacing, and color, background, border radius, padding, space between and typography in Normal and Hover tabs.
- Pagination — alignment and the page numbers' look, when pagination is on.
Can't find what you need?
Our support team can help with setup questions and anything the docs don't cover yet.