✅ 🔥 Elementor v3.25 Beta Release 🔥

[avivu]

===========

Beta 4 UPDATED - PLEASE READ BELOW!

===========

 

Hey Beta testers, 👋

We’re excited to announce that Elementor 3.25 Beta is now live! This release marks an important milestone in optimizing Elementor’s performance, continuing our focus on reducing page load times, improving CSS handling, and enhancing both the user and visitor experience. We’ve introduced key improvements that reduce the complexity of your website’s code, streamline search functionality, and offer native CSS solutions for smoother scrolling and better performance.

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

• Improved Performance: Continuous CSS Optimization
• From AnchorJS to Native CSS: New Anchor Offset
• [Pro] Search Widget Update: Pagination for Live Results

Looking forward to hearing your thoughts and feedback on this update!

 

Improved Performance: Continuous CSS Optimization

In the previous version, Elementor 3.24, we introduced a major improvement to Conditional CSS Loading, reducing the amount of unused CSS loaded on your websites. This optimization focused on loading only the styles necessary for the specific widgets used on a page, reducing the CSS size by up to 668kb. With Elementor 3.25, we’ve taken this feature even further, introducing additional improvements to reduce the CSS footprint of Elementor pages.

New CSS Enhancements

• Zero CSS Weight for the Elementor Pro plugin: Elementor Pro now starts with zero CSS by default, meaning that no styles are loaded unless they are needed on the page. This approach drastically reduces the CSS size of your website, making it faster and more efficient.
• WooCommerce Widget Styles: Previously, when using WooCommerce widgets, styles were loaded for all 32 widgets, even if only one was being used. In Elementor 3.25, these styles now load conditionally, saving up to 197kb of CSS, significantly improving the performance of WooCommerce-powered websites.
• Elementor Widget Styles: We’re advancing our efforts to conditionally load widget styles with Elementor 3.25. This update now loads styles individually for 6 Theme Elements widgets, 3 Carousel widgets, and 2 Form widgets. Instead of loading an entire group of styles at once, each widget’s styles are now loaded separately, only when that specific widget is used.
• Global Styles: Elementor has also optimized the way Global Styles are loaded. These styles now load conditionally, saving up to 65kb of CSS per page, contributing to faster loading times.

Create Fast-Loading Websites

These improvements ensure that Elementor websites load only the CSS they need, reducing the overall page size and improving performance metrics.

By optimizing the way CSS is loaded, we’re making Elementor sites faster and more competitive in terms of SEO and user experience; Faster page load times contribute to better search engine rankings, as performance is a critical factor in how search engines like Google evaluate websites. Moreover, with less unused CSS and faster interactivity provide a smoother, more enjoyable experience for visitors, which can lead to higher engagement, lower bounce rates, and better overall conversion rates.

 

From AnchorJS to Native CSS: New Anchor Offset

So far we used JavaScript (JS) to create smooth scrolling effects, and while JS is effective, it has its drawbacks, including additional performance overhead and potential inconsistencies in behavior across devices. In Elementor 3.25, we’ve replaced the AnchorJS library with a native CSS solution, enabling smooth scrolling to be handled natively within the browser and ensuring faster, smoother, and more efficient scrolling.

[Pro] New Anchor Offset Control

The transition to CSS allowed us to give you more control over how anchor links behave on your page, by introducing the new Anchor Offset control. One common issue with anchor links is that they tend to scroll to a position underneath sticky headers, hiding content. With the new Anchor Offset, anchor links can be set to scroll to the desired and correct position, ensuring all content is visible.

Performance and User Gains

• Enhanced Visitor Experience: Anchor links now scroll precisely to the desired location, preventing issues where content was hidden behind sticky headers, making navigation clearer and more intuitive.
• Cross-Device Consistency: Native CSS ensures that smooth scrolling works consistently across browsers and devices without the potential quirks of JS-based solutions.
• Performance Boost: By eliminating JS from the scrolling process, we’ve reduced the load on your website’s resources and the rendering time, resulting in improved performance.

How to Test It:

Check Anchor Link Functionality

