Elementor 3.16 - Enhanced Speed, Versatile Design, and Increased Accessibility

In its latest release, Elementor 3.16 has introduced several noteworthy enhancements for web developers and site owners. By default, Flexbox Containers are now activated on all new websites, significantly boosting both performance and design flexibility. This update also introduces an enhanced 'Gap between elements' control, providing users with even more flexibility when working with Flexbox Containers.

One of the key improvements in this version is the clear distinction between Flexbox and Grid Container Widgets within the Widget panel. This differentiation results in separate widgets for each type of container, streamlining the design process and enhancing overall user experience.

Furthermore, site visitors will benefit from noticeably faster loading times, thanks to optimizations made to Time to First Byte (TTFB) metrics. This update also places a strong emphasis on accessibility, ensuring a more inclusive experience for users who rely on screen readers and other assistive technologies.

Notably, the Menu and Tabs Widgets have undergone essential infrastructure updates, setting the stage for the implementation of advanced features in future releases. These improvements collectively make Elementor 3.16 a valuable upgrade for both new and existing websites.

Unlocking Maximum Design Freedom: Enabling Flexbox Containers for New Websites

Flexbox Containers live up to their name by offering a remarkable degree of flexibility. They grant designers the power to craft websites that are not only pixel-perfect but also high-performing and responsive. With their precise positioning options, Flexbox Containers simplify the task of arranging and distributing items within a container, making flexible layouts a breeze to create. Take, for instance, the ability to place Heading, Image, and Text Editor Widgets into a single container. What's even more impressive is the capability to set distinct flex directions for different screen sizes, allowing elements to be reordered seamlessly based on the device.

Furthermore, Flexbox Containers come equipped with support for nested widgets, enabling the placement of widgets within the content areas of Carousel, Menu, Tabs, and Accordion Widgets. Consider the possibility of using the Accordion Widget to construct intricate layouts, featuring a contact form in one item and a Google Maps Widget in another.

A significant development in this regard is that, as of this version, Flexbox Containers will be automatically enabled for all new websites. This change will not impact existing sites built using sections and columns, which can continue to be utilized. However, it is strongly recommended to embrace Containers to take full advantage of the new design capabilities. If you're embarking on the creation of a fresh website and intend to stick with sections and columns, you do have the option to deactivate the Flexbox Container feature, although this means forfeiting access to features and widgets with nested capabilities.

The activation of Flexbox Containers also unlocks access to Container-based Kits and templates, encompassing popular section-based Kits that have been adapted to Containers, alongside brand-new design options. Conversely, if you prefer to stay with section-based Kits and templates, simply disable the Flexbox Container feature.

Upgraded Gap Control

In the latest update, the developers have streamlined the user interface by simplifying the terminology. The control formerly known as "Gap between elements" is now simply referred to as "Gap." This change makes it easier for users to grasp its purpose. Moreover, there's a notable enhancement in the way you adjust the gap between elements within Containers.

Previously, a single range control did the job, but now, you'll find two distinct number inputs—one for horizontal gaps and another for vertical gaps. This change opens up a world of precision, as you can fine-tune the positioning of each element with utmost accuracy. Gone are the days of uniform gaps; now, you have the flexibility to set different values for horizontal and vertical gaps, tailoring your design to perfection.

Another exciting feature is the ability to customize the units in which you define these gaps. Whether you prefer pixels, percentages, EM, REM, or VW, you have the power to set your gaps according to your design requirements. It's all about giving you the creative freedom and control you need to make your projects stand out.

Grid Container Widget

In the realm of web design and layout management, Grid Containers emerge as a formidable tool, offering the means to craft intricate multi-element arrangements within a singular grid-like enclosure. The latest iteration introduces an enhancement that endows Grid Containers with their very own presence within the Widgets Panel. This newfound integration affords users the convenience of direct access to Grid Containers, obviating the need to resort to the more convoluted process of dragging a Flexbox Container and subsequently modifying its type.

The workflow has been streamlined for user convenience. When a user inserts a Flexbox Container into the editor, the system seamlessly instantiates it as such, while the introduction of a Grid Container is met with the immediate manifestation of the grid layout. Yet, it's crucial to note that this flexibility extends beyond mere initial selection. Users maintain the capacity to convert either container type to the alternative via the Container Layout dropdown menu within the Layout section. Such adaptability ensures that designers have the creative freedom to tailor their layouts precisely to their specifications.

Faster Acceleration With TTFB

The latest update to the popular WordPress page builder, Elementor, promises substantial improvements in site loading times. Version 3.16, released on Thursday, September 21, 2023, enhances the time to first byte (TTFB) by 5-20% for sites using the free Elementor Core and up to 40% for sites using Elementor Pro according to the complexity of the page. This update will provide a faster and smoother experience for site visitors by delivering content quicker than ever before.

The considerable frontend performance boost was achieved by modifying the display conditions within the Elementor editor. These changes to how Elementor renders content in the editor interface lead to the enhanced TTFB, which is a key metric for measuring how quickly a site sends the first byte of data to users. By streamlining its editor, Elementor allows sites to deliver content faster while still providing all the rich design functionality that has made the builder so popular.

Improved Accessibility

The latest release of the popular WordPress page builder Elementor contains several notable improvements to website accessibility and inclusiveness. According to the announcement on Thursday, September 21, 2023, version 3.16 makes it easier for visitors who use screen readers and other assistive technologies to access site content.

For example, enhancements were made to widgets like Icon Box and Image Box that contain multiple elements and links. Now when a screen reader scans these widgets, it will read each unique link just once rather than repeating the same links redundantly. This update prevents wasting screen reader users' time with duplicate information.

The Posts Widget also received an upgrade for accessibility. Screen readers will now focus solely on post titles within this widget, ignoring any unnecessary additional content like "Read more" CTAs and featured image alt text. Streamlining the reading experience in this way improves site accessibility for vision-impaired visitors browsing posts with assistive tech.

Overall, these thoughtful improvements to Elementor empower creators to build websites that are more inclusive and enjoyable for all users regardless of ability. The enhancements help ensure that site content is delivered efficiently and effectively to visitors who rely on screen readers and other assistive technologies.

Updated Menu & Tabs Widgets

The latest release of Elementor includes under-the-hood improvements to the infrastructure powering the Menu and Tabs widgets. According to the announcement on Thursday, September 21, 2023, version 3.16 updates these widgets to generate unified code for menu item and tab titles across all screen sizes.

This upgrade eliminates duplicate code that could occur when applying responsive settings to these widgets in previous versions. Consolidating the backend codebase also paves the way for advanced features to be implemented for these widgets down the road.

In addition to the coding enhancements, the Menu and Tabs widgets are now more accessible overall. However, the unification of title code could potentially break existing widget designs if custom CSS has been applied to titles in the past.

The improvements to these commonly used widgets demonstrate Elementor’s commitment to keeping its core widgets up-to-date. While the changes may require developers to recheck custom CSS, they lay the groundwork for better responsive behavior and accessibility moving forward. For most users, the updates should be seamless and result in a better experience across screen sizes.

Wrapping Up

Overall, this latest version represents significant progress in creating faster, more responsive, and accessible websites. As Elementor continues to refine its core features, developers should consider upgrading to unlock the potential of containers, boost performance, and improve accessibility. Exploring these cutting-edge additions to the popular page builder can help sites stay on the leading edge of design while providing excellent experiences for all visitors.