Version 4 Architecture: Ready for Production

Version 4 introduces a completely new architectural foundation, specifically designed to clearly separate structure, styling, and content. This separation is key to enabling more predictable layouts and safer reuse of elements.

While the overall editor experience will feel familiar, the underlying systems have been extensively updated to support larger, more complex site builds. 

Version 4 Beta is considered production-ready for real projects, meaning core editing workflows are stable and suitable for live sites. The output is predictable and maintains compatibility with all existing Elementor sites. 

This is the final major step before the official 4.0 release and the automatic activation of atomic features on new sites. Important to note that existing sites and features aren’t going anywhere. New features will continue to live alongside existing ones and you’ll be able to use version 4 and version 3 together.

Components: Build Once, Reuse Everywhere

Components are a primary building block of version 4, representing a major advancement toward a truly scalable, production-ready editing environment. They are designed to let you create reusable layout sections that remain fully synchronized across your site while supporting controlled per-instance content customization. Components are built with the needs of real projects, complex workflows, and professional teams in mind. 

You can create reusable layout blocks with full site synchronization by converting any Flexbox or DIV Block into a Component and giving it a clear identity. Components are then easily accessible in a dedicated tab and can be added to the canvas just like any native element. 

When a Component’s layout or structure is edited, all instances update automatically across the site, making them ideal for shared, consistent sections such as headers, feature grids, call-to-action banners, and other repeated patterns. 

Components also support properties for content, giving you the ability to expose specific parts of a Component’s content for per-instance editing. 

As the site admin, you determine which content properties—including text input, media, links, and HTML tags—can be customized. This ensures that editors can adjust only the exposed properties, keeping the layout and structure protected and globally synchronized. 

This balance of flexibility and consistency makes Components particularly powerful for professional workflows, team collaboration, and client handoff. As a core capability of version 4, they provide layout-level reuse instead of the previous widget-level globals, enforce a clear separation between structure and content, and offer central management for scalable site building. Together with Variables, Classes, and the new styling architecture, Components introduce a more systematic method for building and maintaining sites as projects grow in complexity.

Inline Editing for Atomic Elements

We are introducing Inline Editing for Atomic Heading and Paragraph Elements, a feature that significantly improves the editing workflow in version 4 by allowing you to edit text directly on the canvas without having to shift focus to the panel. 

When an Atomic (version 4) Heading or Paragraph Element is clicked, the text becomes editable directly on the canvas. Changes are applied instantly and remain fully synchronized with the panel inputs, which makes quick copy updates, layout reviews, and content refinements faster and more intuitive, particularly when working across multiple sections or pages. 

Contextual formatting controls appear as a floating toolbar near the selected text, providing quick access to common inline actions directly on the canvas. The toolbar supports Clear formatting, Bold, Italic, Underline, Strikethrough, Superscript and Subscript, and Links. The toolbar is contextual, appearing only when text is selected, staying within the viewport, and supporting keyboard shortcuts for accelerated editing. All formatting is applied visually, without exposing raw HTML or requiring code-level interaction.

A Unified Elementor Menu in the WordPress Admin

In version 3.34.2, a refreshed Elementor menu was introduced into the WordPress Admin, designed to make site management clearer, more consistent, and easier to navigate under a single, unified Elementor entry. 

At the top of the menu, you will now find a new Elementor homescreen, which acts as a central dashboard with shortcuts to common actions and provides a clearer overview of your Elementor setup. 

All editor-related settings and tools are now logically grouped under a new Editor submenu, containing all the familiar menu functionalities. 

Templates are now part of this new Editor menu, and Custom Fonts, Custom Icons, and Custom Code have been consolidated and grouped as “Custom Elements.”

Furthermore, System Info, Element Manager, and Licence/Connect are now grouped together under “System” inside the Editor menu. You can find more details on these navigation changes here.

Dynamic tags in color controls

Dynamic tags are now supported in color-related controls, including text color, background color, border color, box shadow color, and drop shadow color. This allows colors to be driven dynamically by retrieving them from ACF or WordPress native custom fields.

Improved HTML semantics for links and actions

To further improve accessibility, keyboard navigation, and screen reader behavior, link behavior has been refined to better reflect semantic roles. Elements that trigger actions now use the appropriate tag, while navigation continues to use tags.

To Conclude

The release of Elementor 3.35, featuring the production-ready version 4 Beta, marks a critical inflection point in the Editor’s evolution. With its new architecture—specifically designed for clear separation of structure, styling, and content—developers can rely on a more stable, scalable, and predictable foundation for complex builds.

The introduction of Components serves as the cornerstone of this new system, enabling layout-level reuse with global synchronization and fine-grained control over instance-specific content, a significant step up from previous global widgets.

Complementary features, such as Inline Editing for Atomic Elements, directly streamline the day-to-day editing experience, while the unified Elementor menu in the WordPress Admin simplifies site management and navigation.

Together with the addition of dynamic tags in color controls and refinements to HTML semantics for improved accessibility, this update firmly establishes Elementor on the final stretch toward the official 4.0 release and a more systematic future for site building.

We encourage all developers to begin integrating the version 4 Beta into their production workflows to prepare for its automatic activation as the default editing experience.

The post Elementor Editor 3.35 Developers Update  appeared first on Developers.

A New Navigation Foundation

As part of this unification, 3.34.2 introduces a structural redesign of navigation inside WordPress. Elementor Home is now the primary hub for the entire Elementor experience, with the Editor nested directly beneath it. This change reflects how users actually work today, moving between creation, optimization, and management tasks rather than treating the editor as a standalone destination. The goal is to provide a clearer mental model for users while giving us a scalable structure for future capabilities.

Editor Navigation and UI Updates

Inside the Editor itself, navigation has been refined to match this new structure. It is important to note that all of your existing settings and tools remain fully accessible; they have simply been reorganized to provide a clearer user experience. 

