The Loop Grid in Elementor allows you to create flexible and dynamic grid layouts from a single template, giving you greater control over design and content structure. By integrating custom fields, you can display tailored information such as product specifications, event details, or other dynamic data with ease. Advanced filtering options further enhance usability, helping visitors explore content by category, tag, or custom parameters while keeping the layout clean and engaging.
Step #1: Install and activate Unlimited Elements
Before getting started, you will need to purchase Unlimited Elements Pro from the link below to access the Loop Grid widget.
Then follow these steps:
Step #2: Create an Elementor Template
It requires Elementor Pro installed and activated on your WordPress website.
Go to Templates -> Theme Builder -> Single Post -> Click the “Add New” button on the top
Name your template
Give your template a name and click the “CREATE TEMPLATE” button
Start your own design
Close the templates library dialog to start your own design.
Choose a demo post
Choose a demo post to build your grid.
Click on the settings icon on the bottom -> Click “Preview Settings” -> Choose a content type and post
Don’t forget to click the “APPLY & PREVIEW” button when you are done.
Design your carousel item
Drag & drop widgets to design your grid item using the Elementor editor.
Once you are done click the “PUBLISH” or “UPDATE” button & exit to the WP dashboard.
You can use the following dynamic single post widgets to create your dynamic template.
- Post Title
- Post Excerpt
- Post Content
- Featured Image
- Author Box
- Post Comments
- Post Info
You can use advance custom field(ACF) to showcase dynamic contents.
Step #3: Adding the Loop Grid in Elementor Website
To create a dynamic grid in Elementor, install the Loop Grid widget from the Unlimited Elements Widget library.
Step #4: Add the Loop Grid widget to your Elementor page
Now, in the Elementor editor, Find the Loop Grid widget and drag it to the desired part of your page.
General Settings
Items Post Query Settings
Posts Source
Choose any of the below options for your post source.
- Current Query Post
- Custom Posts
- Related Posts
- Manual Selection
Post Types
Choose the type of post you want to display.
Include By
Include the posts from different options given below
- Include Sticky Posts
- Get Only Sticky Posts
- Author
- Date
- Post Parent
- Post Meta
- Most Viewed
- ID's from PHP function
- ID's from Post Meta
- ID's from Dynamic Field
Include By Terms
Choose specific posts that you would like to include from your selection by adding rules.
- Include By Terms Relation
- Include Terms Children
Exclude By
Choose specific posts that you would like to exclude from your selection by adding rules.
- Terms
- Current Posts
- Author
- Post Without Featured Image
- Posts with current category
- Posts with current tags
- Offset
- Avoid Duplicates
- ID's from Dynamic Field
Grid Settings
Grid Type
Select the grid type:
- Regular
- Masonry
Number of Columns
Set the number of items to show in a row.
Grid Gap
Adjust the space between grid items.
Show Empty Message
Show an empty message when no posts answer the query.
Empty Message Type
Select the empty message type:
- Message
- Template
Empty Message
Type or enter the empty message.
Grid Settings (Masonry Type)
Base Width
Set the width of the grid items.
Gutter
Width / height of gutter between elements.
Minify
Whether or not to place elements on shortest column or keep exact order of list.
Surrounding Gutter
Set left gutter on first column and right gutter on last.
Ultimate Gutter
Set the ultimate gutter value.
Direction
Select the grid direction:
- LTR
- RTL
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 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 widget.
Filters Behaviour
Select the filter behaviour:
- Ajax
- Ajax and URL Change
- 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.
Step #5: Add the Select Dropdown Filter widget
To complete the design, let’s add the Select Dropdown Filter widget to the page. In the Terms selection, choose the same terms that were selected in the Loop Grid widget to ensure proper filtering. Then, style the widget as needed to match your website’s overall design.
Wrapping it Up!
With the Loop Grid widget, you can efficiently manage and display dynamic content without sacrificing design consistency or performance. Its ability to combine reusable templates, custom fields, and advanced filters makes it ideal for content-heavy websites that require clarity and interactivity. By leveraging these features, you can create engaging grid layouts that improve user experience and encourage deeper content exploration.