Recent Posts Element

Last Update: August 21, 2025

As well as the Avada Blog Element, Avada also includes a Recent Posts Element. This Element is unique in that it offers more compact design options than the Blog element, which may work better on pages with a lot of varied content. This Avada Element enables you to display your posts on any page, select various layouts, assign custom categories to display, and so much more. You can use the Recent Posts Element as many times as you'd like, and on any page or post. Before you can display blog posts, you must first create them.

Watch the video below for a visual overview of the Element, view the Avada Recent Posts Element page for live examples, and read on to see the complete list of options.

For privacy reasons YouTube needs your permission to be loaded.

View Element Page!

View Live Example!

View Avada Builder Elements!

How To Use The Recent Posts Element

The Avada Recent Posts Element is a speedy and easy way to add the most recent blog posts anywhere on your site. To start, add the Element to your desired column, and then configure the Recent Posts Element to your liking. The Recent Posts Element comes with 3 different layouts for you to choose from. They can then all be customized to your liking. To view the possibilities of this Element, make sure you visit the Recent Posts Element page.

After choosing your preferred layout, go down the options list, customizing its appearance to suit your wishes. Once you have finished configuring the options, click 'Save' to insert the Element into the page. Preview the page to view the Recent Posts Element output, and remember you can return to the Element to fine-tune it.

Element Options

Note: Please note that the displayed options screens below show ALL the available options for the element. If you have Avada's Option Network Dependencies turned on, you will only see options relevant to your selections, and so the options screen may look somewhat different.

General

Heading		Description
Layout		Select the layout for the element.
Picture Size		Fixed = width and height will be fixed.Auto = width and height will adjust to the image.
Hover Type		Select the hover effect type.
Number of Columns		Select the number of columns to display.
Posts Per Page		Select number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Post Status		Select the status(es) of the posts that should be included or leave blank for published only posts.
Post Offset		The number of posts to skip. ex: 1.
Pull Posts By		Choose to show posts by category or tag.
Categories		Select a category or leave blank for all.
Exclude Categories		Select a category to exclude.
Tags		Select a tag or leave blank for all.
Exclude Tags		Select a tag to exclude.
Show Thumbnail		Display the post featured image.
Show Title		Display the post title below the featured image.
Title Size		Choose HTML tag of the title heading, either div or the heading tag, h1-h6.
Title Typography		Controls the title typography
Show Meta		Choose to show all meta data.
Show Author Name		Choose to show the author.
Show Categories		Choose to show the categories.
Show Date		Choose to show the date.
Show Comment Count		Choose to show the comments.
Show Tags		Choose to show the tags.
Content Alignment		Select the alignment of contents.
Text display		Choose to display the post excerpt.
Excerpt Length		Controls the number of words in the excerpts.
Strip HTML		Strip HTML from the post excerpt.
Pagination Type		Choose the type of pagination.
Margin		Enter values including any valid CSS unit, ex: 4%.
Element Visibility		Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS Class		Add a class to the wrapping HTML element.
CSS ID		Add an ID to the wrapping HTML element.

Extras

Heading		Description
Animation Type		Select the type of animation to use on the element.
Direction of Animation		Select the incoming direction for the animation.
Animation Color		Select the color of the animation
Speed of Animation		Type in speed of animation in seconds (0.1 - 5).
Animation Delay		Select the delay time after the animation starts(0 - 5).
Offset of Animation		Controls when the animation should start.