Access is now handled through a streamlined flyout menu, supported by a new internal sidebar that allows users to move between editor-specific pages without leaving context. This reduces friction, keeps workflows focused, and creates a more consistent surface for both native features and extensions.

The primary change involves the consolidation of several key areas within the menu. 

For instance, Templates are now an integral part of the Editor settings, no longer appearing as a separate section in the WP Admin. 

Similarly, Custom Fonts, Custom Icons, and Custom Code have been logically grouped together under a new “Custom Elements” heading inside the Editor menu. 

To further streamline site management, System Info, Element Manager, and License/Connect are now consolidated under a new “System” group. This reorganization provides a more intuitive flow for users balancing page building with broader site management tasks.

Changes to Third-Party Menu Integrations

For developers maintaining third-party integrations, existing plugin menus that previously appeared under the Elementor menu are now consolidated into the Editor flyout and rendered as collapsible items within the new sidebar. 

To ensure continuity, plugins registered under the Elementor menu are automatically relocated, so users will still find them where expected. However, this is a transitional measure. 

Going forward, we strongly recommend registering menus as standard WordPress admin menus or placing them outside of the Editor area, rather than relying on Elementor-specific menu locations.

Unsupported Menu Implementation

It’s also important to note that unsupported or non-standard menu injection methods will no longer be rendered in the new flyout or sidebar. Any workarounds that bypass official WordPress or Elementor APIs are not supported under the new navigation system. This is part of a broader effort to keep the Editor environment predictable, performant, and easier to evolve without breaking user experiences.

What This Means for Developers

As always, your existing plugins and subscriptions remain unaffected in terms of availability, but this is a good moment to test the latest version and review how your integrations are registered and displayed. Aligning with standard WordPress menus and supported APIs will ensure your extensions remain compatible as Elementor continues to evolve from an editor into the infrastructure behind modern web creation. 

Looking Ahead

These changes are foundational and intentionally forward-looking. As Elementor One continues to grow with new platform-level features, including deeper AI capabilities and the upcoming version 4 of the Editor with a CSS-first, atomic architecture, having a clean, well-defined navigation and extension model is critical. Version 3.34.2 is one of the steps that prepares both users and developers for that future.

The post Elementor Editor 3.34.2 Developers Update  appeared first on Developers.

This release brings additional foundational UI patterns while strengthening the underlying architecture that supports CSS-first styling and class-driven workflows. All features described below apply to Editor V4, which remains in Alpha and is still under active development.

Editor V4 – Atomic Editor

Editor V4 represents the ongoing re-architecture of Elementor around atomic design principles, explicit structure, and predictable styling behavior. Rather than abstracting layout and behavior behind widgets, V4 exposes composition through Atomic Elements, Global Classes, and a clearer separation between structure, styling, and behavior.

The features introduced in 3.34 build on this foundation and reflect the direction of the editor as it moves toward a fully atomic, extensible system. As Editor V4 is still in Alpha, these capabilities are experimental and may change as feedback is collected and the system evolves.

Nested Tabs

Elementor 3.34 introduces Nested Tabs as a fully atomic replacement for preset-based tab widgets, allowing developers to build tab interfaces using explicit, composable Atomic Elements. Tabs are exposed as a clear structural hierarchy that separates triggers, content areas, and panels, enabling granular control over layout and styling.

Because Nested Tabs are built entirely on the atomic styling system, any part of the structure can be styled with Global Classes, nested with other Atomic Elements, and understood directly through the Structure panel. This release also adds a dedicated Selected state for Tab Triggers, allowing active tab styling using standard atomic controls without custom CSS or JavaScript.

Entrance Interactions

Elementor 3.34 introduces Entrance Interactions, the first implementation of the new atomic Interactions system, focused on lightweight, performance-minded motion. Atomic Elements now include a dedicated Interactions tab that separates behavioral logic from structure and styling, establishing a clear foundation for future interaction capabilities.

Entrance Interactions currently support animations triggered on page load or when elements enter the viewport, with motion configured through granular properties such as effect type, direction, duration, and delay. Multiple entrance effects can be layered on a single element, and each interaction includes a preview control to replay animations directly on the canvas.

Additional Editor V4 Improvements

This release includes several foundational improvements that increase consistency across the editor. Atomic Elements are now automatically wrapped in an Atomic Flexbox container, replacing the legacy V3 container element and resulting in cleaner markup, more predictable layout behavior, and a fully atomic structure from insertion onward.

Display Conditions are now supported directly in the General tab of Atomic Elements, providing a unified workflow for controlling visibility. Custom CSS now supports media queries in Desktop mode, enabling advanced breakpoint logic. The Paragraph Element has been extended with inline span support for more refined semantic text styling.

Accessibility Improvements

Elementor 3.34 continues to refine accessibility across widgets, focusing on reducing noise in assistive technologies and aligning output with accessibility best practices.

Flip Box: Decorative Icons Hidden from Screen Readers

In this release, decorative icons in the Flip Box widget have been removed from the accessibility tree, preventing them from being announced by screen readers as images. These icons do not convey semantic meaning and are intended purely for visual decoration, and exposing them previously caused unnecessary verbosity for screen reader users.

With this change, Flip Box output is now consistent with other widgets, where decorative visuals are excluded by default, resulting in cleaner, more focused navigation for users relying on assistive technologies.

Additional Changes and Fixes

Beyond the headline features, Elementor 3.34 includes a broad set of refinements and fixes across both the free and Pro versions. These updates improve frontend output consistency, refine editor controls and UI behavior, expand support for CSS logical properties and RTL rendering, extend Dynamic Tags integration, and address issues related to transforms, hover states, cache regeneration, localization, and PHP 8.4 compatibility.

Together, all these changes further stabilize the atomic editor and reduce friction when building with Editor V4.

To Conclude

Editor V4 remains under active development, and the features introduced in Elementor 3.34 should be treated as experimental and not production-ready. Markup, APIs, and behavior may evolve as development continues, and early testing and feedback play a key role in shaping future iterations of atomic elements, interactions, and global styling systems.

