β π₯ Elementor v3.24 Beta Release π₯ #28508
Replies: 22 comments 50 replies
-
Beta Was this translation helpful? Give feedback.
-
Can you please add WOFF2 support for variable fonts? Why only TTF fonts? WOFF2 fonts are compressed and better for performance, I'm a bit baffled at the decision to use TTF. Do you have native TTF conversion to WOFF2 or compression integrated? If not, could you please add WOFF2 support? Almost all fonts now come in WOFF2, I'd probably have to convert them manually to TTF to use them for this functionality. I have to assume the variable fonts feature also replaces the necessity of using multiple font files for different font weights, leading to lower total font weight correct? I can manually download local google fonts from https://gwfh.mranftl.com/fonts, but they're all in WOFF2 format. I'd also like to suggest some further improvements to font performance for future updates. Two things that would be fantastic is automatic local hosting of Google fonts so I don't have to use a third party performance optimization plugin for that functionality, which would reduce external HTTP requests and eliminate that round trip latency, which would significantly improve performance. Local hosting of Google fonts examples: https://wordpress.org/plugins/host-webfonts-local/ https://wordpress.org/plugins/yabe-webfont/ Second, I'd like to request the option to automatically prune unused characters and unused glyphs within the font files to reduce their file size even further. Many font libraries come with a ton of unused characters which drastically increase file size. This would improve performance for the same reason as ditching the font awesome libraries for individual inline SVGs, stripping unneeded weight from the fonts can reduce their size by 30-50% or more. For removing unused characters, glyphs and kerning pairs, I recommend looking at font forge, an open source font editor for ideas on implementation. Both of those are out of the scope of the current update, but I hope they will be considered for in the near future. Additionally, a third feature to improve performance would be controls that are directly integrated into the editor to set font display properties. I can see there is already a hook available here: https://developers.elementor.com/docs/hooks/font-display/, however this puts this out of reach for many users and requires usage of a third party optimization plugin to implement automatically. This will reduce CLS issues, and FOUC, and is very common font optimization functionality in almost any optimization plugin. Both Yabe Webfont and OMGF let you apply font display properties as well. Fourth, Font Subsetting would also be a great candidate for further font weight reduction. Examples of Font Subsetting services: https://everythingfonts.com/subsetter https://github.com/typst/subsetter https://github.com/zachleat/glyphhanger https://github.com/Munter/subfont https://products.aspose.app/font/generator So all told, at the moment there are 5 more opportunities to improve font performance that I can think of. Don't get me wrong, the updates included in this upcoming version are absolutely huge for performance, I just see many more opportunities on just the fonts front to improve it even further. All of these suggestions can be implemented manually with the tools I've listed right now, but it would take 5x+ the time to do than if these were implemented directly into Elementor and much of it handled automatically. |
Beta Was this translation helpful? Give feedback.
-
Variable Fonts. The long-awaited feature is now available in Elementor. Compared to Static Fonts, it greatly shortens the time of adding Custom Fonts and brings more control to text design. It also improves loading times. So far it works perfectly. Thank you very much Elementor for your involvement. |
Beta Was this translation helpful? Give feedback.
-
I like the idea of the floating bar as it could potentially be used to replace a plugin I use called "Ditty". What is missing is some positioning functionality, for example, it would be good to be able to position it at the top of the page i.e. under the header rather than above the header. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
I was wondering: With all the performance improvements in the latest versions of Elementor, are caching plugins like WP Rocket still useful? Do they really make a difference? Thanks in advance. |
Beta Was this translation helpful? Give feedback.
-
Looking forward to testing variable fonts. |
Beta Was this translation helpful? Give feedback.
-
Iβd like it to have a shortcode so I could position it wherever I wanted on a page.
|
Beta Was this translation helpful? Give feedback.
-
The floating bars is a nice idea, but it's not really workable in the current configuration. When I open the library, I see multiple previews, but each time I want to look at them closer (via the magnifying glass icon) I get a cookie message, when I accept cookies, the preview is blank, and next time I get a cookie message again. So I have to 'find' the right bar by trial and error... Preview can use a lot of improvement. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
It looks like the CTA floating bar does not do what it intended to do ;) One of the example templates in the library uses HTML to create bold text... but the HTML is escaped ;) |
Beta Was this translation helpful? Give feedback.
-
Floating bars. By using the CTA bar in the top position and Sticky Header, when the page loads, CTA bar's position is above the header. If you scroll down and up, the position of the CTA bar is correct (before the header). Also, the close button is not visible to unauthenticated visitors. |
Beta Was this translation helpful? Give feedback.
-
@nicholaszein I updated for a short period, just reverted back though because we're about to launch a staging site that I was testing the update on. One thing I noticed right away is that it completely destroyed the styling and positioning of all of my LottieFiles sitewide, don't have details or images right now due to the launch but once we complete the launch, I'll update the staging environment to this update again so I can drop more details and images. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
Hi all, We just released Elementor v3.24 Beta 2. Notice: Due to a technical issue in the first beta, the updated versions will be 3.24.0-beta2 for the Free plugin and 3.24.0-beta5 for the Pro version The versions include the following: Free version
Pro version
β Thank you! |
Beta Was this translation helpful? Give feedback.
-
Hi beta testers, I was not able to participate in this beta version. So I wanted to ask if animation loader feature has been added to ajax search in this version? |
Beta Was this translation helpful? Give feedback.
-
Hi all, We just released Elementor v3.24 Beta 3. Notice: Due to a technical issue in the first beta, the updated versions will be 3.24.0-beta3 for the Free plugin and 3.24.0-beta6 for the Pro version The versions include the following: Free version
Pro version
β Thank you! |
Beta Was this translation helpful? Give feedback.
-
Has this release been delayed? |
Beta Was this translation helpful? Give feedback.
-
Your versioning scheme is extremely confusing. It would be much better to have consistently incrementing x.x releases for major features and x.x.x for minor releases. This is as bad as USB versioning, if not worse since 3.24 seems like it would be older than 3.3.0. |
Beta Was this translation helpful? Give feedback.
This comment was marked as off-topic.
This comment was marked as off-topic.
-
errors when editing text in the mega menu and errors when adding your own icons in the mega menu
system-info-elementor.bokserki.pl-10-09-2024.txt Click to reveal Console errors and warnings
|
Beta Was this translation helpful? Give feedback.
-
Hey beta testers! π We're happy to announce that Elementor and Elementor Pro version 3.24.0 are now available for update for the general public! π π₯³ πThank you for contributing to this discussion, we really appreciate it! β¨ Special thanks to our dear contributors who helped make this release possible:
Thank you for your feedback! π Cheers π₯
|
Beta Was this translation helpful? Give feedback.
-
===========
Beta Version Updates - Please Read Below!
===========
Β
Hey Beta testers, π
Elementor 3.24 beta is now live and we would love to hear your feedback on it. Following the introduction of Floating Buttons in version 3.23, we're excited to bring you Floating Bars. Now, you can place sticky bars at the top or bottom of your page, ensuring visitors never miss important updates or promotions. Version 3.24 also marks a significant performance milestone with improved CSS Loading; making your websites much faster, and reducing the CSS size by up to 668KB. In addition, we are pleased to introduce Variable Fonts, which give you even more flexibility to create stunning text designs.
Make an impact on the future of Elementor by testing the 3.24 beta and sharing your impressions on the latest additions:
Looking forward to hearing your thoughts and feedback on these new features!
Β
Please Note: Due to technical issues, you will notice an update to the Pro version 3.24.0-beta4. You can proceed with the update without any concerns.
Β
Elevate Your Websiteβs Potential with Floating Bars
Elementor 3.24 introduces an exciting new feature to enhance visitor engagement and boost conversions: Floating Bars. This new addition allows you to seamlessly integrate three types of bars to your website:
For instance, an eCommerce website can use a Coupon Bar to promote a 24-hour flash sale at the top of every product page and leverage the new single-click copy to clipboard function. Similarly, a news portal might use the Ticker Bar to continuously display important posts or breaking news, keeping readers informed and engaged.
Seamless Setup and Customization
Setting up your Floating Bars is effortless. Upon adding a new Floating Element (WP Dashboard > Templates), youβll be prompted to choose between a Floating Bar or Floating Button. Choose one of the 30+ templates available and then make the Floating Bar your own by customizing the design, icons, text content, CTA links, and more. Elementor Pro users can also leverage Display Conditions to specify where, when, and to whom the Floating Bars will appear, enhancing targeting and effectiveness.
30+ Templates to Choose From
With the addition of Floating Bars, you can also find new pre-designed templates in the library. The diverse array of pre-designed templates, enable you to enhance your siteβs functionality and save time designing a Floating Bar from scratch. These templates can be customized according to your individual needs, enabling you to spotlight key messages and promotions effectively. You can find templates for online shops to promote sales or new products, templates with different signup buttons, templates with file downloads, table reservations, discount codes, milestones and so much more!.
The free version of Elementor includes the CTA Floating Bar, while with Elementor Pro you can benefit from the three distinct Floating Bar types and access all 30+ templates, enabling dynamic and effective promotions right at the top or bottom of the page. With Floating Bars, Elementor 3.24 not only simplifies website customization but also powers up your conversion and sales strategy by putting your most important messages front and center.
How to Test It:
Β
[Pro] Enhanced Creative Freedom with Variable Fonts
Variable Fonts is an exciting feature that brings unparalleled fluidity and control to text design. By simply uploading a single TTF file from sources like Google Fonts, you can now adjust text weight and width with incredible precision. To utilize this feature, go to WP Dashboard > Elementor > Custom Fonts > Add New > Add Variable Font, name the new font, upload your TTF file, select the desired weight and width checkboxes, set the values based on the fontβs properties, and publish.
Flexible Design and Workflow
With static fonts, designers are confined to adjusting text weight and width in rigid increments of 100 pixels, which sometimes limits design flexibility. Now, Variable Fonts allow changes in single increments, ensuring full control over text customization, enabling more dynamic and engaging designs. Designers can now create text that morphs gracefully, enhancing visual storytelling and viewer engagement.
When editing text and navigating to the Typography control, you can see the new fonts at the top of the Font Family selection, under 'Variable Fonts', enhancing workflow efficiency and simplifying access. Whether adjusting for aesthetic appeal or animation purposes, Variable Fonts allow you to gain control and offer you the freedom to explore a broader range of design possibilities.
How to Test It:
Β
Performance Optimization Unleashed with Enhanced CSS Loading
Elementor 3.24 brings a pivotal enhancement to CSS management - Conditional CSS Loading. This feature ensures that only the CSS necessary for the page being viewed is loaded, and drastically reduces the amount of loaded CSS. For instance, specific features like Shape Dividers, Sliders, Lightbox, Dialogs, Animations and others load only when utilized on the page. Furthermore, all widget styles are now loaded conditionally, without loading styles for unused widgets.
Optimized CSS Delivery for Faster Loading Times
The βImproved CSS Loadingβ feature, introduced in v3.3.0, made a valuable impact on Editor performance, and is now native for all websites who update to v3.24. The level of CSS reduction that you will see, depends on whether your website already had the βImproved CSS Loadingβ feature activated or not. Websites that had the feature active before updating, will experience an additional reduction of up to 145KB in CSS size, while websites who havenβt activated this feature will experience a reduction in CSS size of up to 668KB.
Reducing CLS and Boosting Performance
In this release, we've significantly optimized the way CSS assets are loaded for Elementor widgets, improving both performance and visual stability. Previously, widget styles were loaded at the end of the
<body>
, which could lead to Cumulative Layout Shifts (CLS) as the page content adjusted after loading. With our new "style dependencies caching" system, these styles are now cached on the first visit and loaded from the cache into the<head>
on subsequent visits. This change minimizes CLS by ensuring that styles are applied earlier in the page load process, resulting in a smoother, more stable user experience.Elementorβs Commitment to Efficiency
This strategic optimization addresses our continued commitment to significantly enhance site performance. You can expect faster loading times, which contributes to a better overall visitor experience. This upgrade not only streamlines the design process but also ensures that your website remains swift and efficient, directly improving SEO rankings and user satisfaction.
How to Test It:
Β
[Pro] Streamlined Workflow with Display Conditions
Visual Indications in The Navigator
Elementor 3.24 introduces an improved workflow for managing Display Conditions when working on elements, crucial for optimizing your web creation process. When setting a Display Condition for an element, a vertical line will appear on the affected section in The Navigator. Additionally, a dedicated icon will appear on hover, both indicating that a change has been made to this item and that a Display Condition is active on it. Until now, these indicators were added when applying Custom CSS, Absolute Position, and Motion Effects, but starting from v3.24, this will also be applied for Display Conditions. Furthermore, when clicking on the icon in the Navigator, the user will be redirected to the Display Condition area in the panel. These enhancements allow you to quickly ascertain what sections have conditions set and seamlessly alter them, streamlining your design process and reducing time spent searching through settings.
Seamlessly Manage Display Conditions
This update comes with two enhancements to improve your workflow:
Both of these enhancements can be easily leveraged when right clicking any element on your website. If the element already has Display Conditions applied to it, you can click βcopyβ and will also see a new option to βclear display conditionsβ. You can then go on to another element and right-click to βpaste display conditionsβ. These tools significantly speed up project completion times and save you valuable time.
Feature Enhancements: Search, Elementor AI & More
[Pro] Bringing Search to The Next Level
In version 3.23 we introduced the new Search widget, which leverages AJAX loading to display live results as the visitor is typing, as well as a collection of new design possibilities. In version 3.24 we continue to develop the Search widget while listening to the feedback of our users. These enhancements, available now in 3.24 beta, include:
Opt Out Option for Elementor AI
Elementor AI tools streamline your workflow and speed up website delivery, all while keeping your professional guidance front and center. You can now easily turn off AI features when handing over the website to clients, ensuring they only see the final, polished product without any AI elements. The ability to disable AI notices is also useful for anyone who is not interested in using Elementor AI and wants to clean up their workspace. To turn off Elementor AI go to the WP Dashboard > Users > Profile and see the option to opt out.
Additional Updates
More Improvements
Free version
flatpickr-calendar
styles only when forms are in useanimations.min.css
into multiple CSS files and load them conditionallyget_style_depends()
CSS files in the body to improve CLSwaypoints.js
library from the codeflatpickr
library to v4.6.13eicons
library to v5.31.0Pro version
animations.min.css
into multiple CSS files and load them conditionallyaria-label
for the Off-Canvas widgetclear_custom_image_sizes
hook to prevent edge case issuesHow to Install the Beta Version
If you still haven't enabled beta testing in Elementor, please follow these steps:
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:
Designated time for release:
September 9th, 2024 (Estimated)
Many thanks for your support and help!
Cheers,
Elementor Team
Beta Was this translation helpful? Give feedback.
All reactions