Elementor Experiments and Features – What are the ongoing experiments and stable features?

First, let me get the facts about these Elementor experiments and features and what they do. Is it good that Elementor offers features to test as experiments?

Elementor is an excellent tool for creating websites. However, some of its features are still in testing. As a result, some features may not work correctly.

Elementor, the WordPress page builder plugin, offers a range of experimental features you can access before they’re officially released. As these features are still developing, they will likely change and evolve.

However, if you want to get a sneak peek at what’s coming up in Elementor or to test out some new functionality, head over to the Elementor features settings and check out the latest features.

This article covers the latest Elementor 3.12 release, I will update the article when there is a change to the experimental features in Elementor in future releases.

You can find the Elementor experiments and features in the WordPress Dashboard under Elementor, settings, tab “Features.”

The features are structured in different statuses.

• Alpha
• Beta
• Release Candidate
• Stable

What do they mean in plain English?

An alpha release is a test version of a software program that is unfinished. It might have some features that are not working correctly or missing.

A beta release is a test version of a software program that is almost finished. It has most of the features the final version will have, but it might still have some bugs.

A stable release is a final version of a software program that has been tested and fixed for errors.

A release candidate is a testing software version almost ready for release. It is used to find and fix any last-minute bugs before making the software available to the public.

Elementor Experimental toggle settings

• Default
• Active
• Inactive

What does “Default” mean?

The default setting can be Active or Inactive, which Elementor assigns after each experiment and release. The default value may vary based on the site’s freshness or age.

I recommend setting each Elementor Experimental setting to active or inactive. Then you know if the setting is active and doesn’t depend on Elementor’s choice.

The green indicator on the left side means Elementor sets the feature active when set to default.

What are the ongoing Elementor experiments features

Elementor experiments & feature table

Editor Top Bar / Status Alpha

Discover a tantalizing sneak peek of the new Editor. Powered by React, this modern and intuitive tool features sleek and beautiful design elements paired with experimental layouts, such as the Top bar. Get ready for a more efficient, faster, and visually exquisite experience.

Menu / Status Alpha

Exciting news! You can now create stunning mega menus featuring new nested capabilities. This is perfect for websites with intricate navigation structures and distinct designs. With mega menus, the possibilities are endless!

Nested Elements / Status Beta

requires the Elementor Flexbox container to be active

Nested Elements is a new way to design websites by placing any element inside another using Flexbox Containers.

Over the upcoming releases, the nesting capability will be introduced into several existing widgets, such as the Carousel, Accordion, Tabs, and more.

The Renewed Tabs Widget is the first Elementor nested widget, and it unlocks design flexibility. With this widget, you can adjust the layout and positioning of tabs; add icons to tab titles; use Flexbox Containers in content areas; and choose when Tab displays should automatically become an Accordion based on device size.

Lazy Load Background Images / Status Alpha

Activating this experiment can dramatically improve your page load times and user experience. Lazy loading of images not currently in the viewport helps reduce your page’s total size and enhances speed, allowing content to be loaded faster.

This is especially beneficial for users accessing your site on slower connections and increasing their overall satisfaction with their browsing experience.

Improved CSS loading / Stable

CSS (Cascading Style Sheets) is a style sheet language used for describing the presentation of a document written in a markup language. A style sheet is a collection of rules that tells a web browser how to display a document written in HTML or XML.

The improved CSS loading in Elementor ensures that all CSS files are loaded in a shorter time, reducing the time it takes for a web page to appear. It also improves the overall performance of WordPress websites.

Inline Font Icons / Status Beta

Using Font Awesome, you can load SVG icons inline. It will improve the performance of Elementor-built websites as it will no longer be necessary to load an additional file.

SVG is a standard for vector graphics that allows for more precise control over the appearance of icons than bitmap formats like PNG or JPEG. Inline SVG means that the SVG code is included directly in the HTML document rather than being loaded from a separate file. It improves performance because it results in fewer requests to the server.

Grid Container / Status Alpha

Creating pixel-perfect layouts has never been easier with the customizable grid feature that allows you to place elements exactly where you want them. With the option to activate the CSS Grid on container elements, you can easily create dynamic and responsive designs.

