Are you struggling to showcase your products, services, or even blog posts in a visually appealing and organized manner? Look no further than Elementor’s Loop Builder!
Elementor Loop Builder is a revolutionary tool that empowers you to showcase your content with unparalleled flexibility and control. Gone are the days of settling for generic, static pages. With Loop Builder, you can design a listing page that seamlessly blends functionality and aesthetics.
This tutorial will cover the process of creating a listing page in Elementor with the Loop Builder (without the add-on). However, we have a separate article covering how to create a listing page in WordPress with JetEngine, in case you prefer the easier method.
Steps to Create a Listing Page with Elementor Loop Builder
Step 1: Choose the Source
First, you must decide what content type you want to list: Posts, pages, products, custom post types, etc.
Please ensure you’ve already posted some content you want to create for the listing page. For this example, we will create a listing page for our WooCommerce products.
Step 2: Design the Loop Template
Next, we’re going to design the Loop template.
On your WordPress dashboard, navigate to Templates -> Theme Builder. Once you enter the Theme Builder screen, click the Loop Item menu to add a new template.
Alright, we will start everything from scratch, so go directly to the Elementor template editor.
As we mentioned earlier, we will create a list of WooCommerce products using Loop Builder and add some elements we want to display for each loop item.
Here are the elements that we add to the canvas area:
- Structure
Add a container with two inner containers inside it.
We will use the first inner container to place a product image, and in the second inner container, we’ll add some elements, such as the product title, star rating, product content, product price, and the button.
- Product Image
Start with the first inner container., Please select the Image widget from the widget panel, then drag and drop it into the first inner container.
To set this widget to display the product images dynamically on your loop template, click the Dynamic Tags icon, then set it to Product Image. Afterwards, you can tweak and style the widget to your preference.
- Product Title
Now, we move on to the second inner container.
Select the Heading widget from the widget panel, then drag and drop it into the second inner container.
To set this widget to display the product title dynamically on your loop template, click the Dynamic Tags icon, then set it to Product Title. Afterwards, you can tweak and style the widget to your preference.
- Star Rating
Next, add the Rating widget and place it in the second inner container (under the product title). Afterwards, you can tweak and style the widget to your preference. If you want it, you can integrate Elementor with ACF to add a dynamic star rating.
- Product Content / Description
Select the Text Editor widget from the widget panel, then drag and drop it into the second inner container (under the star rating element).
To set this widget to display the product content dynamically on your loop template, click the Dynamic Tags icon, then set it to Product Content. Afterwards, you can tweak and style the widget to your preference.
- Product Price
Next, we’re going to add a product price element. to the loop item.
Select the Text Editor widget from the widget panel, then drag and drop it into the second inner container (under the product content element).
To set this widget to display the product price dynamically on your loop template, click the Dynamic Tags icon, then set it to Product Price. Afterwards, you can tweak and style the widget to your preference.
- Call to Action Button
Select the Button widget from the widget panel, then drag and drop it into the canvas area (below the Product Price element).
Next, replace the text button, and we will add the button dynamic link to the Add To Cart, which means when users click the button, it will take them to the actual product page. Afterwards, you can tweak and style the widget as you like.
Once you finish adding all elements and custom fields to the Loop template, publish it by clicking the Publish button.
You can add other elements to the Loop template to your liking according to the type of listing page you plan to create. If you want it, you can even add custom fields to your loop template.
Step 3: Display the Loop Template on a Listing Page
Well, it’s time to display the loop template you’ve just created on a listing page.
Create a new page and edit it with the Elementor.
Once you enter the Elementor editor, select the Loop Grid widget, then drag and drop it into the canvas area.
Next, choose the type of loop template for Products, and select the loop template that you want to display. In this case, select the loop template that you’ve just created.
In the widget settings, navigate to the Content tab -> Layout. Find your template by typing in the available field.
Now, you can configure the loop template block settings, such as the columns, the number of items to display per page, the pagination, etc.
Once you’ve finished configuring your listing page, publish the page by clicking the Publish button.
The Bottom Line
This article shows how easily you can create a listing page with the Elementor Loop Builder. Elementor Loop Builder empowers you to create dynamic and visually stunning listing pages without needing to code or add-ons.
Whether you’re showcasing products, blog posts, or any other custom post type, the drag-and-drop interface and flexible customization options enable you to tailor your listings to perfectly match your brand and target audience.