Elementor 3.34 represents another step toward a fully atomic, CSS-first editor, strengthening the foundation for what Editor V4 will become.

The post Elementor 3.34 Developers Update appeared first on Developers.

Editor V4

Elementor’s Editor V4 continues its Alpha phase, introducing major improvements built on CSS-first styling, atomic design, and a class-driven workflow. This release focuses on three key updates that enhance flexibility, consistency, and creative control for developers and designers.

Variables Manager

The new Variables Manager centralizes into a single panel all your design tokens – colors, typography, and sizes). It allows users to view, create, edit, and delete variables in real time, with instant visual feedback across the entire website. Built for scalability and clarity, it simplifies managing complex design systems, ensuring consistency and speeding up workflows.

Custom CSS for V4 Elements

Custom CSS has been completely rebuilt for Editor V4. Pro users can now write element-scoped CSS directly in the Style panel. Each rule is isolated to prevent conflicts, supports specific responsive breakpoints (desktop, tablet or mobile), specific state (normal, hover, active or focus), and offers autocomplete, comments, and real-time previews.

Blend Mode

A new Blend Mode capability introduces creative depth by defining how an element interacts with layers beneath it. Using native CSS blend modes (like Multiply, Screen, Overlay, and Darken), users can craft sophisticated overlays, contrasts, and artistic effects without writing code.

Overall, this version marks another step in making Elementor’s V4 Editor more modular, performant, and design-system-driven—offering greater precision and creative freedom while laying the foundation for its upcoming Beta release.

Accessibility Improvements

Elementor 3.33 continues to strengthen accessibility across widgets and interactions, expanding on the improvements introduced in version 3.32. This update enhances support for the user’s reduced-motion preference and improves assistive technology compatibility in legacy widgets.

Reduced Motion in Flip Box

The “Flip Box” widget includes multiple transition effects (Flip, Slide, Push, Zoom In, Zoom Out, and Fade), each with unique animation durations and delays. Previously, these animations ignored the user’s reduced-motion preference. With Elementor 3.33, Flip Box now fully respects this setting. When reduced motion is enabled at the system level, all Flip Box animations are disabled, ensuring a smoother, motion-free experience for users who prefer minimal animation.

Star Rating Widget

Although Elementor 3.17 introduced the accessible “Rating” widget to replace the older “Star Rating” widget, many sites still rely on the original version. Elementor 3.33 updates the legacy Star Rating widget to better align with accessibility best practices.

Stars have been removed from the accessibility tree, the title attribute has been replaced with screen-reader-only text, and both widgets now share consistent labeling. This update ensures that users of assistive technologies experience clearer, more consistent feedback, whether they’re using the modern Rating widget or the older Star Rating widget.

Updated Frontend Browser Support

It’s been a year since the last time Elementor updated the list of supported browsers. Back then,  Elementor 3.26 extended support for modern web capabilities by discontinuing compatibility for older Safari versions.

Now, Elementor 3.33 updates the supported browsers to reflect the evolving web landscape and open the possibility to utilize modern HTML, CSS and JS features.

Supported Browsers

Previous browsers support, since Elementor 3.26:

• Chrome 100 – released on March 29, 2022.
• Firefox 100 – released on May 3, 2022.
• Safari 15.5 – released on May 16, 2022.

New browsers support, since Elementor 3.33:

• Chrome 111 – released on March 13, 2023.
• Firefox 111 – released on March 27, 2023.
• Safari 16.4 – released on March 27, 2023.

New Supported Features

This update aligns Elementor’s frontend compatibility with the Baseline initiative led by Google, which defines a shared foundation of widely supported web features. By adopting this newer browser range, Elementor can take advantage of modern web APIs and CSS capabilities available across all major browsers, ensuring faster innovation, better performance, and a more consistent user experience.

Stylesheet Changes

Elementor 3.33 continues its transition toward modern, bi-directional CSS by removing redundant RTL stylesheet files. Traditionally, Elementor generated two stylesheets per file, one for LTR (left-to-right) and another for RTL (right-to-left) layouts. With the adoption of CSS Logical Properties over the last 20 releases, these separate files are no longer necessary for most internal styles and have been deleted.

Modern Bi-Directional CSS

Historically, Elementor used SASS to compile both style.css (LTR) and style-rtl.css (RTL) files, flipping directional properties like padding, margins, and text alignment. However, nowadays, modern browsers natively support CSS Logical Properties and values, which automatically adapt styles based on the page’s writing direction, defined by the dir attribute (<html dir=”rtl”>).

Starting with version 3.14, Elementor began replacing physical properties (e.g., margin-left, text-align: right) with their logical equivalents (margin-inline-start, text-align: end). This migration shifted direction handling from Elementor’s build process (using SASS) to the browser itself, minimizing the difference between LTR and RTL files until many stylesheets became identical.

Removing RTL files

At this point, after 19 major releases,maintaining this RTL & LTR stylesheet duplication is no longer necessary. Therefore, Elementor 3.33 deleted multiple unneeded RTL stylesheet files. As a precaution, the change currently applies only to the Elementor Editor styles, WordPress admin styles, and other non-frontend areas, ensuring that website frontend remain unaffected.

This cleanup reduces unnecessary files, removes complexity, decreases the plugin size, while maintaining full bi-directional support through logical CSS.

Future Plans

In upcoming releases, the cleanup will be extended to widget styles, which is a more delicate process since it impacts frontend output. This will be introduced separately once additional testing is completed.

Looking further ahead, Elementor aims to fully transition from a SASS-based builder process to native CSS nesting. TThis shift aligns with modern web standards and simplifies long-term stylesheet management. While this is a longer-term goal and won’t happen within the next 12 months, it remains a key objective.

To Conclude

