Skip to content

✅ 🔥 Elementor Pro v3.6 Beta 4 Release 🔥 #17382

New issue
New issue
Closed
Closed
✅ 🔥 Elementor Pro v3.6 Beta 4 Release 🔥#17382
Labels
announcementUsed for general announcements.help wantedAnnouncements that request help from users, like Public Beta testing programs.mod*[Temp.] For internal use only.product/proIndicates if the referenced component is part of the Elementor Pro plugin.solvedIndicates that an Issue has been Solved, or a Feature Request has been Released.
Milestone
Pro 3.6.0
@avivu

Description

@avivu
avivu
opened on Jan 5, 2022

===========

Beta 4 UPDATED - PLEASE READ BELOW!

===========

Cover for Hub

Hi Elementor Beta testers 👋

We are incredibly excited to introduce our new beta version, Elementor Pro 3.6. This release demonstrates another leap forward in new ecommerce capabilities, while simultaneously allowing you to strengthen your brand’s identity.

The new widgets and features included in this release allow you to apply your brand’s identity throughout your entire website, resulting in seamless user experiences and repeat visits.

Try out Elementor Pro 3.6 Beta and let us know what you think about our newest additions, including:

  • Page Transitions
  • WooCommerce Purchase Summary widget
  • WooCommerce Notices
    • WooCommerce Notices widget - to adjust Notices placements
    • WooCommerce Notices in Site Settings - to adjust Notices style
  • New Layout Options in the Add to Cart Widget
  • Performance improvements

Before you test, please make sure you are using:

  • Elementor v3.5.4
  • Elementor Pro v3.6.0 beta 4

Page Transitions - Establish Your Brand’s Identity As Users Browse Your Website

3_6_Page_Transition_2

Brand awareness is one of the best ways to generate loyalty and encourage users to visit your website, again and again. By displaying your logo as users browse through your website you keep your brand top of mind throughout their experience, that way - you increase brand recognition and retention.

With the Page Transitions experiment, you have greater design flexibility, allowing you to customize the page loading experience, and increase brand recognition, without relying on additional plugins. When the experiment is turned on, Page Transitions - located under Site Settings consists of two functionalities:

  1. Preloader - Place an icon, image, or one of Elementor’s preloader animations in the center of the screen to indicate the loading progress. You can even place your brand’s logo, to increase brand awareness.

  2. Page Transitions - Display a full screen canvas as a transition upon entrance or exit of pages. You can choose whether to animate the entrance and exit of the transition canvas or not, to create a unique design and deliver the best experience for your users.

To improve the performance of Page Transitions by 30%, the content of the next page will be prefetched when users hover over a link, and rendered after they click it, so it loads after the Transition’s duration.

Here’s how it works:

  1. Go to the Elementor Experiments screen and activate the “Page Transitions” experiment.
  2. Edit a page with Elementor and make sure you have a menu or buttons that redirect to other pages or posts on your website.
  3. Go to Site settings > Page transitions
  4. In the Page Transitions and Preloader sections, play around with the different options and make sure everything works as expected in the editor.
  5. Click update.
  6. Go to the page preview, make sure the transition works as expected.
  7. Navigate between your pages and make sure the transition works as expected.

New WooCommerce Purchase Summary Widget to Increase your Retention

Purchase Summary widget

In online stores, every part of the shopping experience contributes to users making a purchase, from a well designed archive and product page all the way through to the Summary Page that appears after a user completes their purchase.
With the new Purchase Summary widget, you can create and customize a dedicated Purchase Summary page, to let users review the order details after the purchase. The details of the Purchase Summary widget include all WooCommerce order confirmation info: confirmation message, payment, order, billing, shipping, and more.
Using this widget, you can rename the title of each section, adjust the style of the sections uniformly, choose your typography, and even individually customize certain sections. That way, your Summary Page matches the rest of your online store, keeping your branding consistent from start to finish.
When you try saving the page, a modal will appear asking whether you want to set it as your dedicated Purchase Summary page. If you choose not to save it as your default Purchase Summary page at this time, you can configure it later in the WooCommerce section of the Site Settings.

Here’s how it works:

  1. Make sure WooCommerce is installed and activated.
  2. Make sure you have at least one order completed.
  3. Create a new page, edit it with Elementor and drag in the Purchase Summary widget.
  4. Change the content of section titles, and other available options.
  5. Go over to the Style tab and start examining the customization possibilities.
  6. Style your Purchase Summary page by adjusting the style of sections, typography, payment details, and more.
  7. Publish the page, and make sure the Default modal appears, and try the different options.
  8. After saving the page as the default Purchase Summary page, go to Site Settings, and open the WooCommerce section. Make sure the default page appears under the Pages section.
  9. Create a new order, and after submitting, make sure you are redirected to the new Purchase Summary page.
  10. Make sure everything works as expected in the Editor and on the Frontend.

*Please note, the WooCommerce Purchase Summary widget works best with the ‘Hello’ theme

WooCommerce Notices: New Styling Section and Widget to Facilitate a Seamless Shopping Experience

Position Style - WooCommerce Notices widget

WooCommerce Notices are a way for you to automatically provide feedback and communicate with users as they shop. WooCommerce has three types of notices: Error, Message, and Info. These notices range from informing users they’ve successfully added an item to their cart, to notifying them that they’re missing details in the Checkout form. As these notices can appear on any page, at any time - if not adjusted to your online store and the experience you want to facilitate, they could become intrusive

