What’s new in Elementor 3.4
The latest version of the most popular page builder plugin is here and in this article we are going to discuss what’s new in Elementor 3.4 update.
Elementor 3.4 was released on August 17th 2021 and it included one of the most requested features of the plugin which is new custom breakpoints.
This release of the Elementor base plugin also includes some of the performance optimizations as well and we will be covering that in this article.
It is important to know that Elementor is a freemium plugin meaning it has both free and pro versions.
And if you are a Elementor free user then you will also get access to the new custom breakpoints.
If you are looking to give Elementor 3.4 a try then you can download the free plugin using the or SPECIAL LINK or the button below.
What’s new in Elementor 3.4 Update
As discussed above, in this version of Elementor new custom breakpoints have been introduced along with a few performance tweaks.
And below are all the topics we have covered. You can jump to your favorite section by clicking on the links below.
Custom Breakpoints in Elementor 3.4
I’m sure you are familiar with the fact that we use devices with different screen sizes to browse the internet throughout the day or on a regular basis.
And the devices generally used are
- Mobile
- Laptop
- Desktop
- Tablets
And more.
It is important to know that all of the devices listed above do not have a fixed screen size and it changes with respect to the company or model you have adding to the multitude of screen sizes.
And it is essential for your website to adapt to available screen sizes easily.
This feature is known as responsive and it is achieved by setting breakpoints and then styling them accordingly.
It is important to know that breakpoints is a feature that is not new to Elementor and before Elementor 3.4, it was just limited to Mobile and Tablet.
And as s result of this when you styled an element for a specific screen size it just gave you 2 options
- Tablet
- Mobile
Apart from this, the responsive mode toolbar on top also gave the option to only switch between the above mentioned screen sizes. See the screenshot below for ref.
In Elementor 3.4, additional custom breakpoints have been introduced and these are
- Mobile extra
- Tablet extra
- Widescreen
- Laptop
This makes it a total of 6 breakpoints and using these you can adjust your pages and websites to adapt to any screen size easily.
Enabling custom breakpoints in Elementor 3.4
Before we move forward, it is important to know that custom breakpoints is a feature that is still in beta and hence disabled by default when you update from Elementor 3.3 to Elementor 3.4.
And before using it on your site we will recommend you test it on a staging site first.
As mentioned above, the new breakpoints in Elementor 3.4 are disable by default and to use them on your site the first thing you have to do is enable it.
And for this you will have to navigate to Settings under Elementor in your WordPress dashboard and then select Experiments tab.
In the Experiments tab you need to scroll a bit till you find Additional Custom Breakpoints and here you will have to select Active from the drop down.
After you are done till here you can head over to the Breakpoints Settings in the Elementor editor and you will notice that it will notice that it allows you to select / add new breakpoints.
As you can see in the image above you can pick any or all of the breakpoints.
And when you do that you will see the new device icons will appear on the responsive toolbar.
Using these icons you will be able to toggle between different screen sizes.
Also, on selecting elements you will notice that now Elementor allows you to edit / style them for different breakpoints you have selected.
Kindly note that only the icons for the breakpoints that you have selected will appear in both the cases we have discussed above.
Another thing you have to keep in mind when using custom breakpoints in Elementor is that if you apply a style to a breakpoint then it will automatically apply to the smaller sizes.
For example, if you set the text size of a title to 80 px on desktop then it will be applied to all the breakpoints you have selected.
- Desktop
- Mobile Extra
Now, when you change it to 40 px in tablet then it will change the text size in only mobile and mobile extra
- Tablet
- Mobile extra
It is important to know that the text size change in Table will not impact desktop, laptop and widescreen breakpoints.
To make things easy for you another UI improvement that you will see in Elementor 3.4 is that now you will be able to see the inherited styles in breakpoints.
For example, if you have set padding of an element to 10px in Tablet then it will display the inherited values in Mobile and Mobile extra breakpoints and the values will be grayed out but can be edited when selected.
- Tablet
- Mobile
- Mobile extra
It is important to know that you will be able to see such values in controls with background images and numeric values.
Performances improvements in Elementor 3.4
As discussed above, Elementor 3.4 update comes with few performance upgrades as well and these are
- Elementor has rebuilt its responsive control due to which the server response time has been improved by up to 23%. This has also impacted the memory usage reducing it by 5%.
- Along with this Elementor has dropped support for Internet Explorer as a result of which each page is lighter by 110kb making the site significantly faster.
- In Elementor 3.4, Font Awesome has also received an update where the loading mechanism of icon to an SVG has changed. Due to this Elementor was able to reduce the number of requests which further improved the performance leading to faster loading times.
Read more about Elementor performance updates.
This concludes everything you need to know about Elementor 3.4 update.
In case you are looking to get Elementor Pro license key then you can do so by clicking our SPECIAL LINK or the button below.
How to get started with Elementor 3.4
To get started with Elementor 3.4, the first step is to visit Elementor and then click Get Started on the main navigation.
When you click Get Started it will ask you to create an account on Elementor and once done will start the onboarding welcome sequence where you will have to answer a few basic questions.
After the onboarding sequence, it will show you 2 options
- Start on the Cloud
- Download and Install
If you do not have hosting and want to host it on Elementor Cloud Servers then pick Start on the Cloud and it will take you to the checkout page where you will have to provide basic information and then pay.
See- How to sign up for Elementor Cloud Website subscription
For existing sites, select Download and Install and it will show you the plans offered by Elementor.
Here you will have to select a plan and then buy Elementor Pro.
Once you have bought the plugin, the next step is to
And that’s it you have successfully started with the best page builder plugin and its time now to design beautiful sites and pages that convert.
Having said that
I hope you will find this article helpful and now know what’s new in Elementor 3.4 update.
In case you have any queries feel free to get in touch and we will be happy to help.
To stay up to date with the latest updates and news bookmark our News / Updates section, follow our blog and join our Facebook community.