stand for ukrainian independence image

Stand for Ukrainian Independence

Contribute
stand for ukrainian independence image
ivanova
Helena Ivanova
Content Writer
Updated on
Useful Resources

Elementor Loop Builder: Feature Testing and JetEngine Listing Comparison

Well, folks, it’s happened. Elementor has launched Loops (but it is still in Beta), and we have much to discuss. (To be clear, I will talk about Elementor Pro version 3.8). So, it’s not the version overview but an attempt to test a Loop Builder functionality and determine whether JetEngine Listings are out of business now. Also, what is the difference between them, and how to select when to use one or the other tool? I’ve tested both and will share a few screenshots and conclusions. 

Spoiler alert: JetEngine listings still have a lot of work to do. 

Table of Contents

Elementor Loop Builder Overview

It seems like Elementor makes a statement that it wants to be a full-fledged member of the world of dynamic websites by introducing Loop Builder. Apparently, this builder is strongly connected with the flex container introduction and works only inside it. It’s important to consider that both are still in Beta. 

Right after the Elementor Pro installation, you need to go to Elementor > Settings and activate both Container and Loop Builder; otherwise, those widgets will not be available.

What does Loop mean? 

But first, let’s define the starting point: what is WordPress Loop? In the most general meaning, it’s a WordPress code that outputs posts as long as the specified conditions are met. 

But in the context of Elementor Loop, Listings, Gutenberg Query Loop, or even the default WordPress archive, in most cases, we are dealing with the wp_query loop. The Query Loop shows what is being queried from the database under certain conditions. And, as the name suggests, results appear in the loop of the same template. 

This is an example of the simplest WordPress query loop:

<?php

// The Query
$the_query = new WP_Query( $args );

// The Loop
if ( $the_query->have_posts() ) {
	echo '<ul>';
	while ( $the_query->have_posts() ) {
		$the_query->the_post();
		echo '<li>' . get_the_title() . '</li>';
	}
	echo '</ul>';
} else {
	// no posts found
}
/* Restore original Post Data */
wp_reset_postdata();

In simple words, such loops are being used to display lists, grids, sliders (or other layouts) populated with posts (including pages, custom posts, media, etc.) and/or their meta fields within a template, common for all of them inside the loop. 

JetEngine uses not only the wp_query loop which gives it a huge advantage. 

The first impression

I’m testing the 3.8 version of Elementor, which already supports custom post types and WooCommerce products in particular. Well, it’s good news because now the Loop Grid can be used for many cases, not only for displaying blog posts. 

Before, Elementor Pro had only the Posts widget to display a grid of posts (default or custom), with just three predesigned templates to choose from. But now, we’ve got almost full control over every little detail and how it will be displayed. 

That’s why Elementor asks us to create a template after adding the Loop Grid widget. Don’t worry; you can create and edit it without leaving the page you edit. Have a look at the example of how to make the most primitive Loop Grid:

As you can see, it’s very fast and easy. You can customize styling: colors, fonts, paddings, margins, etc. As well as the query – exclude or include posts of certain categories or tags by IDs, select them manually, and so on. 

Except for the suggested widgets, you can use different ones. Those that support dynamic tags can be very useful and display content from certain meta fields. For instance, I’ve used the Icon List and Gallery widgets populated with dynamic data from custom fields in this example. And the source for the grid was a custom post type. Also, there are two grid templates on this layout:

Custom post types Elementor loop

Elementor Loop Builder query settings are very straightforward, though. You will not find complex filters here, and if you need really serious customizations, the only way to do it is to add the query ID and then hard code it using that ID in the functions.php file. Knowing PHP is a must for doing it. 

Have a look at the query settings:

Some limitations to consider

Such long-awaited features as a Loop Builder, naturally, raise great expectations. Of course, they might be very subjective; however, let me point out those I had. 

WooCommerce product grids

The first thought that came to my mind was about WooCommerce and custom-designed product archives. But, to put it short: Loop Builder doesn’t give you tools for doing that. Yes, it’s possible to show product titles and images, but something like the “Add to Cart” button will not work in the grid.

woocommerce product grid example

No equal height

Unfortunately, the Loop Grid layout doesn’t have the option to set up an equal height for column items. That’s why there can be things like this:

Elementor loop grid height

This particular case can be fixed with the help of a Masonry grid (which is available). But it will look extremely messy if there’s no border or shadow. 

No content length limit

Yes, you can easily add the Excerpt widget, and it will display posts’ excerpts. But I guess many of us are used to the fact that all the post grid widgets or plugins just take the specified number of words from the first lines of the post, and we don’t have to fill the Excerpt field unless it’s something specific – a summary, etc. 

So, I’ve tried the Post Content widget, but it doesn’t have an option for word limit, nor does the Loop Grid. I know this widget was initially created for making a Single Post template, and it simply inserts the content container. But it seems that it could have to try to get additional properties after the Loop Grid introduction. 

