✅ 🔥 Elementor v3.23 Beta Release 🔥

[avivu]

===========

Beta 6 UPDATED - PLEASE READ BELOW!

===========

Hey Beta testers, 👋

Elementor 3.23 beta is now available, and we would love to hear your feedback on the new Search Widget that displays search results as visitors type into the search box. You can also try high converting features like Floating Buttons and Link in Bio Widgets.

Make an impact on the future of Elementor by testing the 3.23 beta and sharing your impressions on the latest additions:

• [Pro] New Search Widget
• Floating Buttons
• Link In Bio Widgets
• Improved Nested Elements Editor Performance
• And More!

 

[Pro] New Search Widget With Live Results

The new Search Widget helps your visitors find what they are looking for faster and empowers you to design a pixel-perfect visitor experience.

Display Live Results As Visitors Type

The new widget also comes with the exciting ability to display live search results as visitors type into the search box, which helps you bring more awareness to additional products and content. The results are displayed in loop templates that appear in the dropdown box under the search input. To turn on Live Results, navigate to the Content Tab, and click into the Results Section. Choose which loop template you want to display your live results with, or build a new loop item from the Theme Builder. You can also customize the dropdown box’s layout by setting the number of results displayed at once and how many columns they are displayed in, along with the minimum number of characters typed into the input before live results are displayed. Additionally, you can write and style a "nothing found" message for when no results match the search value.

Filter Search Queries

Keep visitors focused on the right content with the ability to filter search results by customizing the Search Widget’s query. This allows you to choose which source you would like the widget to display results from. The default setting is “All”, but you can also choose “Product”, “Posts”, and any other custom post type. Additionally, you can narrow the widget’s query even further by entering taxonomies or specific posts or products into the include or exclude inputs. Changing the search query will affect both the live results displayed as visitors type alongside the items displayed in the search results template.

Advanced Design Capabilities

Place the Search Widget onto your page, and begin customizing and styling the search input alongside the clear-search and submit buttons. You can change the placeholder text in the input, assign different icons for the button from the icon library or upload a custom SVG, and choose how to send visitors to the search page results - by pressing Enter, clicking on the search button, or both.

To activate the new experiment, activate “Search” by going to WordPress Dashboard → Elementor → Features. Activating the experiment won’t affect Search Form Widgets already in use, but you won’t be able to place new ones from the Widget Panel.

How to Test It:

1. Ensure the "Search" feature is activated by navigating to the Elementor menu in WordPress → Settings → Features.
2. Create a new page and add the Search widget to the Editor.
3. Explore the options, such as changing the placeholder text, adding a clear icon, and finding the right submit action you need.
4. Click on publish, check the live page, type a search term, and click the search button. You should be redirected to a search results template (created before with Search Archive).
5. Ensure everything is working as expected.
6. Go back to the page and continue exploring the widget's capabilities.
7. Go to the Results section and activate the live results.
8. You need a loop template to use the live results - Add a loop template you created previously or navigate to the Theme Builder to create a new loop item template.
9. Test the different options in the live results, such as setting minimum search characters before the results appear, setting the maximum number of items to view, and more.
10. Next, go to the Query section and set the desired query filter.
11. Switch to the Style tab and continue styling your search input field, button, and live results section.
12. You can also style the "nothing found" message if there are no results.
13. Click on publish, and check the live page.
14. Start typing in the search field, and live results appear based on the search term (you can also test this in the editor).
15. Ensure everything is working as expected in the editor and front end.

 

Contact Made Simple: Introducing New Floating Buttons

Convert more visitors into leads with Floating Buttons that make starting a conversation with visitors easier than ever. Floating Buttons will appear as a sticky button wherever you want on your webpage. When the button is clicked by visitors, the buttons expand to display various contact buttons and information depending on your chosen template, or activate a connected messaging platform like email, Whatsapp, Viber, and more.

Floating Buttons are templates, so add them to your website by navigating to the WordPress Admin > Templates > Floating Buttons. Click on Add New Floating Button and choose a customizable pre-designed template. Now begin setting up your Floating Button. Each template can be customized according to the different content they include. For example, if you have chosen the Single Chat template, you can choose the messaging platform, and enter your information like phone number, email, etc. You can also customize the content like the avatar and the message in the chat bubble. The Style section gives you design capabilities to stay on brand by setting the color and typography of different elements along with entrance and exit animations.

Lastly, the Advanced Tab allows you to choose where to position the button and chat box on the page. Elementor Pro includes a number of different Floating Button templates and can set display conditions to choose when, where, and to who you want the Floating Button displayed. If you are using the free version of Elementor, you can use one of the templates, and display it on your entire site without the ability to set Display Conditions. Set the Floating Button display for the entire site from WordPress Admin > Templates > Floating Buttons.

To activate the new experiment, activate “Flexbox Container” & “Floating Buttons” by going to WordPress Dashboard → Elementor → Features.

How to Test It:

1. Ensure the "Flexbox Container" and "Floating Buttons" features are activated by navigating to the Elementor menu in WordPress → Settings → Features.
2. Navigate to the Elementor Template area, and locate the Floating Button section.
3. Click on the “Add new Floating Buttons” button.
4. You will be redirected to create a template, and a template library with pre-designed options will appear.
5. This is a mandatory step because you need to start with a template to create a floating button.
6. Click to insert your desired template.
7. Continue to explore the floating button's capabilities in the Content and Style tabs. You will have different settings and style options depending on the template you choose.
8. Navigate to the Advanced tab and define where to position the Floating Button and other options.
9. You can name your template by clicking the cog icon and adjusting the Title field.
10. Click on the publish button to start defining where the button will appear on your website.
11. Pro users:

