Facebook Envelope

Enhancing Performance and Design with Elementor 3.22: Off-Canvas Widget & Element Caching

Elementor 3.22 brings exciting new features to enhance both the design and performance of your websites. The Off-Canvas Widget allows for the creation of interactive layouts, while the new Element Caching feature significantly boosts loading times. In this article, we will explore these updates and how they can transform your website.

Building Interactive Layouts with the Off-Canvas Widget

The Off-Canvas Widget in Elementor 3.22 is a powerful tool for creating interactive page layouts. This widget lets you design engaging user experiences by opening and closing a container from a link. Here’s how you can use it:

  1. Placing the Widget: Place the Off-Canvas Widget anywhere on your page.
  2. Editing Mode: Use the “Editing Mode” control in the Editing Panel to open and close it in the Editor.
  3. Content Area: The content area functions as a Container, allowing you to build and design any layout.
  4. Dynamic Tags: Connect the Off-Canvas Widget to a link using dynamic tags.
  5. Design Capabilities: Customize entrance and exit animations, interaction behavior, and overlay effects.

Example:

$offCanvasWidget = new OffCanvasWidget();
$offCanvasWidget->place();
$offCanvasWidget->connectToLink('Sign Up');
$offCanvasWidget->customize('animation', 'slide');

This widget enhances user engagement by providing dynamic content that can be opened and closed, such as sign-up forms or special offers.

Boosting Loading Times with Element Caching

Element Caching is a new feature in Elementor 3.22 that dramatically improves website performance. It works by storing the widget’s output on servers after they are fully rendered for the first time. Here are the benefits:

  1. Reduced Memory Usage: Memory usage decreases from 3MB to 8KB.
  2. Improved TTFB: The Time To First Byte (TTFB) metric improves by 33%-70%.
  3. Static vs Dynamic Widgets: Differentiates between static and dynamic widgets to avoid caching unnecessary data.

To activate Element Caching:

  1. Go to WordPress Dashboard → Elementor → Features.
  2. Activate “Element Caching”.
  3. Control caching settings from the new Performance Tab.

Example:

$elementCaching = new ElementCaching();
$elementCaching->activate();
$elementCaching->setCacheDuration(7); // Cache for 7 days

Additional Performance Updates

Elementor 3.22 continues to enhance website performance with several additional updates:

  • Replacing JS Libraries with Native JS: The waypoint.js library is replaced with native JS, reducing memory use by 18KB.
  • New Performance Tab: All performance features are now concentrated in one place for easy access and management.

To access the Performance Tab:

  1. Go to WordPress Dashboard → Elementor → Settings → Performance.
  2. Explore and activate relevant performance features.

Key Takeaways

  1. Off-Canvas Widget: Design interactive layouts and improve user engagement.
  2. Element Caching: Significantly boost website performance with improved loading times.
  3. Native JS: Cleaner, more efficient code with native JS replacements.
  4. Performance Tab: Easily manage all performance features from one place.

Conclusion

Elementor 3.22 offers powerful tools to enhance both the design and performance of your website. The Off-Canvas Widget enables the creation of dynamic, interactive layouts, while Element Caching provides substantial performance improvements. By exploring and activating these new features, you can optimize your website’s speed, reliability, and user experience.

Talk with our Agent