Elementor 3.33 builds upon the solid groundwork laid in previous versions, moving closer to a fully modular, design-system-driven editor while cleaning up legacy processes and embracing modern web technologies. With a renewed focus on scalability, accessibility, and developer flexibility, this release not only improves the current workflow but also prepares the ecosystem for the upcoming Editor V4 Beta. As Elementor continues its modernization journey, developers can look forward to a leaner, faster, and more future-proof platform.

The post Elementor 3.33 Developers Update appeared first on Developers.

Editor V4

Elementor 3.32 continues the Editor V4 journey with new styling tools and workflow improvements. This release introduces Transform, Transitions, Size Variables (Pro), and Class management upgrades. Since it’s still in alpha stage development, these features are experimental and not production-ready, with possible breaking changes. We recommend only using them on staging sites.

Transform Controls

The new Transform feature lets users visually move, scale, rotate, and skew elements in both 2D and 3D. It includes stacking per state, perspective controls, and repeaters for organization. Combined with States, Transforms enable dynamic micro-interactions like hover scaling or rotating cards for tactile effects.

Transitions Controls

Transitions bring polished animations when elements shift between states like hover and focus. Free users get a single transition, while Pro users gain advanced control over individual properties, durations, and stacked animations. Combined with Classes, Transitions ensure consistent, reusable effects across your website.

Size Variables

Size Variables expand the Variables system, joining Color and Font Variables to unify spacing and sizing across designs. They work on margins, typography, layouts, and borders, storing both value and unit. Designers can update one variable (e.g., button radius) and apply consistent changes sitewide.

Class Management

New tools improve Class workflows with conversion and filtering. Users can instantly convert local styles into reusable Global Classes, streamlining design scalability. Filters in the Class Manager help spot unused, empty, or page-specific classes, making it easier to maintain a clean and efficient style library.

Accessibility Improvements

Elementor continues to invest in improving your website accessibility, with every release improving additional accessibility issues. Our commitment is emphasized in the latest WordPress Page Builder Accessibility Comparison, by Equalize Digital. With an increase in our accessibility score from 70.13% in 2024 to 75.55% in 2025, Elementor continues to make measurable progress towards being one of the most accessible page builders.

This release focuses on two objectives: removing decorative elements from the accessibility tree, and respecting the reduced-motion preference in multiple widgets and features. We’re happy to share that some accessibility issues fixed in this release were actually detected with the help of Ally, our free accessibility plugin.

Decorative Icons

Various Elementor widgets display icons. In most cases, these icons are decorative elements. According to accessibility best practices, decorative elements should not be visible to assistive technologies. To solve this issue, Elementor 3.32 removed icons from the accessibility tree, keeping only the screen-reader text.

Furthermore, depending on the “Inline Font Icons” experiment status, Elementor uses either the <i> or <svg> tag to display these icons. When icons are displayed as SVG, many accessibility tools recognise these SVG files as images and warn that they lack a proper alt attribute. Removing decorative icons from the accessibility tree fixes this issue, too.

For example, the Animated Headline widget highlights texts with animated SVG shapes behind the text; these SVG shapes are now completely hidden from the accessibility tree as they are purely decorative elements. Both the Social Icons and Share Buttons widgets have their icons removed from the accessibility tree, as well, keeping only the screen-reader text with the social media name. And finally, the dropdown indicator in WordPress Menu widget is now removed from the accessibility tree, as it’s not a separate interactive element, rather a decorative indicator.

Motion Effects

The Motion Effects feature adds the ability to integrate various “Scrolling Effects” and “Mouse Effects” directly into the page. These effects can be applied to individual widgets or to the backgrounds of containers, creating highly immersive and visually stimulating designs.

However, operating systems include a “reduced-motion” preference, allowing users to explicitly signal their desire for less animation and visual movement. When this preference is activated, websites should respect this setting, ensuring a comfortable and accessible browsing experience for all.

Elementor 3.32 now fully respects the user’s reduced-motion preference. Meaning that no “Motion Effect” is activated when the reduced-motion preference is enabled.

Animated Headline

The Animated Headline widget is a versatile tool that allows designers to create engaging and dynamic text elements with “highlighted” and “rotating” animation effects.

Previously, the widget didn’t respect reduced-motion preferences in operating systems. The animations within the widget would always remain active, regardless of the user preferences.

Elementor 3.32 no longer activates the “highlighted” animation when users activate the reduced-motion preference on their OS. This release ensures “highlighted” animation now respects the user’s operating system’s reduced-motion preference.

Looking ahead, future releases further improve accessibility, adding support for reduced-motion to “rotating” text animations, as well.

Experiments and Features

In this release, Elementor continues to improve and merge features and experiments, laying the groundwork for Editor V4. Elementor 3.32 merged and updated the following features:

Merged Features

The “Cloud Library” feature, originally introduced in v3.29 and enhanced in v3.30, adds the ability to save and reuse design elements across multiple projects, by saving them in the cloud and loading them on other websites you manage. Now, this feature is merged into Elementor.

The “Element Caching” feature, originally introduced in Elementor 3.22, stores the HTML of each element/widget in the database. When the page is loaded, rather than rendering fresh elements each time, it uses cached HTML, boosting performance. Originally introduced in Elementor 3.22, and after a long data collection period, it is now safe for all websites and merged to Elementor 3.32.

Upgraded Features

The “Optimized Markup” feature, originally introduced in Elementor 3.25, is a performance feature that reduces unnecessary HTML tags and causes the page DOM size to decrease, thus decreasing the browser’s parsing and rendering time. Already marked as stable and active on new websites, this feature is now enabled by default on all websites, ensuring better performance out of the box.

UPDATE: The Optimized Markup change was reverted.

Performance Improvements

With the release of Elementor 3.32, websites may experience noticeable performance improvements. These gains are not the result of introducing new features, but rather from merging and activating existing performance experiments. Websites are affected differently based on the status of the experiments on their websites.

