How to Create a Listing Grid using Elementor Loop Builder

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

elementor loop builder

Create a new loop item

uQMTGGwvPU1ze21DlCk5taEfTrmpJxUUr7xnb9NgGQn3m9 gNlS3DnOtr8sjeBBltJvhAuQPZlmGPclZore0eyKgVEqYEH3uM20bR9ezpnCN61aaLYb nkyF2dF7GrFexBUaBZVmd40r2fi7t4R2w XDblGx0mEbotYIgZ60

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.

EBJFRMeySm bRzfbA ekcM eRKZxmmuTTLbrcwFP H4g
c8fGpl00vGHsApcjvRUm16RujqvoCz2NbFkkO069 AT8dvYkCJflVg7uQqu31l4 Vg6nyzQ1smuvFF HDV 79joAUQtvkYovI dBdoVB30cEEySgoJgDAvhsPEGY1IY0yHy3UDhfzYsf4gRhbMnXMHVK7prg5aO4O7QyOB1T1tSTa5fjHz3W cIvbTEEQ

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.

g5iQrWhtzL25QHVTqRoLWroC0Oicevbs534H1JjRsbOusYNdUUqiTmWBmxRw8xKLAYZJvk2pTXt8Nt XKb4Qc4p jAW BAPMlT 4ujix BkrFerYq5nMNAbhnHpzN 2qaxtzEQ51XQLTbD5cNOODv69XmG7uYiJP

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).

mQ caSWUiHXZ0smwRPuxYsNTR6Dg52vbFAEzAvj9dNCDGLbsbFvaVfvrcEnG1NwyxxFt0dKH4eST02aleZm8jpgVvalljyub14BaEgSx0K0u RQpLN3QhmE0Q7c5At3U3MvhGY sOAtDOoJ6aAdZgwStuQMMapFfjGNXYK eB8QclWhkSGcT9Yk8iG3dQ

Under Icon, go to the Icon Library and insert the Fill icon.

EMykim0h0nyGWCprmPLE59M6y92FSQ0Wkn6Yezbnf3m5PsXHbZGlLi3ZCz n9EkgfAmIMmgwU9h63jlu3n8WFa1uUFcCV7jU1rb2iuAVsv1b Y PeMnsIDg0MdO TKI97WhHrOqpr7F65Cq0KPjZWPNTRzpuZNjToa CjB e5oaWoUAOhg62E9mTiBa4jA

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.

Kz4bgqPspTvSXksDvwJWSM9T6stOamjelCE1WgyGip LnYian8fsWA6uMjzDxUBb21nQz4RbBpfwrB7u5oZD aWmiVKxioEF787Bbly0faPQ5hIL3kjYToWzhigOFhCIrnumqDltIxHCwGlYPv8FhjjDfiwTetalBQX7jzy0AhYUPKHtprRL Pzb1WIiLA

Select the Heading widget next and under Content > Title, go to Dynamic Tags and add an ACF Field of Price. Under Advanced > Before, add “$:”

J6mGgP3TJZwG YVHktLJwpWr5BvSPvVJ6IDtmYLwDG93f4CYMwzaAsnLIxX8KTZaj 0rNyIfOAzGPxgfSTeWSJYIOjwBLOlaIX1myYv JJq8qFIWj1rfSngZSu Vz5pi542Y3HE1nwjiOG 6b DemyplOiF lRNymCOLLmHc0ebblH2M8Fv

Select the thumbnail and under Content > Link, go to the Dynamic Tags and select Post URL, do the same for the Title widget. 

0Q5yVWMgXlCmbu2x2Thqgv hB Y2CaxaZzC puHphVnX7e lyHM wSnjW we WRJbuKqdDgz7lGE76EO7aDhiwWq2tRr9r38AEMu3sBGw1u9BEqgIFeJkN9CdB22EsGuQ jpGb7lOShzJ68Wa0Lc275ndAFWNeh8dJSGm0uVlgrbVWQ0tb5mUW4U4fiRg

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.

V8 Jz1EYQbBNzTlmBagt6mE7cejm3 VhQDij83g 9T YF5sANZeNbUk5jzysF1fcb4W4OgISws7H4j4DezOn24HPYH7PMw2K0BXEJweLytjqo3m9OkGQTTAOmhoEtTMO3OgFggh8Odd7nPVn0ScUEsG8yrrJ NsSLFaGdowqCgKKqqQtwOLSwjU8tGJbzA

To add Custom Fields like Size, Color, Price, Rate, and Sex, you need the ACF Plugin.

toPzP9ZbPO9b7A6mhmyCWpLAsO7xB9 H0FOdweD2PFDT Yg242gZZ0CDW1 35 HTaqLgD eQGw2LXFPk6mQkj1qdOZEJObkWT0w h9AKqGZTved4nqaTXrfZawS470HUlZVoLKeFiw4qy8WVYDKWWLnPNUGY6nzTTST0Hy v0NbW IKE86NPCv8KS JbzQ

Create a Listing with an Elementor Loop Grid

Go to Pages > Add New, name it “Back Orders”, Publish then Edit with Elementor.

ZrSGVCCz0QWeYpKD fh6 bL3eV0LN113Sm6clFF3oYIgB5ob8Yysg0wIcfvln9iQQtWjbNPI4tL7QT0L1oyilpFNLrVoQmdJCnoZqWbE4diUr1rLXX WbZdyEwvvQEBg1B YtfZ gdGLzpqeyDJ rtSu tKFre8y8i kQcPeDwY w YY PnREISINrNvA

When your page opens up in Elementor, go to the Widgets area and add the Loop Grid widget.

HhDWJnxk7BaQ9vkZNrPrG2p1mYiRvF3sBpzZhrz8DJZ6FFNC0z9emKHzQ3uPbKxmCr8VJBJDDdTDYETEMRUUiExTKAkiFEF5vsIoYlhprNfwt7JgRVtXGjhtZp7lKPCjhMdrK2sv oWJuacOWX2SYAbLDNubZq2absbStbdMs0pRMPhwu0I3T0omaK0Q5w

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.

bI DkHI7UM8T7FBCvgwmPRw HqEQyJhBo4vqu3x6YBRnFF6lnAq49M9iUnNsvjUul9oqB1 Bi4BL0k2TKpsbaHJcbkxpc15wH4g8DeUtiD44yUBzwTKMh5

Under Columns, you can choose the number of posts you want to display (3 in this case), and under Items per page select 6.

Elementor Loop Grid using the Elementor Loop Builder

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.

XQJf fsKiUtA g kg3NL T64VkzObdnWuF H uyr8QsTfH 91XuuTI8bhNW8c8lQ1KuIgRjdxzRlYkzzqKsyYx4G6lVDKAP 6ANf0SyeRhO6 q6V4mm PnrX rTpKQ8kZ6TBPZWbJSSwUMYqJctwKdZuM7B3sBrXWA3wCpgpEyRTwrW4GwqgLjREjBI w

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.

Elementor Loop Grid in action

When you go to your dashboard under Pages, click View on the Back Orders page to preview your finished loop grid page.

JxgOCuxRKiHhKMlP3S5qJX7475WOv5tDqotI8 vUFZsWEo4sj0Nl2tb2C7AmlQiTo YO7YyIlNwiigMSf6WUryqaPCbZz6k sHn3IRnTf6Paqtld0kwv8l93M7Dg4NF9CDA0niQPH7oMECFVmmy6xiZjICgl Cg6j1Cdve25AzH06 sUa kIT3vq94oenw
Elementor Loop Builder with a Loop Grid

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users