Elementor
✅ 🔥 Elementor v3.12 Beta 3 Release 🔥 #21553
Replies: 96 comments 199 replies
-
|
A wonderful update! Congratulations to the great team of Elementor🥂 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the kind words @79ho3ein! ❤️ |
Beta Was this translation helpful? Give feedback.
This comment was marked as disruptive content.
This comment was marked as disruptive content.
-
|
Thank you @lensbreak, for the kind words! We are aware there are some inconsistencies with the WordPress Menu widget (formerly named Nav Menu), and we are working on reviewing the entire widget to fix those issues. But this is not part of this release. We understand this might be frustrating, but we would highly appreciate it if you tried out our new Menu widget to let us know if there are any issues we need to fix before releasing it. 🙏 Kind regards |
Beta Was this translation helpful? Give feedback.
-
|
Wow what a massive update! So excited to try out everything 🎉 |
Beta Was this translation helpful? Give feedback.
-
|
We can't wait to see what you can do with it, and to hear your feedback! Thanks @loucasl! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Nice update! Will the new color scheme be an option we can switch on or off for the start? It needs some getting used to but on first hand looks snappier and better. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Webtica, the new color scheme is here to stay. But the Top Bar (part of this release as well) is still optional. We would love to know your feedback about it, and if there is anything that needs improvement. 💪 😉 |
Beta Was this translation helpful? Give feedback.
-
|
A few things in the initial review of the new ui : 1- When we are in the site settings, the User Preferences option is turned off and it is not possible to access it. Therefore, we must first exit the site settings in order to enter the User Preferences section. This slows down the workflow. 2- In dark mode, the readability of some texts is very bad. Like the two images below.
3- In some sections, such as the global widgets section, where a custom message is displayed, in dark mode, the color of the button is blue, which is very unpleasant for the eyes. So it will be much better if it is changed to new color (purple). before
after
4- In the site settings, the save changes button is displayed. To be honest, I don't think this button is interesting here. It will be much better if this button is removed and the publish button on the top bar saves the changes instead. (Of course, it is better to change the text of this button to "save" in the site settings) Regarding the save changes button in the site settings section, it seems that this button does not have a dark mode. 5- It might sound obsessive, but the switcher buttons in dark mode have a little white border that looks unnatural. In active switches, the color of this border is white. Pay attention to the following screenshot :
edit : At first I didn't know that the toolbar is the first part of the new editor. So I mentioned this by mistake. 6- In dark mode, the units slider has no clear border.
|
Beta Was this translation helpful? Give feedback.
-
Yes, we are aware that not all elements of the UI have been restyled correctly, and we are working on fixing them. Either way, it's important that you were able to find them, and we are very thankful! After all, we are here to find bugs! 🙏 Number 5- is one of my personal pet peeves, and I'll make sure to rise this with the team! 😉 It seems the label of the switcher has a white background color. That's why it appears only when viewing in Dark Mode. |
Beta Was this translation helpful? Give feedback.
-
As I mentioned here, the Site Settings and the Editor are two different interfaces. You may even call them applications. The Site Settings need to have their own Save button. We will of course consider this and discuss it internally, but I'm sure we have no plans to change this behavior.
Same as this comment! 😉 |
Beta Was this translation helpful? Give feedback.
-
I can reproduce this issue as well! Good catch! 💪 |
Beta Was this translation helpful? Give feedback.
-
|
I agree with @79ho3ein about #5. I checked the codes and it seems there is a white background color causing this problem.
Removing this annoying background makes the switcher buttons very beautiful.
|
Beta Was this translation helpful? Give feedback.
-
|
Thanks @Michaelgimii, I found the same thing as well 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Wow! Great update. Please don't forget the custom icon for mega menu items. and Also Alternate Template for Carousel Loop. What is the role of the two up and down buttons in Finder? Is the presence of these two buttons necessary?
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @Michaelgimii, thanks for the feedback! We really appreciate it! 🙏 About the custom icon, we are considering ways of improving the (Mega) Menu experience and functionality for future phases! 😉 About the scroll, thanks for reporting it. We will look into it. 💪 |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for your time @nicholaszein |
Beta Was this translation helpful? Give feedback.
-
|
This update is great. Especially the new editor. I thought that in the new editor, the style of the panel will change, like the style of the container settings, as well as the style of the switcher button. Anyway, I hope they will be addressed in future releases. Also, the ability to add widgets by clicking + switch between tablet, desktop and mobile without transition in the new editor will be great. The thing that caught my attention in the new editor was that the exit to button is far away. It has also been renamed to website management. Its icon is completely unrelated. As the last thing, I think the settings icon as well as the name of the page in the center of the top bar is not interesting. It is better to move the page settings icon near the structure icon and delete the current page name section. I think there is no need to display the name of the current page, because it is displayed in the address bar of the browser! In general, the space in the middle of the top bar should only belong to responsive icons and related items. Anyway, you're awesome and I hope you don't mind my ideas. My ideas don't mean your work isn't great. thanks. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Joliamendi, thanks for the feedback! we really appreciate it! 🙏 Can you please elaborate on these points?
What do you mean?
How would you change this if you had the change to change it? Where would you put this button, what would you call it? What icon would you use? Also, to answer your other points:
It's unlikely that we will change this behavior. The animation makes it easier for beginners and non-technical folks to understand the action they are executing. Meaning knowing that when they click on smaller sizes, the canvas will reduce in size, and when they click on larger sizes the canvas will expand. I understand that removing those animations may make the experience more snappier, and we are still considering lots of changes in the UI. So thank you for the feedback! 🙏
This is one of the features that has been asked for ages. To have an easy way to see which document you are editing as well as accessing the document settings, which many people haven't even know existed. I think this one is more of a preference thing, and to be honest, I personally prefer this way. Try, for example, to switch between the Page template to the Header template. The Document Title changes as well as the Settings. This is much more intuitive in my opinion. I can't count how many times I thought I was editing the Page but was actually editing the header. Now with a glimpse of an eye, I know exactly where I am. 😉 Thanks anyway for the feedback! We really appreciate it! 🙏 |
Beta Was this translation helpful? Give feedback.
-
I meant that I thought the appearance of the widgets panel (the appearance of the widgets settings, the style of the switcher button) and the overall appearance of the widgets panel will change. But now it seems that only their color has changed.
I take back what I said about the position of the button. The current position is excellent. But maybe I would put this icon instead of WordPress. This is what I have in mind. |
Beta Was this translation helpful? Give feedback.
-
|
Awesome @Joliamendi, I think I got it! Thanks for clarifying it! And that's a great suggestion about the name of the button changing according to the user preference. 🙂 |
Beta Was this translation helpful? Give feedback.
-
|
Most site visitors, use smartphones, please improve the mobile menu to be more customized. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @hdd064, thanks for the feedback! 🙏 We will consider this for the next phases. Meanwhile, please try the new Elementor Menu and let us know if you find any issues! 🧐 |
Beta Was this translation helpful? Give feedback.
-
|
Hi @nicholaszein |
Beta Was this translation helpful? Give feedback.
-
|
In the new editor, there are no save Draft and save as templatet buttons. Have they been removed? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Michaelgimii, We are aware that the new Top Bar is missing some functionality. Please keep in mind that at this point this is just a preview, and should not be used on production websites for now, but any feedback is very welcome! We will be adding more functionality to the top bar in future phases. 😉 |
Beta Was this translation helpful? Give feedback.
-
|
When we add containers, the new color (purple) is too visible. It seems that too much of this color has been used in the containers. now :
better :
|
Beta Was this translation helpful? Give feedback.
-
|
++++++ |
Beta Was this translation helpful? Give feedback.
-
|
Thank you for the feedback @Michaelgimii! 🙏 We are passing this on to the team and will take it into consideration. |
Beta Was this translation helpful? Give feedback.
-
|
It's. Just. Too. Purple. |
Beta Was this translation helpful? Give feedback.
-
|
I love Prince but yes, that is a bit too purple. :) |
Beta Was this translation helpful? Give feedback.
-
|
A question from the Elementor team... Is the new editor exactly that, or is it just the top bar as the first part of the new editor? |
Beta Was this translation helpful? Give feedback.
-
|
When you activate the top bar, your answer is there. Get a sneak peek of the new Editor powered by React. The beautiful design and experimental layout of the Top bar are just some of the exciting tools on their way. |
Beta Was this translation helpful? Give feedback.
-
I think the left editor panel will be removed in future. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, @79ho3ein nailed it! 💪 This is just a preview. More is to come. 😉 |
Beta Was this translation helpful? Give feedback.
-
|
Awesome work Elementor! Thank you. I have, however, found a few bugs.
|
Beta Was this translation helpful? Give feedback.
-
It seems we forgot to also apply the changes when the Dark Mode is enabled. If your OS has the Dark Mode activated, this doesn't seem to be a problem:
Good catch! Thanks for the feedback! 🙏 |
Beta Was this translation helpful? Give feedback.
-
The scrollbar color change problem seems to be related to the browser. For example, I see this bug in Windows - Chrome browser. But on Windows - Firefox browser everything is fine. |
Beta Was this translation helpful? Give feedback.
-
|
@79ho3ein but do you think this is Elementor related? |
Beta Was this translation helpful? Give feedback.
-
|
@nicholaszein Yes, because if you change the dark mode to light in the editor, the problem will be solved. In fact, the point here is that this bug occurs if the Elementor editor is in dark mode. |
Beta Was this translation helpful? Give feedback.
-
|
Thanks @79ho3ein, this seems important. I'll make sure to let the team know! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
In the widgets panel, the word "elements" is used twice.
This does not sound interesting. Instead, I think it would be really cool if you could remove one of them (as seen in the image below).
|
Beta Was this translation helpful? Give feedback.
-
|
Hi @Joliamendi, thanks for the feedback! 🙏 |
Beta Was this translation helpful? Give feedback.
-
|
Please add the effect and overlay feature to megamenu in the next updates. I have already written about it elsewhere. #21218 #21219 I also had a question about megamanu... Will the max width of the megamenu be based on the width of the megamenu widget? For example, can we choose that when the megamenu is displayed, its width is the length of the parent container? I don't see such an option, am I wrong? In connection with the new editor, I wanted to say a small thing...
|
Beta Was this translation helpful? Give feedback.
-
|
Good suggestion. I also think the padding of each widget section could be reduced a little and the space between the icon and the text reduced as well. This would reduce the amount of scroll for all the widgets especially when using third party extensions. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Michaelgimii, We will consider those requests for the next phases! Thanks 🙏 About the Mega MenuIf I understood correctly you want to know about two different options:
About the UIThanks for the suggestion, it does look nice! I can't promise this will be considered though. Either way any feedback is welcome! 💪 |
Beta Was this translation helpful? Give feedback.
-
Exactly. The first one is possible by default. But can we act like the second case you mentioned? |
Beta Was this translation helpful? Give feedback.
-
|
Hi @Michaelgimii, awesome, thanks for clarifying that! This is possible. I'll come up with a video explaining how later today. 😉 |
Beta Was this translation helpful? Give feedback.
-
|
Very good update. In safari the new top bar is a little bit buggy and is it possible to let us set our own website color matched editor color lines set? I think the soft blue was ok for all websites, but the new color is cool, but very dominant! And could compete to some stiles from the website colors. And please make the editor panel in the left side in the same theme color as the new top bar, pure dark and pure white. Feedback pls :) |
Beta Was this translation helpful? Give feedback.
-
|
Hi @fabianenzensperger, Thanks for the feedback! 🙏 can you please elaborate? What do you mean by is it possible to let us set our own website color-matched editor color lines set? 🤔 |
Beta Was this translation helpful? Give feedback.
-
|
Yes, please let us set our own accent color! This screaming purple might distract from our website colors. |
Beta Was this translation helpful? Give feedback.
-
With pleasure! Yes, so there is now a new dominant color, this purple. However, this is very dominant and could be perceived as more disruptive on many websites when editing. It would be nice if we could set our own color in the Elementor preference settings, a color that fits better with the color scheme of the respective website. Or you adjust the color as neutral as possible, like a matte blue (the color of the containers so far, looks like the standard colors of Wordpress anyway) or a gray or similar. The more colors, the more confusing it gets. Also with the different backgrounds of the top bar and the panel on the right. Please make it a uniform color. Otherwise, however, the implementation is very good. Please think carefully about my suggestion. Website design should also be fun and I think many will have problems with this dominant new color and it could distract a lot from the actual creation of the website. Editor as neutral as possible: pure black and a soft (blue) color and the rest of the attention should belong to the website. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @fabianenzensperger, thanks for the clarification! 🙏 Right now we have no plans to add the option to set different colors for the whole UI. If you think this could be something others would benefit from, please submit a new 🚀 Feature Request, and we will consider it if there is enough demand from other users. As for the Top Bar, we won't be changing the background color for the time being, this is part of our plans for the new UI, and the top bar should remain different from the rest. We will of course take this into consideration. For now, this is just a preview, we are in the very early stages and things can change. Kind regards |
Beta Was this translation helpful? Give feedback.
-
What's the best way to add our votes to this feedback? Should we each submit feature requests so we can have the old dark mode color scheme again? Or is providing feedback in this thread sufficient? |
Beta Was this translation helpful? Give feedback.
-
|
In the loop carousel widget, the Gap between slides option does not work well. Please test it. I want to make sure to open a new number for it. |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I rolled back to 3.11.5. I just can't look at these colors. The contrast is so painful. |
Beta Was this translation helpful? Give feedback.
-
|
they gotta be eating mushrooms for this colors :) |
Beta Was this translation helpful? Give feedback.
-
|
Dear @avivu @arielk @nicholaszein @shilo-ey, Everything happened as I said, dear developers. I and many others use Elementor for several hours a day and we know what we are talking about when we say that these new color(s) will cause problems. It's a mess! I was very fond of this "new" container blue, what has it done not to have come to stay?
It's very beautiful, matte, relatively neutral and, to my knowledge, hasn't bothered anyone I've met. On the contrary, this color was perceived very positively. And I'm not against purple or rosa, I like those colors, but in an editor where so many colors come from the website itself, there just has to be a neutral color! Gray or something similar would be best, but if it's a color, then this beautiful blue. By the way, it would be even better if you could set the editor accent color yourself. As I also wrote in my first post here. It bothers me a lot that the user opinions are not discussed here. I mean, most of it is already covered here, but when it comes to important and basic stuff, Elementor mostly pulls its boot. No matter what! Here is an example of how I imagine the new editor bar:
It's just designed quickly and also lacks the responsive settings in the middle, but that's what it could look like. I especially like the color and the part on the right much better. It's always about the optics, "the eye eats too" as they say in Germany. |
Beta Was this translation helpful? Give feedback.
-
|
The old blue was such a perfect color. This change was not an improvement. I want an option to switch back to the old scheme. |
Beta Was this translation helpful? Give feedback.
-
Nah, the new container blue is great. The old blue is a little bit washed. |
Beta Was this translation helpful? Give feedback.
-
No, I totally agree with you. the dark blue is the best. Not the original blue, but the most recent blue. I called it "old" because it has now been replaced. |
Beta Was this translation helpful? Give feedback.
-
|
Editing a light colored site using dark mode is now a lot harder to look at. I think the dark mode UI is too high contrast against a light-mode website. I think the old dark mode was better when working on a light-mode website. Maybe a middle ground would be nice? |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. This new color scheme might be helpful for some people but I hate it. I want the old dark mode back. I'm rolling back to 3.11.5 until it's fixed... |
Beta Was this translation helpful? Give feedback.
-
|
new UI neon pink, neon green :) are you guys eating mushrooms there or something :) unreadable with dark mode SO BAD FOR UX :) contrast so bad too dark too light I mean srsly. what monitor you guys using ? |
Beta Was this translation helpful? Give feedback.
-
|
Yeah I'm still trying to find a pair of sunglasses that makes this easier to look at. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, please give us the option to keep the current Container color. |
Beta Was this translation helpful? Give feedback.
-
|
they tried to copy bricks builder UX but lookslike didnt work well :) |
Beta Was this translation helpful? Give feedback.
-
|
they changed UI color palette to pink and now lots of elementor sites are getting hacked :) well well well what a coincidence :D |
Beta Was this translation helpful? Give feedback.
-
|
I love Elementor and spend most of my day with it. But I want to criticize the developers a little. Elementor team, for about 3 months, your updates have been wonderful. I am really happy about it. Also, announcing the public roadmap was a great event for Elementor. Finally, I have a request. Please don't forget the new features you release, develop and improve it for the next updates. For example, the loop carousel widget has significant bugs that still exist. loop grid also has bugs but less. New tab widget on mobile becomes accordion (all users have problem with this and it has been reported many times) I apologize in advance if a part of my speech upsets you because I am using Google translation and it may not be conveyed well. cheers🥂 |
Beta Was this translation helpful? Give feedback.
-
|
I've not had a chance to test it yet but great news about Mega Menu! Thank you Elementor. Hopefully this will mean another 3rd party plugin I can stop using. |
Beta Was this translation helpful? Give feedback.
-
|
Hi, Anyone know how to rollback this UI change? |
Beta Was this translation helpful? Give feedback.
-
|
Tools > Version Control is what I went through. |
Beta Was this translation helpful? Give feedback.
-
|
Would love an option to go back to the origional darkmode. Also: Anyway to disable darkmode in the front-end for users viewing the Hello Elementor Theme? The inputs turn black after updating. |
Beta Was this translation helpful? Give feedback.
-
|
So frustrating. My form fields are messed up. |
Beta Was this translation helpful? Give feedback.
-
|
In dark mode, color picker s is very annoying to the eyes. Maybe the image below is a bit tolerable, but not in the editor.
|
Beta Was this translation helpful? Give feedback.
-
|
I think I spotted some 2.13 pull requests that update the colour picker library and add support for other colour formats than just HEX. Guessing they are holding off fixing this as releasing updates in the next version introducing new features. |
Beta Was this translation helpful? Give feedback.
-
|
So that mean not everything HEX anymore? if yes that would be great. |
Beta Was this translation helpful? Give feedback.
-
|
After the official release, there is still no "display conditions" option in the top bar for header, footer, etc. |
Beta Was this translation helpful? Give feedback.
-
|
Jop 😢 In my eyes, grossly negligent. But it's just an alpha version that was released on people. |
Beta Was this translation helpful? Give feedback.
-
|
Yes, that really sad :( |
Beta Was this translation helpful? Give feedback.
-
|
I would love to check out some of the new features but my eyes are bleeding from this hot pink and teal UI change. Rolling back. |
Beta Was this translation helpful? Give feedback.
-
|
let's make new traffic lights pink orange and purple BECAUSE WHY NOT! |
Beta Was this translation helpful? Give feedback.
-
|
Version 3.12.1 was released and the horizontal scroll bar is still displayed in the editor. Am I the only one experiencing this bug?! |
Beta Was this translation helpful? Give feedback.
-
|
screenshot ? |
Beta Was this translation helpful? Give feedback.
-
|
@sinanisler, please See here : #21805 |
Beta Was this translation helpful? Give feedback.
-
|
I have this problem too. That's why I still haven't updated to the new version. |
Beta Was this translation helpful? Give feedback.
-
|
Alright, folks. Thank you everyone for all the feedback and collaboration!🙏 It means a lot for us to receive so many comments and constructive feedback. 😊 We have seen all the comments (even those I have not responded to) and collected all the reports about the facelift. We will go through all of them, and consider your suggestions. I will also answer all the comments that haven't got answered yet soon. Please, understand that in time we will address all the reported issues with the new UI, and we will keep improving on it as time passes. But it won't happen overnight, and not all suggestions will be accepted. Some of the changes made have a reason to be made in the way they were made, and it will all make sense as we work to improve our interface. We left this thread open for a few more days on purpose so we could collect more of your feedback. Thank you for taking the time to come here and share your thoughts with us! See you in the next beta! 👊 😉 |
Beta Was this translation helpful? Give feedback.
and others
-
===========
Beta 3 UPDATED - PLEASE READ BELOW!
===========
Hi Elementor Beta Testers 👋
We are incredibly excited to introduce our new beta versions, Elementor 3.12. This update includes the new Menu widget, which will empower you to create the eagerly awaited Mega Menu. It also includes new Loop Builder features and layout, and design capabilities that will take your website’s design to the next level.
Try out our new beta versions and let us know what you think about our newest additions, which include:
[Pro] Introducing the Mega Menu in Elementor With the New Menu Widget
Elementor 3.12 introduces the eagerly awaited Mega Menu. The new Menu widget will empower you to achieve a much higher level of design, customization and creativity than the Nav Menu widget (now renamed WordPress Menu). With the new Menu widget, you will also be able to create a Mega Menu, an expandable menu where you can create any layout you’d like. Within the menu you can use any type of widget, display any type of content, and link to any page. Mega Menus are ideal to improve the visitor experience in websites that have a complex navigation architecture, as well as for displaying beautifully designed menus that stand out.
The new Menu widget is available once you activate the Container, Nested Elements and Menu experiments. With this new widget, you can create a simple menu with no dropdown content or you can enable the dropdown content per item. Enabling the dropdown content will create a Container for the content area of each menu item. Within this container, you can create any layout by placing elements within the container and nesting containers.
Setting up Navigation
While the Nav Menu widget (now renamed to WordPress Menu) automatically created the menu items and linked to the pages based on your Menus screen in WordPress, the Menu widget enables you to create your Menu Items from scratch. You can give each Menu Item a name of your choice, and link it to any page, yourself, giving you more flexibility to structure your website’s navigation. Once you’ve created your menu, you can also determine how visitors interact with and open dropdown menus - upon hover or click, and whether opening a dropdown menu is animated or not.
Styling your Menu
The new Menu widget includes many styling capabilities, which empower you to create the perfect menu for your website. You can set the styling of the main menu using all of the styling capabilities available to you in the widget panel, including the Menu Items, Menu Toggle, Dropdown Menu, and more. In upcoming releases, you will also be able to add icons to your Menu Item’s titles. If you use a dropdown menu, since it is based on Containers you will also be able to use all the styling and settings of Containers to adjust the style of your dropdown content.
Responsive Settings
To provide website visitors with a good experience, you can choose the breakpoint at which the menu becomes a menu toggle. Then, you can customize the icons you use for the menu toggle in its normal, and active states.
How to Test It:
[Pro] Diversify Your Design with a Loop Alternate Template
To enhance your website’s design and enable you to diversify the appearance of your items in a loop grid, Elementor 3.12 also includes a new feature in the Loop Grid widget, ‘Apply an alternate template’ which will enable you to create or apply another template within your Loop Grid.
When you switch the toggle on, you will be able to choose a loop template or create a new loop template from the Theme Builder. The template can be created using all of Elementor’s widgets and enables you to apply a completely different design on specific items in your loop.
As part of this version, applying an alternate template will override the design on the item in a specific location in your loop grid, as per your choice. For example, if you set it to the item in the 2nd position, your alternate template will be applied on the post or product that is displayed in the 2nd position in the grid (displaying content from the query you choose for the Loop Grid). You can then choose if you want the alternate template to repeat within the grid. For example, you can apply an alternate template to the item in the 2nd position in your loop grid, and have the alternate template applied on every 2nd item in your grid.
Column Span
As part of the setup of your Loop Grid’s layout you can choose how many columns and items you want to display on the page. However, when you apply an alternate template, you can choose to have the alternate template span across more than one column. For example, if you have a 3 column grid, you can have the alternate template apply across the span of 2 columns. That way, if you set the alternate template to apply on the item in the 2nd position, and you set it to span across 2 columns, the display of your second post will take over 2 columns in the first row.
How to Test It:
[Pro] Kickstart your Workflow with Predesigned Loop Templates
Elementor 3.12 also includes 10 new Loop Templates in the library, 6 for Posts, and 4 for WooCommerce Products, to kickstart your Loop design process. The Loop Templates were designed by Elementor’s library team, following industry best-practice and showcasing the latest trends in website design. You can use any of the Loop Templates in the Loop Grid widget and the Loop Carousel widget, and choose the content and query to match your needs.
Please note: The Loop Templates are container-based and will only be available on websites that have Containers enabled on them.
How to Test It:
Elementor Interface Revamp
Elementor 3.12 marks Elementor’s 6.5 years of existence, making the Editor’s interface design the same age. Throughout the years, hundreds of new features and widgets have been introduced, and in the world, software User Interface (UI) and User Experience (UX) has changed to cater to new expectations and needs.
In 2023, Elementor’s interface will be revamped gradually, adopting a new design system using better color semantics. The adjustments to the Elementor interface will promote best-practices for website creation using Elementor, will improve its accessibility, accelerate workflow, and enhance your capabilities by introducing new features in the future.
A New color scheme for Elementor
Elementor 3.12 introduces the first change to the Editor’s interface that follows the new color semantics being introduced. As part of this update, the Editor and other Elementor screens have been recolored and simplified. The new colors are better adapted to Dark and Light mode, and are optimized for accessibility. The new color scheme will not impact any functionalities with the product.
Experiment: New Top Bar
Elementor 3.12 introduces a new Top Bar as an experiment, that is turned off by default. This version demonstrates the first phase of the new Top Bar in the Editor, built in React for better performance and to facilitate new capabilities in the future. The Top Bar follows industry best-practices and consolidates all the common actions you need to perform on your website in a central and accessible location.
In this version, the Top Bar includes the following items and capabilities:
You activate the new Top Bar by going to Elementor → Settings → Features and activating the Top Bar experiment. As this is just the first phase, not all capabilities have been fully integrated and it is not recommended to activate this on live websites.
[Pro] Choose Your Preferred Custom Icons in The Menu Cart
The Menu Cart widget includes three icons: the cart itself, the dismiss button to close the cart, and the ‘x’ button to remove an item. Previously, for the cart itself you were able to choose one of 9 icons from the Menu Cart list, and you were unable to choose a different icon to dismiss the cart or remove an item. With this update, you will be able to choose or upload any SVG to use for each of the icons in the Menu Cart. To add a custom icon for the Menu, open the icon drop down list and choose Custom, this will display a new control to choose an icon from the icon library or upload your own SVG. For the Close Cart and Remove Item icons, the control to upload or choose an SVG is now available in the editing panel.
Align The Icons in the Icon List Widget
Up until now in the Icon List widget, if you had a list item that’s content exceeded one line, the icon would be aligned to the middle. Meaning, if your list item was three lines long, the icon would be aligned with the second line, in the middle. With this update, you will be able to choose what you want the icons to be aligned to - the top, middle, or bottom using the new Vertical Alignment control in the widget’s style tab. To achieve an even higher level of precision with your alignment, you can also use the Adjust Vertical Position control.
Choose any Unit Type, Anywhere
Elementor 3.10 first introduced the ability to add a custom unit in the containers, sections, columns, and typography controls. With this update, you will be able to use Custom Units in every unit-based field. This will also enable you to set custom CSS keywords and CSS functions for each unit-based field, which empowers you to achieve a pixel-perfect design. Along with this update, all unit-based fields have also been aligned, to include anything they may have been missing - EM, REM, pixels, percentages, VW, and VH.
With custom units, you can be more specific with your unit choices, and apply Custom CSS across your entire website or page. For example, you can run a CSS math function that will automatically adjust the typography font size based on variables you set in Custom CSS on the page or site settings. To achieve this outcome, you can use the CSS function: ‘var( --h1-heading-size )’ in your typography font size, and set the variables in the Custom CSS of the page or site: ‘:root { --h1-heading-size: 3rem; }’
More Improvements
Free version
emandremwhen using the number scrubbing functionality (✅ 🚀 Feature Request 3.7+: Lower number scrubbing for EM and REM - [ED-8551] #19399)vwunit to margin and padding in Column, Section, and Container elements (✅ 🚀 Feature Request: Add VW to margin and padding and elsewhere! - [ED-9743] #20890, props @rodolphebertozzo)container_widthandwidgets_gapin site settings (props @rodolphebertozzo)Pro version
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:
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:
March 29, 2023 (Estimated)Many thanks for your support and help!
Cheers,
Elementor Team
Beta Was this translation helpful? Give feedback.
All reactions