✅ 🚀 Elementor v3.6.0 Beta 5 Release 🚀

[shilo-ey]

Beta 5 UPDATED - PLEASE READ BELOW!

Hi Elementor Beta Testers 👋,

We are incredibly excited to introduce our new beta version, Elementor 3.6, which includes new features that will transform the way you build websites with Elementor.

This version includes the long awaited Flexbox Containers, which enables you to build more complex and lightweight layouts with improved performance, as well as additional features that accelerate the way you set up new websites. Elementor 3.6 includes:

• Flexbox Containers Experiment
  -- Section to Container Converter
• New Capabilities in the Import / Export Feature
• New Onboarding Wizard
• Ability to rearrange global colors and fonts
• Performance Improvements
  -- Lazy load carousels
  -- Optimized DOM Output Experiment - removed elementor-section-wrap

Before testing this version, please make sure you are using:

• Elementor Pro 3.6.3+ (if needed)

Introducing Flexbox Containers - Harness the Power of CSS Flexbox in Elementor [Experiment]

Flexbox Containers are a new lean layout structure in Elementor, that allows you to achieve pixel-perfect responsive designs, and highly advanced layouts, quickly and with a much slimmer markup, which reduces the DOM output and improves performance significantly.

With Flexbox Containers, you can place widgets directly inside a Container, as well as nest Containers. Additionally, you can improve the user experience by making the entire Container clickable by adding a link to it. Then, you can control the layout and distribution of elements within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed.

Following several months in the Dev Edition, and implementing a lot of feedback from the community, Flexbox Containers are introduced as an alpha experiment, and should be used with caution, and not on a live website. When the experiment is turned on, you will be able to add new Containers to a page, instead of Sections, Columns and Inner Sections. You’ll also be able to add Containers to an existing page that was previously built with the section-column layout.

Please Note: If you deactivate the experiment, every Container you created will be removed from your website, you will be able to return them if you reactivate the experiment and restore a previous revision.

Below you will find the controls that adjust the Container’s layout, and their behavior:

Container:

• Content width - will the elements in the container be boxed, or take up the entire width of the container.
• Width - what will be the width of the container in PX / % / VW
• Min Height - what will be the minimum height of the container in PX / VH
• Overflow - if the content of a container does not fit within the viewport, should the overflowed content be hidden, or visible, causing horizontal scrolling.
• HTML tag - the ability to wrap an entire container and add an HTML tag to it, including the ability to hyperlink an entire container.

Items:

• Direction - what direction should widgets in the container adopt - row, row reverse (where the main axis is horizontal and the cross axis is vertical), column, or column reverse (where the main axis is vertical and the cross axis is horizontal).
• Align Items - how will widgets arrange themselves along the cross axis - flex-start, center, flex-end, or stretch
• Justify Content - how will widgets arrange themselves along the main axis - flex-start, center, flex-end, space between, space around, or space evenly.
• Elements Gap - what is the spacing between one element and another (widget or another container).
• Wrap - will widgets be forced to remain in one row or spill over to the next one. Wrap will break the line where widgets no longer fit on the screen, whereas no-wrap will keep all widgets in one row.
• Align Content - if wrap is selected, an additional control is added to determine how widgets distribute within the container - default, center, flex-start, flex-end, space between, space around, or space evenly.

Individual element (widgets and inner containers):

On the individual widget within the Container, users will able to determine the following from the Advanced tab on the individual widget

• Align Self - how should this widget arrange itself along the cross axis - flex-start, center, flex-end, or stretch.
• Size - how will this widget behave when it has room to grow or needs to shrink to fit in the screen.
• Order - where along the order of widgets should this one appear - start, end, or custom.

In addition, the Width and Position controls have been made more accessible, and are located in the layout section in the advanced tab of a widget, as a result, the positioning section has been removed and the inline position will not function inside containers.

Convert your Legacy Layout (Section-Column) to the New Container Layout

To ease your transition from the Section-Column to the Flexbox Container layout in existing pages, you can use the converter to save valuable time, and avoid the redundant task of dragging in all your widgets and content.

The converter can be found under the layout tab when you click on a section, or in the page settings (cogwheel icon) to convert an entire page. Clicking 'Apply' will create a new duplicated container beneath the chosen section, with all the original content inside in its appropriate position.