1. Create a new page with a top container that includes links.
2. Create corresponding sections below the main section, ensuring you connect the links in the top container to the sections, thus creating anchor links.
3. Ensure that the smooth scroll to the anchor works as expected.

Check the New Anchor Offset Control

1. Based on the layout you created earlier, go to the top container and set it to "Sticky."
2. Under the sticky control, navigate to the Anchor Offset control and set the desired offset.
3. Check the functionality of the anchor links with the sticky container.
4. Validate that the anchor links stop at the desired offset you set earlier.
5. Ensure everything works as expected in the editor and on the front end.

 

[Pro] Search Widget Update: Pagination for Live Results

Searching for content on your site is a crucial part of the visitor experience, and with Elementor 3.25, we’ve made it even better by introducing pagination for Live Results.

Previously, in the Search widget, when search results exceeded the number of items displayed in the Live Results (e.g., showing 3 items when there are actually 10 relevant items), users couldn’t see additional results, but had to be redirected to the search results archive and navigate through the results there.

With the new pagination feature in Elementor 3.25, when a visitor performs a search, if the search returns more results than can be displayed within the Live Results, pagination options will appear at the bottom or top of the widget, with numbers and/or next/previous options to navigate through. This allows visitors to continue browsing through the results as they type within the widget, without needing to navigate away. You also have the option to customize the pagination’s typography, position, spacing and alignment from the Style section, making sure it fully fits your brand look and feel.

How to Test It:

1. Create a new page and add the Search widget to the canvas.
2. Go to the Results section and activate the live results.
3. You can add a loop template you created previously or navigate to the Theme Builder to create a new loop item template.
4. Next, explore the different pagination options in the Additional Settings section.
5. Choose one of the options, then navigate to the Style tab and the Additional Settings section to continue styling your pagination as desired.
6. Click on "Publish" and check the live page.
7. Ensure everything is working as expected in the editor and on the front end.

 

Additional Updates

• Feature and Experiment Updates:
  • Grid Container - Merged into Flexbox Container.
  • Flexbox Container - Renamed to ‘Container’.
  • Optimized Control Loading - Active for existing sites and promoted to Stable.
  • Nested Elements - Active for existing sites.
  • Editor Top Bar - Active for existing sites.
  • Display Conditions (for elements) - Native in the Editor.
  • Form Submissions - Native in the Editor and active on all sites. The feature can be disabled from Elementor > Settings > Advanced.
• New Optimized Markup Performance Experiment - Removal of the first wrapper div for Button, PayPal and Stripe widgets to simplify the markup and reduce the overall DOM. Currently in Alpha status and should not be activated on production sites.
• Twenty Fifteen Theme - Removal of a CSS compatibility which removes the theme’s background color on pages using the “Elementor Canvas” template.

---

More Improvements

Free version

