fbpx
For 15% off, use coupon code:
WinterSale2021 Coupon Copied!
Hrs
Min
Sec
looper

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: 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 dont 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: Thats it your done you can go take a break and drink a Pina Colada. Cheers!

Share this post

Share on facebook
Share on twitter
Share on whatsapp

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!