To enjoy the full benefits of Flexbox Containers, we recommend reviewing the resultant Container, and exploring how the layout can be further improved. Once you’re satisfied that all the content has been optimally converted from the Section to your new Container, simply delete the Section.

Here’s how to test it:

1. Go to Elementor > Settings > Experiments and activate the “Container” experiment
2. Create a new page and start building your design.
3. Add a new Container with the plus button in the Editor and choose your desired structure, or drag the Container widget to the Editor.
4. Drag in a few widgets, and adjust their layout and direction within the Container using the controls in the Container’s layout tab.
5. Adjust the order of the widgets within the Container and adapt it to each device.
6. Create a Container with three
7. Try using the HTML Tag: a to wrap a container as a link
8. Try using Overflow: auto option to add scroll when explicit width is set to a container (horizontal scrolling)
9. Try out the different items ordering capabilities
10. Try positioning a single widget, by clicking the widget and in the advanced tab, align self.
11. Make sure your design is consistent both on the front end and in preview
12. Make sure your design is responsive and looks as you would expect it to on various devices

New Capabilities in the Import/Export Feature

The Import Export Template Kit feature accelerates the process of creating a website significantly. This feature allows you to export the Content, Site Settings, and Elementor Templates (Theme Parts for Pro users) from one website and import it to another, and also allows you to import a full website kit to your website.

To improve your process further, the Import / Export process now includes:

• Plugin Support in Import/Export Site Kit - instantly export all the plugins a website or kit uses, such as WooCommerce, and import it to another website. When you begin your import/export process, you will be able to select which Content, Site Settings, Elementor Templates and Plugins you want to include.
• Detailed Import/Export Summary Screen - view all of the components of the Kit you choose to import and export will be reflected in the detailed Summary screen.
• Import Dynamic References - link together all of the dynamic references throughout your website, instead of having to rewire all of your dynamic references when you import a kit. Dynamic references can be found in Popup dynamic tags, Lightbox dynamic tags, Template widget occurrences, Menus, URLs, etc.

Here’s how to test it:

1. Go to a site that you wish to Export and access its WordPress dashboard
2. Go to Elementor > Settings > Experiments and make sure the Import / Export Kit experiment is active
3. Make sure this site uses publicly available plugins (non-premium ones, only WordPress repository hosted plugins) other than Elementor and Elementor Pro
4. Go to Elementor > Tools > Import / Export Kit and click Export
5. Step 1- Go through the first phase and select which components to export
6. Step 2- Make sure to include all relevant plugins
7. Once the export process is done make sure that the summary screen is presented correctly
8. Create a new site and install Elementor (and Elementor Pro if available) only
9. Go to Elementor > Settings > Experiments and make sure the Import / Export Kit experiment is active
10. Go to Elementor > Tools > Import / Export Kit and click Import
11. Upload the zip file you downloaded and start the import process
12. Select the relevant required plugins and proceed with the process as instructed in the interface
13. Once the process has been completed please make sure the summary screen introduces the relevant content and every link from the summary screen link to the correct place
14. Redo this process for various situations and states of plugins

New Onboarding Wizard - Get Started With Your Website Efficiently

The new onboarding wizard will enable you to set up your next website in a truly friendly and efficient manner, allowing you to get started quicker. Throughout the wizard, you will be able to configure the basic configurations of your website including setting up the ‘Hello’ theme, adding your site name, and uploading your logo. Then, you will complete the wizard by choosing whether you want to start with a blank canvas, or import one of Elementor’s full website kits.

Here’s how to test it:

1. Create a fresh WordPress installation and install Elementor 3.6 Beta
2. Once activated you will be directed to the Onboarding wizard screen that will guide you through the basic settings needed when creating a new site
3. Make sure you complete this flow and try creating a site from scratch with the blank canvas, or using one of the website kits.
4. Make sure the settings are presented correctly in your site (logo, site name, etc...), in Site Settings > Site Identity menu, and on the WordPress dashboard Settings screen

Rearrange your Global Colors and Fonts

One of the first steps you take when building a website is setting up your design system, choosing the colors and fonts the website is going to have. With Global Colors and Fonts, in the Site Settings, you are able to easily set up your 4 system colors and fonts (Primary, Secondary, Text, and Accent) and add your custom ones.

