What’s new in Elementor 3.6 Update
Elementor has released an update for its free version of the plugin and in this article we will discuss what’s new in Elementor 3.6.
This update of the Elementor free plugin comes with one of the most awaited feature which is Flexbox Container.
On top of this improvements to Export / Import feature and changes to Global Colors and Fonts has been introduced as well.
It is important to know that Container or Flexbox Container is currently under Experiments which means it is not recommended that you use it on a LIVE or production site.
However, Flexbox Container offers a new way for creating layouts in Elementor and this is something that need to be comfortable with if you are looking to build sites and pages using this plugin.
It is suggested that you start playing with this feature from today.
Keeping this in mind, as mentioned above, Elementor 3.6 update is for the free version of the plugin and this means you will be able to use the Flexbox Container and get access to other enhancements even if you are not using the Pro version of the plugin.
In case you are not using Elementor and are looking to give it a try then you can do that by clicking the button below
What’s new in Elementor 3.6
First things first, Elementor 3.6 was released on 22nd March 2022 and as mentioned above, it includes one of the most awaited features of the plugin which is Flexbox Container and changes to Import / Export feature and Global Colors and Fonts
In this article we will take a brief look at this feature and below we have shared all the topics covered.
New Flexbox Container Experiment in Elementor 3.6
As discussed above, Flexbox Container is a features that is currently in Experiments and you can find it under the Ongoing Experiments in Elementor Settings.
As you can see the status of Flexbox Container is Alpha and it comes disabled by default.
This means it is not recommended that you use it on a LIVE site and to experience this feature you need a local environment.
In case you are on a local site and want to try this feature then you will have to activate it.
And for activating Flexbox Container in Elementor you need to click the dropdown and select Active.
After selecting Active, you need to Save the changes and the new Flexbox Container option will have the green marker just like the other Active experiments in Elementor.
Flexbox Container replaces Section / Column in Elementor 3.6
Before we discuss more about the Elementor 3.6 update and impact of activating this feature, it is important to learn more about Flexbox and the new Flexbox Container in Elementor.
As the name suggests, Flexbox is the abbreviation for the Flexbox module which is a one dimensional layout model that allows you to distribute the available space between the items and align them in a container.
This means Flexbox is basically deals with a single layout element at a time and these can be rows or columns.
When it comes to distributing space using Flexbox, it lets you change the height and width of an item in a container to make the use of it which in turn takes care of the overflow.
On top of this with the help of alignment options you can easily make the layout look good on devices with any screen size.
Keeping this in mind, Flexbox Container in Elementor 3.6 allows you do just this without having to write a single line of code.
It is important to know that when you activate the Flexbox Container experiment in Elementor 3.6, it will take the place of the inner section widget.
This means you will no longer be able to use the inner section – column layout if you enable the Flexbox Container experiment in Elementor.
Below we have shared the before and after screenshots of Flexbox Container activation.
- Before activating Flexbox Container in Elementor 3.6
- After activating Flexbox Container in Elementor 3.6
As you can see in the screenshots above, the new Container widget has taken the place of the inner section widget in Elementor side panel when you activate Flexbox Container experiment.
In case you are wondering what will happen to the existing sections / pages that you have created using the old inner section / column widget then let me tell you Elementor will continue to support the legacy layout options.
And it will give you the option to convert to old sections to Flexbox in Elementor.
Again, let me remind you that Flexbox Container in Elementor is currently in Experiments and it will take a bit of time to release a stable version of this feature.
Until then it is advised that you do not use Flexbox Container on production sites and use this time to familiarize yourself with this new widget.
As far as converting, the existing sections / pages from inner section to Flexbox is concerned, it can be a bit tricky if the layout is complicated.
And in situations where things do not go as per plan, it will be a better option to rebuild those parts.
See- How to fix missing inner section widget in Elementor
Convert old sections into new Flexbox Container in Elementor 3.6
While we are on the topic of converting inner sections and columns layout into the new Flexbox Container, in this section we will cover the new Convert to Container option.
First things first, after you are done activating the Flexbox Container experiment in Elementor, you will have to select the section that you want to convert to a Flexbox Container.
For that you will have to click on the Edit section option
And it will show you all the Layout options in the Elementor side panel.
Here you will see the first option lets you convert the selected section into Container or in other words it is the Convert to Container option.
It is important to know here that if you select a column instead of a section then you will not see this option.
Also, as discussed above, in situations where you are not looking to convert sections into containers, Elementor still gives you access to all the Settings related to columns and inner sections.
Below we have shared a screenshot for context.
- Edit section option after activating Flexbox Container in Elementor 3.6
- Edit column option after activating Flexbox Container in Elementor 3.6
As you can see in the screenshot above, even after enabling the Flexbox Container in Elementor 3.6, you get access to all the layout options for sections, columns and widgets / elements included.
This means you will be able to make the changes just like before.
However, there is a difference and that is you won’t be able to use the Inner Section widget.
Moving on,
When you click the Convert to Container option, what it does is it basically creates a container below the section and pastes all of the items in it.
In simple words, it tries to replicate the section that you have created.
As you can see in the screenshot above, both the section and container look exactly the same.
And yes, in this scenario it worked perfectly.
But in situations where it does not, you will have to either make some changes and in worst case you will have to rebuild it.
So keep this in mind.
Clickable Container in Elementor 3.6
With the introduction of Flexbox Containers in Elementor 3.6, one of the features that you will get access to is making the entire Container clickable.
This feature was missing in the inner section and columns layout and below we have shared screenshots for comparison.
- Anchor tag missing in Sections and Columns
- Anchor tag available in Flexbox Container in Elementor 3.6
As you can see in the screenshots above, the new Flexbox Container allows you to select the anchor tag and add links.
This means now you will be able to create intuitive user experiences where people will no longer have to find the location to click.
In case you are wondering where will you find this option then let me tell you to add links to Flexbox Containers in Elementor, you need to select the Container first.
This can be any container parent or child, it all depends on your requirement.
On selecting it will show you the Layout settings for the Container in the Elementor side panel.
And here you will have to looking for the HTML tag dropdown.
Once found you need to select the anchor tag “a” which is the last option.
Selecting it will show you the option to add links to the Flexbox Container.
Another thing you have to know here is that you get access to all the same link options as well which means you can add nofollow attribute to link and make them open in a new window or tab.
Nesting Flexbox Contain in Elementor 3.6
If you have been using Elementor to build sites then you must be familiar with the fact that you can only add a single inner section in a column.
This is not the case with the new Flexbox Container that has been introduced in Elementor 3.6 as these allow you to nest multiple containers.
Below we have shared a few screenshots for comparison where you will be able to see the difference
- No nesting in inner section – column layout
- Nest multiple Flexbox Containers
As you can see, nesting multiple containers makes it easier for you to create advanced / complex layouts easily.
Customize layout and design for devices using Flexbox Container
If you have been following Blogging Unplugged then you must be familiar with the fact we stress a lot of having layouts / designs that are mobile friendly.
It is important to know that using Flexbox you can move the items in a layout which makes it easier for you create designs that adapt to different screen sizes or are responsive.
In Elementor, Flexbox Container comes with the option to align, order and divide spacing according to different devices or screen sizes.
This helps improve user experience.
It is important to know here that for your to try and learn more about Flexbox Containers, Elementor has created a playground where you will find 10 lessons to help you familiarize with this feature.
You can visit this playground by using the button below.
Flexbox Container in Elementor 3.6
Improvements to Import / Export tool in Elementor 3.6
If you have been using Elementor then you must be familiar with the fact that it comes with an Import and Export tool that allows you Import and Export site kits, templates and more.
This feature was introduced in Elementor 3.2 and it gave you a few options to choose what you want to import. These options are
- Templates
- Content
- Site Settings
It is important to know here that if for example you are using a Site Kit that uses Woocommerce then on applying it, you wouldn’t get the option during the import process to install the Woocommerce plugin.
This has changes in Elementor 3.6 update as you will now get the option to install the required plugins first and then you will be taken to the import process.
See the screenshot below for reference.
Now coming to the Export feature, unlike the previous versions of Elementor you will be able to include the required plugins for a website or a template or a kit in the Export package.
It is important to know here that Elementor will only install free plugins (available in WordPress repository) using this feature.
For in case premium plugins are required then you will have to install and activate them yourself.
Moving on,
The next change that you will notice in the Elementor Import and Export tool is that it will show you a detailed summary of what’s going on.
This was not the case before Elementor 3.6 and below are a few screenshots for reference.
- Before Elementor 3.6
- After Elementor 3.6
You can see in the screenshots above that Elementor now displays exactly what’s being imported.
Another thing that you will come across when importing is that once a step is completed it will display it with a green check mark for a few seconds.
Apart from these changes, now on importing the dynamic linkages / references are maintained which means you will no longer have to fix this after import.
In simple terms, if a kit / template is using Dynamic tags or a set of conditions then those will not be lost on importing.
Changes to Global Colors and Fonts in Elementor 3.6
Site Settings in Elementor was introduced in Elementor 3.0 update and it included features like Global Colors and Fonts
These allowed you to to set colors and fonts for your site on a global level.
In Elementor 3.6, the Global Fonts and Colors have received a major change where they are now divided into 2 sections
- System Color / Fonts
- Custom Color / Fonts
This categorization did exist before but it wasn’t this clear. See the screenshots below for reference.
- Global colors before Elementor 3.6
- Global colors after Elementor 3.6
- Global fonts before Elementor 3.6
- Global fonts after Elementor 3.6
After seeing this some of you must be thinking what color and fonts are classified as System and which are custom.
When you create a website or a template, there is a color scheme that you will define for the default design and is closely related to your brand.
This color scheme / palette will cover everything from background color to buttons to font colors, links and more.
Out of these default colors / fonts some are for the important areas or elements of your site and these constitute the System colors or fonts.
On the other hand, Custom Colors is the extended palette and chances are these colors have been used on the site but not on prominent places.
Now, it is important to know here that Elementor allows you to change both System and Custom colors and fonts.
However, when you will add a new one, it will be listed under Custom.
Apart from this, it is important to know here that you will be able to rearrange both System and Custom fonts and colors as well.
In case you are wondering, how can you do this then let me tell you the option to rearrange can be seen when hovering the pointer over a color or font.
Also, just like before you will not be able to delete the system colors and fonts while you will be able to remove the custom ones.
This is a welcome change as now you will exactly know which colors and fonts impact important areas of your site.
Performance Improvements in Elementor 3.6
Just like every update, Elementor has released a few performance improvements in version 3.6 and these are
- Lazy load has been added to Image Carousel widget and Background slideshow.
- The DOM output optimization experiment has been extended to remove “elementor-section-wrap”
This concludes everything you need to know about Elementor 3.6 update.
In case you want to get Elementor Pro license then you can do so by clicking our SPECIAL LINK or the button below.
Also, the article is just a brief introduction of Flexbox Containers in Elementor. There is a lot more to learn and discuss.
And for that we will be creating more articles in the future.
Elementor 3.6 Update
Get Starter with Elementor 3.6
To get started with Elementor 3.6, you need to visit Elementor and then click Try the free version option on the homepage.
Doing this will take you to a sign up page where you are required to create a free account on Elementor.
Once you have successfully create an account, it will show you an onboarding sequence where you need to answer some basic questions.
On completing the onboarding sequence, it will show you 2 options
- Download and Install
- Build and Publish an Elementor Cloud Website.
It is important to know here that Elementor offers web hosting services as well and if you are looking for an affordable plan then Elementor Cloud is for you.
See- How to sign up for Elementor Cloud
Moving forward,
Here you need to scroll down a bit until you come across a comparison table with the Elementor Free column.
Here you need to Select a plan to buy Elementor Pro plugin and in the next step you will have to
Having said that,
I hope you will find this article helpful and now know all about the Elementor 3.6 update and the Flexbox Container experiment.
In case you have any queries feel free to reach out and we will be happy to help.
To stay up to date with our content we recommend you subscribe to our YouTube channel and email list. Also, don’t forget to join our Facebook group.