• A display condition window will appear on publish while editing the template, allowing you to set where to present the floating button.
• Choose where to display it: on the entire site or on a specific page.

12. Free users:

• After clicking on publish, please navigate back to WordPress > Elementor Templates > Floating Buttons.
• Locate the template you just created and hover over it. You will notice a “Set as entire site” link. Click on it if you want the floating button to appear on the entire website.
• If you have two floating buttons (or more), you can only set one floating button for the entire site at a time.
• You can remove it from being presented on the site by clicking “Remove from the entire site.”

13. Explore different templates to learn about the floating button's capabilities.
14. Ensure everything is working in the editor and front end.

 

Check Out New Link In Bio Widgets

The new Link in Bio widgets make it easy to increase engagement with your online presence and drive traffic to key parts of your site. A perfect solution for when your website is still under construction or if you generally want to keep your vital information on one webpage. Drag one of the seven different widgets available for Elementor Pro subscribers from the new Link In Bio section in the Widget Panel. Each widget is built differently to match your needs, like promoting a service, displaying a business card, showcasing your portfolio, and more. Once you’ve chosen which widget you want to use, you can customize its content and style from scratch or choose from pre-designed blocks in the template library. Choose different images from the media library, write your own titles, and choose which social icons you want to display. You can also stay on brand by changing the element's colors and the text’s typography settings from scratch or using new design blocks from the template library to jumpstart your design.

Elementor Pro includes seven new Link In Bio Widgets, one of which is also included in the free version of Elementor.

To activate the new experiment, activate “Link In Bio” by going to WordPress Dashboard → Elementor → Features.

How to Test It:

1. Ensure the "Link In Bio" feature is activated by navigating to the Elementor menu in WordPress → Settings → Features.
2. Create a new page and locate the new Link In Bio section in the widget panel.
3. You can choose between seven widgets, each with a different purpose and use case.
4. Choose one of the widgets, for example, the Minimalist widget.
5. Explore the Content tab and start designing your link in bio by adjusting the Identity image, adding details in the Bio section, and enhancing the design with Icons and CTA links.
6. Navigate to the Style tab and explore the different style options for each part of the link in bio.
7. Explore the different link in bio widgets and ensure everything works as expected.
8. Ensure everything is working as expected in the editor and front end.

 

Seamless Workflow: Nested Elements Optimization

While nested elements have been incredibly useful for building intricate layouts in your Accordion, Tabs, Carousel, Mega Menu, and Off Canvas Widgets, their building experience has slowed the Editor, causing frustration. Version 3.23 addresses this issue by upgrading the widget's infrastructure, so every change to the widget will only affect the relevant element and not require reloading the entire widget. This upgrade improves editor interaction time by 60%-98%, depending on the action type, to ensure a smooth building experience.

How to Test It:

1. Ensure the "Flexbox Container," "Nested Elements," and "Menu" features are activated by navigating to the Elementor menu in WordPress → Settings → Features.
2. Create a new page and add various nested elements: Accordion, Tabs, Carousel, and Menu widget.
3. Add elements inside the nested elements.
4. Since we adjusted the rendering mechanism regarding nested elements inside the editor, please try to adjust the repeaters: add, delete, duplicate, etc.
5. Add different elements inside each widget, and explore the user experience while editing the nested elements.

 

Accessibility Improvements & Additional Updates

Version 3.23 makes your Mega Menus more accessible for visitors who rely on screen reader technology. By restructuring the DOM output of Mega Menus, screen readers can now scan your website's code more accurately, and associate menu items with their content areas and vice versa. Note that the changes to the DOM may require changes to custom code applied to your Mega Menu.

Additionally, the following status changes will be made to experiments and features:

1. Lazy Load Backgrounds Images: promoted to Stable, and active by default for existing sites.
2. Element Caching: Promoted to Beta Status, and active by default on new websites.

---

More Improvements

Free version

