This version activated the powerful Flexbox Container feature by default on all new websites, enhancing performance, design flexibility, and responsiveness. It also introduces an upgraded ‘Gap between elements’ control for even greater flexibility with Flexbox Containers. Furthermore, this version differentiates between the Flexbox and Grid Container Widgets in the Widget panel, and creates a separate widget for each kind of Container.

Additionally, your visitors will enjoy considerably faster loading times thanks to the improvements made to Time to First Byte (TTFB) metrics. Your site will also be more inclusive, and provide a better experience to visitors using screen readers and other assistive technologies. Furthermore, the Menu and Tabs Widgets have an important infrastructure update that will allow the implementation of advanced features in the future.

Maximum Design Flexibility – Flexbox Containers Activated on New Websites

True to its name, Flexbox Containers are extremely flexible, empowering you to build pixel-perfect, high-performing, and responsive websites. They offer more accurate positioning settings, allowing you to efficiently align and distribute items within a container for flexible layouts. For instance, you can place Heading, Image, and Text Editor Widgets into a single container. Then you can set a different flex direction for each screen size. This empowers you to position the elements in a different order according to device.

Moreover, Flexbox Containers support nested widgets, which means you can place widgets in the content areas of Carousel, Menu, Tabs, and Accordion Widgets. For example, you can use the Accordion Widget to build an intricate layout that includes a contact form in one item, and a Google Maps Widget in another.

Starting from this version onwards, Flexbox Containers will be activated by default on all new sites. This update will not affect sites built with sections and columns, and you will be able to continue using them, but we recommend using Containers to enjoy new design capabilities. If you’re creating a new website and want to build with sections and columns, you can deactivate the Flexbox Container feature, though you won’t have access to features and widgets with nested capabilities.

Activating Flexbox Containers will also give you access to Container-based Kits and templates that include the most popular section-based Kits converted to Containers, alongside new designs. Disable the Flexbox Container feature to use section-based Kits and templates.

Mind The Gap Between Elements – Upgraded Gap Control

The “Gap between elements” control has been renamed to “Gap”. The single range control for setting the gap between elements inside Containers has been replaced by two number inputs for the horizontal and vertical gaps. This allows you to set different values for the horizontal and vertical gaps, enabling precise positioning of every element. The gaps can be set separately or linked together. Additionally, gaps can be set according to different units such as pixels, percent, EM, REM, and VW.

Introducing the Grid Container Widget

Grid Containers are a powerful layout tool for creating multi-element layouts in a single grid-like container. This version gives Grid Containers their own Widgets in the Widget Panel, allowing you to directly access the Grid Container without having to drag the Flexbox Container and change its type.

If you drag a Flexbox Container into the editor, it will automatically create a Flexbox Container, and if you drag a Grid Container into the editor, it will start as a Grid Container. You can still change each container to the other type from the Container Layout dropdown menu in the Layout section.

Accelerate Your Site With Faster TTFB

Version 3.16 improves time to first byte (TTFB) loading time by 5-20% on sites built with Elementor Core and up to 40% on sites built with Elementor Pro, depending on the complexity of your page. This will provide your visitors with a faster and smoother experience, delivering your content quicker than ever. The considerable frontend performance improvement was achieved by modifying the display conditions within the Editor. These modifications improve the Time to First Byte (TTFB), a key metric for measuring connection setup time and web server responsiveness.