The sites that will benefit the most are those where experimental features were disabled. Starting with this version, Optimized Markup is enabled on all websites, reducing the overall HTML DOM size. At the same time, Element Caching is now merged to Elementor and active by default on all websites, storing HTML in the database and reducing the amount of server-side computation required. Together, these changes contribute directly to a faster Time to First Byte (TTFB) on the frontend.

Websites that left experiments in their “default” state may also see improved performance, thanks to the activation of Optimized Markup on all existing websites.

The only case where website performance will remain unchanged is for websites that had already enabled these experiments manually.

UPDATE: The Optimized Markup change was reverted.

PHP 8.4 Compatibility

Elementor has long supported PHP 7.4 and higher. However, running WordPress with wp_debug enabled on PHP 8.4 revealed a number of deprecation notices. These were mostly related to nullable parameters. When a function had a parameter using null as its default value but null was not explicitly declared in the type definition, PHP 8.4 flagged it as deprecated.

In Elementor 3.32, these issues have been addressed across dozens of files in both Elementor and Elementor Pro. The fixes cover the Frontend, the Elementor Editor, and the WordPress Admin, ensuring that nullable parameters are properly declared and compatible with PHP 8.4.

By resolving these deprecations, Elementor removes obstacles for websites migrating to newer PHP versions, unlocking performance improvements that benefit the entire WordPress and Elementor ecosystem.

Elementor remains committed to full compatibility with new PHP versions, and we encourage developers to report any remaining issues on our GitHub repository, so they can be resolved quickly.

Developer Advisory

With the merge of the Element Caching feature to Elementor, it will be activated by default on all websites.

Websites facing issues after the upgrade can either clear cache from WordPress Admin > Elementor > Tools screen. Or, disable the Elements Caching feature from WordPress Admin > Elementor > Setting screen > Performance tab. This is useful when debugging compatibility issues with other caching plugins.

For high-traffic or infrequently updated websites, consider increasing the cache duration from the default one day to a longer period (three days, a week, a month, or more). A longer cache duration reduces resource usage, improving website speed and performance.

To Conclude

Elementor 3.32 is a step forward in evolving the Editor V4 experience, strengthening accessibility, and boosting performance across all websites. By merging performance experiments, enhancing compatibility with PHP 8.4, and introducing new design tools, this release ensures developers can build faster, more accessible, and future-ready sites. As always, we encourage testing experimental features in staging environments and sharing feedback to help shape the next generation of Elementor.

The post Elementor 3.32 Developers Update appeared first on Developers.

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.

The post Elementor 3.31 Developers Update appeared first on Developers.

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.

The post Elementor 3.30 Developers Update appeared first on Developers.

Editor V4 Alpha

Elementor 3.29 brings you a glimpse into the future of web creation with an alpha version of Editor V4. From new architecture based on CSS, to new layout tools and advanced styling, this release lays the groundwork for the future of the Editor.

Core Enhancements

Elementor 3.29 marks a major step towards a CSS-first architecture, shifting the focus to CSS-based styling with minimal JavaScript. This approach improves both performance and maintainability, especially for developers working on large-scale projects.

The release introduces Atomic Elements like Button, Heading, Image, Paragraph, and SVG. These modular building blocks promote design consistency, flexibility, and a cleaner codebase across the website.

A unified Style Tab now centralizes styling controls for all elements. No more style inconsistencies between widgets.

Design & Layout Features

Editor V4 introduces not only new atomic widgets, it also brings new layout elements like the Div block, Flexbox, and Grid. These improvements make layout adjustments feel more user-friendly, especially when working with complex designs.

The rollout of native layout elements enables precise, structured positioning with modern layout principles. Developers can create responsive designs faster with more control over alignment and spacing. Furthermore, the introduction of multiple element types enables a versatile layout component designed for structural flexibility. It gives the user a cleaner foundation for organizing content with precision.

Advanced Styling Features

The new CSS Classes feature lets developers apply consistent styles across multiple elements. By assigning reusable classes, maintaining design uniformity becomes much easier.

With native support for States (Pseudo-Classes), it’s now possible to style elements based on hover, focus, or active states. This adds dynamic, interactive behavior with minimal effort.

To further enhance clarity, the UI now displays Indications & Inheritance markers on style properties. These visual cues help developers identify what’s overridden or inherited, improving debugging and design precision.

Future releases will expand styling possibilities with CSS Variables, allowing for centralized control of global fonts, colors, sizes, etc. This reduces redundancy and makes site-wide adjustments more efficient.

Developers Docs

The developer APIs for Editor V4 are not ready yet for external use, as the code is still under development and may be changed. Currently, we can’t commit to a timeline. As soon as we finalize the APIs, we will publish docs for addon developers on how to extend Editor v4’s new features.

Cloud Templates Library

Elementor 3.29 introduces the Cloud Templates library — a powerful new feature that allows you to save and reuse design elements across multiple projects, bringing greater consistency to your work, and streamlining your design workflow.

Create, Save, Organize, Use

Instead of working directly on a client’s website, agencies and web creators can now work locally to create and refine designs. Once finalized, these templates can be saved to the cloud. When needed, simply access and load them from any connected website with just a few clicks.

All of your work can now be stored in your Elementor account, allowing you to manage templates entirely in the cloud. This centralized storage makes it easy to access and reuse assets across projects.

The cloud interface allows the creation of folders to manage different projects. You can copy, move, import, or export between your cloud library to any website connected to your account.

Saving a template to the cloud is simple — in the Elementor editor, right-click on a container and choose “Save to Cloud”, just like you would save templates locally. Templates stored in the cloud are then available across any website linked to your Elementor account.

Support for Third-Party Widgets

Elementor templates are stored as JSON files, which retain their structure when saved. This means that third-party widgets used in templates will remain intact, ensuring compatibility and ease of use across different environments.

To learn how Elementor templates are structured, visit the Data Structure section, in the Elementor Developer Docs.

Accessibility Improvements

Elementor 3.29 introduces several accessibility improvements that make your websites more inclusive and compliant with web accessibility best practices.

