Introducing Elementor 3.21: Recursive Sorting Queries for Lists, Performance Improvements, and More!

Version 3.21 includes the ability to create lists for categories and tags, as well as significant performance improvements and exciting new AI features.

This release focuses on specialized design tools and performance enhancements that reduce load times and improve performance ratings. Category Query is a new tool for listing websites that displays categories and tags in a circular grid and carousel.AI Copilot is another exciting beginning step that enables website creators to build websites faster and more efficiently using artificial intelligence. This release will also accelerate websites with three major performance improvements.

Recursive Sorting Queries for Lists 

Today, I'd like to introduce you to another popular dynamic content website builder, Elementor version 3.21. So far, it is possible to use Loop Grids and Loop Carousels to display products and articles consistently through Loop Templates. With category lookups, categories and tags can be displayed as items in Loop Grids and Carousels. For example, a clothing store could use the Loop Grid to display different clothing categories such as "Shirts", "Pants", "Hats" and "Casual Wear".

The Taxonomy Query provides advanced functionality for selecting which taxonomies to display and the order in which they are displayed. For example, you can select "Show All" and filter the depth of the displayed taxonomies to choose how many levels of subcategories to include in the list. This approach is recommended for sites with complex categorization schemes that contain multiple levels of subcategories. When building or managing sites with less complex taxonomies, you can select the "Manual Selection" option to choose which categories or tags to display in the list. Whether you choose "Show All" or "Manual Selection," the list can be sorted alphabetically or by ID number, in ascending or descending order. To ensure seamless compatibility of category queries with dynamic content-driven websites, it is fully compatible with third-party plugins such as ACF and Custom Post Types UI.

performance improvement 

With the update to version 3.21, the performance of the site will be dramatically improved. The new version includes three major enhancements that reduce load times and improve Google performance scores.

Optimized control rendering

The Frontend Performance Score consists of a number of different metrics that measure the loading time and efficiency of a website. One of the prominent metrics is Time to First Byte (TTFB), which measures the time between the first contact between the client and the server and the arrival of the first byte of information in their browser. By optimizing the way Elementor widgets are rendered in a visitor's browser, this release reduces the TTFB by 20%-30%.This is a significant improvement that has a significant impact on performance scores.

To activate the new feature, go to WordPress Control Panel → Elementor → Settings → Features and activate "Optimize control loading".

Cleaner code

Another way this release improves performance is by cleaning up the website code. Under the hood of a Web site, each element is embodied in the Document Object Model (DOM.) The DOM contains instructions (code) for how a browser renders the content and structure of a Web site. In general, if these instructions are written more efficiently, a visitor's browser will load content faster. This is why this version does not include markup when the text input is empty, thus optimizing the amount of code widgets generated. Therefore, if an icon box is used and the instructions are left blank, the widget will generate less code and produce cleaner DOM output.

Improved delayed loading of background images 

Background images are one of the most burdensome assets for browsers to load, and the hardest to optimize. Therefore, we're pleased that Elementor 3.21 improves upon our attempts in version 3.9 with a new approach to lazy loading of background images. This time, the activation experiment will effectively prioritize loading background images based on their size and position on the page. This allows the browser to load the image above the fold first (which is displayed in the viewport immediately upon loading) and then load the rest of the background images. Lazy loading of background images is another important reason to use containers to build websites, as it only applies to background images set for containers. To disable lazy loading on a specific background image, set the CSS class to "e-no-lazyload".

Starting with this version, this experimental feature will be active by default. To activate "Lazy Load Background Image", go to WordPress Control Panel → Elementor → Settings → Features.

AI Copilot - is a super-assistant for network builders

Elementor AI has evolved into the perfect personal assistant for website creators - with the launch of AI Copilot, an AI assistant that understands websites and suggests layouts and elements to add to the design, allowing one to create websites at a very fast pace. As with any good partner, copilot becomes more intuitive as you work together. Every suggestion accepted or rejected gives it insight into your personal preferences and style, so it can bring your ideas to life faster and present first drafts to clients and team members in minutes.

Functional and experimental updates

This release contains a large number of status changes for features and experiments. Some of these have been activated by default on all new sites, and others have become an integral part of Elementor and can no longer be activated or deactivated from the Features page.

• New site activated by default: category filter, lazy load background image.
• Existing sites are activated by default: grid containers.

Enjoy new categorized queries and higher performance with Elementor 3.21!

This version also includes Taxonomy Query for Loop Grids & Carousels, which lets you display categories and tags as loop items in your layout. The update to version 3.21 will also see a significant improvement in site performance, with the Time to First Byte (TTFB) metrics improving by 20%-30%, as well as the ability to clean up markup and the introduction of an improved lazy-loading background image feature.