• New: Elevate engagement with Floating Buttons - Convert visitors into leads, making it easier than ever to start a conversation on any platform
• New: Introducing Link In Bio - allowing you to create a digital business card and share it easily
• New: Generate Featured Image with AI
• Tweak: Added support for the overscroll-behavior CSS property to improve scrolling experience
• Tweak: Activated Element Caching feature for new sites and promoted to Beta status
• Tweak: Promote "Lazy Load Backgrounds Images" feature to Stable status
• Tweak: Hide "Default Device View" from User Preferences when the Editor Top Bar is active
• Tweak: Increased the height of the Globals popover to improve usability
• Fix: Performance issues causing lag and slowness while editing Nested Elements (✅ 🐞 Elementor Editor loads very slowly if Nested Elements are active and in use #24076)
• Fix: Video autoplay issues in various scenarios (Props @JxxIT, Fix: Autoplay for video's [ED-14512] #24324, ✅ 🐞 Autoplay on video lightbox doesn't work. #14437, ✅ 🐞 Video autoplay support in iframes with feature policy #7964)
• Fix: Writing permissions issues related to WordPress root directory (✅ 🔗 🐞 Bug Report: Improper WordPress root write permissions check (ongoing issue) (Duplicate of #17255) #21036, ✅ 🐞 Improper WordPress root write permissions check #17255)
• Fix: Restored deprecated Google fonts that were deprecated in the previous update (✅ 🐞 3.22.0 has removed Source Sans Pro as a font #27701)
• Fix: Vimeo link structure with privacy hash is not working correctly with dynamic link action using the lightbox

Pro version

• New: Search Widget with Live Results - Display live search results as visitors type into the search box, enhancing user experience and engagement
• Tweak: Renamed width to Min width and add Max width control to Hotspot tooltips (✅ 🐞 Bug report: Hotspot widget - tooltip box width issue #18930)
• Tweak: Applied a logical DOM order to the Mega Menu widget to improve accessibility
• Tweak: Added the ability to set aria-label for WordPress Menu widget
• Tweak: Added the ability to set aria-label for Menu widget
• Tweak: Added a bottom option to the Image Position control in Call to Action widget
• Fix: Form submission icon message does not display correctly when Inline Font Icons feature is activated
• Fix: Save & Close button position issues in the conditions screen in Theme Builder.
• Fix: Focus appears on the first element when using the mouse to open Off-Canvas widget

---

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 get you set up to test the new Elementor 3.23 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: July 15th, 2024 (Estimated)

Many thanks for your support and help!

Cheers,
Elementor Team

[JxxIT]

Glad I could contribute!

[nicholaszein]

Thank you @JxxIT! 🙏 ❤️

[DanielCyran]

In Elementor version 3.23.0 beta, I encounter a console error and slow loading of the page editing panel. Sometimes it works better, sometimes worse. This issue does not occur in version 3.22.

load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.4:7 JQMIGRATE: Migrate is installed, version 3.4.1
jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
frontend.min.js?ver=3.23.0-beta1:2 Uncaught TypeError: e.O is not a function
at frontend.min.js?ver=3.23.0-beta1:2:40153
at webpackJsonpCallback (styleguide-app-initiator.min.js?ver=3.23.0-beta1:3:13486)
at webpackJsonpCallback (webpack.runtime.min.js?ver=3.23.0-beta1:2:4680)
at frontend.min.js?ver=3.23.0-beta1:2:74
post.php:1 [Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113

[doronwolf]

Hi @DanielCyran - an important update - we were able to reproduce the issue only when the header was not published yet, can you confirm this is the case for you too?
Please publish the header - then refresh the frontend and the editor and let us know if it's still happening🙏

[DanielCyran]

@doronwolf
once published on the frontend there is no problem

the problem only occurs when editing the header and editing the page content

[DanielCyran]

there is no error on the front end in the console and the Ajax search engine still does not work

[louiswol94]

Hi @DanielCyran

is this your website URL https://sklepkuchenny.pl/?

I see the AJAX search is not firing on the Home page, but it looks like the Live Results Switch was not activated and also a Loop template was not chosen in the widget settings.

Can you please confirm?

[DanielCyran]

@louiswol94 it works now :) thank you for your help

[m1ga]

Nested Elements Optimization

It is a bit faster but still very very slow. Here is my setup: nested accordion with with 16 items, each has a left side with an image and a right side with text, headline and some other text fields.

This is a time-lapse opening the page in the editor:

elementor_accordion.mp4

after 13secs the fonts are loaded but all widgets inside the rows still have no height. Then I've increased the time to 300% so you don't have to wait that long :) 1:26 the image is loaded and after that the text/headlines do show up.

Local WordPress so no external requests

[louiswol94]

@m1ga

Even with Chrome it is slower now and you can see the scrollbar extending a lot as all the hidden content is added below the accordion at first.

So this means it was an older version right? Because we fixed this behaviour in the beta version.

[m1ga]

it's a free InstaWP account so I think it will be removed after a week. I'll check that. You can install a backup/migrate plugin and grab a backup to install it locally so you have it. Or download the images and copy & paste the widget locally 😄

[m1ga]

@m1ga

Even with Chrome it is slower now and you can see the scrollbar extending a lot as all the hidden content is added below the accordion at first.

So this means it was an older version right? Because we fixed this behaviour in the beta version.

ah sorry, yes. The instawp is using the old version at the moment. Will update it.

Edit: now it is using the latest beta.

[nicholaszein]

Hey @m1ga, just to clarify and answer your question:

I know you mentioned the polyfills could be the issue but if you look at https://github.com/orgs/elementor/discussions/27808#discussioncomment-9868756 where I added all content in the page instead of a nested element it will perform a lot better. So it looks like the nested elements are using code that is provided by the polyfills. So if that is the case: is that needed or can be changed/optimized?

Unfortunately, no. Here's what we suspect:

Just as I explained in this comment, we fetch data and parse it into JSON format (including data from images, which relies on WordPress methods), for this we use a specific method JSON.parse( JSON.stringify( Object ) ); to fetch the data and render the elements. WordPress uses a polyfill from core-js, which now includes an extension to JSON.parse granting reviver functions access to the input source text (source text access) and extends the JSON.stringify behavior to support object placeholders for raw JSON text primitives. Firefox does not have support for this feature yet, so the polyfill from core-js is loaded instead. This polyfill seems to be unstable when using Firefox, and may take longer to parse the information. If you check the payload and time it takes for the AJAX call to execute, you will see it's relatively quick. However, it takes a lot of time for the browser to respond. We suspect it's because of this unsupported feature. But here's the kick: Neither Elementor, nor WordPress make use of JSON.parse source text access. But because it's included in core-js, it seems to be running anyway. We cannot remove the usage of JSON.parse( JSON.stringify( Object ) ); because there isn't any analog/comparable method that can replace it. And Elementor relies on JSON data to render all the settings.

We submitted a request for the Core team to remove this unstable polyfill, and they did merge a commit on Gutenberg with some substantial changes that improved the overall editor performance quite a lot, solving issue #24260 for us, but as of this writing I'm yet to find any indication that it was merged to Core, or that the polyfill in question was completely removed from Core.

It's important to note this is only a suspicion of the root of the problem, and we are trying our best to troubleshoot this issue and find the exact cause of the issue, and solve it. As of now, I can confirm the performance of the editor in this beta has improved at least 50% on Firefox after testing your InstaWP with Elementor v3.23.0-beta4. Which is a huge improvement over what we had before.

My recommendation for you is to switch to a Chromium-based browser until either Firefox releases support for this feature, or we can find an alternative solution for this. I understand this is not ideal, and can be frustrating, but it's a workaround that works.

In my tests with the templates you shared with us on the InstaWP site, I got the following average results:

Elementor v3.22.3

• Chrome (latest on Windows 11) - ±6s - to Editor loaded
• Chrome (latest on Windows 11) - ±11s - to interact with the Accordion widget
• Firefox (latest on Windows 11) - ±13s - to Editor loaded
• Firefox (latest on Windows 11) - ±65s - to interact with the Accordion widget

Elementor v3.23.0-beta4

• Chrome (latest on Windows 11) - ±4s - to Editor loaded
• Chrome (latest on Windows 11) - ±9s - to interact with the Accordion widget
• Firefox (latest on Windows 11) - ±13s - to Editor loaded
• Firefox (latest on Windows 11) - ±24s - to interact with the Accordion widget

I would expect that Firefox for Fedora has the same features of Firefox for Windows 11, so the OS shouldn't be an aggravating factor. On my research I couldn't find any information indicating otherwise. Do you have any way to test the same InstaWP site using another OS to check if there is any difference using Elementor v3.23.0-beta4?

[m1ga]

Thank you for the detailed infos. I understand it is an improvement to open the page in Chrome in 10secs but this is just for one accordion without anything else in the page. I'm just saying that as a user I don't care if WP or a polyfill or something is the issue. All I see is that Elementor is slow and since you've posted improvements in this beta I've shared my experience. Maybe the next version will continue to improve the performance (perhaps focus on performance/stability and not add new feature like "floating buttons" [I know, different teams but I'm not sure if that was a highly requested feature]).

I'll stop here now as it is getting away from this beta and I'm sure you'll have enough testing material now and you've already said that a lazy loading accordion might be the best solution (why load more if only the first one is open). So I'll wait for that and keep using my own according implementation or Chrome to edit those pages.

[79ho3ein]

Great job, thanks Elementor team

Let's go for the test

[Daveden2]

@hein-obox I'm testing out the menu widget, and I'm happy with what I've seen so far.

As we discussed in #23875, could you please do the following:

1. Remove event listeners: Remove the event listeners for the Enter and Space keys from the <a> and <button> elements. The click event listener should be sufficient since we're using semantic HTML.
2. Enable tag change: Allow the <nav> tag to be changed to a <div>. This would allow us to use a container widget for the <nav>, the menu widget for the desktop <ul>, a button widget, and the off-canvas widget for the mobile <a role="button"> and <ul>.
3. Remove redundant attribute: Remove the redundant aria-labelledby attribute on the div. The div doesn't need to be labelled, and a div without a role is generally ignored by assistive technologies, making the label unnecessary.
4. Simplify button text: There's no need for the "open/close" text for submenu buttons. The aria-expanded attribute already announces this information. The text should just be something like "[name of top-level menu item] submenu".

[Daveden2]

I forgot to mention....

I'm so happy to see the submenu items now following the top-level item and trigger button in the DOM! This is a fantastic improvement.

I'm also grateful that we can now easily change or remove the aria-label attached to the <nav> in the [mega] menu widget. This gives us much more flexibility to improve accessibility when we have multiple <nav> on a page.

While I'd love to see the same option extended to other nested widgets, I understand there are many priorities to balance. Thank you for considering accessibility alongside performance and security!

[hein-obox]

@Daveden2 We are working on the implementation of the combo box pattern for the search widget. Unfortunately we weren't able to finish off the implementation before the first version of the beta release.

[Daveden2]

@hein-obox, oh wow, awesome. I must admit that I haven't done a proper research on it yet.

[hein-obox]

@Daveden2 My colleague @Batsirai-muchareva has implemented the combo box markup. It would be great if you could have a look at it.

[Daveden2]

@hein-obox, I'll be honest, this isn't my area of expertise. However, I was hoping we could achieve a similar result to the Yahoo search results in the image below.

1. For the loop items, they use a <ul role="listbox"> with list items as <li role="option">.
2. You can navigate the live search results using the up and down arrow keys.
3. Each time you type something, it announces the number of results to a screen reader, rather than reading out the full content of each list item.

[Brailovsky]

The new "Search" removes the skin options? (Classic, Full Screen, Minimal)

[nicholaszein]

Hi @Brailovsky! Thank you for joining the discussion!

The new widget doesn't require this feature anymore, since you can use other elements to create the same effect of the old skins. For example, you could use the new Off-Canvas element to show the search in a modal.

We are aiming for a different approach for new widgets that doesn't require a skin anymore.

[Joliamendi]

One of the biggest updates of Elementor! Ajax search is really great. But the absence of two things caught my attention.

1- Currently, the width of the search results does not include the search button. An option to adjust the width of the search results would be great.

2- When Ajax loads, no spinner is displayed. It would be great if you could display a spinner like the jet search plugin.

But there are some things that if you consider them in future updates, Elementor will be more lovely than ever.

1. display search results as slider (multi row)
2. Template support for "nothing found" - Instead of a plain text, we can display a template. This will also be useful for the Loop builder and menu cart widget.

[nicholaszein]

Hey @Joliamendi, welcome to the discussion! 💪

And thank you for your feedback. These are great suggestions, and we would love to see if there are more users with similar wishes, so if you can, please submit new (separate) feature requests!

https://elemn.to/gh-new-feature-request

[doronwolf]

Hi @Joliamendi

1. there is a custom width option (a toggle you can turn in) in the styling tab under the results section
2. those are great suggestions! - thank you

[Daveden2]

Floating Social Icons

I've reviewed the floating social icons and have some suggestions that could potentially enhance their functionality and accessibility.

1. Aria-label clarity: The current aria-label, "toggle links popup," could be more informative. Perhaps a user-defined more descriptive label like "open social media links" or "show contact options" would better convey the button's purpose.
2. Chat widget placement: To ensure the chat widget is easily accessible, consider positioning it as the first element in the DOM or including a link in the skip links navigation. This would allow keyboard users to locate and engage with the chat feature quickly.
3. Dialog role and focus management: For improved accessibility, it might be beneficial to assign the "links window" a role="dialog", use an aria-label similar to the trigger button and position it after the trigger button in the DOM. Additionally, shifting the focus to the close button upon opening the window would likely provide a smoother user experience.

To get an expert opinion on these suggestions, I recommend reaching out to Amber Hinds, who has extensive experience with accessibility considerations for floating buttons through her work on the Equalize Digital Accessibility Checker plugin.

[nicholaszein]

Thank you for the feedback @Daveden2! 🙏

We are currently working on improving the accessibility for the Floating Buttons, and we will be considering your suggestions! 💪

Cheers!

[LukasSchuetter]

[nicholaszein]

Hey @LukasSchuetter!

Welcome to this discussion, and thank you for taking part on this beta! 🙏

I see you have the Elementor Beta (Developer Edition) plugin installed, and that you installed the Elementor Core version 3.23.0-dev1, and still have the Elementor Pro version 3.22.1 installed. The new Search widget is part of Elementor Pro v3.23.0-beta1 as of this writing.

We recommend the Developer Edition plugin only for developers testing their own plugin with the latest releases of Elementor, but not for beta testing. Please, uninstall this plugin, then go to your WordPress Dashboard > Elementor > Tools > Version Control and change the option Beta Tester to Enable.

Then go to your WordPress Dashboard > Updates and if you don't see the options to update to the version 3.23.0-beta1, click on the link that says check again at the top.

For more information about how to become a Beta Tester, please check the link below:
https://elementor.com/help/how-to-become-a-beta-tester/

Kind regards

[efintina]

Hi,

Using Tabs. If I assign a CSS ID to a Tabs item, that element cannot be manipulated with the keyboard or even the mouse. It cannot be opened. If I remove the CSS ID, the problem goes away.

In previous versions, this problem does not occur.

All the bests,

[nicholaszein]

Hey @efintina! Welcome to the discussion! 🙂

We are going to have to check this one. Thanks for reporting! 🙏

[doronwolf]

Hi @efintina we've just released a new beta version (see more details here) that includes a fix to the issue you mentioned
we will be really happy if you can test it and confirm it solved the issue 🙏

[efintina]

At first glance it seems that the problem has been solved. If I find something new I will come back. Thank you very much!

[phkoon]

Hello there!

Two suggestions for the Floating Button:

• Add the option to write a prefilled message;
• Add the option to include the current page URL somewhere in the prefilled message.

These are basic features included in the Click to Chat widget, which could be entirely replaced by the new Elementor Floating Button (with the exception of "buy via WhatsApp", which could also be replaced by a regular button widget if it also featured the option to include current page URL).

Good to see the way things are developing for Elementor,
Keep up the good work!

[nicholaszein]

Hey @phkoon!

Thank you for sharing your suggestions! We really appreciate it! 🙏

We will consider these suggestions on our next phase of development for these features! 💪

[jlemonz]

Mega menu items now have a ::marker added? Now every item has a black dot behind

[nicholaszein]

Hi @jlemonz, welcome to the discussion! 🙂

Menu items were always a list, and lists have the ::marker pseudo element on each <li>. However, for this widget the list styles are removed, so if you are seeing them there are two possible reasons:

1. Cache
2. CSS with higher specificity modifying list styles.

Please, make sure you have both Elementor Core v3.23.0-beta1, and Elementor Pro v3.23.0-beta1 installed, that all cache levels have been cleared, and that you don't have any additional CSS applying list-styles. If that doesn't work, try deactivating the Improved CSS Loading experimental feature, and regenerating Elementor's CSS.

For the record, we have multiple testing servers with different configurations, with, and without cache, and Improves CSS Loading, and in none of those cases the Menu shows any list markers.

I hope this helps

[DanielCyran]

@nicholaszein

The float icon function lacks the option to change the icon. I am currently facing a problem because the URL address option has the appropriate functionality, but the icon is not for email. It is necessary to add this option.

[DanielCyran]

@nicholaszein

I exited and tried again to open the floating icon editing page, but the editor won't load.

load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.5:7 JQMIGRATE: Migrate is installed, version 3.4.1
elementor-floating-button-22775/:1

    Failed to load resource: the server responded with a status of 404 ()

jquery-migrate.min.js?ver=3.4.1:2 JQMIGRATE: Migrate is installed, version 3.4.1
connect.facebook.net/en_US/fbevents.js:1

    Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

post.php:1 Tracking Prevention blocked a Script resource from loading https://connect.facebook.net/en_US/fbevents.js.
post.php:1 Tracking Prevention blocked a Script resource from loading https://static.hotjar.com/c/hotjar-5024536.js?sv=6.
post.php:1 [Intervention] Images loaded lazily and replaced with placeholders. Load events are deferred. See https://go.microsoft.com/fwlink/?linkid=2048113
static.hotjar.com/c/hotjar-5024536.js?sv=6:1

    Failed to load resource: net::ERR_BLOCKED_BY_CLIENT

dev-tools.min.js?ver=3.23.0-beta1:2 Scroll util from "/dev/js/frontend/utils/scroll" is hard deprecated since 3.1.0 - Use elementorModules.utils.Scroll instead
consoleWarn @ dev-tools.min.js?ver=3.23.0-beta1:2
dev-tools.min.js?ver=3.23.0-beta1:2 elementorCommon.helpers.softDeprecated() is hard deprecated since 3.7.0 - Use elementorDevTools.deprecation.deprecated() instead
consoleWarn @ dev-tools.min.js?ver=3.23.0-beta1:2
editor.min.js?ver=3.23.0-beta1:2 Uncaught TypeError: Cannot convert undefined or null to object
at Function.entries ()
at loopBuilderModule.createDocumentSaveHandles (editor.min.js?ver=3.23.0-beta1:2:65789)
at loopBuilderModule.onElementorFrontendInit (editor.min.js?ver=3.23.0-beta1:2:65160)
at p (load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.5:10:3644)
at f (load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.5:10:3497)
at a (load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.5:10:692)
at e.trigger (load-scripts.php?c=1&load%5Bchunk_0%5D=underscore,jquery-core,jquery-migrate,backbone,jquery-ui-core,jquery-ui-mouse,wp-api-request,wp-polyfill-inert,regenerator-runti&load%5Bchunk_1%5D=me,wp-polyfill,wp-hooks&ver=6.5.5:10:3380)
at Editor.initFrontend (editor.min.js?ver=3.23.0-beta1:3:576099)
at Editor.onPreviewLoaded (editor.min.js?ver=3.23.0-beta1:3:588394)
at Editor.onPreviewLoaded (editor.min.js?ver=3.23.0-beta1:3:1265229)
js?id=G-0SZPKMCFLB:205

    POST https://region1.google-analytics.com/g/collect?v=2&tid=G-0SZPKMCFLB&gtm=45je46o1v9183234662za200&_p=1719382944721&gcd=13l3l3l2l1&npa=1&dma_cps=sypham&dma=1&tag_exp=0&cid=1067636313.1713025745&ul=pl&sr=1536x864&uaa=x86&uab=64&uafvl=Not%252FA)Brand%3B8.0.0.0%7CChromium%3B126.0.6478.114%7CMicrosoft%2520Edge%3B126.0.2592.68&uamb=0&uam=&uap=Windows&uapv=10.0.0&uaw=0&are=1&frm=1&pscdl=noapi&_s=1&sid=1719379211&sct=111&seg=1&dl=https%3A%2F%2Fjgyacht.com%2Fe-floating-buttons%2Felementor-floating-button-22775%2F%3Felementor-preview%3D22775%26ver%3D1719382941&dr=https%3A%2F%2Fjgyacht.com%2Fwp-admin%2Fpost.php%3Fpost%3D22775%26action%3Delementor&dt=Page%20Not%20Found%20-%20JGYacht%20-%20Spe%C5%82niamy%20Marzenia&en=page_view&_ee=1&tfd=9092&_z=fetch net::ERR_BLOCKED_BY_CLIENT

Nc @ js?id=G-0SZPKMCFLB:205
RG @ js?id=G-0SZPKMCFLB:644
TG.flush @ js?id=G-0SZPKMCFLB:648
(anonymous) @ js?id=G-0SZPKMCFLB:647
post.php:1 Tracking Prevention blocked an XHR request to https://region1.google-analytics.com/g/collect?v=2&tid=G-0SZPKMCFLB&gtm=45je46o1v9183234662za200&_p=1719382944721&gcd=13l3l3l2l1&npa=1&dma_cps=sypham&dma=1&tag_exp=0&cid=1067636313.1713025745&ul=pl&sr=1536x864&uaa=x86&uab=64&uafvl=Not%252FA)Brand%3B8.0.0.0%7CChromium%3B126.0.6478.114%7CMicrosoft%2520Edge%3B126.0.2592.68&uamb=0&uam=&uap=Windows&uapv=10.0.0&uaw=0&are=1&frm=1&pscdl=noapi&_s=1&sid=1719379211&sct=111&seg=1&dl=https%3A%2F%2Fjgyacht.com%2Fe-floating-buttons%2Felementor-floating-button-22775%2F%3Felementor-preview%3D22775%26ver%3D1719382941&dr=https%3A%2F%2Fjgyacht.com%2Fwp-admin%2Fpost.php%3Fpost%3D22775%26action%3Delementor&dt=Page%20Not%20Found%20-%20JGYacht%20-%20Spe%C5%82niamy%20Marzenia&en=page_view&_ee=1&tfd=9092&_z=fetch.

[louiswol94]

@DanielCyran we are aware of this issue. You can re-save your website's permalinks to solve this. In WordPress you need to flush the permalinks when a new Custom Post Type is registered. We will add a fix to do this automatically in the next beta release.

[DanielCyran]

@louiswol94 after the update it works :))

[nicholaszein]

Hey @DanielCyran,

I know your problem with the editor has been fixed, but I just wanted to let you know we just released a new version that is more stable.

As for the Icons in the Resource Box, we will consider adding a "Custom" option in a future release.

And finally, for the button in the Single Chat, this issue was fixed in this release, v3.23.0-beta5! 😉

Make sure you have cleared and purged all levels of cache, especially since you are using LiteSpeed.

Thank you for reporting your issues! 🙏

[DanielCyran]

@nicholaszein thank you for your action :)

[KHcreative]

@nicholaszein
Additionally to the already mentioned missing button text color option in the floating Button Widget, global styles can't be chosen for any options (neither color not font). And the Advanced -> Responsive tab is literally empty. Custom CSS (within the Advanced tab) is not an option either. Only CSS ID and CSS class can be chosen.

[nicholaszein]

Hey @KHcreative,

We have good news! We fixed the issues with the text color in the Single Chat Floating Button. The button should not inherit the Link styles in the Site Settings anymore, and should instead inherit the colors from the Icon. 💪

As for having separate settings for the button's Typography, and Colors, we will consider it for a future release. This button's Font Family should inherit the one set in your Site Settings for now.

We also fixed the Responsive, Custom CSS, and Attributes sections in the Advanced tab for all Floating Buttons! 🙌

Please try the new release (v3.23.0-beta5) and let us know how it works for you. 🙏

FYI @DanielCyran! 😉

[DanielCyran]

@nicholaszein it's much better because the "click to start chat" button has a white font :)

[nicholaszein]

Definitely better @DanielCyran! 💪

[KHcreative]

@nicholaszein Sorry for the late response. Thank you so much! All works great. You guys and gals are doing a great job!

Now this is quite late but while I was trying out the Link In Bio Widgets, I had a few alternative user cases in mind than the obvious, e.g. for book authors or other people presenting their products (especially when they don't don't have a shop).

So, I propose following enhancements:

1. Similar to the image box widget, it would be great to have a full image/ custom image in size option
2. The buttons should have a hover color option (for consistency)
3. The (social media) icons are missing important platforms like Threads, Bluesky and Discord. Aside from adding a few more platforms, I'd suggest adding a custom option to add own icons.

Side note: kudos to your UI team. The use is very intuitive and everything can be done very quickly. :-)

[avivu]

Hi all,

We just released Elementor v3.23 Beta 3.

The versions include the following:

Free version

• Tweak: Activated Editor Top Bar feature by default for new sites
• Tweak: Improved Image style presets and added two additional ones in AI Images
• Fix: Cover image setting issues in Link In Bio widgets
• Fix: General Styling issues for links in Link In Bio widgets
• Fix: General UI glitches in Floating Buttons templates
• Fix: Closing the library window does not redirect the user to WordPress in Floating Buttons
• Fix: Various sections in the Advanced tab are missing in Floating Buttons templates
• Fix: Assigning CSS ID to a tab affects the tabs functionality in Tabs widget
• Fix: PHP notices appear due to compatibility issues with 3rd party plugins and Floating Buttons
• Fix: Container borders appear on top of the floating button inside the Editor

Pro version

• Tweak: Implemented accessibility improvements in Search widget
• Fix: Conditions field not showing all relevant conditions in Theme Builder
• Fix: Global styles options are missing in Floating Buttons templates

–

Thank you!

[DanielCyran]

1. How to display product categories in the suggestions???

2. How to make the "View all products..." button appear at the end of the search results

3. how to make the searched fragment bold???

[nicholaszein]

Hi @DanielCyran,

these are not options included with this release. But they are nonetheless great suggestions! We will definitely consider those for a future release!

Thank you for sharing your feedback! 🙏

[DanielCyran]

@nicholaszein I hope this can be implemented :)

[efintina]

In the frontend, the floating button adds a space after the footer.
Also, I think it will be very useful to be able to change the icon, at least for Platform = URL

[DanielCyran]

In the frontend, the floating button adds a space after the footer. Also, I think it will be very useful to be able to change the icon, at least for Platform = URL

I also had a space like this

[nicholaszein]

Hey guys, @efintina and @DanielCyran!

This issue was solved with the release of v3.23.0-beta5! 🙏

Thank you for reporting it! Your contribution helped us identify this issue! 🙌

[efintina]

Floating button. If you add a new button (URL or Waze), it didn't inherit the default text color and typography. It is black (at least for e-contact-buttons-var-10) and cannot be modified using Style.

[nicholaszein]

Hey @efintina!

This issue was solved in 3.23.0-beta5!

Thank you for reporting it! 🙏

[avivu]

Hi all,

We just released Elementor v3.23 Beta 4.

The versions include the following:

Free version

• Tweak: Added Excerpt generation option with AI in the editor
• Tweak: Removed default values from controls in Floating Buttons
• Fix: Icons issues in Menu widget

Pro version

• Fix: Off-Canvas flickering in sticky containers with exit animations triggered by sticky effects

–

Thank you!

[DanielCyran]

Will it analyze and resolve other reported issues?

[nicholaszein]

Hey @DanielCyran,

sorry for the late response. We were working on those, and we have released a few fixes based on your reports in v3.23.0-beta5!

Thank you for your contribution! 🙏

[DanielCyran]

The floating icon prevents clicking another button at the same height. The issue is demonstrated in the video.
https://github.com/elementor/elementor/assets/96839460/665cbffa-daac-47ba-8260-f5f8b3019e42

[nicholaszein]

Hey @DanielCyran,

we are aware of this issue and are discussing a fix for it. It may not be released in this version, but we are working on fixing it for a future patch! Thank you for discovering this one! Good catch! 💪

[efintina]

Using Seach and Live Results, if Search Field loose the focus by clicking on canvas and not Clear Icon, the images from live search result's template remain visible for a short period of time. Maybe, in such situation will be better to trigger the Clear process.

Same situation if you click on Search Button.

[nicholaszein]

Hi @efintina!

Thank you for reporting this. In my tests with v3.23.0-beta5 I couldn't reproduce this issue. Would you be so kind to show me an example of this happening?

Elementor.Debug.-.8.July.2024.mp4

[efintina]

Sure. I'm also use v3.23.0-beta5.

Screen.Recording.2024-07-08.221712.mp4

[nicholaszein]

Thanks @efintina! That's a really strange one.

Can you please give us some more info about your layout? Did you use a script to show/hide the search field by clicking on the search icon?

Would you mind to share the link to the website in question if possible?

[efintina]

Sure. No pb. URL: https://sarpublisind.ro

My Header has a main section and a secondary one that slide in from the top. Slide effect was made only with css:

/* Slide In From The Top Option */

.header-secundary {
 transform: translatey(-80px);
 -moz-transition: all 1.3s ease !important;
 -webkit-transition: all 1.3s ease !important;
 transition: all 1.3s ease !important;
}

.elementor-sticky--effects.header-secundary  {
 height: auto !important;
 transform: translatey(0px);
}

@media only screen and (max-width: 767px) {
  .elementor-sticky--effects.header-mobile {
    display: none !important;
  }
}

@media only screen and (min-width: 768px) {
  .elementor-sticky--effects.header-desktop {
    display: none !important;
  }
}

/* End Of Slide In From The Top Option */

The search field is in the second section and is toggled by clicking the search icon with this script:

<script>
document.addEventListener('DOMContentLoaded', function() {
    const heading = document.querySelector('.toggle-heading');
    const search = document.querySelector('.toggle-search');
    const icon = document.querySelector('.toggle-icon');

    icon.addEventListener('click', function() {
        if (search.style.display === 'none' || search.style.display === '') {
            heading.style.display = 'none';
            search.style.display = 'block';
        } else {
            heading.style.display = 'block';
            search.style.display = 'none';
        }
    });
});
</script>

If you need I can give you temporary credentials.

[nicholaszein]

Hey @efintina!

I just wanted to let you know that we tested your custom script to show the search widget, and we concluded it's what's causing the delay you reported. This is probably caused by the fact that you are applying inline styles. We recommend you revise your script to avoid this issue.

Thank you for your contribution! 🙏

Kind regards

[efintina]

Also, Using Search and Live Results, if you set Gap between input and button to zero, the Clear Icon is too close from Search Button. It will be useful if we can customize the position of Clear Icon.

[nicholaszein]

Hey @efintina,

you can control the distance of the Clear Icon from the border of the Search Input field by changing the padding of the Search Input field:

Edit._Header_.with.Elementor.-.8.July.2024.mp4

[efintina]

Thank you!

[avivu]

Hi all,

We just released Elementor v3.23 Beta 5.

The versions include the following:

Free version

• New: Generate texts using AI within WordPress
• Fix: Site Settings style controls override default style controls in Floating Buttons
• Fix: Images Per Row control is not rendered correctly in Portfolio Link In Bio widgets
• Fix: Tracking functionality is not working for logged-out users in Floating Buttons
• Fix: Floating button adds redundant space at the bottom of the page on the frontend
• Fix: Custom CSS and Attributes sections are missing controls in Floating Buttons

Pro version

• Tweak: Removed default values from controls in Floating Buttons

–

Thank you!

[efintina]

Floating Buttons. If Inline Font Icons is set to Inactive, some icons are not displayed correctly (eg: icons for WhatsApp and Messenger platform).

[nicholaszein]

Hi @efintina!

Good catch! Thank you for reporting this one. I can reproduce it. We will investigate this issue and find a fix! Thank you 🙏

[efintina]

Floating Buttons. The following issue is still present: If you add a new button (URL or Waze), it didn't inherit the default text color and typography. It is black (at least for e-contact-buttons-var-10) and cannot be modified using Style.

[nicholaszein]

Hey @efintina.

This issue has been solved for me, see this comment. Try Regenerating Files & Data in your WordPress Dashboard > Elementor > Tools > General page. See if it works for you.

[efintina]

Thank you, Nicholas. Unfortunately it didn't work in all cases. For example, try these steps:

1. Contact Buttons -> Add Item
2. Change platform from default one (WhatsApp) into Waze or URL. For other platforms I didn't notice any issues.
3. Color of title and icon are black

[nicholaszein]

@efintina

Can you confirm you set the color for links in your Editor > Site Settings > Theme Style > Typography > Links to black?

I want to pinpoint the root of the issue. Try changing this setting to a different color, and see if it affects the items you've mentioned please.

[efintina]

No. It's untouched.

[nicholaszein]

@efintina can you show me in which Floating Button this happens?

[efintina]

As I said, I tested only e-contact-buttons-var-10
This is how it looks like:

[nicholaszein]

Thank you @efintina!

I can reproduce the issue! That's a really strange one btw. 🤔

Good catch nonetheless! We are definitely going to work on this one! 💪

[efintina]

Thank you, Nicholas

[avivu]

Hi all,

We just released Elementor v3.23 Beta 6

The versions include the following:

Free version

• Tweak: Added typography control for send button in Floating Buttons
• Fix: Validate prompt and canvas changes to allow generation in AI image edit generative fill
• Fix: Import and export template is not working correctly in Floating Buttons
• Fix: Button wrapper overlays the page content preventing interaction with the content in Floating Buttons

Pro version

• Tweak: Enabled the ability to set multiple buttons to appear on the same page based on conditions in Floating Buttons

–

Thank you!

[nicholaszein]

Hi Beta Testers! 🤓

Elementor and Elementor Pro version 3.23.0 were released to the public! 🚀 🎉

We'd like to thank you all for contributing to this discussion, and for sharing your feedback. It was a great discussion! 🙏

Special thanks go to our contributors who helped make this release possible:

• @JxxIT
• @DanielCyran
• @m1ga
• @79ho3ein
• @Daveden2
• @Joliamendi
• @efintina
• @phkoon
• @KHcreative

Thank you and see you in the next one! 😉

Changelogs of Elementor Core and Pro
Elementor Core
Elementor Pro