Recent Posts Element

Last Update: April 16, 2024

As well as the Blog Element, Avada also comes with 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 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.

For privacy reasons YouTube needs your permission to be loaded.
I Accept

How To Use The Recent Posts Element

The Recent Posts Element is a very quick and easy way to add the most recent blog posts anywhere on your site.

To start, add the element into 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 Demo page. Once you have chosen your preferred layout, go slowly 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 come back into 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

HeadingDescription
LayoutSelect the layout for the element.
Picture SizeFixed = width and height will be fixed.Auto = width and height will adjust to the image.
Hover TypeSelect the hover effect type.
Number of ColumnsSelect the number of columns to display.
Posts Per PageSelect number of posts per page. Set to -1 to display all. Set to 0 to use number of posts from Settings > Reading.
Post StatusSelect the status(es) of the posts that should be included or leave blank for published only posts.
Post OffsetThe number of posts to skip. ex: 1.
Pull Posts ByChoose to show posts by category or tag.
CategoriesSelect a category or leave blank for all.
Exclude CategoriesSelect a category to exclude.
TagsSelect a tag or leave blank for all.
Exclude TagsSelect a tag to exclude.
Show ThumbnailDisplay the post featured image.
Show TitleDisplay the post title below the featured image.
Title SizeChoose HTML tag of the title heading, either div or the heading tag, h1-h6.
Title TypographyControls the title typography
Show MetaChoose to show all meta data.
Show Author NameChoose to show the author.
Show CategoriesChoose to show the categories.
Show DateChoose to show the date.
Show Comment CountChoose to show the comments.
Show TagsChoose to show the tags.
Content AlignmentSelect the alignment of contents.
Text displayChoose to display the post excerpt.
Excerpt LengthInsert the number of words/characters you want to show in the excerpt.
Strip HTMLStrip HTML from the post excerpt.
Pagination TypeChoose the type of pagination.
MarginEnter values including any valid CSS unit, ex: 4%.
Element VisibilityChoose to show or hide the element on small, medium or large screens. You can choose more than one at a time.
CSS ClassAdd a class to the wrapping HTML element.
CSS IDAdd an ID to the wrapping HTML element.

Extras

HeadingDescription
Animation TypeSelect the type of animation to use on the element.
Direction of AnimationSelect the incoming direction for the animation.
Animation ColorSelect the color of the animation
Speed of AnimationType in speed of animation in seconds (0.1 - 5).
Animation DelaySelect the delay time after the animation starts(0 - 5).
Offset of AnimationControls when the animation should start.

Useful Links & Resources

In this article