Looking for a simple way to display your WordPress posts in Elementor without upgrading to Pro? The Post List widget lets you showcase your blog posts in a clean, multi-column layout while offering features like filtering, pagination, load more, and infinite scroll. In this guide, we’ll walk you through how to effectively display posts in Elementor, making it easy to create an engaging and user-friendly blog section.
Popular Use Cases for using Posts in an Elementor Website
Blogs and News Websites
Showcase your latest blog posts or news articles in an organized and engaging manner on your homepage or dedicated blog page.
E-commerce Stores
Display featured products, exciting new arrivals, or best-selling items to entice visitors and drive more sales effortlessly.
Portfolio Websites
Create a dynamic portfolio by showcasing your work or projects with images, titles, and descriptions in a grid or list format.
Magazine-Style Layouts
Design magazine-style layouts with multiple categories or topics, allowing users to explore diverse content easily.
Event Calendars
Present upcoming events, conferences, or webinars in a visually appealing way, complete with event details and dates.
Recipe Websites
Share your culinary creations with mouthwatering images, ingredients, and cooking instructions for each recipe.
Directory Listings
Build directory-style listings for businesses, services, or any other categorized content, making it easy for users to find what they need.
Educational Websites
Structure courses, lectures, or study materials in a clear and organized way, making it easier for students to find relevant content quickly.
Real Estate Listings
Display property listings with property details, images, and descriptions to help prospective buyers or renters find their ideal property.
Step #1: Install and activate Unlimited Elements Free Version for Elementor
You have to install and activate the Unlimited Elements Free Version for Elementor.
Step #2: Adding the Post List widget to your Elementor website
To display posts in Elementor, install the Post List widget from the Unlimited Elements Widget library.
Step #3: Add Post List widget to your Elementor page
Now, in the Elementor editor, Find the Post List widget and drag it to the desired part of your page.
General Settings
Post Lists Image Size
Select the post image size accordingly to the layout.
Item Layout
Select the item layout from the given options
- Row
- Row Reverse (Pro)
- Column
- Column Reverse (Pro)
Number Of Columns
Choose the number of columns you want to display in the post list.
List Gap
Set the gap between posts.
Intro Number of Characters
Set the number of characters for the post intro.
Show Empty Message
Shows empty message when no post answers the post query.
Open Links In New Tab
Select "Yes" if you want the links to open in a new tab.
Disable Link
This will remove link from all posts.
Make All Item Link (Pro)
This will make the whole item clickable.
Layout Settings
Show Image
Show/Hide the image of the post.
Show Categories
Choose any of the options from the given list to show the categories of the post
- No
- All Categories
- Only Main Category
- By Taxonomy
- Last Level by Taxonomy
Show Tags (Pro Feature)
Show/Hide the post tags.
Tags Position
Select the tags position from the following options.
- Below Title
- Above Title
- Above Description
- Below Description
Show Title
Show/Hide the title of the post.
Title HTML Tag
Select the HTML tag for the post title.
Show Text
Show/Hide the post text.
Show Button
Show/Hide the button.
Button Button Location
Select the positioning of the button
- In Content (Pro)
- On Side
Button Link Type
Select the button link type:
- Post Link
- Dynamic Post Popup
- Disable Link
- Link from Meta Field
Button Text
Type any custom text for the button.
Additional Data Settings
Meta Data Position
Select the Meta data position:
- Before Text
- After Text (Pro)
Show Date
Show/Hide the date of the post.
Show Comments
Show/Hide the post comments number.
Show Time
Show/Hide the time of the post.
Show Time Ago
Show/Hide the time ago of the post.
Show Author
Show/Hide the author of the post.
Show Custom Meta (Pro)
Display custom metadata, ACF (advanced custom fields) in the post list.
- Show custom meta
- Select meta filed name
- Add custom text before metadata
- Choose custom meta icon
Debug Meta Fields
Show/Hide all meta fields with content for debug purposes.
Connected Widgets Settings
Enable Remote Connection
Widget Name for Connection
Choose this to "Auto Detectable", so it will automatically detect the remote widgets.
Sync
Sync Group
Choose the same group for two or more item-based widgets so they can sync together.
Posts Query Settings
In the Post Query selection, we can select from a variety of post types, whether it’s regular posts, pages, products, or custom post types. We can even select multiple post types in one display.
Posts Source
Select the posts source to either Custom Posts, Current Query Posts, Related Posts or Manual Selection.
Post Types
Select the post type, we can choose custom post type as well. We have all the options to Include or Exclude the post terms if needed.
Max Posts
Set the maximum number of posts to display.
Order
Select the posts order and order direction accordingly.
Query ID (Pro)
Give your Query unique ID to been able to filter it in server side using add_filter() function. This feature exists in a PRO Version only.
Posts Pagination and Filtering Options
Add the AJAX-based faceted filter system, seamlessly empowering you to craft diverse layouts with ease. Take control by applying multiple filters, ensuring a super-fast and dynamic filtering experience tailored to your website needs.
Pagination
Select the pagination to show Numbers, Using Pagination Widget or None.
Enable Post Filtering
When turned on, you can use all the post filters widgets like tabs filter, load more etc with this grid
Filters Behaviour
Select the filter behaviour to either Ajax, Ajax and URL Change or Ajax, URL Change and Back Button.
Group
Select the group, and allow filtering group of widgets at once.
Disable Third Party Modifications
Disable other themes or plugins hooks and their code so they will not influence on the query.
Wrapping it Up!
By leveraging the Post List widget, you can create an eye-catching and well-structured post layout without any additional costs. Whether you want to highlight recent articles, display category-specific posts, or improve user engagement with pagination and filtering, this method offers a seamless solution. Give it a try and enhance the way your content is presented to your audience!
