Elementor 3.25 Update: CSS Optimizations, New Anchor Offset Controls and Search Widget Pagination

Improve website speed and user experience, enhance functionality and bring smoother operation experience!

Elementor Version 3.25 brings a number of significant improvements to enhance site performance and user experience. The core highlights of this update include ongoing CSS optimizations, a smoother scrolling experience (With native CSS and new anchor offset control), and the paging feature for the search widget. Here are the details of the update:

Performance Improvement: Continuous CSS Optimization

The loading speed of a website is critical to the user experience, especially on mobile and SEO RankingAspects. Elementor 3.25 significantly improves page load speeds through continuous CSS optimization, reducing unnecessary resource loading and thus improving the overall performance of the site.

Key Improvements:

• Zero CSS weights for Elementor Pro plugin
  In Elementor 3.25, the Elementor Pro plugin will start with zero CSS by default. This means that when the plugin is enabled for the first time, the plugin will not load any CSS styles until you start adding widgets or using its features. This approach drastically reduces the size of the initial CSS, ensuring that the site is lighter from the start and avoids loading redundant CSS, further increasing load speed.
• On-demand loading of WooCommerce widgets
  WooCommerce users will benefit greatly from this update. Whereas Elementor previously loaded the CSS for all 32 WooCommerce widgets regardless of usage, in version 3.25 the CSS will be loaded conditionally based on actual usage. As a result, the CSS associated with a WooCommerce widget will only be loaded when it is actually used on the page, saving up to 197KB of CSS resources and making the WooCommerce store load much faster.
• Global styles loaded on demand
  Global styles in Elementor 3.25 will be loaded conditionally. This improvement reduces global style file sizes by up to 65KB, further reducing unnecessary CSS burden and improving site responsiveness.
• Load widget styles on demand
  In version 3.25, Elementor has made on-demand loading more granular for different widgets. Styles that were loaded all at once are now loaded one at a time based on the actual widgets being used. This includes:
  • 6 Theme Element Widgets
  • 3 rotating widgets
  • 2 form widgets
  With this optimization, Elementor loads only the CSS styles that are actually used, avoiding redundant code loading, which significantly improves page load speed.

These optimizations resulted in a dramatic improvement in site load speeds, providing visitors with a smoother browsing experience on both desktop and mobile, while positively impacting SEO scores and core Web Vitals metrics.

[Pro] Smoother Scrolling with Native CSS: Introducing a New Anchor Offset

Elementor 3.25 also introduced significant improvements to scrolling performance. the Elementor technical team replaced the AnchorJS library with a native CSS solution, which not only improves performance by reducing reliance on JavaScript, but also makes scrolling smoother and more consistent across devices.

New anchor offset control

One of the main features of this update is "Anchor Offset", which ensures that anchor links scroll to the correct position on the page, taking into account sticky headings and other elements. Previously, anchor links would often scroll to locations hidden behind sticky headings, causing confusion and frustration for visitors. The "Anchor Offset" feature solves this problem by setting a custom offset value and adjusting the scrolling behavior so that the link portion is fully visible and not hidden behind sticky headings.

How to set the anchor offset

To set the anchor offset, go to the Advanced tab in the header, scroll down to Motion Effects, set the header to Stick to Top or Bottom, and then you can set the relevant value in the Anchor Offset field.

[Pro] Enhanced Search Widget: Real-time Results Pagination

The search widget in Elementor 3.25 has undergone a major update to introduce real-time results paging. Previously, search results in the Live Search dropdown menu only showed a certain number of items, and visitors had to navigate to separate pages to view additional results. Now, Elementor 3.25 introduces paging directly into the live search dropdown, allowing visitors to browse multiple result grids without leaving the current page and providing a more seamless experience when searching for large amounts of content.

Key Benefits

• Improved search experience:Visitors can explore more results directly in the search bar, reducing friction and keeping them engaged.
• Add content discovery:With pagination, visitors are more likely to find the content they're looking for, leading to increased visitor satisfaction.
• Higher engagement and lower bounce rates:By allowing visitors to stay on the current page while searching, you can create a more seamless experience and keep them engaged for longer.

How to set up paging 

To add pagination to the "look for sth."Widgets that start with a "element" tab of the "in the end"Partially enabled"Real-time results", then select "recurring template", and then in "Other settings" (under the same tab - "Content"), there is an option to enable paging options with numbers and/or next/previous. There is also the option to select from the "type" tab to customize the appearance of the pagination. Optionally, you can adjust alignment, vertical positioning, spacing and typography, as well as add hover and active state styles.

Other updates to Elementor 3.25

• Form submissions are active on all sites by default:Form submission is now native in the editor and active on all sites. Users can submit forms by navigating to the Elementor > Settings > AdvancedIf you want to disable this feature from the WP Dashboard, you can do so by clicking on the "Disable" button on the WP Dashboard.
• New Optimized Marker Performance Experiments: First wrapper for Delete Button, PayPal and Stripe widgetsdivto simplify markup and reduce the overall DOM. is currently in Alpha status and should not be activated on production sites.
• Twenty Fifteen Theme:Remove CSS compatibility to remove the theme background color on pages that use the "Elementor Canvas" template.
• Functional and experimental updates:
  • Grid Container - merge to Flexbox container and rename to "Container".  
  • Optimized Control Load - Effective for existing sites and boosted to a steady state.  
  • Nested Elements - Applies to existing sites.  
  • Editor top bar - works for existing sites.
  • Show conditions (for elements) - native conditions in the editor.

Summary:

The Elementor 3.25 update brings several improvements, especially in performance optimization, scrolling experience and search functionality:

1. Continuous CSS optimization: Reduces unnecessary CSS loading and improves site speed and responsiveness.
2. New anchor offset control: Provides a more precise and smooth scrolling experience for pages with a fixed navigation bar.
3. Search Widget Paging: Enhanced real-time search functionality that improves search speed and user experience through paging.

These updates not only improve the loading speed of the website and reduce unnecessary resource consumption, but also enhance the user's browsing experience and interactivity, providing strong support for the overall optimization of the website.