Elementor 3.10 has arrived and includes a variety of anticipated features and tools that will help you achieve new levels of design.
From nested elements to new custom unit in sizing control, this update will help you unlock your creativity to design websites.
Nested elements
Nested Elements opens up a completely new approach to think about the layout of your website. By using Flexbox Containers, Nested Elements allows you to nest any element within another. With Nested Elements, every element (widget or container) may be nested endlessly, much as how you can nest one Container within another.
As soon as Flexbox Containers are deemed stable, Elementor will begin adding the Nesting feature to a variety of already-existing widgets, including the Carousel, Accordion, Tabs, and more. Additionally, brand-new Nested widgets like the Mega Menu will be introduced.
Tabs widget renewed
The new, container-based “Tab widget” will help you unleash your design potential and creativity. This widget includes three main improvements in this new version:
- Tabs and Titles – It is now possible to adjust the layout and positioning of the tabs to determine their location relative to the tab’s content (on the sides, on top or on the bottom). Also, more styling options and the ability to add icons in the titles will be available.
- New Content Area – Thanks to the new Flexbox Containers, all content areas you add will become a main container where you can place any element, make adjustments or add any content you want.
- New Responsive Setting – The revamped Tab widget will now allow you to define the breakpoint at which the Tab will change, displaying as an Accordion. This feature will avoid you the need of creating different content for each device, having to hide/show each of them at different resolutions. This will also help improve performance.
The Tabs widget works along with Containers. In order to use this tool, you need to ensure that both, Flexbox Container and Nested Elements are activated. Remember that actually, this two features, are only available on the experiments section, so they need to be turned on in order to become available. After activating this feature, the Tabs widget will replace the existing one in the widget panel although it won’t affect the existing tabs on your site.
Kits, templates and blocks, now container-based
Along with the addition of Flexbox Containers, it was necessary for Elementor to provide some container-based full website kits and templates. This updated kits will work perfectly with your Flexbox Containers experiment once you have enabled it in the Elementor settings.
Dozens of the most popular full website kits have been adapted to the new Flexbox Containers and you will find them in the template library.
New custom units
In this patch there’s also an improvement to the numeric controls that appear in almost any element on this builder. It’s now possible to choose any unit you wish, mix numeric units and run CSS function calculations within them. Editing elements such as paddings, margins and font size creatively way impact in a unique way on your designs.
On previous versions there was only one type of unit you could pick for all sides. After patch 3.10 Elementor will allow you to pick the type of unit you need for each side separately. For instance, you will be able to use px (pixels) to set the side values of a container and % (percentage) to define the top and bottom sides.
By selecting the Custom option, you may also do calculations for the measurement of a value within the value input field, improving the responsiveness and accuracy of your design.
If you choose the custom option in the typography size controls for example, you will be able to use the clamp() CSS function to adjust your typography size to different device sizes, or the calc() CSS function to calculate and set a value that mixes units, and more.
Containers, Sections, Columns and Typography controls will get custom options for sizing controls as part of this new version. New areas will be updated in upcoming versions.
Disable Google Fonts
Although a popular and stable source for web fonts on web design, Google Fonts has been found, in some instances, to be in violation of GDPR and privacy regulations.
If you intend to stay out of risk, Elementor will allow you to disable all Google fonts from your website. Without Google fonts, you will have 7 fonts at your disposal with Elementor. In case you have used a Google font on your designs and proceed to disable them, Elementor will default on of the available ones. Also consider that by using the Elementor Pro version, you can upload any font you want with the Custom Fonts feature.
Countdown widget: dynamic due date
Dynamic tags are a great tool to automatize all kind of widgets for example buttons, titles, excerpts and since the release of Elementor 3.10, the Countdown widget.
Additionally, you’ll be able to hand off a client-ordered website and let them adjust the due date in WordPress without having to send them to the Editor, where they could change your design.
Improvements on Accessibility and Performance
Elementor 3.10 brings accessibility and performance upgrades. Following, we introduce a list of these improvements:
Lazy load google maps
Elementor allows you to add a Google Map widget anywhere you want to share different locations. With this improvement, maps will load after the page load so this initial load will be faster than ever.
Lazy loading images with custom sizes
Although lazy loading images has been possible for a while, now it will also be possible to set lazy loading for images with custom sizes in your media library.
Controlling self-hosted videos preload
Videos get their own lazy loading aswell in Elementor 3.10. This sort of multimedia content makes a big difference regarding the loading times of any page, even more than images. It is now possible for you to choose when this content will load, allowing your website to load self hosted videos when users interact with them. Take into account that external links (such as YouTube, Vimeo and others) will not have the ability to lazy-load.
Final thoughts
Elementor 3.10 unlocks a wide variety of tools to enhance your creativity and boost your website’s performance. The new Tabs widget leveraging the new Nested Elements capability will allow designers to create new interactive elements with just a drag & drop. Activating the Flexbox Container experiment will unlock these features along with a set of Container-based kits included with Elementor Pro and ready-to-use.