Up until now, there was no clear distinction between system colors and fonts and custom ones, and any time you would add another custom color or font, it would take the last place on the list. But sometimes, you want to change the order of your fonts and colors. With this update, the separation between system colors and fonts and custom ones will be clearer, and you will be able to rearrange their order. For example, if your website’s custom colors include various shades of pink and blue, you can arrange all your pinks in a row, and all your blues in a row in the Global Colors under Site Settings. Additionally, you will also be able to change the position of your system fonts and colors, for example, you can position your Secondary font on top of your Primary one in the Global Fonts under Site Settings.

Here’s how to test it:

1. Go to Elementor Site Settings and click on the Global Colors section
2. Make sure all of your global colors are visible and work as expected
3. In system colors, hover over the #hex (color box) and to expose the dragging button
4. Drag the color up or down to the desired position within the system colors
5. Follow the same directions in Custom Colors
6. Please create a new global color, and after that, try to delete it
7. Try to drag a color from the custom section to the system section, and validate that you can’t drag it from one section to another
8. Follow the same instructions with the Global Fonts section
9. Make sure everything works as expected in the Editor and in the front end

Performance Improvements

Lazy Load Added to Carousels

Lazy load empowers you to improve performance on your website by only loading the content that is immediately visible and necessary and loading the rest as users scroll and the content becomes visible. With the new Lazy Load control in the Image Carousel widget and Background Slideshow feature in every section, your website will load faster.

Optimized DOM Output

The Optimized DOM Output Experiment has been extended, to remove the elementor-section-wrap

---

More Improvements

