Posts Extra

General

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.

Why use Posts Extra?

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.

On this page we’ll walk you through the controls, what they do and ansers to most of your common questions about this powerful widget.

Content Parts

A post has a number of content parts that can be moved around areas within the post. The content parts available for now are:

• Terms
• Title
• Metas
• Excerpt
• Button

The Metas content parts can be assigned to areas as well. The metas are:

• Avatar
• Author
• Date
• Comments
• Price (available when WooCommerce is active)

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

Areas are sections within a post in which you can have content parts. There are 4 areas available:

• Header
• Media
• Body
• Footer

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.

Layout

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
• Posts Skin — Select where the layout of each post inside the grid item comes from
  • Default — Use the widgets’ lettings to lay out and style the posts
  • Template — Use an Elementor Template to create the design of the post
• Post Template — Select the Elementor Template to use
• 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.

Skins

• Classic
  • Layout
    • 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.
    • Vertical Align — [ only available for the default layout ] It aligns each post block vertically in relation to one another inside the grid.
    • 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.
  • Filters
  • Infinite Scroll
• Carousel
  • Layout
    • Direction — Can be vertical or horizontal and defines how the carousel slides and how the navigation arrows and pagination appears
    • Rows — Available only for horizontal direction. How many rows should one view have.
    • Slides per view — How many slides should be shown. For the horizontal direction, this means columns and for the vertical direction this means rows.
    • Slides to Scroll — How many slides to scroll when dragging or using arrows or pagination bullets.
    • Grid Spacing — The horizontal and vertical space between the grid items.

Query

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

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.

Filters Settings

• 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

Infinite Scroll

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

Media

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

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

Metas are the native metas associated to each post. These are:

• Avatar
• Author
• Date
• Comments
• 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.

Hover Effects

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
  • Default
    • Scale — The size of the media area when the mouse is not hovering it.
  • Hover
    • 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
  • Default
    • Scale — The size of the thumbnail when the mouse is not hovering the media are.
  • Hover
    • 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.

Carousel

The Carousel skin displays posts in a carousel with arrow and dots pagination navigation. The carousel supports multiple rows and is fully customisable.

In Elementor 2.1 we’ve introduced the Orientation option which allows you to create a vertical sliding carousel. To Enable this, go to Layout > Carousel > Direction and set it to “Vertical”.

Carousel Settings

• Layout
  • Direction — Can be vertical or horizontal and defines how the carousel slides and how the navigation arrows and pagination appears
  • Rows — Available only for horizontal direction. How many rows should one view have.
  • Slides per view — How many slides should be shown. For the horizontal direction, this means columns and for the vertical direction this means rows.
  • Slides to Scroll — How many slides to scroll when dragging or using arrows or pagination bullets.
  • Grid Spacing — The horizontal and vertical space between the grid items.
• Carousel
  • 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.

Carousel Style

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.

Showing part of the next slide

There is an easy way to have the carousel slider show a bit of the next slide dar is not by default in view. It requires a few lines of CSS added in the Custom CSS section of the Advanced tab of the Posts widget.

selector .ee-swiper__container {
	overflow: visible;
}

selector .ee-swiper {
	padding-right: 200px; // Adjust this to define how much of the next slide(s) is shown.
	overflow: hidden;
}

The above code shows a bit of the next slide(s) to the right of the carousel. If you want to show slides outside of the carousel on both sides, all you need to do is add a padding left value as well to the .ee-swiper selector.

FAQ

When changing filters, there is no animation. Why?

Animating posts when filtering them is only available when enabling Masonry layout mode.

The excerpts length setting is not working

Only posts with excerpts automatically generated from the post content are trimmed by default. Posts with custom excerpts defined in the Excerpt field of the post are not trimmed by default to the specified length. To trim custom excerpts, go to Content > Excerpt and check the option Trim Custom Excerpts.

The spacing control for Carousel is not working

In version 2.1 we deprecated the Columns control and introduced the Slides per View control will needs to be set in order for the Spacing control to work. Set the Columns control to “Default” for desktop, tablet and mobile and set the number of columns using the Slides per View. You will then be able to adjust the spacing.

Refreshing widgets in custom post skins with infinite scroll

When using custom post skins that load on infinite scroll, some widgets inside the template being used might not work. That’s because these widgets use javascript to function properly. Some example might be a slider or carousel, a form and it’s validation or anything else that isn’t static. By default Extras supports most Elementor widgets and refreshes them when new items are loaded via infinite scroll, but you can add your own from third party addons by using the refreshable widgets filter.

Can I use this widget for archive pages?

You can use Posts Extra for any theme builder pages or default template hierarchy pages in WordPress. Simply set the Source under Content > Query to Current Query and the widget will use the main query. It will work for archive pages, custom post type archives, homepage, search results and so on.

Filters & Actions

See available filters & actions for this widget.