Whether you’re a seasoned web developer or a beginner, utilizing the CSS Grid option will elevate your designs to the next level. Say goodbye to the frustration of aligning elements perfectly and embrace the power of customizable grids.

Flexbox Container / Status Release Candidate

Flexbox is a CSS layout feature that provides a more efficient way to lay out items on a page to adapt to different screen sizes. With Flexbox, you can control the width, height, and order of each item on the page, which makes it ideal for responsive design.

Flexbox Container will replace sections, columns, and inner sections.

Page Transitions / Status Stable

A page transition is a smooth animation that happens when you go from one page to another on a website. It makes the page flow feel nicer and can also be used to give time for video backgrounds or other assets to load before they are displayed. Elementor includes some preset styles for page transitions, but you can also create custom combinations. You can even use preloader icons to let visitors know something is loading.

Loop / Status Stable

Elementor 3.8 Pro will introduce the first phase of the Loop Builder, which enables users to create and design the main item for repeating content (i.e., loops), such as listings, and customize its layout on the page.

The first phase of the Loop Builder includes creating the main item for posts and custom post types. Future updates will include full WooCommerce support and additional capabilities to enhance your website.

The Loop builder requires the Flexbox Container.

Optimized DOM Output / Status Stable

The DOM Output is a way to make sure that websites look good on different devices. A website comprises many other pieces, and the DOM Output ensures they all fit together correctly.

When you use Elementor to create a website, it will automatically generate HTML code to display your website content. This HTML code will include many wrapper elements, slowing down your website’s loading time.

The optimized DOM output experiment improves performance by reducing the number of wrapper elements in the HTML. It should help your website load faster for your visitors.

Improved Asset loading / Status Stable

When you visit a website, the computer that hosts the website sends bits of information to your computer so that you can see the website. Sometimes a website will have many of these bits, and it will take a long time for your computer to receive them. It is called a “page load time.”

Some websites try to make their pages load faster by sending only the bits of information that you need to see immediately. The website will send fewer bits at a time, loading your computer faster. It is called “optimized assets loading.”

Accessibility Improvements / Status Stable

Some people might find it hard to use websites because of disabilities like the inability to see very well or because they can’t use a mouse. Web accessibility means no barriers for these people, so they can still use the website. It makes the internet more inclusive for everyone.

Additional Custom Breakpoints / Status Stable

You may need to use different CSS rules for different devices if you have a responsive website. It is done with breakpoints. Breakpoints are points where the screen’s width is tested, and a specific set of CSS rules is applied. You may also need to add additional breakpoints to your design.

You can now manage these Additional Breakpoints in the Site Settings. In the Site Settings, you can add new breakpoints, delete old ones, or change the order in which they appear. You can also test how your website looks on different devices by clicking on the buttons at the top of the window.

Default to New Theme Builder / Status Stable

Entering the Theme Builder through WP Dashboard > Templates > Theme Builder automatically opens the New theme builder. You can still view the WP-styled version of the screen with a simple click of a button.

Landing Pages / Status Stable

Creating a landing page with Elementor is easy. Click on the new “Landing Page” content type and add content. You can add images, text, and even videos. Elementor also includes built-in templates that you can use to get started quickly.

Notes / Status Stable

Notes is a tool that helps you communicate with others while working on a website. You can leave comments and replies on the website, and everyone who is working on the website will get an email notification when someone leaves a new comment. This way, you can all work together more easily!

Font Submissions / Status Stable

If you save all your submissions, you’ll never lose them again! It is handy if you’re working on a project and must keep your submissions together.

Scroll Snap / Status Stable

Scroll Snap is a feature that lets you stop the scroll of your page when the section reaches a defined point in the viewport. It is helpful in full-height sections, like slides, where you can pause the user before they scroll to the next section. Scroll Snap is a stable experiment active on new websites by default.

Conclusion: Elementor experiments – Is it good or bad?

Well, I think it’s a good thing. You can test them like the Mega Menu or Loop Builder. Elementor has to support many third-party Addons and ensure the new features are compatible. By toggling them on or off, you are free to try them.

We benefit from Elementor’s experimental features; you can use them to test your website. It’s kind of like a roadmap. As far as I know, no other software offers such features in-built for testing. It’s unique

What do you think about Elementor experiments & features idea? Please comment below or send me an email at info@edywerder.ch.