Shape Dividers

Shape Dividers are used to decorate the page, however they add images, and images have their own set of accessibility rules to follow. Elementor 3.29 removes shape dividers from the accessibility tree completely, helping screen reader users focus on the page content.

Progress Bars

Progress bars have the ability to set the progress title, which explains what it shows. However, because the title is shown above the bar, it’s often deleted for aesthetics. Without the title, the progress bar is no longer accessible, as the element doesn’t have an accessible name.

Elementor 3.29 adds the ability to set the title and choose whether to visually display it or not. This will allow the user to set the title, but not display it on the website. This provides context for visitors with visual impairments, without visually affecting the website. 

Social Icons and Share Buttons

Both the Social Icons and the Share Buttons widgets now have proper list semantics for screen readers, improving navigation and comprehension. This change will allow visitors to skip the list entirely.

Note that the change applies only for multiple social icons and share buttons. If you set a single social icon or a single share button, the widgets won’t use list semantics.

Video Playlist

Lastly, the Video Playlist composed from a playlist of different videos. As of 3.29, the list is grouped for easier navigation with various assistive technologies.

Developer Advisory

We plan to merge the majority of the remaining experimental features into Elementor in the next releases. Therefore, we urge plugin developers to evaluate their products and address any compatibility problems that may still exist.

By patching beforehand, compatibility problems will be resolved when the features are included by default for websites who upgrade to the next versions. Test your plugins with the latest Elementor version and all experimental features enabled.

To Conclude

Elementor 3.29 focuses on enhancing the web creation experience through the introduction of exciting new features like the Cloud Templates and Editor V4 Alpha. We encourage you to test it out and let us know what you think.

The post Elementor 3.29 Developers Update appeared first on Developers.

Elementor Cache Management

Efficient caching is essential for optimizing performance. Elementor 3.28 doesn’t change the caching mechanism but makes it easier to clear cached data from both the WordPress dashboard and from the frontend. Let’s review what Elementor cache does and how you can improve your workflow.

Elementor Cache

Elementor employs a multi-layered caching system to enhance website performance. Each component implements its own caching strategy. Collectively, they all minimize server computation, resulting in improved performance metrics for your website.

For instance, instead of generating CSS files each time the user visits the page, Elementor generates CSS once, eliminating the need for repeated generation. On the first page visit, a CSS file is generated and stored in the /wp-content/uploads/elementor/css/ folder, and used for all users visiting the page.

Similarly, instead of rendering the HTML for each widget on the page, it renders the HTML once, and stores the HTML in the database. Every future page load bypasses the resource-intensive rendering process. This reduces the overall rendering time significantly.

Another example is how asset dependencies are extracted and stored. Instead of iterating over all the page widgets each time to extract the required CSS/JS, Elementor does it once on initial page load and stores the data in the DB. Every subsequent visit uses cached data.

Clearing & Regenerating Cache

You can clear the stored cache at any time to force Elementor to regenerate the data again. Traditionally, to clear Elementor cache, you had to go to the WordPress Dashboard > Elementor > Tools > General > Elementor Cache, and click the “Clear Files & Data” button.

The issue was that you had to open an additional browser tab to clear the cache and then go back to reload the frontend page. To address this issue and reduce the number of clicks, Elementor 3.28 added a new “Clear Files & Data” button to the “WordPress Admin Bar” in the frontend under the “Edit with Elementor” dropdown menu.

Please note that when clearing cache, Elementor deletes previously cached data. A new cache is then generated for each page only on the next time someone visits that page. Triggering this from the frontend ensures that Elementor not only clears previously cached data, but also regenerates new files and data and basically updates cached data.

Form Fields API Update

Elementor 3.28 has improved the Form Fields API by adding new methods for declaring script and style dependencies. This update also integrates the Form Fields API with the asset caching mechanism, leading to faster page speeds for pages utilizing Elementor Forms.

Custom Form Fields

The Form widget in Elementor Pro comes with a wide range of field types, allowing for easy creation and styling of various forms. To further extend functionality and cater to specific needs, Elementor provides the ability to create custom field types. These could include fields like phone numbers with specific patterns, credit card numbers, signature fields, and more.

Some advanced fields might require JS libraries for handling logic or CSS to display the field in a unique design. For example, Elementor’s date and time fields utilize flatpickr.js to display the date-related data in a calendar. To accommodate custom JS/CSS files for other form fields, Elementor has introduced a Field Dependency mechanism, similar to Widget Dependencies.

Each form field can declare its own style and script dependencies, and Elementor will conditionally load these assets only when the fields are actively used on the page.

API Update

The necessary assets for a form field can be declared using the two following properties:

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
	public $depended_scripts = [ 'script-handle' ];
	public $depended_styles = [ 'style-handle' ];
}

Form fields should transition from utilizing the $depended_scripts and $depended_styles properties to the get_script_depends() and get_style_depends() methods. This will align the API with other Elementor components.

class Elementor_Test_Field extends \ElementorPro\Modules\Forms\Fields\Field_Base {
	public function get_script_depends(): array {
		return [ 'script-handle' ];
	}
	public function get_style_depends(): array {
		return [ 'style-handle' ];
	}
}

We strongly recommend that all our partners, Elementor addon developers and independent developers, adopt these methods as new best practices. The deprecated properties will eventually be removed.

Performance Benefits

This change goes beyond simple consistency and semantics. By aligning the handling of form field dependencies with that of widget dependencies, Elementor unlocked a significant performance boost. Field dependencies can now leverage the same assets caching mechanism that widget dependencies use.

While previous releases implemented “conditional assets loading” of form field dependencies, based on their utilization on the page, this release utilizes the “assets caching” mechanism which stores the assets in a post meta to eliminate the need for repeated extraction on each page load.

This means that the assets required by field dependencies are now stored and retrieved more efficiently, resulting in faster load times and improved overall performance. This optimization results in reduced server computation and improved Time To First Byte (TTFB) on pages using Elementor Forms.

