Elementor 3.22 Update: New Off-Canvas Widget and Caching Improve Site Performance

New Feature: Off-Canvas Widget

Elementor 3.22 Introduced new professional design tools Off-Canvas WidgetIt creates interactive page layouts and enhances the user experience.

Functional Features:

• Interactive Layout: More interactive pages can be designed by clicking on links to open and close containers.
  • For example, an Off-Canvas Widget can be attached to the "Register" button, which when clicked opens a widget containing a form.
• Nested element support: The content area of the Off-Canvas Widget can be used as a container, supporting the placement of other widgets such as forms.
  • Allows styling of regular containers using all of their design features.
• Dynamic labeling: In the Link Settings, clicking on the Dynamic Label button gives you the option to link to a specific Off-Canvas Widget.
  • For example, if there are multiple Off-Canvas Widgets on the page, they will be displayed as "Off-Canvas Widget 1" or "Off-Canvas Widget 2", etc.
  • Optionally, links can be selected to trigger open, close, or both behaviors.
• Brand Personalization: You can personalize the entry and exit animation style and duration of the widget.
  • Control the behavior of interactions, such as setting when and how to exit an overlay and preventing page scrolling.
  • Set the style of the overlay effect, with options to turn the overlay on or off, change the color, or select the image.
  • The HTML tag that defines the container.
• Style Customization: In the Styles tab, customize the appearance of the Off-Canvas widget, such as colors, fonts, and layout.

Steps to use:

1. Place the Off-Canvas Widget anywhere on the page.
2. Click on "Edit Mode" control to open and close it in the editor.
3. In the link's settings, click on the Dynamic Label button and select theTrigger on, offOr both behaviors.
4. leave for WordPress Dashboard → Elementor → Function Activation"nested element".

New: Elementor Cache

Elementor 3.22 introduces a new caching feature that significantly improves site performance by caching widget output.

Performance Improvement:

• Reduced memory usage: Memory usage reduced from 3MB to 8KB.
• TTFB Lifting: Time to First Byte (TTFB) Boost 33%-70%.

Cache Management:

• Distinguishing between static and dynamic content: The caching feature distinguishes between static and dynamic widgets and caches only static content.
  • Dynamic widgets (e.g. widgets containing visitor-specific information) are not cached.
• Cache Settings: In the Advanced tab in the Edit panel, you can control the cache settings for specific widgets.
  • For example, it is possible to activate or deactivate the caching feature of a widget.

Activation Steps:

1. leave for WordPress Dashboard → Elementor → Function Activation"Element Cache".
2. exist WordPress Dashboard → Elementor → In performance, control cache settingsrespond in singingbuffer timeThe

Other Performance Updates

Native JS Replacement JS Library

• Improve front-end performance: Replace external JavaScript libraries such as Waypoint.js with native JavaScript solutions.
  • This replacement uses more modern code, improving performance and SEO scores.
  • The replacement reduces memory usage by 18KB.
• backwards compatibility: In order to maintain backward compatibility with third-party plugins, the old JavaScript libraries will remain in future versions, but will only be activated if the plugin developer sets them as dependencies.

New "Performance" tab

• Centralized management of performance functions: All stable performance features are centralized in the new Performance tab, making it easy for users to activate or deactivate them.
  • This tab allows users to explore and activate performance improvement features related to the website.

Activation Steps:

leave for WordPress Dashboard → Elementor → Settings → PerformanceThe

summarize

Elementor 3.22 dramatically improves site performance and user experience in the following ways:

• Add Off-Canvas Widget: Build interactive layouts to enhance user engagement.
• Introduction of caching: Optimize widget load times to improve site performance.
• Native JS Replacement of External Libraries: Clean up your website code and improve front-end performance.
• New Performance tab: Centralized management of performance improvement functions to streamline the optimization process.

These new features and enhancements not only improve site loading speeds, but also streamline the process of managing performance optimization, helping users build fast and engaging sites more easily.