Hi Elementor beta testers,
We are delighted to introduce our new beta versions of Elementor 3.9 that broaden the capabilities of the Loop Builder to include WooCommerce, improve your workflow and website’s performance.
Try out our new beta versions and let us know what you think about our newest additions, which include:
[Pro] New in the Loop Builder – Support WooCommerce and Sections
In Elementor 3.8 Pro, we released the first phase of the Loop Builder, that enables you to design your own template for repeating content on a page (i.e. loops) like listings, blogs, and more. Elementor 3.9 Pro broadens the capabilities of the Loop Builder, so you can use it for your WooCommerce websites.
With the Loop Builder’s support of WooCommerce, you can use any WooCommerce specific widget, or any Elementor widget, and assign dynamic WooCommerce tags to it, to populate dynamically. That way, you can design your Products page any way you’d like.
At this point, when creating a new Loop Item template from the WordPress template table view, you will be prompted to choose the query you would like to use to design the template – posts, or products. However, if you are designing the Loop Item template from the New Theme Builder UI, the default query will be Posts. You can update the query to products at any time in the Loop Item’s settings by clicking the cogwheel.
As part of this update, you will also be able to use sections and columns as the layout structure of your Loops, that way you don’t necessarily need to use Containers to build a loop template. If you do have the Container experiment activated, the Loop Builder will automatically be built with Containers, otherwise – it will be built using sections.
How to Test It:
Create an In-place loop, directly on the page
Create a loop item from the Theme Builder
Introducing: Save as Default – Create your Own Default Settings for Elements
Every Elementor element receives default styling and advanced settings, as initially configured by Elementor, which includes placeholders for text, images, or icons, as well as default colors, styles and additional settings. Each time you drag an element to the Editor from the widget panel, it will appear with its initial settings. Meaning – if we take the Button widget as an example, everytime you drag it to the Editor from the widget panel, the background will adopt the Accent color set up in your Global Colors, the text color will be white, etc.
With this update, you will be able to adjust and save all the default styling and settings for all elements, the new default settings will also carry over to any kit or template you import / export. For example, you can set a new default color for the Button background, adjust the typography, associate it with a different Global Color or font – like the Primary color instead of the Accent one, etc.
This feature will be introduced as an experiment, allowing you to decide whether this is a feature you would like to add to your website or not. It is also important to note, that once you update the default options for a widget using this feature, this cannot be undone. To make any changes or revert it back to its original state, you will have to make the relevant changes manually, and save it as a new default, and as such will only be available to Admin level users.
As you save a new default for your elements, it is important to pay special attention to what details are being saved to ensure you don’t include any sensitive information. For example, if you save the email address to your PayPal account as part of the new default settings of the PayPal widget – that will be saved and visible to anyone editing your website in Elementor. The same applies for any information, including CSS ID, API Keys and so on. Therefore, it is recommended that you save your new default before adding any sensitive information.
Below are three examples of how you can use the new Save as Default feature:
How to Test it:
[Pro] Enhanced Popup Advanced Rule: Show Popup X Times per Session / Day / Week / Month
Elementor’s popup builder enables you to design popups for your website and determine when, and where you want to trigger the popup to website visitors. Up until now, as part of the advanced rules, you were able to set a rule that will trigger the popup X amount of times, but this rule was not time delimited.
With this update, you can set a predetermined number of times within a specific duration in which you want the popup to appear per session, day, week or month – according to your preference.
Performance Improvements
Elementor continuously looks for ways in which it can improve the performance of your website, and has even recently partnered with Chrome to identify areas of opportunity together. Elementor utilized Google tools including the Chrome User Experience Report and Core Web Vitals Technology Report, while receiving technical consultation from a Chrome expert. Elementor 3.9 introduces one such performance improvement that can have a significant impact on the performance of your website.
Background Images Lazy Load Experiment
Background images are an integral part of designing your website, but they can have a negative impact on performance and the score of Largest Contentful Paint (LCP). Optimizing your website’s performance and LCP score is important to optimize your visitors’ experience when visiting your site, as well as improving your discoverability in search engine results.
By adding Lazy Load to background images, you can improve your website’s performance and LCP score, without compromising on your website’s appearance.
Activating this experiment will apply lazy load to all background images below the fold, in the following areas:
That way, you can choose how you want your background images to load. Applying lazy load to background images can significantly improve the score of Largest Contentful Paint (LCP).
How to Test It:
Compatibility with the Performance Lab “WebP Uploads”
When activating the Performance Lab plugin, JPEGs will automatically be converted to WebP images. In cases in which the Performance Lab plugin is unable to successfully change the format to WebP, the website will show the default JPEG. Additionally, only JPEG images that are uploaded after activating the Performance Lab plugin will convert to WebP format, all images uploaded before then will maintain their JPEG format.
Resource Hints for Google Fonts
By using rel=”preconnect” you get the font delivered sooner, as your website loads. This leads to an improvement in lighthouse performance score and performance.
Smaller CSS Assets
With this update, we made changes to the way we generate our minified CSS from our SASS files. With extra tweaks we managed to reduce the total size of all the CSS assets from 5.3MB to 4.6MB, which is a ~13% reduction. CSS assets in Elementor Pro reduced by ~10%, from 7.3MB to 6.6MB.
Expanding Existing Features
Make An Impact: Share Feedback Before Features Are Released
We’re always looking to get to know Elementor customers on a deeper level. If you’re interested in meeting with our team and sharing your insights, feedback, and feature requests you’re welcome to sign up for some quality time with us here. Or download Elementor’s Dev Edition. Talk soon!
How to Install the Beta Version
If you still haven’t enabled beta testing in Elementor, please follow these steps:
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: December 4, 2022 (Estimated)
Many thanks for your support and help!
This content was originally published here.