• New: Introducing Optimized Markup as an Alpha experiment - Reduce DOM size by eliminating unnecessary HTML wrappers in various elements and widgets
• Tweak: Reduced the use of JavaScript for smooth scrolling by implementing a modern CSS-based solution (✅ 🚀 Feature Request: Option to remove smooth scroll js #13773)
• Tweak: Updated smooth scroll behavior to respect the user's reduced motion preference setting
• Tweak: Removed elementor-button-wrapper div from Button widget as part of the Optimized Markup experiment
• Tweak: Load styles for Floating Elements separately to enhance performance
• Tweak: Load styles for Link in Bio widgets separately to enhance performance
• Tweak: Optimized global.css to exclude style generation for unused widgets
• Tweak: Removed the Floating Elements modules from module.js
• Tweak: Added “Edit with Elementor” button to WooCommerce's new product editor
• Tweak: Merged "Build with AI" feature to version
• Tweak: Merged "Grid Container" to "Flexbox Container" feature
• Tweak: Activated "Editor Top Bar" feature for existing sites
• Tweak: Activated "Optimized Control Loading" for existing sites and promoted the feature to stable
• Tweak: Activated "Nested Elements" feature for existing sites
• Tweak: Removed compatibility CSS support for the Twenty Fifteen theme
• Tweak: Renamed the "Flexbox Container" feature to "Container" feature
• Fix: Expand Icon in the Accordion widget would not display when nested inside another Accordion widget (✅ 🐞 Nested Accordion inside another Nested Accordion always shows the collapse icon on all items #24086)
• Fix: Swiper incorrectly applied the inert attribute to a slide in the Nested Carousel (✅ 🐞 Bug Report: Swiper adds inert incorrectly on slide - [ED-11434] #23039)
• Fix: Footer would overlap the Archive Posts, Portfolio, and Gallery widgets in mobile view when using the Archive template
• Fix: "Edit with Elementor AI" button is visible for unsupported file types
• Fix: Structure panel indicator color is not visible in dark mode
• Fix: Indentation issue with empty elements in the Structure panel
• Fix: "Reference a website" feature in Elementor AI failed to work in Safari 17

Pro version

• Tweak: Added pagination functionality to the Live Results in Search widget
• Tweak: Added Anchor Offset control to allow precise positioning when scrolling to anchor links on the page
• Tweak: Load motion effects styles only when they are in use
• Tweak: Load sticky styles only when they are in use
• Tweak: Load popup styles only when they are in use
• Tweak: Load theme builder styles only when they are in use
• Tweak: Load transition styles for Call to Action and Gallery widgets only when they are in use
• Tweak: Load styles for Form widgets separately to enhance performance
• Tweak: Load styles for WooCommerce widgets separately to enhance performance
• Tweak: Load styles for Theme Elements widgets separately to enhance performance
• Tweak: Load styles for Carousel widgets separately to enhance performance
• Tweak: Load styles for Pricing widgets separately to enhance performance
• Tweak: Load styles for Floating Elements separately to enhance performance
• Tweak: Load styles for Link in Bio widgets separately to enhance performance
• Tweak: Load minified CSS in the Loop Builder's Call to Action button in the Editor
• Tweak: Removed "Payments" module styles
• Tweak: Removed elementor-button-wrapper div from Payapl widget as part of the Optimized Markup experiment
• Tweak: Removed elementor-button-wrapper div from Stripe widget as part of the Optimized Markup experiment
• Tweak: Merged "Form Submissions" feature into the version and moved it to the Advanced tab
• Tweak: Merged "Display Conditions" into the version
• Fix: Missing translation string for the empty message in the Table of Contents widget (✅ 🐞 Empty Table of Contents message can't be translated - [ED-15603] #27580)
• Fix: Local Storage and Session Storage were being used even when popups were not in use (✅ How can I deactivated the new cookie from elementor? #7151)
• Fix: Masonry layout is not working when pagination is set to "Load More" or "Infinite Scroll" in Loop Grid widget (✅ 🔗 🐞 Bug Report: Masonry Layout does not work when Load More pagination is active in the Loop Grid (Related to #24187) - [ED-12229] #23684)
• Fix: Extra gap between widgets on the frontend when using Off-canvas widget (✅ 🐞 Off-Canvas causes Sections and Containers to add additional gap between widgets on the frontend - [ED-15091] #27706)
• Fix: Pagination and custom queries did not work when the Posts Widget was saved as a Global Widget or used via shortcode
• Fix: Lightbox videos are missing controls and displayed at the wrong size in Media Carousel widget
• Fix: Pagination options with Individual Pagination not working as expected in Posts and Loop Grid widgets
• Fix: Justified or Masonry layouts for the Pro Gallery would not display images on the frontend when inserted via nested tabs
• Fix: Error issue in the Loop Grid widget when used in theme parts with the Taxonomy Filter
• Fix: Removed the focus ring after clicking to open the Off Canvas inside the Editor
• Fix: Background gradient colors from the dynamic color tag values are not rendering on the frontend
• Fix: Excessive database requests generated by the Loop Grid widget
• Fix: Colors from Dynamic Tags were not rendered on the frontend
• Fix: Display issue in the Menu widget caused by the 'Native Intersection Observer API

---

How to Install the Beta Version

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

1. Go to Elementor > Tools > Versions
2. Enable the beta tester feature
3. Go to Dashboard > Updates and update to the latest beta version.
4. This will set you up to test the new Elementor 3.25 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 beta versions - open a new 🐞 Bug Report
• For feature requests - open a new 🚀 Feature Request
• For other comments specifically about this beta version - comment here

Designated time for release: October 28th, 2024 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

[Joliamendi]

Great update. A quick check I found two bugs in the menu widget.

1- The Content Width control displays an empty value.

2- The pesky bug of menu widget is back again. When the mouse moves from the menu to the menu content, the menu content is closed.

bug.mp4

[Joliamendi]

Hi @hein-obox, @nicholaszein and @doronwolf,

Do you approve of the #2 item? Is it clear whether it will be fixed in this version or not?

thanks🙏

[doronwolf]

Hi @Joliamendi - we were able to reproduce both issues you mentioned and aiming to fix both by the end of the beta period

[Joliamendi]

Great, thank you very much @doronwolf

[Joliamendi]

Hi again @doronwolf,

Looks like both are fixed in this beta version right?

[doronwolf]

Yes, both should be working correctly in the latest beta 😊
please let us know if you experience otherwise

[efintina]

New Anchor Offset Control. For me, the Anchor Offset control is not visible.

[doronwolf]

Hi @efintina thank you for noticing - we are working to fix it, next release it should display correctly for all users, thank you in advance for your patience🙏

[nicholaszein]

Hi @efintina!

Welcome, and thank you for joining the discussion! 🙏

We just released a new beta that should solve this issue, can you confirm?

[efintina]

Now, it's visible and work as you said! Thanks!

[portrayaloflife]

Why are we suddenly forcing everyone to use the top bar header out of nowhere?

[contrastxxx]

Hi @contrastxxx!

The feature you are looking for is no longer available going forward. You can resize the canvas for any responsive mode, as long as it fits in your viewport. We have no plans to include resizing of the desktop view in the new editor interface at this moment.

Kind regards

"I don't understand why it's not there. It's a basic feature that I use daily. It's very important to display the range between desktop and tablet."

[nicholaszein]

@contrastxxx,

you can handle this in the tablet mode. It will always appear with the smallest possible size for the tablet, and you can increase it until it reaches the largest possible size for tablets. This haven't changed.

[wordxpression]

With regards to the anchor offset. I can enter it in pixels. But when I would use another unit (vh, % or whatever) for the height of a sticky container, it still would not work as intended.

Would be nice if the value could be in other units.

[doronwolf]

Hi @wordxpression thank you for the feedback 🙂 we are hoping to improve that in future version

[nicholaszein]

Hi all,

We just released Elementor v3.25 Beta 2

The versions include the following:

Free version

• Fix: Restore skip button functionality in Onboarding

Pro version

• Fix: The new Anchor offset control is missing

–

Thank you!

[portrayaloflife]

This all looks awesome! I noticed a lot of loop grid fixes and pagination in the change log. Really great to see the continued development on loop grid and making it rock solid! Was curious if this "Fix: Pagination options with Individual Pagination not working as expected in Posts and Loop Grid widgets" is a fix to this? >> #24973

If so I am hyped! Also is the "less database requests by loop grid" going to speed up page load times for pages with larger feeds by chance?

Appreciate all y'all's hard work!

[nicholaszein]

@portrayaloflife!

Thanks for the kind and encouraging words, it means a lot to us! ❤️

I'm still in the process of validating all issues related to the pagination improvements we did, so for the time being I don't have an answer to your question about that specific issue.

As for performance, fewer database requests definitely improve the page speed loading for loops in general! 😃

[doronwolf]

Hi @portrayaloflife regarding #24973 It's a different issue than the "Fix: Pagination options with Individual Pagination not working as expected in Posts and Loop Grid widgets" but we are aware of this issue and aiming to fix it in future versions

[portrayaloflife]

Roger that! Thanks for being on top of it y'all! Really appreciate it!

[doronwolf]

Hi all,
We just released Elementor v3.25 Beta 3.
The versions include the following:

Free version

• Fix: General code improvements in this version

Pro version

• Fix: Dropdown area not working in certain scenarios in Menu widget

–

Thank you!

[avivu]

Hi all,

We just released Elementor Pro v3.25 Beta 4.

The version includes only the following Pro changes:

Pro version

• Fix: Content Width control inside the Mega Menu is displaying an empty value
• Fix: Adjusted CSS style loading for the Form and Login widgets

–

Thank you!

[black-eye]

Hi, in 3.25 Form Submissions were merged into the core, but they can be still disabled, just the settings moved to Elementor > Settings > Advanced. In previous version I had this feature disabled and I would expect this will be kept after the update, even in the new location. But it's enabled again. Is it a bug or by design? I would definitely prefer to keep the previous settings.

[portrayaloflife]

I get why y'all auto turn on these features, but I do wish there was an option for some of these features to keep off, or at the very least, elementor side more of a warning, that like X feature will be merged on X date and now always turned on. Just for planning purposes. Some of these end up being surprises. Like the Top bar switch. Lot of folks gonna be surprised after that update, vs knowing that's something they should of been migrating to from the get-go. I know it's a complex kind of thing to communicate, but just expectations around features and when/how they are being merged would be sick! Respectfully.

[black-eye]

Hi @nicholaszein. I fully understand, when some feature is turned on by default. But this feature I've already deliberately turned off (and I had a reason for it). Why should I have to turn it off again? Just FYI, I have LTD on Fluent Forms which I use on every site I build. I never use Elementor forms, thus will never use Form Submissions - no need this extra feature to be turned on (and I won't change my mind, even if you will keep turning it on for me with every update).

Frankly, I don't get, what benefit do you expect to gain from turning on the features once turned off. Same way I don't understand why do you think we will be happy, when you are removing options for disabling features. IMHO for every major feature there should be an option to turn it off. Why you just cannot let your users decide, how to use the tool? What benefit do you expect from forcing us to use it the way you want? It doesn't make any sense - we are the ones who are using the tool, we know best, what we want to achieve. More options to customize the tool = more happiness of your users. It's that simple ;-)

[nicholaszein]

@black-eye, I think I missed the mark here, and haven't explained it correctly. Apologies for that.

The Form Submissions feature is turned on by default upon installation of Elementor Pro. The user chooses to turn it off it they don't want to use it. That's the intended behavior, otherwise people would never know it exists. In this version, there will be a Notice about this feature being merged, and how to deactivate it.

However, as you pointed yourself, if you choose to turn it off, you expect it to continue to be off. So if it's turned on now that it was moved to its final location, we need to verify the logic, and see if we can avoid that. This is why I raised this to the team to see if we can do something about it.

We are not, in any way, trying to force anyone to use this feature. We just want people to know it exists. It was one of the most requested features after all.

I hope this clarifies my answer, and apologies for the misunderstanding. 🙏

[nicholaszein]

Hi @black-eye,

due to some technical difficulties, we were unable to transfer the choices made for the Form Submissions as an experiment to its final setting.

We understand the inconvenience this may cause, and we apologize for the trouble.

Luckily this option can be deactivated by going to your WordPress Dashboard > Elementor > Settings > Advanced page.

You will also receive a Dashboard Notice explaining how you can deactivate Form Submissions if you want to.

Kind regards

[black-eye]

I have a very little time to test things, but it seems that the file "uploads/elementor/css/custom-pro-frontend.min.css", which, according to https://developers.elementor.com/elementor-3-25-developers-update/, should be deleted, is still referenced in the html (even though is seems it really doesn't exist).

Also, in the post mentioned above, the file is named "frontend.min.css", mine is named "custom-pro-frontend.min.css". TBH, I'm not sure they are even meant to be the same files. But the fact is, that I'm getting the error that this file wasn't found.

The site, I'm testing it on has quite a long history and a lot of experiments are still turned off there, so maybe this is the reason. But please check it out, just to be sure...

[hein-obox]

@black-eye Your observations are correct. We are working on a fix.

[hein-obox]

@black-eye I will be updated in the next 3.25 version.

[nicholaszein]

Hey beta testers! 👋

We're happy to announce that Elementor and Elementor Pro version 3.25.0 are now available for update for the general public! 🚀 🥳 🙌

Thank you for contributing to this discussion! 🙏

Cheers 🥂

Changelogs of Elementor Core and Pro
Elementor Core
Elementor Pro