While the immediate impact may seem minimal since not all pages utilize forms, the continuous migration of components to the new caching mechanisms will incrementally enhance page TTFB with each Elementor release.

Control Level Assets Loading

Elementor 3.24 removed a lot of CSS from your website. Widget styles are loaded conditionally, only if a widget is in use on the page, but there is still more room for improvement. Some widgets load their CSS files but they are still 100% unused. Elementor 3.28 addressed this issue, and Elementor addon developers can also use this technique to make their custom Elementor widgets more efficient.

Reducing Unused CSS

When using the “Text Editor” widget on the page, the widget styles are 100% unused. That happens because the styles in this widget are only for the “Drop Cap” functionality, and in most cases, users don’t use this capability.

To address the “Unused CSS” issue, Elementor can load these styles on the control level rather than on the widget level. These styles will only be loaded if the “Drop Cap” switcher is turned on.

Widget Dependencies vs. Control Dependencies

Each widget can set style dependencies by declaring which CSS files to load when the widget is used:

public function get_style_depends(): array {
	return [ 'widget-text-editor' ];
}

Elementor has the ability to set style dependencies on the control lever rather than the widget level:

protected function register_controls() {
	/* .. */
	$this->add_control(
		'drop_cap',
		[
			'label' => esc_html__( 'Drop Cap', 'elementor' ),
			'type' => Controls_Manager::SWITCHER,
			'label_off' => esc_html__( 'Off', 'elementor' ),
			'label_on' => esc_html__( 'On', 'elementor' ),
			'assets' => [
				'styles' => [
					[
						'name' => 'widget-text-editor',
						'conditions' => [
							'terms' => [
								[
									'name' => 'drop_cap',
									'operator' => '===',
									'value' => 'yes',
								],
							],
						],
					],
				],
			],
		]
	);
	/* .. */
}

The assets argument helps you declare which scripts/styles to load and set the loading condition. In the example above, the widget-text-editor style is loaded when the switcher control is active.

“Text Editor” Styles

In the “Text Editor” widget, Elementor removed the widget dependencies, and replaced them with the control dependencies.

This way, even if the widget is used on the page, the styles are not loaded. Elementor will load these styles only when the page has a “Text Editor” widget, and the “Drop Cap” functionality is used.

This minor improvement removed an additional HTTP request and further decreased “Unused CSS”.

New Visual Choice Control

Elementor 3.28 introduces a new Visual Choice control that visually presents multiple choices, similar to the existing Choose control or the native HTML radio input. However, the new control allows the use of images as choices.

These choices are displayed in a grid layout, and widget developers can adjust the number of columns, from 1 by default to n. Additionally, an optional tooltip appears when hovering over each item.

Usage

Use the following code with your widget, to use the new control:

$this->add_control(
	'structure',
	[
		'label' => esc_html__( 'Structure', 'textdomain' ),
		'type' => \Elementor\Controls_Manager::VISUAL_CHOICE,
		'label_block' => true,
		'options' => [
			'grid-3' => [
				'title' => esc_attr__( 'Grid: 3 columns.', 'textdomain' ),
				'image' => plugins_url( 'assets/img/grid-3.svg', __FILE__ ),
			],
			'masonry' => [
				'title' => esc_attr__( 'Masonry: arbitrary order', 'textdomain' ),
				'image' => plugins_url( 'assets/img/masonry.svg', __FILE__ ),
			],
			'stacked' => [
				'title' => esc_attr__( 'Stacked: Single column.', 'textdomain' ),
				'image' => plugins_url( 'assets/img/stacked.svg', __FILE__ ),
			],
			'focus' => [
				'title' => esc_attr__( 'Focus: Text only.', 'textdomain' ),
				'image' => plugins_url( 'assets/img/focus.svg', __FILE__ ),
			],
			'grid-2' => [
				'title' => esc_attr__( 'Grid: 2 columns.', 'textdomain' ),
				'image' => plugins_url( 'assets/img/grid2.svg', __FILE__ ),
			],
			'stretch' => [
				'title' => esc_attr__( 'Stretch: fit available width.', 'textdomain' ),
				'image' => plugins_url( 'assets/img/stretch.svg', __FILE__ ),
			]
		],
		'default' => 'masonry',
		'columns' => 2,
		'prefix_class' => 'some-layout-',
	]
);

Google Fonts Local Loading

Elementor 3.28 changes the “Load Google Fonts Locally” experimental feature status from Beta to Stable and activates this feature on all websites. This feature completely changes the way Elementor handles Google Fonts. The new method stops loading fonts from Google CDN, thus improving both user privacy and website performance.

How It Works

Elementor scans for Google Fonts used by the page, downloads them to the website, stores them in the /wp-content/uploads/elementor/google-fonts/ folder, and allows the website to load these fonts from the website server.

When Elementor generates CSS files, it references the locally stored fonts, completely bypassing external requests to Google’s servers. Both the CSS and the font files are loaded locally, eliminating requests from external resources.

Mobile Performance Boost

This feature shows very promising results, managing to boost mobile performance by 3-14 percentage points. The more fonts the page uses, the higher the impact. Furthermore, it also solves privacy concerns in European countries.

Improving mobile performance is a challenging task. We don’t usually see low effort, low risk, and high impact features; especially improvements affecting mobile devices. Yet, this feature proves to be a very successful feature. This is why we prioritized it and upgraded the status and activated it on all websites. Measure your mobile performance before the upgrade and after, and share the results with the community.

Developer Advisory

Elementor addon developers are advised to implement the latest standards and make the following adjustments.

Swiper Dependencies

We want to remind developers to update their carousel-based widgets and declare swiper script/style as a dependency.

Since Elementor 3.24, swiper styles are loaded conditionally, and the performance boost was impressive. Since Elementor 3.27, the same process was implemented for swiper script, preparing the ground for removal of this script loading from all pages, and to load it conditionally.

