Elementor 3.31 is focusing on enhancements in Editor V4, new display of Shape Dividers, and significant improvements in Accessibility and Performance. Developers and users alike will find valuable insights into the latest features, whether these are optimizations for existing features or introduction to new ones.
Editor V4
Elementor is continuing to build the Editor of the future. It focuses on ease-of-use, performance, cleaner code output, and scalable styling systems. Though powerful, it’s still in early alpha, designed for testing on staging sites, not production.
CSS Variables (Color and Font)
Color and font variables are now fully integrated into Editor V4 for a consistent designs across the website. They replace the existing V3 Global Styles.
You can define variables once, and assign them across multiple elements and classes. Changing a variable updates everywhere it’s applied. Admins can create and manage variables. Non‑admin users can only apply existing ones.
HTML Attributes
Elementor Pro now supports a structured HTML Attributes repeater for all V4 Elements. You can control the HTML output by safely adding multiple key‑value pairs such as data-*, aria-*, role, or lang attributes with built-in validation to prevent invalid or risky entries, resulting in cleaner markup and better accessibility or integration.
CSS Filters & Backdrop Filters
Editor V4 adds full support for CSS Filters (like blur, brightness, contrast, grayscale, hue‑rotate, invert, saturate, sepia, and drop shadow) and Backdrop Filters with a visual repeater interface. Now, it’s possible to stack, reorder, hide, or delete filters with live preview. Backdrop Filters apply effects behind transparent elements, enabling glass‑like (frosted) overlays and layered UIs. Furthermore, opacity controls are now included under the Effects section.
Divider Atomic Element
The new Divider Element in V4 is rendered as a semantic <hr> with no extra wrappers. It’s lightweight, responsive-ready, fully stylable via Classes, and aligned with atomic design principles to enforce clean and reusable structure.
Usage insights and locator tools
Elementor 3.31 introduces several enhancements in the Class Manager for tracking and auditing design systems. You can now see the usage count badges on Global Classes, showing how many times each class is applied. Clicking a usage badge opens a Locator Panel listing affected pages and per‑page usage counts. Class Search helps find and filter utility or atomic classes.
Style Inheritance
Sometimes one design overrides another. With the CSS-first approach it may become a problem. In V4, you can see the active and the muted inherited values. Furthermore, the indicator shows where styles come from – class assignments, responsive breakpoints, or base defaults. This makes styling origins visible and editable without overriding confusion.
Shape Dividers
Elementor 3.31 enhances the design workflow with an improved user interface for Shape Dividers. This update introduces a new visual preview, making it faster and more intuitive to choose the right shape for your design.
New Visual Interface
Following the improvements introduced to the Mask feature in the previous release, Shape Dividers now use a visual choice control. Instead of a traditional dropdown menu, all available shape dividers are displayed as clickable thumbnails.
This allows users to see all the available options at a glance and apply their desired shape with a single click, streamlining the design process and reducing trial-and-error.
Seamless Backwards Compatibility
Although the underlying system has been updated to support the new visual interface, third-party developers do not need to change or update their code. Elementor 3.31 maintains full backward compatibility with custom shape dividers registered by third-party addons, ensuring a smooth upgrade for all users.
Performance Improvements
With every release, Elementor optimizes performance and improves page loading speed. Version 3.31 delivers further enhancements by reducing DOM output and cutting down on unused CSS across several widgets and features, leading to faster and leaner websites.
Smaller DOM Size
In earlier releases (v3.21 and v3.22), Elementor significantly reduced DOM size by preventing widgets without content from rendering unnecessary HTML. Since then, with the help of feedback from our community, we’ve identified and resolved additional cases where empty HTML was still being generated.
In Elementor 3.31, the Table of Contents (TOC) widget has been optimized, too. If the TOC has no heading, it will no longer render an empty HTML tag. This small change contributes to a cleaner DOM and improved accessibility and performance.
Reduced CSS
Elementor 3.31 further reduces unused CSS, and improves page speed and performance. This release brings meaningful CSS optimizations to several widgets and features.
The CSS for the Icon Box widget has been reduced by over 50%, shrinking from over 10KB to less than 5KB. This was achieved by restructuring its layout display from block to flex, which allowed simplifying and consolidating style rules.
The CSS output added to page-{id}.css, on pages using the Mask feature, has been cut by half. While this CSS was already minimal, the reduction reflects Elementor’s ongoing commitment to minimize resource usage wherever possible.
Ribbon styles for Call to Action & Price Table widgets have been optimized, as well. Previously, both widgets included duplicated ribbon styles in their CSS. These styles loaded regardless of whether the ribbon was used. In Elementor 3.31, these styles have been extracted into a separate conditional stylesheet. Now, the ribbon CSS loads only when the feature is enabled.
Accessibility Improvements
Elementor 3.31 introduces important accessibility enhancements, continuing our commitment to making websites more inclusive and compliant with the latest web standards. This update focuses on improving background video and enhancing semantic markup.
Background Videos
When using background videos in containers or sections, Elementor adds an inner <div> containing an <iframe> to display the video behind the content. While visually engaging, these videos are purely decorative and should not interfere with screen-readers and other assistive technologies.
With version 3.31, background videos are now excluded from the accessibility tree entirely. This ensures that users relying on assistive technologies can focus on meaningful content without unnecessary distractions.
Semantic Header & Footer
Elementor’s Theme Builder allows you to create custom headers, footers, and other theme parts. Previously, these parts were wrapped in a <div> HTML tag by default. To improve accessibility and structure, users had to manually change the wrapping HTML tag to semantic tags like <header> or <footer>.
Starting in Elementor 3.31, this step is no longer necessary. New headers and footers will now use <header> and <footer> tags by default, ensuring proper semantic structure out of the box.
To maintain full backward compatibility, this change does not affect existing headers or footers. Only newly created headers and footers will have these tags selected by default.
Experiments and Features
Elementor 3.31 continues the effort to boost performance by evolving experimental features, promoting them to stable status, and activating them. This release brings important updates to two key performance-focused features.
New Stable Feature
The “Optimized Markup” feature reduces the DOM size by removing unnecessary HTML tags from various elements and widgets. It was originally introduced in Elementor 3.25, enhanced in Elementor 3.26, and again in Elementor 3.27. After extensive testing and community feedback, this feature has now matured and is officially marked as stable, helping ensure faster load times with cleaner markup.
Upgraded Features
The “Element Caching” feature, introduced in Elementor 3.22, improves page speed by serving cached versions of elements instead of re-rendering them on every load. Already marked as stable, this feature is now enabled by default on all websites, ensuring better performance out of the box.
Developer Advisory
Maintaining stability and forward compatibility is a top priority. As Elementor continues evolving, we encourage both Elementor addon developers and web creators to stay aligned with the latest standards to ensure websites remain stable and fully functional.
Optimized Markup Roadmap
The Optimized Markup experiment is now stable and is planned to be activated for all websites in 3.32 and merged in 3.33.
The vast majority of Elementor Addons have updated their code to comply with the new DOM structure. However, some privately hosted plugin developers remain unreachable. Should any visual issues arise after the upgrade, identify the affected widget and reach out to its developer.
If the visual regression occurs because of custom CSS or JS the site is using, look for .elementor-swiper, .elementor-button-wrapper and .elementor-widget-container selectors and eliminate them.
To Conclude
Elementor continues to evolve as a platform for the future of web design. This release offers a blend of crucial optimizations for existing websites and new features for the future of web design.
