Special Discount up to 20% OFFTOP OFFER - WP Manage Ninja

Elementor experiments

Jan 21, 2023

serpple

Elementor experiments – 19 new features still in testing- Is it good or bad?


First, let me get the facts about these features and what they do. Is it good that 19 new features are still in testing? I will answer the question at the bottom.

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 experiments settings and check out the latest features.


Elementor experiments


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

The Elementor experimental features in the WordPress Dashboard under Elementor, settings, tab “experiments.”


Elementor experimental
Experiments settings

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 not yet finished. 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 that 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 or not and don’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 in the free version of Elementor 3.10?


Elementor Experiments 3.10
ongoing experiments

Elementor experiment features

FeatureStatus
Inline Font IconsBeta
Flexbox ContainerBeta
Nested ElementsAlpha
Lazy Load Background ImagesAlpha
Save as DefaultBeta
Page TransitionsBeta
Loop BuilderBeta
Optimized DOM OutputStable
Improved Asset loadingStable
Improved CSS loadingStable
Accessibility ImprovementsStable
Additional Custom BreakpointsStable
Hide native WordPress widgets from search resultsStable
Default to New Theme BuilderStable
Landing PagesStable
NotesStable
Font SubmissionsStable
Scroll SnapStable

Nested Elements / Status Alpha

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

You can dramatically improve your page load times and user experience by activating this experiment. 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.


Save as Default / Status Beta

Elementor introduces the Save as a Default feature, allowing users to improve their design workflow by customizing how elements appear on their website.

With this update, users can adjust every element’s default settings, including placeholder images, text, colors, and fonts.

The new default settings can be carried over to any kit or template that is imported/exported.


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.


Flexbox Container / Status Beta

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.


Elementor Flexbox Container

Page Transitions / Status Beta

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 Beta

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

If you have a responsive website, you may need to use different CSS rules for different devices. 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.



Hide native WordPress widgets from search results / Status Stable

When you are writing a post in WordPress, you can find widgets to help you by looking in the “WordPress” dropdown at the bottom of the editor panel. Widgets can help you add images or videos to your post or a list of links.


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!


Elementor Notes
Elementor Notes

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 and is active by default on new websites.


Conclusion: Elementor experiments – Is it good or bad?

Well, I think it’s not ideal. If a feature exists, people will use it like the Flexbox Container, but please be aware the Flexbox Container still has the status of Beta. Elementor says the Flexbox Container is now stable and ready to use on production websites. I would still be cautious.

It’s okay to use these experimental features on staging sites.

Flexbox Container enormously improves the page speed score. It’s tempting to use them already, even in the stage of Beta. The layout shifts are significantly reduced compared to the layout element section, columns, and inner section in Elementor. Your client will love the result.

Although 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 experimental settings? Please comment below or send me an email at info@edywerder.ch.

Edy Werder, founder of Edyrecommends.com

About the Author

Edy Werder is a driven solopreneur with IT and accounting expertise. He has built a successful career in both fields, using his extensive knowledge and skills to help businesses navigate the complexities of finance and technology.

In addition to his work as a solopreneur, Edy is also an avid blogger in the IT and WordPress niche. He shares his insights and expertise with others through his blog, providing solutions to problems and buying tips.

Edy often indulges in his passion for football when he’s not working or blogging. As a dedicated fan, he loves to follow his favorite teams and players, staying up-to-date on the latest news and scores.

Divi Anniversary Sale

Full Disclosure

Any purchases made from clicks on links to products on this page may result in an affiliate commission for me.

As an Amazon Associate, I earn from qualifying purchases
Als Amazon-Partner verdiene ich an qualifizierten Verkäufen

1 Comment

  1. RG

    Very detailed article revealing the small technical details for Elementor Pro builder.

    Reply

Submit a Comment

Your email address will not be published. Required fields are marked *