Have you ever wondered how you can design your own post grid layout inside of Elementor website builder? Using Elementor you can build extraordinary looking websites. But one of the missing tools is an option to create custom post loops. In this article we will show you how to make our own post grid layout using the dynamic loop builder. We will use a widget called “Dynamic Template Grid”. This widget is part of Unlimited Elements Pro which you can purchase here.
Easy step by step guide for creating a custom post grid layout inside of Elementor:
Step 1
Install the and activate “Unlimited Elements Pro“
Step 2
Step 2: Install the “Dynamic Template Grid” widget from Unlimited Elements widget library.
Step 3
Create the loop template by going to Templates >> Theme Builder >> Single Post >>
Click on the button “ADD NEW SINGLE POST”
Step 4
Give the single post template a name and click the button “CREATE TEMPLATE”
Step 5
Close the template library by clicking on the “X” to start a blank grid item template.
Step 6
Click the settings button and the “Preview Settings” section. Then choose a sample post. This post will be used to show the data of the grid item inside the Elementor builder.
Don’t forget to click the “APPLY & PREVIEW” button to view your changes.
*Remember we are designing just one item of the whole grid right now which will repeat itself dynamically.
Step 7
Drag and drop dynamic fields from the widgets pane to the canvas to design your custom item. When you finish don’t forget to click the “UPDATE” button to save. Now you can exit back to the WordPress dashboard using the hamburger menu icon.
*Advanced users can use any static widget and populate them with dynamic fields for example ACF fields.
Step 8
Add the “Dynamic Template Grid” widget to any page or archive template using drag and drop.
Step 9
In the widget settings choose the template you created earlier as a single post template.
Step 10
Under the “Item Posts Query” section filter the posts you want to show with the new grid you created.
Step 11
View your output in the frontend by clicking the small eye icon to see the live page.
Step 12
Thats it your done you can go take a break and drink a Piña colada. Cheers!
Check out the diffrent demos to see examples of what you can achieve with the dynamic loop widgets.
Take absolute control over every aspect of your web design.