• New: Introducing Flexbox Container element as an alpha status experiment
• Tweak: Removed elementor-section-wrap by adding it to the DOM experiment ([DEV 3.6] Now that we have the Container, Section-Wrap Needs to Go #16950, Would you please consider removing outdated property prefixes? #10633)
• Tweak: Updated Google Fonts list (Please add JetBrains Mono to Google Fonts list #13501, 🚀 Feature Request: Add Outfit font to Google fonts #17930, Google Font Update #16516)
• Tweak: Allowed rearranging global colors and fonts (global colors - rearrange possition of the saved colors #12203)
• Tweak: Adding Responsive option to Text Stroke (Text stroke responsive ability #17212)
• Tweak: Added responsive capability to Icon Position control in Icon Box widget ([Improvement] Icon Box widget - allow icon to stay on the left/right when on mobile #3040)
• Tweak: Updated eicons library to v5.15.0
• Tweak: Added an option to Import and Export WP repository plugins as part of the Kit content
• Tweak: Added an option to Import and Export specific Custom post types as part of the Kit content
• Tweak: Added an option to change the color of the navigation dots in Image Carousel widget
• Tweak: Added an indication when a widget is added to the Favorites section
• Tweak: Added a deprecation notice for PHP 5.6 in WP dashboard
• Tweak: Added Difference, Exclusion and Hue to Column and Section blend mode options
• Tweak: Add border options in Image Box widget
• Tweak: Removed legacy style tab in Elementor dashboard settings screen
• Tweak: Prompt the user permission to allow unfiltered file uploads in Import Template flow
• Tweak: Promoted some experiments to Stable status
• Tweak: Navigator appears by default when loading the editor for the first time
• Tweak: Made typography weight strings translatable
• Tweak: Adjusted the inline icon control for design flexibility
• Tweak: Adjusted the Document settings import prompt texts to be more friendly
• Tweak: Adding Kit Library to the Finder
• Tweak: Adding Import Export to the Finder
• Tweak: Added WordPress menus to Export / Import Kit flow
• Tweak: Added Lazy load option to Image Carousel widget
• Tweak: Added Lazy load option to Background Slideshow
• Tweak: Added informative summary screen to Export / Import Kit flow
• Tweak: Added focus state and description on the play icon in Video widget
• Tweak: Added dynamic tag controls to Menu Anchor widget
• Tweak: Added dynamic tag controls to Image Carousel widget
• Tweak: Added dynamic tag controls to Icon Box widget
• Tweak: Added dynamic tag controls to HTML widget
• Tweak: Added a reusable button trait
• Fix: Image size with a link shrunk in Image widget (Image Widget - Won't grow to 100% width when it also has a link forcing it inline-block #15088, Setting "custom URL" to SVG image shrinks it #12432)
• Fix: Missing escaping for WordPress dashboard strings (props @rodolphebertozzo)
• Fix: Widescreen breakpoint values affect other devices in the Editor preview in some cases
• Fix: Dynamic references are not being reassigned in Export / Import Kit flow
• Fix: System info file displays inaccurate WP memory limit
• Fix: Widget appears empty while using PHP 8.1 in Posts and Posts archive widgets
• Fix: Lower custom breakpoints didn't inherit upper breakpoints values in frontend
• Fix: Gradient background doesn't look correctly on edit mode while using global colors
• Fix: Dev Edition notice appears inside the Form Submission window
• Deprecated: See all deprecations to this version in our Developers Deprecations Post

---

Make An Impact: Share Feedback Before Features Are Released

We’re always looking to get to know Elementor customers on a deeper level. If you’re interested in meeting with our team and sharing your insights, feedback, and feature requests you’re welcome to sign up for some quality time with us here. Or download Elementor’s Dev Edition. Talk soon!

How to Install the Beta Version

If you still haven't enabled beta testing in Elementor, please follow these steps:

• Go to Elementor > Tools > Versions.
• Enable the beta tester feature.
• Go to the Dashboard > Updates and update to the latest beta version.
• You can also download the new version here:
  downloads.wordpress.org/plugin/elementor.3.6.0-beta5.zip

Notes

For bugs and remarks, please reply with a comment on this issue here on GitHub.
Please keep this related to the Current beta Only! any other issue or feature request, feel free to open a new issue.

Designated time for release: March 23, 2022 (Estimated)

Many thanks for your support and help!
Cheers,
Elementor Team

[pauserratgutierrez]

First of all, you did an amazing work with the container! 🚀

I want to suggest something. We have the ability to set the direction that the elements inside a container will follow. This is great, but obligates anyone to add multiple containers to create stacked rows and columns. Here's an example:

To avoid this multiple container need, I suggest to have a new option on the main conteiner that triggers a break when a number of elements is reached. In my example I would use "Break when elements reach: 2", so when the container automaticly detects 2 elements (Monday, 13:00 - 16:00) a break will happen and the next 2 elements will be displayed in the next line, and so on.

[pauserratgutierrez]

What will happen if the Exported Kit has Premium or Paid plugins? Will them be installed too?
I would also know if this new Importing process also imports configurations such as all Woocommerce products, with it's thumbnails and variations.

[pauserratgutierrez]

I find the rearranging of colors and fonts very useful!

But I don't understand why there needs to be a difference between system and custom fonts or colors. In my opinion Elementor needs to get rid of that System thing. A website shure needs default things to display dummy content or being a fallback utility in technical cases like if the user erases something. But I personally don't like having there System colors that I can't get rid of but change.

I suggest making this dafault System things automaticly apply if no other custom color or font is found. When the user goes to custom colors and fonts for the first time, it should be empty and encourage him to add some. As soon as the user adds some, get don't use the default System ones but the defined ones by the user.

I thing the same about the System Default Kit automaticly created on any Elementor site. We can't get rid of it. The system should have it internally, but encourage the user using an amazing Wizard with steps to customize his kit, with a custom name. Would also bee cool to be able to have multiple kits and let us choose which one we want to have active.

I personally don't like having System things showing. I want any of my websites to be as easy as possible, sometimes clients don't know what they are doing and mess it up.

[fabigrafo]

Finally the Containers are here!!

The first thing I noticed in the 3.6 beta (also since Dev-Edition) when testing the container and old structure is that the page loads very slowly since the container experiment was activated. It seems like the CSS is loading very slowly. no other experiment is active and no other plugin except the correct Elementor Pro version.
It doesn't matter whether it's sections and columns or the new containers. The video shows a freshly created page with Elementor templates.

3-6-slowly.mov

Import/Export keeps getting better and more useful. But I agree with the question of the previous speaker, whether the content and settings are also taken over from the plugins?

And finally you can change the order of global colors and fonts. This has been requested since the introduction of 3.0 and now Elementor has finally implemented it - thank you very much!

New Onboarding Wizard is sure nice to have for new website. I not the biggest fan of Plugin setup pages, but Elementor looks good and efficient.

Otherwise, the new responsive options for stroke and icons should be emphasized. Good work, keep it up. Another tip from my side, the expected releases have now been postponed several times in all the last betas, maybe you can just plan a longer time right at the beginning.

But if it's so quick, that's great!

Great job guys! 👏

At the moment the only problem I found is that the width control of the containers does not work on breakpoints, it only works on the mobile (normal) breakpoint.

Also another detail would be to be able to have all the sides of the margins active, it is useful in some designs and that would be a limitation.

I will keep trying. Thanks

[pauserratgutierrez]

A quick question: Will all the Elementor premade sections, blocks, popups, entire websites and kits be automatically re-designed to use this new container?

[fabigrafo]

A quick question: Will all the Elementor premade sections, blocks, popups, entire websites and kits be automatically re-designed to use this new container?

Lots to do for the Elementor designers.. 😅

[MichaelDarko]

The container feature is great. I'm glad you didn't decide to make something half-baked and you're giving us the full power of flexbox. This is what I need as a professional designer and this is where Gutenberg is not going to go, because it needs to stay simple. Gutenberg for layman users, Elementor for power users and professionals.

Two suggestions:

1. User interface

Functionality-wise, the container seems to do the job. But UI/UX is a mess. Using flexbox in Webflow is way more intuitive. Same functions, much better UI. Elementor's UI is getting old and is not working for these more advanced options.

In Webflow, everything is perfectly unified, much more compact and sensibly divided.

In Elementor, there is so much scrolling, jumping between tabs, looking for things, opening sub-tabs, then opening typography popups and so on. The styling options are inconsistent. Sometimes there is a responsive control, hover control and sometimes not. You never know what you're gonna get.

Why is margin and padding in the Advanced tab? What's advanced about that?

Now, when you're introducing more complex styling features, the old UI is really ruining the experience.

I know you're working on a new UI, I've seen the prototype screenshot. But that just seems like more modern graphics for the old interface, but not much difference in terms of UX.

The user interface is the core of the experience and it deserves big improvements.

Have a look at Webflow's UI. I'm using both and Webflow is on a completely different level in terms of styling power and ease of use.

1. Flexbox needs auto margins

In frontend development, when we use flexbox, the capability to use "margin: auto" is fundamental. These things go hand in hand so I think it should be mentioned.

I already started a feature request: #17886

[79ho3ein]

First of all, thank you for this great update. I played with the container a lot, and there are a few that seem to not work well. Of course, I had previously reported all these cases in GitHub, but ...

1- If we have a container with two columns, it is not possible to access one of the containers and the handle of the main container prevents it from being displayed. https://prnt.sc/Lpw-trKmyFAO

2- If we put the containers inside each other, they are completely inside each other. https://prnt.sc/9auuDE_9D0Uj
While nested containers should look like this : https://prnt.sc/MqUen6IYZYoa
Even if we add a widget, it sticks perfectly to the container and has no space : https://prnt.sc/qXltXBmyptJT
Shouldn't containers have 20px of space by default? Like sections and columns in previous versions : https://prnt.sc/zPUzNKoVEGG3
Am I wrong?
It also causes bug number 4 to occur.

3- We cannot use left and right margins in containers : https://prnt.sc/W0JIiqAC71en
This is a very big limitation. It is strange why it does not exist.

4- When we add the first widget, it is not possible to access the container handle :

Untitled.Project.mp4

5- If we have two containers and give the upper container more z-index, the lower section handles will disappear.

Untitled.Project.mp4

This does not seem logical. Handles should not be affected by the z-index. They must be available under any circumstances.

6- In containers, the inheritance value is displayed for padding, but not for margin : https://prnt.sc/r_qpwWDIVF8_

Three suggestions

1- As mentioned in bug # 3, in containers, we can not margin left and right. But this is a weakness and could be better.
It is better to have this restriction only for the first container. If we put another container in the first container, this restriction will no longer apply to the second container. So we can give the margin to the container from left and right. In general, it is better to have this limitation only for the first containers. Not for indoor containers
This was exactly the case in previous versions. When we added a section, we could not margin it left and right. But when we put an inner section inside it, this limitation for the internal part no longer existed.

2- It would be great if the Align Content option was also displayed visually. It had a much better user experience.
https://prnt.sc/u_VgBDSV7cpy

3- To fix bug number 2, isn't it better to add the container gap option to the container section? So, this will work as before (https://prnt.sc/fKBBEh-YxGcs). With better performance.
By adding this option, we have both Elements Gap and container gap. Therefore, we can have complete control over both the distance between the elements and the distance between the containers.

Isn't this better? https://prnt.sc/RhnpjEJPKlwu