Elementor 3.30 introduces a significant set of updates. It brings advancements to Editor V4, introduces new capabilities to the Cloud Library, expands mask shapes, continues optimizing page performance, and ensures better accessibility across various widgets, along with various merged and upgraded features.
Developers should pay attention to experimental features merged in this version, and how they may impact their addons. With Optimized Markup now enabled by default for new installs, it’s crucial to update Elementor addons and custom code to prevent visual regressions. Font loading changes implemented to optimize performance also demand attention — developers relying on optimization plugins must adjust them to work with Elementor’s new local font-serving mechanism.
Editor V4
Elementor 3.30 advances the development of Editor V4 Alpha, a reimagined architecture built on CSS-first styling and atomic design principles. This version enhances professional workflows by introducing multiple new capabilities.
Additionally, this release also includes developer-focused features:
JavaScript Handlers for Atomic Elements
A new evolving architecture was introduced to add custom JavaScript to atomic elements. The new system handles element life cycle on demand, by passing frontend settings directly to JavaScript for more responsive controls.
Manual Class Name Definition
A key update in this release is the ability to define and control CSS class names manually. Previously auto-generated, class names now appear in the code exactly as written by the user, which improves integration with custom CSS, and simplifies debugging by maintaining naming consistency across the project.
Style Origins and Group Indicators
The new indications popover improves clarity around styling inheritance by visually displaying the source of each style, including class type, breakpoint, and interaction state. Color-coded indicators help identify the style origin and detect conflicts. This new feature is an essential tool for better debugging, to detect inheritance and specificity issues.
Cloud Library
First introduced in Elementor 3.29, the Cloud Templates revolutionizes cross-site workflows by allowing users to store and reuse designs in a centralized cloud library. Elementor 3.30 brings a set of exciting new enhancements for this feature.
Re-Branding Kits as Website Templates
Previously known as “Kits”, “Website Kits”, “Kit Library” etc, these have been rebranded to “Website Templates”. This change removes the constraints of page-specific templates and enables the creation of a portable, personal design system that travels with you.
Saving Website Templates to Cloud
Going beyond importing and exporting individual templates, rather to include the entire website. Elementor 3.30 introduces new capabilities to save full “Website Templates” in the Cloud. Saving not only templates but also global styles, settings, media, and configurations.
A new website architecture standardizes the website migration offering new capabilities for agencies or creators managing multiple websites. With Website Templates, you will be able to save and deploy an entire website easily and quickly, ensuring consistency and continuity.
Website Templates Library
Website Templates are available from the redesigned “My Website Templates” section in the “Website Templates Library” (previously known as the “Kit Library”). This updated interface provides easy management of saved website templates, including options to export any website and import to another with just a few clicks. Once saved to the cloud, website templates are immediately available for deployment.
Mask Shapes
Version 3.30 brings a significant upgrade to Elementor masks, a powerful design tool that lets users apply overlay shapes to any widget. This update expands the broader selection of masks, changes the way masks are displayed in the editor panel, and adds the ability for external addon developers to register custom masks.
New Pre-Designed Masks
Elementor has traditionally provided users with 6 mask shapes, alongside the option to upload custom masks. This limited selection, while functional, somewhat constrained creative possibilities. With the release of Elementor 3.30, users will see a substantial expansion of these built-in offerings. The update almost quadrupled the pre-designed variety to a total of 20 masks.
Visual Interface
In this release, Elementor improves how users interact with masks by replacing the old dropdown select box with a visual interface. Now, mask shapes are presented as clickable thumbnails using the visual choice control introduced in version 3.28. This change allows users to preview the shapes and then apply masks with a single click, reducing mouse clicks and creating a more efficient design experience.
Registering New Masks
This release also introduces a new developer capability: registering custom mask shapes using the elementor/mask_shapes/additional_shapes filter. This feature opens the door to more personalized and branded design tools within the Elementor ecosystem. Addon developers can now define unique shapes, complete with titles and image previews, to extend the default mask library.
The registration is simple:
function custom_elementor_mask_shapes() {
return [
'shape-id-1' => [
'title' => esc_html__( 'Shape name 1', 'textdomain' ),
'image' => PLUGIN_ASSETS_URL . 'mask-shapes/shape-1.svg',
],
'shape-id-2' => [
'title' => esc_html__( 'Shape name 2', 'textdomain' ),
'image' => PLUGIN_ASSETS_URL . 'mask-shapes/shape-2.svg',
],
];
}
add_filter( 'elementor/mask_shapes/additional_shapes', 'custom_elementor_mask_shapes' );Both the textdomain and the PLUGIN_ASSETS_URL should be updated, and to avoid conflicts with other plugins, developers are encouraged to prefix their shape IDs.
Performance Improvements
This update introduces an improvement to page load speeds, specifically for Elementor Pro users. The primary focus of this enhancement is to remove unnecessary font loading.
Optimized Font Loading
Previously, the Video Playlist widget unnecessarily loaded its own fonts via the widget’s CSS file. This default font loading has a negative impact on page performance, as it could not be disabled without custom code.
Even after removing all fonts from the kit, all the templates, and all the pages, this embedded font continued to load. The hard-coded CSS rule conflicted with Elementor’s recommended practices, leading to its removal.
Starting with Elementor 3.30, websites have complete font control through the Elementor Editor panels. Widgets no longer load fonts independently from CSS files, ensuring better performance and adherence to best practices.
Accessibility Improvements
Elementor 3.30 continues introducing updates aimed at improving website accessibility, to ensure compliance with accessibility standards, and enhancing usability for all users. This release focused on post archives, post navigation and forms.
List of Posts
Elementor 3.30 ensures the Portfolio and Posts widgets are structured as list items. This change adheres to accessibility best practices, facilitating smoother navigation for all users, particularly those relying on assistive technologies.
Specifically, Elementor adds the role=list attribute to the wrapper element of these widgets, and each post within these widgets receives the role=listitem attribute. This change allows assistive technologies to accurately interpret and convey the structure of the content.
Post Navigation
The Post-Navigation widget, typically employed within posts, provides the user the ability to navigate to the next or the previous post. While both “next post” and “previous post” links are accessible, the wrapper element has been augmented with an ARIA role attribute, role="navigation", along with an aria-label="Post navigation".
These additions serve an important purpose; they explicitly declare that the section containing these links is a dedicated navigation area, distinct from the primary content of the post itself.
Accessible Form Names
To improve forms accessibility in both the Login widget and the Forms widgets. Each form now incorporates an aria-label attribute. This label informs users precisely what the form’s purpose is. This distinction becomes especially critical on pages featuring multiple forms, enabling users to differentiate between them easily and accurately.
While the Login widget has a hardcoded aria-label, within the Form widget users can customize the form label to specific needs and context, providing a higher degree of control and flexibility.
Icon Box & Image Box Hover Colors
User feedback has highlighted the desire for hover and focus color changes in the Icon Box and Image Box widgets. While this functionality is primarily requested for aesthetic enhancements, it offers accessibility improvements, as well.
Setting distinct hover colors provides interactive visual cues. It also assists users who rely on keyboard navigation or screen readers by clearly identifying interactive elements.
Experiments and Features
In this release, Elementor continues to improve and merge features and experiments, laying the ground for Editor V4. Elementor 3.30 merged and updated the following features:
Merged Features
The “Editor Top Bar” feature was introduced in Elementor 3.13, to improve the editing experience inside the Elementor editor, enhancing the reachability of different panels and features. This feature reached maturity and was merged into the plugin.
The “Load Google Fonts locally” feature was introduced in Elementor 3.27, to improve page performance when using Google Fonts. According to our data, this feature is one of the most impactful performance improvements we ever introduced. It is now merged into the plugin and is active on all websites. Read the developers advisory section for more information.
The “Launchpad Checklist” feature was introduced in Elementor 3.22, to help with the necessary first steps in website creation. This hidden feature was already available for new Elementor installs. Now, after the merge, it will be available for existing websites too.
New Stable Feature
The “Element Caching” feature was introduced in Elementor 3.22, and is now a mature feature that had its status upgraded from beta to stable. This performance enhancement reduces loading times by serving up a copy of an element instead of rendering it fresh every time the page is loaded.
Upgraded Features
The “Optimized Markup” feature, introduced in Elementor 3.25, is now active by default for new websites. This performance enhancement reduces the DOM size by eliminating HTML tags in various elements and widgets. Read more about this change in the developer advisory section.
The “Menu” widget, introduced in Elementor 3.12, is now active by default for new websites. This experiment adds an advanced mega-menu widget with nesting capabilities, helping web creators to create complex navigation structures with unique designs.
Developer Advisory
Improving stability continues to be a main focus for Elementor. Both WordPress plugins and Elementor addons looking to improve compatibility with Elementor are advised to adjust the following:
Font Optimization
Some websites utilize plugins to optimize Google Font loading. These plugins typically target fonts sourced from the Google Fonts CDN and redirect them to alternative URLs, such as other CDNs or local server locations.
Elementor has changed its Google Font loading method. Instead of loading fonts and their CSS files from Google’s CDN, Elementor now loads them locally. The fonts are downloaded to the website’s server and served to the user from there.
If your website depends on an external plugin for Google Font optimization, it is essential to notify the plugin developers. Advise them to adapt their plugin to identify and replace Elementor fonts, which are now loaded from the website’s servers.
Elementor stores fonts locally within this directory: https://{SITE_URL}/wp-content/uploads/elementor/google-fonts/fonts/
To ensure the /uploads/ directory is not located elsewhere, use the wp_get_upload_dir() function to fetch the correct directory.
Optimized Markup
The Optimized Markup experiment, initially introduced in Elementor 3.25, was aimed at reducing button markup across various widgets. Elementor 3.26 expanded this feature to reduce markup for all widgets.
Guidelines have been issued to Elementor addon developers on optimizing Elementor widget DOM size, urging those who have not yet updated their widgets to do so before Elementor 3.30’s final release.
Activating Optimized Markup on existing websites in version 3.30 may lead to visual regressions on websites using third-party addons that have not implemented the necessary changes.
Elementor has contacted numerous addon developers hosted on wp.org, with instructions to update their code. However, many privately hosted plugin developers remain unreachable. Should any visual issues arise after the upgrade, identify the affected widget and reach out to its developer.
Debugging Custom CSS & JS
Many websites utilize custom CSS or JavaScript that target various selectors. Regular maintenance of this code is essential for continued functionality. Please be aware that visual regressions may occur if your code includes deprecated selectors that were removed in the Optimized Markup experiment.
Specifically, review and update your custom CSS and JS to eliminate the following selectors:
.elementor-swiper.elementor-button-wrapper.elementor-widget-container
Ensure your custom code is adjusted accordingly to avoid any display issues.
To Conclude
Elementor 3.30 marks a significant step forward in web creation and maintenance, delivering enhanced performance, accessibility improvements, and developer-focused features. Web creators, stay updated to keep your website optimized. Addon developers, make sure to stay updated so that your plugin remains compatible and benefits from the latest improvements.