Style Your WooCommerce Notices in Site Settings

Located under WooCommerce Site Settings, a new section has been added, allowing you to customize the appearance of your WooCommerce notices. In the WooCommerce Site Settings section, choose the type of notice you would like to customize - info, message, or error. Every notice type you choose, will automatically receive Elementor’s new default modern design, and display on the page, so you can visualize your changes. To match the appearance of the WooCommerce notices to the rest of your online store, you can adjust the typography and style of each notice, including their background colors, borders, links, and buttons, to create a cohesive shopping experience.

Here’s how it works:

  1. Make sure the WooCommerce plugin is installed and activated.
  2. Go to Elementor Site Settings and click on the WooCommerce section.
  3. Click and open the new Notices section.
  4. Make sure the default Notice Type state is empty.
  5. Add the three Notice Type options, and make sure the new default style for the WooCommerce Notices appears on the page.
  6. Save the changes.
  7. Go to the checkout page and place an order with missing fields. Check if the error notice style changed to the new default style.
  8. Continue to check several WooCommerce notices options and examine if the style changed to the new ones.
  9. Go back to the Notices section and start examining the style option of each notice.
  10. Adjust the styling to match your site design.
  11. Save the changes and check again on the frontend if the default WooCommerce notices styles changed to the new ones based on your design.
  12. Go back to the Notices section and deselect the three style types and save.
  13. Go to the frontend and check if the style of the WooCommerce Notices changed back to the default WooCommerce styling.
  14. Make sure everything works as expected in the Editor and on the Frontend.

Set the Position of Your WooCommerce Notices on Each Page

Each of the WooCommerce Notices can appear on various pages at various times. Up until now, users couldn’t control where these notices would appear on the page, and they would adopt WooCommerce’s default placement. With the new WooCommerce Notices widget, you can determine the location of these notices on each of the pages, by dragging the widget to the desired location.

Please note, as you set the position of the WooCommerce Notices, that you facilitate the best user experience. A couple of things to consider:

  • It is recommended not to place the notice in the header, as that will override the location of notices on all the other pages as well.
  • It is recommended that you drag the WooCommerce Notices widget once, to your desired location on the page. While dragging the WooCommerce Notices to the editor more than once is technically possible, WooCommerce Notices will only appear in one location on the screen, and will adopt the lowest position on the page. For example, if you drag the widget to a location in the middle of the page, and another location towards the bottom of the page, your WooCommerce Notices will appear at the bottom of the page.

Here’s how it works:

  1. Make sure the WooCommerce plugin is installed and activated.
  2. Go to your checkout page and drag & drop the WooCommerce Notices widget anywhere on the page. For testing purposes, place it under the Checkout widget.
  3. Save the page and go to the live preview.
  4. In the live preview, place an order with missing fields. Check if the error notice appears at the new location - under the checkout content.
  5. Do the same on your Single Product template - Place the WooCommerce Notices widget above the single product content.
  6. Go to the live preview and add an item to the cart. Check if the notice appears at the new location above the product content.
  7. Go back to the Single Product template and remove the widget.
  8. Save and go to the live preview and add an item to the cart. Check if the notice appears at the original location - Under the header and in full width.
  9. Place the WooCommerce Notices in several WooCommerce pages and make sure the notice appears at the new location.
  10. Make sure everything works as expected in the Frontend.

New Layout Options in the Add to Cart Widget

New Layout Options in the Add to Cart Widget

New layout options in the Add to Cart widget improve its compatibility with other third-party plugins. With the three new layout options - Inline, Stack and auto, you can adjust the appearance of the Add to Cart Button without requiring any CSS, to match a variety of other plugins. The default layout is Inline (flex), Stacked will be ideal for online stores that allow Apple Pay, whereas Auto will adjust the button to other components available in custom Add to Cart widgets.

Please check existing Add to Cart and Custom Add to Cart widgets, and create new ones for testing.
Something not functioning? Report to us in this thread.

Another Leap of Performance Improvements

This release also includes performance improvements, as we extend our Improved CSS Loading experiment to include WooCommerce and Theme Builder widgets. When the experiment is turned on, CSS is reduced by 126kb from 137kb to 11kb.

Additionally, we removed an ‘elementor-section-wrap’ by adding it to the Optimized DOM Output experiment.

Please check existing WooCommerce and Theme Builder widgets, and create new ones for testing.
Make sure everything works as expected when the Improved CSS Loading experiment is active and inactive.
Something not functioning? Report to us in this thread.

More Improvements

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:

  • Go to Elementor > Tools > Versions
  • Enable the beta tester feature
  • Go to Dashboard > Updates and update to the latest beta version.
  • This will get you set up to test the new Elementor Pro 3.6 Beta 4.

Notes

For bugs and remarks, please reply with a comment on this issue here on GitHub.

Please keep this related to the current beta only! For any other issue or feature request, feel free to open a new issue.

Designated time for release: February 2nd, 2022 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

Metadata

Metadata

Assignees

No one assigned

    Labels

    announcementUsed for general announcements.help wantedAnnouncements that request help from users, like Public Beta testing programs.mod*[Temp.] For internal use only.product/proIndicates if the referenced component is part of the Elementor Pro plugin.solvedIndicates that an Issue has been Solved, or a Feature Request has been Released.

    Type

    No type

    Projects

    No projects

    Milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions