TOP OFFER - Click HEREWP Manage Ninja - Summer Special Discount up to 20% OFF

Elementor experiments

Aug 23, 2022

Elementor experiments – 18 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 18 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 you just want to test out some new functionality, then head over to the Elementor experiments settings and check out the latest features.


Elementor experiments


This article covers the latest Elementor 3.7 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.

You find 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.7?


Elementor experiments
ongoing experiments

Elementor experiment features

FeatureStatus
Improved CSS loadingRelease Candidate
Inline Font IconsAlpha
Flexbox ContainerAlpha
Page TransitionsAlpha
Optimized DOM OutputStable
Improved Asset loadingStable
Accessibility ImprovementsStable
Additional Custom BreakpointsStable
Import Export Template KitStable
Hide native WordPress widgets from search resultsStable
Default to New Theme BuilderStable
Landing PagesStable
Color SamplerStable
Favorite WidgetsStable
Admin Top BarStable
NotesStable
Font SubmissionsStable
Scroll SnapStable

Improved CSS loading / Status Release Candidate

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 Alpha

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 Alpha

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 Alpha

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.


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 a lot of these bits, and it will take a long time for your computer to receive all of 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, making it load faster on your computer. 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.


Import Export Template Kit / Status Stable

Importing a kit is easy! Go to your site’s settings and find the import/export tab. Select the kit you want to use, and it will be added to your website. You can also export any elements from your site to use elsewhere.


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 with things like adding images or videos to your post or adding 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. Just click on the new “Landing Page” content type and start adding content. You can add images, text, and even videos. Elementor also includes built-in templates that you can use to get started quickly.


Color Sampler / Status Stable

This new color picker functionality allows you to choose a color from other elements’ settings. It can be helpful if you want to match the color of a text box or other element on your page to the color of a picture.


Favorite Widgets / Status Stable

If you want to keep a widget in the editor panel so you can easily find and use it again, you can mark it as a favorite. To do this, right-click on the widget and choose the “Favorite” option. It will then appear at the top of the editor panel, accessible at all times.


Admin Top Bar / Status Stable

This plugin adds a top bar to Elementor pages in the admin area. It can help organize your pages or for adding extra information or buttons to your pages.


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 all of 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 wish to 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 is there, people will use it like the Flexbox Container, but please be aware the Flexbox Container still has the status of Alpha, not even Beta. We don’t know if Elementor is going to change the feature; if they would do, it could break your site.

As an agency or freelancer working for a client website, you should definitely not use features still in the alpha stages. It’s a risk if you would use them. It’s okay to use these experimental features on staging sites.

Flexbox Container enormously improves the page speed score. It’s tempting to already use them even in the stage of Alpha. The layout shifts are greatly reduced compared to the current 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

The Flexbox Container feature has been in alpha testing for over six months and has not yet reached beta status. What could be the reason? No words from Elementor; we can only speculate.

What do you think about Elementor experimental settings? Please comment below or send me an email at info@edywerder.ch.

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.

Premium Choice



Premium Hosting