Unfortunately, some Elementor Addons have not yet implemented this change. We advise developers to update their widgets today, and not wait for user complaints.

Here’s a code example of how to declare swiper as a dependency:

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' ];
	}
}

Supporting Older Elementor Versions

Many external developers continue to support older Elementor versions. And that is ok, backwards compatibility (BC) is an important practice.

While keeping BC is fine, we recommend setting compatibility checks with a minimum required Elementor version for your Addon. For instance, supporting all Elementor versions released in the last year (v3.19 and above), in the last 2 years (v3.10 and above), or even 3 years (v3.6 and above).

This recommendation should solve a common practice we try to discourage – supporting older naming conventions set over 20 versions ago, before Elementor 3.5.0:

if ( version_compare( ELEMENTOR_VERSION, '3.5.0', '>=' ) ) {
	add_action( 'elementor/controls/register', [ $this, 'register_new_controls' ] );
	add_action( 'elementor/widgets/register', [ $this, 'register_new_widgets' ] );
} else {
	add_action( 'elementor/controls/controls_registered', [ $this, 'register_new_controls' ] );
	add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_new_widgets' ] );
}

We advise setting a minimum required Elementor version, and removing all support for older Elementor versions below this minimum supported Elementor version. Search for version_compare() in your code and remove unnecessary BC code.

Elementor’s long term plan is to remove all deprecated code, providing a smaller code base and easier developer experience. This can’t be achieved as long as the ecosystem continues using old code.

To Conclude

Elementor 3.28 focuses on foundational improvements, enhancing performance, and streamlining workflows. With advanced cache management, and refined APIs, this update boosts efficiency and stability. Developers and users alike benefit from faster load times, improved mobile performance, and a more seamless experience. Stay updated to keep your website optimized and future-ready!

The post Elementor 3.28 Developers Update appeared first on Developers.

We’re happy to announce that Elementor 3.28 Beta is now live. This version is aimed at improving performance, enhancing user interface interactions, and refining design controls.

Make an impact by testing Elementor 3.28 beta and sharing your impressions on the latest updates, including:

• Performance Improvements
• Elementor Cache Control
• Widget Control Updates

Looking forward to your thoughts and feedback on this update!

Performance Improvements

Elementor version 3.28 introduces a series of performance enhancements designed to speed up your site and improve its efficiency. These updates focus on optimizing how resources are loaded and managed, ensuring that your site operates at peak performance, while minimizing load times.

• Google Fonts Local Loading: This new feature that was introduced in version 3.27 replaces external Google Fonts CDN requests with self-hosted font files, enhancing overall site speed and helping you comply with data protection regulations. Google Fonts Local Loading is now activated by default for new sites, enhancing performance and privacy for all users.
• Form Fields API Enhancements: New methods have been added to improve resource loading.
• Optimization of Text Editor Widget Styles: Styles related to the “Drop Cap” functionality are now conditionally loaded to reduce unnecessary CSS.
• Data Bindings Expansion to HTML Attributes: Starting with the Accordion and Tabs widgets, this feature improves the Nested Elements performance inside the Editor, focusing on the CSS ID control and not reloading the image on every change.

Elementor Cache Control

As part of our commitment to improve the user experience and interface clarity, Elementor 3.28 beta introduces important updates to cache management tools.

Renaming the “Regenerate CSS & Data” Button

The “Regenerate CSS & Data” button (found under Elementor -> Tools -> General) has been renamed to “Clear Cache”. While this update primarily involves a terminology update, it increases transparency about what this function does—clearing your site’s cache, including CSS files, data from deleted post assets, element caching data, and more.

New “Clear Cache” Button in the WP Admin Bar

To further enhance accessibility and streamline workflow, a new “Clear Cache” button has also been added to the WordPress admin bar under “Edit with Elementor”. This addition allows you to quickly clear their site’s cache directly from any page with a single click and without the need to navigate to the Elementor tools settings.

These changes are designed to make the process of clearing cached data more transparent and accessible, and reflect our commitment to making the Elementor interface straightforward, intuitive, and to minimize any potential confusion.

Widget Control Updates

This version also includes several updates to widget controls that enhance the flexibility and functionality of Elementor’s widgets. These changes allow for more precise design adjustments and provide you with additional customization options to align with your design needs.

• Text Editor: Introduction of link color controls for enhanced text styling.
• Heading: Now applies hover color on focus to improve accessibility and user interaction.
• Button: Added a Box Shadow control for Button Hover, allowing you to override the hover box shadow set in the Site Settings Button area.
• CTA, Animated Headline & Testimonial Carousel: Added capabilities for implementing text shadows.

Additional Updates

• Deprecation of Landing Page Feature: This feature will now be hidden for new sites and for those of you who have never utilized the Landing Page custom post type. For those of you who have previously created Landing Pages, the feature will remain visible with no changes, ensuring continued support also after updating to version 3.28.
• WordPress Compatibility: The minimum required WordPress version has been updated to 6.5, aligning with the latest WordPress enhancements and security features.
• Video widget: Updated to remove the unsupported “modest branding” control for YouTube.

How to Install the Beta Version

If you still haven’t enabled beta testing in Elementor, please follow these steps:

• Go to Elementor > Tools > Versions
• Enable the beta tester feature
• Go to Dashboard > Updates and update to the latest beta version.
• This will get you set up to test the new Elementor 3.28 Beta.

Notes

As we make changes to our GitHub in an effort to keep it organized, improve the way we deliver information to you, and our ability to review your feedback, please follow the instructions below when reporting bugs, or making feature requests:

• To report a bug related to this beta version – open a new Bug report
• For feature requests – open a new Feature request issue
• For other comments specifically about this beta version – comment here

Designated time for release: March 17th (Estimated)

Many thanks for your support and help!

Cheers,
The Elementor Team

The post Elementor 3.28 Beta appeared first on Developers.