Introduction
Elementor is one of WordPress’s most popular page builders. It appeals to non-technical users with its user-friendly drag-and-drop interface and technically proficient users, such as the winner of the 2022 Elementor Showoff Competition, ImproVR.
Elementor has continuously improved its performance and functionality with the release of versions 3.8 to 3.11 between 2022 and February 2023.
This section highlights some of the significant additions.
Key Features
Flexbox Containers
The Elementor container was introduced as an alpha experiment in Elementor Core 3.6.0 and has changed how we build websites with Elementor. It addressed the long-standing issue of “div-ception” in Elementor.
Previously, we had sections and columns which had lots of limitations such as:
Limited to only adding 10 columns to a section
Before with sections and columns, we were limited to only 10 columns per section. However, with the new flexbox containers, this is no longer a constraint, and you can add as many inner containers as desired.
Lots of unnecessary wrapper divs
The Elementor Experiment, “Improved DOM Output”, reduced some unnecessary wrapper divs, but Sections and Columns still carried extra divs. For example, a single boxed-width section with two columns and no widgets consisted of six (6) divs
<section class="elementor-section">
<div class="elementor-container">
<div class="elementor-column">
<div class="elementor-widget-wrap"></div>
</div>
<div class="elementor-column">
<div class="elementor-widget-wrap"></div>
</div>
</div>
</section>In contrast, using the new containers, a single boxed-width container with 2 inner containers requires only four (4). In some instances, you can even eliminate the inner containers and add widgets directly to the outer container.
<div class="e-con-boxed">
<div class="e-con-inner">
<div class="e-con"></div>
<div class="e-con"></div>
</div>
</div>Support for More Dynamic Tag Controls in Widgets
With the release of Elementor 3.7 Pro, dynamic tag controls were significantly expanded for Elementor widgets such as Forms, Gallery, Countdown, Portfolio, Media Carousel, Posts and Slides. This eliminates the need to use third-party plugins, like Dynamic.ooo’s Dynamic Content for Elementor, for adding dynamic tags to forms and other widgets for Elementor Pro users.
Loop Builder
The introduction of the Loop Builder as a beta experiment in Elementor 3.8 was a highly anticipated and significant update. In some cases, it has replaced the need for plugins like Ele-Custom Skin and Crocoblock’s JetEngine. A built-in loop builder for posts and WooCommerce products has been a much-requested feature among Elementor users for a long time, and its inclusion is greatly appreciated.
Save as Default
The “Save as Default” feature, introduced in Elementor 3.9, may have flown under the radar but is a welcomed feature. It allows the customisation of options such as default units as ems in padding and margin, default unit as rem in typography, more meaningful placeholder text in heading widget other than Lorem Ipsum, and saving it as a default setting.
Custom Units
One of my favourite updates in Elementor 3.10 was the introduction of Custom Units. This feature was previously only available in page builders like Bricksbuilder. Previously, Elementor users were limited to using standard units such as px, em, rem, vh, vw, % for widths, padding, margin, etc. But now, additional units like dvh, auto, fit-content and CSS variables can be defined.
Another cool use case is the ability to natively implement clamp functions for fluid-typography. Imran from Web Squadron has created some informative YouTube videos on how to achieve fluid typography with Elementor.
Nested Tabs
Elementor 3.10 introduced the highly anticipated Nested Tabs feature. This eliminates the need to create separate templates and add them as shortcodes to tabs or rely on plugins like Crocoblock’s JetTabs. The ability to edit everything directly in one place is a significant improvement. We can now easily nest tabs within tabs, offering even greater flexibility.
Loop Carousel
The release of Elementor 3.11 Pro introduces the Elementor Loop Carousel, a convenient feature for displaying WooCommerce products on the homepage. Previously, third-party plugins like Ele-Custom Skin Pro or Crocoblock’s JetEngine were necessary to create post/product carousels. With this new feature, however, we can now natively do it within Elementor, reducing the need for One More Plugin!
Elementor Roadmap: 2023 and beyond
On the 23rd of January 2023, Elementor unveiled their 2023 roadmap featuring some really welcomed features to streamline our workflow. These include the Mega menu, improved Editor Menu UI, nested widgets like accordions and carousels, loop grid filters and CSS Grid!
What are your thoughts? Which features are you most eager to see added?