Elementor 3.27 is packed with exciting enhancements, from the evolution of Grid Containers for advanced layouts to new accessibility improvements, optimized performance features, and streamlined development practices. Discover how this release empowers web creators, business owners, and developers alike to build faster, smarter, private, and more accessible websites.
Advanced Grid Layouts
Elementor continues to revolutionize web design by evolving from a traditional layout design to modern layouts. With the widespread adoption of Flex Containers, Elementor now takes the next leap forward with Grid Containers, offering advanced layout capabilities.
Elementor’s Layouts Evolution
Elementor’s journey began with the classic section-column layout, which provided basic layout options, but lacked nesting capabilities and alignment flexibility.
In Elementor 3.0, the introduction of Containers transformed layout design by incorporating modern alignment features, full nesting capabilities, and the power of native CSS flexbox.
The success of Flex Containers paved the way for Grid Containers, which extend design possibilities from simple row-based layouts to advanced grid-based structures.
With Elementor 3.27, Grid Containers are further enhanced, enabling elements to span across multiple rows and columns, unlocking endless creative potential.
New Grid Options
With the improved Grid Containers, every child item — whether it’s a widget or another container — can now span across multiple rows and columns. This enables the creation of complex, sophisticated layouts without relying on workarounds like nesting multiple containers or writing custom CSS.
Elementor’s Grid Containers leverage the native CSS Grid, making it easier for developers to transition designs seamlessly between pure CSS Grid and Elementor. These advancements aim to simplify the design process, reduce complexity, and empower creators to build unique, professional websites more efficiently.
To utilize the new features, create a Grid Container and drop a few elements inside. Now, head over to one of the inner elements, select the Advanced tab of one of these elements, and under the new “grid items” area, change the “Column Span” and “Row Span” controls.
Performance Improvements
Elementor 3.27 introduces a new experiment feature that allows you to serve Google Fonts from your website. It also minimizes the Cumulative Layout Shift (CLS), continues to reduce the DOM size, and lays the ground for future JS optimizations. All of these improvements aim to boost your website’s Web Vitals by simply updating the plugin.
Load Google Fonts Locally
Fonts are one of the largest assets a website loads, second only to images. Optimizing font loading can significantly enhance website performance. To address this, Elementor introduces a new experimental feature that allows websites to load “Google Fonts” directly from the website’s server instead of relying on Google’s CDN.
When enabled, the feature scans Elementor pages to identify all Google Fonts in use. These fonts are then automatically downloaded to the /wp-content/uploads/elementor/fonts/ folder on the website’s server. Elementor updates the generated CSS files to reference the locally stored fonts, completely bypassing external requests to Google’s servers.
By eliminating requests to Google’s servers, this feature ensures compliance with privacy regulations, providing an added layer of protection. And by loading fonts locally, the number of external HTTP requests decreases, speeding up website load times. Additionally, the CSS files generated by Elementor are smaller and more efficient, as they include only the rules the website actually needs.
This feature integrates seamlessly into the editing workflow, making it easier than ever to optimize performance and privacy. With just a few clicks, you can let Elementor handle the heavy lifting, ensuring fonts are delivered efficiently and securely.
Reduced Layout Shift
Elementor 3.24, 3.25, and 3.26 introduced a major performance improvement by utilizing conditional loading to eliminate any “Unused CSS”. These optimizations enhanced performance significantly, however they inadvertently created a unique issue that impacted websites using caching plugins, leading to increased Layout Shifts and reduced performance. We want to share this interesting use case with our community.
When Elementor starts generating the page’s HTML, it doesn’t initially know which assets (scripts & styles) are required. As a result, Elementor renders all the widgets on the page one by one, to generate their HTML and collect the necessary assets for each widget.
Once all widgets are rendered, Elementor generates a complete list of the required assets and loads them at the end of the <body>. To optimize subsequent page loads, this asset data is saved in post meta. On subsequent visits, Elementor uses this stored data to load styles directly in the <head>, as it knows which assets are used on the page.
However, during the first load, the page has Layout Shifts, as styles are loaded late (at the end of the <body>).
The issue becomes more problematic when caching plugins are used. These plugins often save the HTML output of the first page load, where styles are loaded at the end of the <body>. As a result, every subsequent visit to the cached page also suffers from layout shifts, defeating the purpose of post meta optimizations.
Elementor 3.27 changes the way styles are loaded. Styles are now always loaded in the <head>, even during the initial page load. This ensures no layout shifts occur due to late style loading, providing a more consistent and stable experience across all page views, and enhanced compatibility with caching plugins.
Optimizing DOM for All Widgets
Elementor 3.26 extended the “Optimized Markup” experiment with an additional capability affecting all widgets on all pages. Instead of wrapping each widget with two <div> elements, it wraps widgets with only one <div>. This change was implemented on all except 6 widgets.
Now, with Elementor 3.27, the optimized markup has been extended to include these remaining widgets: Spacer, Menu, Loop, Table of Contents (TOC), Hotspot, and Forms.
The “Optimized Markup” experiment is still in its alpha stage, meaning it is under active development and not yet ready for use on production websites. The primary challenge lies in compatibility with third-party addons that may not fully support this feature. We’re working closely with addon developers to ensure smooth integration and full support for optimized markup.
Load Swiper JS script with PHP
Elementor made adjustments to style loading, requiring all widgets to explicitly declare their style dependencies using get_style_depends(); Now, the same approach applies to scripts, where each widget must explicitly declare its script dependencies using get_script_depends().
This process begins with the Swiper.js library which is used by Elementor for creating carousels and sliders. Previously, this library was loaded on all pages, regardless of whether it was being used. Now, Swiper assets are loaded conditionally only if it’s being used on the page.
With this release, all Elementor widgets now declare swiper as a dependency. Here’s an example of how this is implemented:
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_style_depends(): array {
return [ 'swiper', 'widget-custom-style' ];
}
public function get_script_depends(): array {
return [ 'swiper', 'widget-custom-script' ];
}
}To maintain compatibility and benefit from conditional asset loading, all Elementor addon developers should explicitly declare their dependencies. Update your widgets to declare swiper as a script and style dependency. This ensures that Swiper.js is loaded only when required on the page, improving overall website performance.
By adopting this approach, developers contribute to faster and more efficient Elementor websites.
Accessibility Improvements
Elementor 3.27 introduces several updates aimed at improving website accessibility, ensuring compliance with accessibility standards, and enhancing usability for all users.
YouTube Captions/Subtitles
In certain regions, accessibility laws mandate that captions (subtitles) must be automatically enabled in video players like YouTube. These captions make content accessible to individuals with hearing impairments or those who rely on subtitles.
To meet this requirement, Elementor’s Video widget now includes an option to automatically enable captions in the YouTube player, reducing the need for user interaction and ensuring compliance with accessibility regulations.
Carousels Keyboard Navigation
Carousels are a key feature of Elementor, used in both Free and Pro widgets. Elementor 3.27 ensures a consistent DOM structure across multiple carousel-based widgets, improving keyboard navigation and accessibility.
Previously, navigation elements like arrows and bullets were inconsistently ordered, causing confusion for users navigating with a keyboard. This update standardizes the structure, ensuring a seamless user experience, regardless of the carousel widget in use.
This change aligns the following widgets: Reviews [Carousel], Testimonial Carousel, Slides, and Media Carousel (Carousel Skin, Slideshow Skin, Coverflow Skin), aligning the markup with the Image Carousel widgets.
Search Widget Accessibility
For the Search widget, an edge-case accessibility issue has been resolved. If the submit button contains only an icon (with no accompanying text), Elementor now automatically adds an aria-label="Search". This ensures screen readers can correctly interpret the button’s purpose, improving accessibility for visually impaired users.
Icon Box Widget Accessibility
Elementor 3.27 addresses an issue in the Icon Box widget where linked icons lacked a discernible name. This absence created challenges for screen readers and triggered warnings in tools like Lighthouse. To resolve this, an aria-label is now added to linked icons, providing a descriptive name that matches the widget content, improving both usability and compliance.
Form Widget Accessibility
Redundant aria-required attributes have been removed from form fields that already use the required attribute. This simplifies the HTML structure, eliminates redundancy, and ensures alignment with modern web accessibility standards.
Developer Advisory
Developers who develop Elementor Addons are advised to make the following adjustments in their code to implement the latest standards and ensure a smooth experience for our shared users.
CSS Classes Deletion
In Elementor 3.27, the .elementor-html5-video CSS class has been removed. This class was previously applied to sections and containers with self-hosted background videos. Since this was a highly specific use case tied to Elementor’s core functionality, its removal is not expected to impact most users.
Before:
<video class="elementor-background-video-hosted elementor-html5-video"></video>After:
<video class="elementor-background-video-hosted"></video>If your Elementor addon includes custom code targeting the .elementor-html5-video class, update your code to use the .elementor-background-video-hosted class instead to maintain compatibility.
This cleanup simplifies the codebase and helps maintain a more streamlined approach to CSS class usage in Elementor.
Remove aspect-ratio hack for Legacy Browsers
Prior to Safari 15, the aspect-ratio CSS property was not supported on iOS devices. To address this, Elementor implemented an aspect-ratio hack using the padding-bottom technique to maintain the correct ratios for images and videos.
With the previous Elementor release upgrading the minimum browser support to Safari 15.5, this workaround is no longer necessary. As there have been no reported issues or user complaints related to this feature, Elementor has removed the hack from all instances where it was applied.
This change reduces the overall CSS size by eliminating unnecessary styles, resulting in cleaner, more efficient code.
To Conclude
Elementor 3.27 brings powerful updates to streamline design, enhance performance, and improve accessibility. With advanced Grid Containers, optimized workflows, and better developer tools, this release helps you create faster, more user-friendly websites. We’re excited to see how you’ll use these features to elevate your designs.
