The Posts Extra widget is one of the most advanced Posts widget for Elementor. It provides tons of options in order to create amazing looking archive pages or posts grid.
Beyond the two skins available, Classic and Carousel, the Posts Extra widget lets you move content around the post by selecting in which area they should appear. It provides a way to show sticky posts and style them differently than the other posts. It also supports filters, pagination, infinite scroll and a lot more.
A post has a number of content parts that can be moved around areas within the post. The content parts available for now are:
- Price (Woocommerce)
Each of these content parts can be assigned to a specific area inside the post and each of them have a designated section inside the Content tab of the Elementor editor panel. We’ll describe the controls in depth for each, below.
The order of the content parts can be changed under Content > Order. However, the order of each content part is relative to other content parts residing ONLY in the same area.
Content parts can be disabled in their respective sections under the Content tab.
Areas are sections within a post in which you can have content parts. There are 4 areas available:
The order of these areas cannot be changed but content can move from one area to another. If an area is empty (no content parts are assigned to it) it will not display and it’s corresponding controls within the Style tab of the Elementor editor will not show either.
This section controls how the general widget is laid out. For laying out a post inside the loop, please refer further down to each content section.
- Skin — We currently have two skins available:
- Classic — Lays out posts in a grid or list
- Carousel — Lays out posts in horizontal list inside a carousel
- Columns — The number of columns for the posts. If you choose 1 or 2 columns, you can lay out posts with the image on the left, inline with the rest of the content
- Editor Helper — This is an easy way to identify areas inside a post. It only shows in the editor if it’s enabled and surrounds areas (described below) with dotted lines of different colours so that it’s easier for you to make the correct settings.
- Columns Spacing — The space between the columns
- Rows Spacing — The space between the rows
- Layout — Provides layout options for this skin. They can be:
- Classic — The posts are laid out using flexbox but empty spaces appear vertically (at the bottom of the posts) between the posts if the below Align control is not set to Stretch.
- Masonry — Posts are laid out in a vertical masonry mode, without empty spaces and reposition automatically on resize.
- Align — [ only available for the default layout ] It aligns each post block vertically in relation to one another.
- Enable Filters — Enables the filters for the post widget. Additional controls for filters will appear and are described below.
- Infinite Scroll — Enables infinite scroll for the posts. When the user reaches the bottom of the posts widget, new posts, if available, are automatically loaded or a button is placed to load more posts.
- Show pagination — [ only available if Infinite Scroll is set to “No”, because we cannot have both methods of displaying posts ] Shows WordPress post pagination at the bottom of the posts list and enables controls for settings and styles of the pagination area.
- Infinite Scroll
- Columns — The number of columns / slides to show inside the carousel, at at time
- Rows — The number of rows per view
- Slides to Scroll — The number of columns / slides to move when navigating left / right.
- Grid spacing — The space between the columns / slides, both vertically and horizontally (between rows).
Elementor Extras uses the Elementor default query module, to which we’ve added some extra controls. Although we might add some new features to it in the future, we want to rely on Elementor native functionality and features going forward in order to prevent future conflicts.
- Sticky posts — Enables the query to fetch the sticky posts first and then the other, no matter the value of the Order control.
- Show Only Sticky Posts — [ only available if Sticky Posts is set to “Yes” ] Set this to “Yes” to show ONLY sticky posts.
Filters are not available for the Carousel skin.
The filters available in the Posts Extra widget filter, based on certain chosen taxonomy terms, existing posts loaded through the main query (wether it paginated or not).
Filters do not load new posts through ajax. They just act as a way to hide posts that do not have certain taxonomy terms. Because of this, you should use them wisely along with the Infinite Scroll option because when the Infinite Scroll loads new posts, filters will not update to include potentially new terms that exists for the newly loaded posts.
You do have the option of fetching all terms in a taxonomy to populate the filters, but if no posts within the currently displayed ones have a term, clicking on that term will results in a message that says no posts with that terms exist.
- Taxonomy — The taxonomy for which to fetch the terms. By default you can fetch Categories or Tags, but if you have custom ones defined they will appear here.
- Default term — You can choose to filter the posts when the page loads. Here you can select which term will be filtered. Once you select a Taxonomy this list will be populated with the terms corresponding to that taxonomy.
- Order by — Criteria for ordering the terms inside the list
- Order — How to order the terms. Can be “ASC” (for ascending) or “DESC” (for descending).
- Show all — [ only available if Infinite Scroll is set to “Yes” ] Disregards the terms from the initial queried posts and loads ALL the terms for that taxonomy. As mentioned above, this is useful because filters won’t update when new posts are loaded using Infinite Scroll and you will need users to have access to all the terms.
- Settings this to “Yes” enables the below Not Found text control
- Not Found text — [ only available if Show all is set to “Yes” ] When you have all the terms shown it’s likely that some don’t have corresponding posts loaded (yet). We then show a message saying that no posts exist for that filter. Here you can define that message.
- All text — Text shown for the link inside the filters that shows all available posts, independent of terms
The infinite scroll option adds the option to load posts without actually leaving the current page. The loading method / trigger can be either automatic (when the visitor reaches the bottom of the currently shown posts) or via a button that, when clicked, loads the next set of posts. The indicator for the loading of posts can be either an animated icon or text. Below are the most important options for the Infinite Scroll functionality.
Infinite Scroll Settings
- Show Statuses — If enabled, the loader, be it text or an animated gif will be shown when loading new posts
- Preview in editor — To make it easier to preview the statuses, you can turn them on in edit mode and customise them accordingly.
- Loading Type — The loading indicator type to be shown when loading new posts
- Loader — Shows an animated gif
- Text — Shows a customisable text
- Show Load Button — You can turn this on to force the user to load posts by clicking a button instead of when reaching the end of the loaded posts
The Media area can be hidden completely. However, if you do that, bare in mind that all content parts that are set to appear in the Media area will not be shown.
Media Content Settings
- Placeholder Image — Some of the posts might not have a featured image. You can set a placeholder image for those posts so that your grid will look nice and aligned. Placeholder images DO NOT override the featured image if the post has one.
- Link to post — Wether to link the whole Media area to the post. If enabled and you have a title inside the Media area, the title will not be linked as you cannot have a link inside a link in HTML.
- Custom Height — Allows you to set a custom height for the Media areas.
- Height — This height is actually a percentage from the width of each Media area. So if you set it to 120, that means the height is 120% of the width.
Media Style Settings
- Vertical Align — Aligns the content inside the Media area, vertically.
Terms Content Settings
You can display post terms inside the content areas of a post. You can also select multiple taxonomies out of which to pull terms from. For now, you cannot exclude terms.
- Link to term — Enable to create a link from the term. The link goes to the archive page for that specific term.
- Taxonomies — Defines the taxonomies that the displayed terms are from. You can select multiple taxonomies.
- Count — Limit the number of terms shown. Enter -1 to show all terms, 0 to show none, 1 to show one term and so forth.
Metas are the native metas associated to each post. These are:
- Price (Woocommerce)
All metas can be set to appear in a content area or hidden completely through a control like this:
Metas Style Settings
It is important to understand that some styles of the metas can only be defined in the context to each content area. You can modify the some general styles under Style > Metas, but for more specific definitions you can find controls under each content area. For example, you can choose to show the Author name inside the Media area, but have the comment count shown in the footer. To access style controls for the Author name, you need to go to Style > Media > ↳ Media Metas and to change the style of the comment count, you need to go to Style > Footer > ↳ Footer Metas. These will impact ALL metas in these areas.
This widgets support a bunch of cool hover effects for the Media area. This makes is versatile for both a post grid and portfolio layouts. The effect refers to how the content of the Media area appears or disappears on hovering the mouse over the area. Start by selecting the effect under Style > Hover Effects > Content > Effect. The effects have some words that will help you identitfy if the content is shown on hover or disappears on hover. For example Fade In means the content appears and Fade Out means the content disappears. Fade From Right means the content appears from the right, Fade To Right means the content disappears to the right.
These effects go perfectly with the other controls that turn this into a very powerful widget in terms of effects:
- Media — Controls apply to the WHOLE area, not just the image
- Scale — The size of the media area when the mouse is not hovering it.
- Scale — The size of the media area when the mouse is hovering it.
- Thumbnail — Controls apply to ONLY the thumbnail that is set as a background to the whole area
- Scale — The size of the thumbnail when the mouse is not hovering the media are.
- Scale — The size of thethumbnail when the mouse is hovering the media area.
- Overlay — You can set an overlay over the media area and behind the content of the media area. This overlay can be defined in the default and hover states as well.
The Carousel skin displays posts in a carousel with arrow and dots pagination navigation. The carousel supports multiple rows and is fully customisable.
- Autoplay — Enable to have the carousel autoplay without the need for user interaction. Navigation controls still appear
- Loop — If enabled, when the carousel reaches the last slide it will not stop, but continue with the first slide.
- Resistance — When dragging, there is a certain distance that the slides need to be dragged beyond so that when released, the carousel moves to the next slide. This value is a factor and not a distance in actual pixels. Test it to understand how it works.
- Free Mode — When enabled, the carousel will not snap to slides but move freely when dragged.
- Arrows — Enable or disable the arrows.
- Pagination — Enable or disable the pagination for the carousel.
- Type — Can be either bullets (dots) or fraction, like 1/3 where 1 is the current view and 3 are the total number of views.
- Clickable — You can turn off clickable dots so that they act as indicators only and not navigation controls.
The style controls for the carousel refer to the arrows and pagination. The controls are self-explanatory. If we’re missing something, please open a ticket and we’ll help you out.
When changing filters, there is no animation. Why?
Animating posts when filtering them is only available when enabling Masonry layout mode.