In this tutorial, I will introduce you to the Elementor Loop Builder that came out in v3.8. The Elementor Loop Builder will enable you to create custom dynamic skins (loop grids) for your listings in Elementor.
You’ll be able to create a custom card or loop in any shape and design that you can use later to display listing grids on your website.
Initially, Elementor only offered only 3 post designs, but now with the loop builder, you’re able to build more custom designs and dynamically reference them to different sets of data on your website.
Let’s begin by creating an Elementor loop skin/template
Ps: Below is a step-by-step video tutorial you can follow along with.
Video: Creating A Listing Grid using Elementor Loop Builder
Create an Elementor Loop Item (loop template)
To do this go to your Elementor dashboard, under Templates > Theme Builder > Loop Item
Create a new loop item
When your template opens up in Elementor, add a new vertical container, then from your Widgets area, add the Featured Image widget and an Icon List widget right below it.
Back in your Widgets area, add the Star Rating, Post Excerpt widgets, and a Heading widget for the price.
In the Edit Heading area, under Content > HTML Tag, select div.
Select the Icon List widget and in the Edit Icon List area, under Items add List Items #1 and #2. On List Item #1, under Text go to the Dynamic Tags icon and select ACF Field (Color).
Under Icon, go to the Icon Library and insert the Fill icon.
For List Item #2, go to Dynamic Tags and add ACF Field (Size), add “Size:” under Before the add an icon.
Select the Star Rating widget and under Content > Rating, and Rating scale 0-5 then on Rating go to Dynamic Tags and select the ACF Number Field, under Settings choose Key > Rate.
Select the Heading widget next and under Content > Title, go to Dynamic Tags and add an ACF Field of Price. Under Advanced > Before, add “$:”
Select the thumbnail and under Content > Link, go to the Dynamic Tags and select Post URL, do the same for the Title widget.
This way, when someone clicks on the title or the picture they’ll be redirected to the post.
Select the Post Excerpt widget and under Content, Settings > Excerpt length, add 20. Under Advanced > After, add “…”.
Select the Button and add the Text “Back Order”, then on Link, go to Dynamic Tags and select Post URL.
Tip:
To preview your work, go to Settings at the bottom left, under Preview Settings, select the Post option and then select which post to display then Apply & Preview.
To add Custom Fields like Size, Color, Price, Rate, and Sex, you need the ACF Plugin.
Create a Listing with an Elementor Loop Grid
Go to Pages > Add New, name it “Back Orders”, Publish then Edit with Elementor.
When your page opens up in Elementor, go to the Widgets area and add the Loop Grid widget.
Note; that to create a loop grid you can either create a template for your loop or you can use the theme builder, which is the option we used here.
So with the loop grid widget selected, go to Content > Layout and select your loop template.
Under Columns, you can choose the number of posts you want to display (3 in this case), and under Items per page select 6.
Adding Pagination to the Elementor Loop Grid
To add pagination, go to the Pagination option, enable the Numbers + previous option and select the number of pages (Page Limit), add 5.
Under Style, set the Space between 12 and Spacing to 29.
On Hover, ad a different text colour. When you are done Update and Preview.
When you go to your dashboard under Pages, click View on the Back Orders page to preview your finished loop grid page.
In Closing
That’s how you can use the Elementor loop builder to create a loop grid and use it to showcase posts/products on your website.
For comments, suggestions, or questions, please use the comments sections. Remember to subscribe to my YouTube channel and newsletter for more tips and tutorials.
