Need Help?

Here are some good places you cant start.

Whats New?

Get updated about all the good stuff!

optimizing-images-for-seo
elementor-table-google-sheets
google reviews in elementor

How to design your own post grid layout with Elementor

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.

loop step2

Step 3

Create the loop template by going to Templates >> Theme Builder >> Single Post >>
Click on the button “ADD NEW SINGLE POST”

loop step3

Step 4

Give the single post template a name and click the button “CREATE TEMPLATE”

loop step4

Step 5

Close the template library by clicking on the “X” to start a blank grid item template.

loop step5

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.

loop step6

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.

loop step7

Step 8

Add the “Dynamic Template Grid” widget to any page or archive template using drag and drop.

loop step8

Step 9

In the widget settings choose the template you created earlier as a single post template. 

loop step9

Step 10

Under the “Item Posts Query” section filter the posts you want to show with the new grid you created.

loop step10

Step 11

View your output in the frontend by clicking the small eye icon to see the live page.

output

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.

View More Related Blog Posts

Download is just a click away

Get instant access to tons of Elementor goodies, completely FREE!

Hurray!

You got FREE access to the worlds leading widgets for Elementor page builder!