No carousel

There’s no option to turn the Loop Grid into a carousel and make it move. For example, if you want to showcase some articles or products. All it can operate are columns and rows. Well, I saw some bloggers creating carousels manually using tricky workarounds, which basically don’t have much in common with the dynamic Loop Builder. 

Very limited query filtering settings

As I’ve already mentioned, query settings are very simple and basically the same as the Post widget. So, the conclusion is that with this update, the Elementor team put the whole priority on the design toolkit expansion, which is quite logical for a visual builder. 

But high hopes of some Elementor fans that the Loop Builder will put many plugins out of business were dashed. 

Just a few examples: with the Elementor Loop Builder, you still can’t query terms, users, comments, or filter dynamic data displaying via callbacks. It doesn’t replace a proper WooCommerce product grid builder and doesn’t work with third-party data via REST API. 

When JetEngine Supercharges Elementor 

Some JetEngine unique features for dynamic data rendering 

Let’s look at just a few features that make JetEngine such a powerful plugin in the field of rendering dynamic data fields. I will not talk about all of them, but those that can and will definitely expand and enhance Elementor and Elementor Pro functionality.

JetEngine Listings 

In JetEngine, Listing is a custom WordPress loop where you can modify everything, from query settings to design. They can be reused anywhere on a website, also with adding additional conditions – so such loops will be even more tailored for the particular page and goal. 

The unique feature of JetEngine Listings is that they can be nested. But it’s important to say that common sense should be applied here, and nesting several big listings will not be good for website performance. Posts, terms, users, repeater fields, or Query Builder can be chosen as the listing source. 

jetengine listing source

Then, you have quite extensive query settings that can be layered. In addition, you can add the Custom Query as a filter. 

And finally, you can use macros to refine the query

Query Builder

Without any exaggeration, Query Builder (as a part of JetEngine) is an extremely powerful tool with the help of which you can get almost any data: posts, comments, users, WooCommerce products (in the initial form that WooCommerce itself works with them), content from another website received via REST API, data from any database tables or even custom SQL queries. It gives it a huge advantage. 

JetEngine query builder

Query Builder works on the back end, so it’s not a visual builder because it offers so many options that it would not be possible to make a drag-and-drop interface for it. But it’s still very user-friendly. You can tweak every little detail in your custom query and use it as complex conditional rules for your future listing.

Custom queries (made in the Query Builder) can be the source for Listings or additional filters for the query. First, go to JetEngine > Query Builder, and add a custom query with all the settings. 

Then, create a JetEngine Listing (which by itself has many querying options and features), and stack your custom queries previously created in the backend or use it as a listing source. 

Overall, the level of flexibility in generating dynamic content is incredible. It has nothing in common with simple widgets, where you can choose only categories, tags, post types, or user roles. Here, you can combine, filter, and overlap results and use all the power of creativity. 

Filter field output 

While creating Listings or just making an individual layout, we deal with the Dynamic Field Widget (or Block, in Gutenberg). The powerful feature that allows you to filter and customize data is called Filter field output, and it has a huge list of different callbacks.

Look at the list, and that’s not all:

dynamic data filtering JetEngine

Dynamic Map Listing module

JetEngine has a Map Listing module that must be switched on before using the functionality. Also, the relevant map custom fields should be created and filled to have the data to fetch. But following the instructions, it’s not difficult to do. And voila, you have the map listings just like on Airbnb. 

JetEngine map listing
Source: Dynamic template for property rental

Dynamic Tables and Charts modules

Dynamic tables populated with data from custom posts and fields can be priceless for many projects. So, JetEngine has a module for this, too. Check out the Dynamic Tables feature and see how it works. And, of course, you can apply the powerful JetSmartFilters plugin to filter and sort their content. Also, create beautiful charts using the website’s data. 

dynamic tables JetEngine

Dynamic Listing Calendar

You don’t have to embed Google Calendar with ugly links to display the events because it doesn’t look as beautiful as it should be on the website. Instead, you can form it dynamically using the events already added to the website. Switch on the Calendar module and follow the instructions. 

Summary

I’m not comparing Elementor and JetEngine in any way because the first is a visual builder, and the second is a tool for dealing with dynamic data using Elementor (or Gutenberg) builders as a basis. In contrast, JetEngine or the whole Crocoblock plugin collection is not going to become website builders or replace them. 

What we are talking about and slightly comparing now is the custom query managing and displaying functionality of both plugins for highly dynamic websites, where the creator wants to have not just some static pages and a blog.

Elementor Loop Builder is made for creating nice layouts and more flexibility. While JetEngine is all about advanced tasks and juggling dynamic data, placing exactly what you want in a particular place for particular users and under certain conditions. 

So, Elementor remains the most popular visual builder on the market, and JetEngine – the most powerful plugin for dealing with dynamic data, bolstered with other JetPlugins for more specific tasks.