Closed shilo-ey closed 2 years ago
First of all, you did an amazing work with the container! 🚀
I want to suggest something. We have the ability to set the direction that the elements inside a container will follow. This is great, but obligates anyone to add multiple containers to create stacked rows and columns. Here's an example:
To avoid this multiple container need, I suggest to have a new option on the main conteiner that triggers a break when a number of elements is reached. In my example I would use "Break when elements reach: 2", so when the container automaticly detects 2 elements (Monday, 13:00 - 16:00) a break will happen and the next 2 elements will be displayed in the next line, and so on.
What will happen if the Exported Kit has Premium or Paid plugins? Will them be installed too? I would also know if this new Importing process also imports configurations such as all Woocommerce products, with it's thumbnails and variations.
I find the rearranging of colors and fonts very useful!
But I don't understand why there needs to be a difference between system and custom fonts or colors. In my opinion Elementor needs to get rid of that System thing. A website shure needs default things to display dummy content or being a fallback utility in technical cases like if the user erases something. But I personally don't like having there System colors that I can't get rid of but change.
I suggest making this dafault System things automaticly apply if no other custom color or font is found. When the user goes to custom colors and fonts for the first time, it should be empty and encourage him to add some. As soon as the user adds some, get don't use the default System ones but the defined ones by the user.
I thing the same about the System Default Kit automaticly created on any Elementor site. We can't get rid of it. The system should have it internally, but encourage the user using an amazing Wizard with steps to customize his kit, with a custom name. Would also bee cool to be able to have multiple kits and let us choose which one we want to have active.
I personally don't like having System things showing. I want any of my websites to be as easy as possible, sometimes clients don't know what they are doing and mess it up.
Finally the Containers are here!!
The first thing I noticed in the 3.6 beta (also since Dev-Edition) when testing the container and old structure is that the page loads very slowly since the container experiment was activated. It seems like the CSS is loading very slowly. no other experiment is active and no other plugin except the correct Elementor Pro version. It doesn't matter whether it's sections and columns or the new containers. The video shows a freshly created page with Elementor templates.
Import/Export keeps getting better and more useful. But I agree with the question of the previous speaker, whether the content and settings are also taken over from the plugins?
And finally you can change the order of global colors and fonts. This has been requested since the introduction of 3.0 and now Elementor has finally implemented it - thank you very much!
New Onboarding Wizard is sure nice to have for new website. I not the biggest fan of Plugin setup pages, but Elementor looks good and efficient.
Otherwise, the new responsive options for stroke and icons should be emphasized. Good work, keep it up. Another tip from my side, the expected releases have now been postponed several times in all the last betas, maybe you can just plan a longer time right at the beginning.
But if it's so quick, that's great!
Great job guys! 👏
At the moment the only problem I found is that the width control of the containers does not work on breakpoints, it only works on the mobile (normal) breakpoint.
Also another detail would be to be able to have all the sides of the margins active, it is useful in some designs and that would be a limitation.
I will keep trying. Thanks
A quick question: Will all the Elementor premade sections, blocks, popups, entire websites and kits be automatically re-designed to use this new container?
A quick question: Will all the Elementor premade sections, blocks, popups, entire websites and kits be automatically re-designed to use this new container?
Lots to do for the Elementor designers.. 😅
The container feature is great. I'm glad you didn't decide to make something half-baked and you're giving us the full power of flexbox. This is what I need as a professional designer and this is where Gutenberg is not going to go, because it needs to stay simple. Gutenberg for layman users, Elementor for power users and professionals.
Two suggestions:
Functionality-wise, the container seems to do the job. But UI/UX is a mess. Using flexbox in Webflow is way more intuitive. Same functions, much better UI. Elementor's UI is getting old and is not working for these more advanced options.
In Webflow, everything is perfectly unified, much more compact and sensibly divided.
In Elementor, there is so much scrolling, jumping between tabs, looking for things, opening sub-tabs, then opening typography popups and so on. The styling options are inconsistent. Sometimes there is a responsive control, hover control and sometimes not. You never know what you're gonna get.
Why is margin and padding in the Advanced tab? What's advanced about that?
Now, when you're introducing more complex styling features, the old UI is really ruining the experience.
I know you're working on a new UI, I've seen the prototype screenshot. But that just seems like more modern graphics for the old interface, but not much difference in terms of UX.
The user interface is the core of the experience and it deserves big improvements.
Have a look at Webflow's UI. I'm using both and Webflow is on a completely different level in terms of styling power and ease of use.
In frontend development, when we use flexbox, the capability to use "margin: auto" is fundamental. These things go hand in hand so I think it should be mentioned.
I already started a feature request: #17886
First of all, thank you for this great update. I played with the container a lot, and there are a few that seem to not work well. Of course, I had previously reported all these cases in GitHub, but ...
1- If we have a container with two columns, it is not possible to access one of the containers and the handle of the main container prevents it from being displayed. https://prnt.sc/Lpw-trKmyFAO
2- If we put the containers inside each other, they are completely inside each other. https://prnt.sc/9auuDE_9D0Uj While nested containers should look like this : https://prnt.sc/MqUen6IYZYoa Even if we add a widget, it sticks perfectly to the container and has no space : https://prnt.sc/qXltXBmyptJT Shouldn't containers have 20px of space by default? Like sections and columns in previous versions : https://prnt.sc/zPUzNKoVEGG3 Am I wrong? It also causes bug number 4 to occur.
3- We cannot use left and right margins in containers : https://prnt.sc/W0JIiqAC71en This is a very big limitation. It is strange why it does not exist.
4- When we add the first widget, it is not possible to access the container handle :
5- If we have two containers and give the upper container more z-index, the lower section handles will disappear.
This does not seem logical. Handles should not be affected by the z-index. They must be available under any circumstances.
6- In containers, the inheritance value is displayed for padding, but not for margin : https://prnt.sc/r_qpwWDIVF8_
Three suggestions
1- As mentioned in bug # 3, in containers, we can not margin left and right. But this is a weakness and could be better. It is better to have this restriction only for the first container. If we put another container in the first container, this restriction will no longer apply to the second container. So we can give the margin to the container from left and right. In general, it is better to have this limitation only for the first containers. Not for indoor containers This was exactly the case in previous versions. When we added a section, we could not margin it left and right. But when we put an inner section inside it, this limitation for the internal part no longer existed.
2- It would be great if the Align Content option was also displayed visually. It had a much better user experience. https://prnt.sc/u_VgBDSV7cpy
3- To fix bug number 2, isn't it better to add the container gap option to the container section? So, this will work as before (https://prnt.sc/fKBBEh-YxGcs). With better performance. By adding this option, we have both Elements Gap and container gap. Therefore, we can have complete control over both the distance between the elements and the distance between the containers.
Isn't this better? https://prnt.sc/RhnpjEJPKlwu
Hey. Two things with the Container element:
Hi Elementor Team, Like everyone says the flex container feature is a great addition. But please review #17983 issue I submitted since dev version but still an issue in this beta as when the container content width is set to boxed and you add padding on responsive option the padding is ignored, while in full width mode it works. If this is a problem with how boxed and flex css works then please disable left and right padding as options for the container when boxed is selected to remove any confusion.
Padding on container for tablet:
Boxed width:
Full width:
In Site Settings > Buttons, the background color for the button does not work. https://prnt.sc/V1Jw_wCO6miY In the site settings, change the background color of the button, then add the button widget. The desired color has not been applied.
Finder still does not work properly. Please review this issue : #17569
Upgrade to beta on our dev site - https://development.natureslens.co.uk/
Now cannot edit any page in safe mode or normal mode - just get the grey screen of death - no pallete, no page, no spinner, nada
Rolling back to 3.5.6 made edits possible again
other things...
1- If we set the widget width to custom, we can no longer select other modes such as inline. Because the selection option is hidden. So we have to delete the widget, so we can change the widget width to other options like inline again.
2- Add the slides widget and then change the container to row. The slider is completely broken.
3- When we select these options to display the container, they are slightly replaced by dance. https://prnt.sc/f6VX0Ck7L0MZ As if the css is loading with a long delay.
4- If we have only one container, the default container mode will not be displayed on the tablet & Mobile. But if we add a two-column container, it displays correctly.
5- I do not know what the reason is, but by moving the mouse over the containers, and even some widgets, the width of the screen decreases and increases. (Actually the browser scroll bar is hidden and appears) Chrome browser - Windows
This is really nerve-wracking😁
The container feature is great. I'm glad you didn't decide to make something half-baked and you're giving us the full power of flexbox. This is what I need as a professional designer and this is where Gutenberg is not going to go, because it needs to stay simple. Gutenberg for layman users, Elementor for power users and professionals.
Two suggestions:
1. User interface
Functionality-wise, the container seems to do the job. But UI/UX is a mess. Using flexbox in Webflow is way more intuitive. Same functions, much better UI. Elementor's UI is getting old and is not working for these more advanced options.
In Webflow, everything is perfectly unified, much more compact and sensibly divided.
In Elementor, there is so much scrolling, jumping between tabs, looking for things, opening sub-tabs, then opening typography popups and so on. The styling options are inconsistent. Sometimes there is a responsive control, hover control and sometimes not. You never know what you're gonna get.
Why is margin and padding in the Advanced tab? What's advanced about that?
Now, when you're introducing more complex styling features, the old UI is really ruining the experience.
I know you're working on a new UI, I've seen the prototype screenshot. But that just seems like more modern graphics for the old interface, but not much difference in terms of UX.
The user interface is the core of the experience and it deserves big improvements.
Have a look at Webflow's UI. I'm using both and Webflow is on a completely different level in terms of styling power and ease of use.
1. Flexbox needs auto margins
In frontend development, when we use flexbox, the capability to use "margin: auto" is fundamental. These things go hand in hand so I think it should be mentioned.
I already started a feature request: #17886
In line with this, I can only point out that at least in the "Layout" tab, the settings were much clearer a few dev versions ago, as this picture shows:
I mean only the arrangement or the division. The progress in terms of content as it is now is good, there are already enough suggestions from other users above.
there is a particular reason for the absence of auto wrap? I remember seeing several posts asking for this option I missed an episode ?
The container feature is great. I'm glad you didn't decide to make something half-baked and you're giving us the full power of flexbox. This is what I need as a professional designer and this is where Gutenberg is not going to go, because it needs to stay simple. Gutenberg for layman users, Elementor for power users and professionals. Two suggestions:
1. User interface
Functionality-wise, the container seems to do the job. But UI/UX is a mess. Using flexbox in Webflow is way more intuitive. Same functions, much better UI. Elementor's UI is getting old and is not working for these more advanced options. In Webflow, everything is perfectly unified, much more compact and sensibly divided. In Elementor, there is so much scrolling, jumping between tabs, looking for things, opening sub-tabs, then opening typography popups and so on. The styling options are inconsistent. Sometimes there is a responsive control, hover control and sometimes not. You never know what you're gonna get. Why is margin and padding in the Advanced tab? What's advanced about that? Now, when you're introducing more complex styling features, the old UI is really ruining the experience. I know you're working on a new UI, I've seen the prototype screenshot. But that just seems like more modern graphics for the old interface, but not much difference in terms of UX. The user interface is the core of the experience and it deserves big improvements. Have a look at Webflow's UI. I'm using both and Webflow is on a completely different level in terms of styling power and ease of use.
1. Flexbox needs auto margins
In frontend development, when we use flexbox, the capability to use "margin: auto" is fundamental. These things go hand in hand so I think it should be mentioned. I already started a feature request: #17886
In line with this, I can only point out that at least in the "Layout" tab, the settings were much clearer a few dev versions ago, as this picture shows:
I mean only the arrangement or the division. The progress in terms of content as it is now is good, there are already enough suggestions from other users above.
I'm quite successful. Displaying container options in a tab was much better than it is now. Unfortunately, displaying container settings in two tabs is not interesting. And it is a kind of obstacle in the speed of design. Of course, this is my opinion.
1)
After updating to 3.6 beta I have an issue with svg logos widht. It appears in both site logo and image widget. Basically svg width is forced set to 48px by elementor and is not possible to change it in the editor apart then using custom CSS. I've tried with several logos.
Screen 1: 3.5 no svg issue Screen 2: 3.6 svg issue Screen 3: 3.6 with custom CSS
2)
Container: cannot find motion effects under "style tab" but only in "advanced". In that way is no more possible to add motion effects to backgrounds, for example a parallax done with vertical scroll.
As said avobe, containers don't allow us use motion effects
Edit: Sorry I miss-looked it. They allow us!
love the container-element thusfar. but at current version i can't change triggers, display conditions and advaced rules for Pop-Ups. Always have to roll back the version to change Pop-Up-conditions, but in the previous version there's a bug that won't allow Pop-Ups as Links for e.g. Buttons
After updating to 3.6 beta I have an issue with svg logos widht. It appears in both site logo and image widget. Basically svg width is forced set to 48px by elementor and is not possible to change it in the editor apart then using custom CSS. I've tried with several logos.
Screen 1: 3.5 no svg issue Screen 2: 3.6 svg issue Screen 3: 3.6 with custom CSS>
Container: cannot find motion effects under "style tab" but only in "advanced". In that way is no more possible to add motion effects to backgrounds, for example a parallax done with vertical scroll.
Motion effect was never under style, ever in advanced.
As said avobe, containers don't allow us use motion effects
Under "advanced" like ever:
If enable the motion effect, we can not change the position of the widgets by dragging the mouse. In the video below, I compare with previous versions ...
I didnt have this problem before the beta
Fix: Image size with a link shrunk in Image widget (https://github.com/elementor/elementor/issues/15088, https://github.com/elementor/elementor/issues/12432)
But when installing the beta i do get the bug it should fix? A shrinked svg logo when having a link to it.
After updating to 3.6 beta I have an issue with svg logos widht. It appears in both site logo and image widget. Basically svg width is forced set to 48px by elementor and is not possible to change it in the editor apart then using custom CSS. I've tried with several logos. Screen 1: 3.5 no svg issue Screen 2: 3.6 svg issue Screen 3: 3.6 with custom CSS> Container: cannot find motion effects under "style tab" but only in "advanced". In that way is no more possible to add motion effects to backgrounds, for example a parallax done with vertical scroll.
Motion effect was never under style, ever in advanced.
Before container we have two motion effects setting panels:
With container that second one is disappeared.
I didnt have this problem before the beta
Fix: Image size with a link shrunk in Image widget (#15088, #12432)
But when installing the beta i do get the bug it should fix? A shrinked svg logo when having a link to it.
Yes, thanks, exactly that issue.
Elementor stop working on frontend on my local environment (Laragon, Windows 10, Firefox) starting from version 3.6.0 dev32 Browser message is: The connection was reset. The connection to the server was reset while the page was loading. ERR_CONNECTION_RESET
This issue appears only on pages edited with Elementor
UPDATE: solved https://stackoverflow.com/questions/1138269/apache-error-notice-parent-child-process-exited-with-status-3221225477-res
Advanced tab width select control disappears if custom option selected (looks like control condition issue)
Finally! What I'm waiting for.... Rearrange global colors and fonts will be super useful for me.
Thank you so much Elementor😍
Hey all, thank you for your comments.
We reviewed and going to fix most of the issues that were raised here.
We will provide specific comments per issue soon.
Thanks again!
Great update, thanks elementor🔥
The first and most important bug I encountered : https://prnt.sc/FvTMseemxqa- Nested containers stick together perfectly. Shouldn't they be like this? https://prnt.sc/QUXGNa_95-UZ Even when you add a widget, there is no space around it. I used to follow the dev version and this was not a problem!
There is an important thing about containers and sections (Before 3.6) ... When we add a section or container, its handles are outside the container or section : https://prnt.sc/D_aOfZtyN02Q Of course, sometimes it is outside the section and the container, sometimes inside. But one question. Why should container or section handles be placed outside? It is wrong to place the handle outside the section or container for two reasons.
1- It will be difficult to display the handles of the first container or section. (At least in most cases)
2- If the upper section or container has a higher z index value, the lower section handle or container will be located below it and will not be available.
So I think these two problems will only be solved in one way. Container handles should only be placed inside : https://prnt.sc/QzJ6kkle7fw0 Under no circumstances should they be displayed outside the container. There is no reason for it to be shown outside. Please share your opinion. Am I wrong? Is there a reason to display the handles outside the container? In any case, this is not a big change, I hope it will be fixed in 3.6 so that we can get rid of it forever.
Same issue if you have negative margins - I second this call
Currently unable to add the Container widget to "Favourites"
Perfect timing
Hi Elementor Team, Like everyone says the flex container feature is a great addition. But please review #17983 issue I submitted since dev version but still an issue in this beta as when the container content width is set to boxed and you add padding on responsive option the padding is ignored, while in full width mode it works. If this is a problem with how boxed and flex css works then please disable left and right padding as options for the container when boxed is selected to remove any confusion.
confirmed this is an issue. Padding is only honoured on desktop, all other breakpoints padding is ignored
.
Thank you all for this great inputs! we are working hard on fixing all of the issues you raised.
We just release another beta version with more fixes. feel free to update to v3.6.0-beta2 and get the following updates:
Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue.
Thanks again to everyone.
When converting to container (from section/columns), the margin will be copied, but I can't changed left/right margins. See video
There should be a way to add a gap only between the items. For example, I want to have a Gap between the 3 columns with the width of 33,3333% without breaking in 2 columns.
Media carousel set to slideshow completely breaks in mobile view, (only)
First of all, you did an amazing work with the container! 🚀
I want to suggest something. We have the ability to set the direction that the elements inside a container will follow. This is great, but obligates anyone to add multiple containers to create stacked rows and columns. Here's an example:
To avoid this multiple container need, I suggest to have a new option on the main conteiner that triggers a break when a number of elements is reached. In my example I would use "Break when elements reach: 2", so when the container automaticly detects 2 elements (Monday, 13:00 - 16:00) a break will happen and the next 2 elements will be displayed in the next line, and so on.
@pauserratgutierrez Flexbox doesn't work that way. To achieve what you want, that sort of nesting is exactly what you'll need to do. Alternatively, you will have to set width for the Day and Time child containersto fill up 100% of the parent flexbox container. (eg. 50%/50%) and the same height for both. That way you'll only have 2 child containers per row (although calling it row in this scenario is technically inaccurate).
The other other alternative is using grid, which isn't available for Elementor yet unfortunately, but you can use custom CSS to make it a container way easier that the old section/column widget especially now that the container simplified DOM structure makes it way easier to override flex and use "display: grid" instead.
There should be a way to add a gap only between the items. For example, I want to have a Gap between the 3 columns with the width of 33,3333% without breaking in 2 columns.
@PanagiotisRou is definitely right. There should be a better way to change the gaps between (and I mean ONLY between) the "columns". The problem is discussed in several other issues e.g. this one: https://github.com/elementor/elementor/issues/17985
There should be a way to add a gap only between the items. For example, I want to have a Gap between the 3 columns with the width of 33,3333% without breaking in 2 columns.
@PanagiotisRou is definitely right. There should be a better way to change the gaps between (and I mean ONLY between) the "columns". The problem is discussed in several other issues e.g. this one: #17985
For me that works if Wrap is unchecked, only if checked it breaks to 2 columns.
There should be a way to add a gap only between the items. For example, I want to have a Gap between the 3 columns with the width of 33,3333% without breaking in 2 columns.
@PanagiotisRou is definitely right. There should be a better way to change the gaps between (and I mean ONLY between) the "columns". The problem is discussed in several other issues e.g. this one: #17985
For me that works if Wrap is unchecked, only if checked it breaks to 2 columns.
Of course it works this way - if the columns don't wrap, they have to stay in one line. But what if you want them in several rows? That's the problem we are discussing here: you want 3 columns, but because the gap adds extra space, only 2 columns will fit.
Please consider adding an option to keep the section related widgets available in the widget list (left panel). Mark them as obsolete, move them to an extra group, make it optional, but please keep them there.
I welcome your decision to keep the old sections untouched, without trying to convert them automatically after the update (it would end up as a disaster). It's also good, we can still edit them. But if we can edit them, why not have them in the list as well?
It's clear that many old sites won't be updated to the new system instantly, and it's probable that lots of them will be using both options simultaneously. I can imagine a situation, that I (or my client) decides to use the Containers only for the new pages and the old ones keep (for the time being) in Sections. But you still need to maintain the old pages which includes adding new sections. Sure, you can copy or duplicate them, but again, if you can do all this, it's better to have them in the list too.
Thanks
Copy a container and paste it creates an "old section" with the container inside. .
Just my 2-pence but please refine this more so the flexbox experiment releases as a beta rather than alpha. Might as well stay in the Dev version, since alphas are advised not to be used on customer websites, and further updates if done on a production site could break in future while in alpha form. This is a good feature but you still have 'Inline Font Icons' in alpha too that is still as yet to be complete.
Just my 2-pence but please refine this more so the flexbox experiment releases as a beta rather than alpha. Might as well stay in the Dev version, since alphas are advised not to be used on customer websites, and further updates if done on a production site could break in future while in alpha form. This is a good feature but you still have 'Inline Font Icons' in alpha too that is still as yet to be complete.
Thanks, These experiments are for assuring the stability of all websites. Alpha means that this feature is developed and we are allowing users who want to opt-in and try it out to experiment with it. This is a mean for assuring the safety of all of our users websites
We have just released Elementor v3.6.0-beta3 which includes the following updates:
There are still some bugs that you reported here that are being fixed and should be released soon in another beta version.
Please keep this related to the Current beta Only! any other Issue Report or Feature Request feel free to open a new issue.
Thanks again to everyone.
Thanks, These experiments are for assuring the stability of all websites. Alpha means that this feature is developed and we are allowing users who want to opt-in and try it out to experiment with it. This is a mean for assuring the safety of all of our users websites
I know where you are coming from as it is better to publicise the feature so more people use it to stress test the feature and to bug fix in the main version rather than the smaller participants using the Dev version.
Anyways again still a great feature and love the work done to get it this far. 👍
Beta 5 UPDATED - PLEASE READ BELOW!
Hi Elementor Beta Testers 👋,
We are incredibly excited to introduce our new beta version, Elementor 3.6, which includes new features that will transform the way you build websites with Elementor.
This version includes the long awaited Flexbox Containers, which enables you to build more complex and lightweight layouts with improved performance, as well as additional features that accelerate the way you set up new websites. Elementor 3.6 includes:
elementor-section-wrap
Before testing this version, please make sure you are using:
Introducing Flexbox Containers - Harness the Power of CSS Flexbox in Elementor [Experiment]
Flexbox Containers are a new lean layout structure in Elementor, that allows you to achieve pixel-perfect responsive designs, and highly advanced layouts, quickly and with a much slimmer markup, which reduces the DOM output and improves performance significantly.
With Flexbox Containers, you can place widgets directly inside a Container, as well as nest Containers. Additionally, you can improve the user experience by making the entire Container clickable by adding a link to it. Then, you can control the layout and distribution of elements within the Container, and adjust your content to every screen size, resulting in greater responsiveness, without compromising on speed.
Following several months in the Dev Edition, and implementing a lot of feedback from the community, Flexbox Containers are introduced as an alpha experiment, and should be used with caution, and not on a live website. When the experiment is turned on, you will be able to add new Containers to a page, instead of Sections, Columns and Inner Sections. You’ll also be able to add Containers to an existing page that was previously built with the section-column layout.
Please Note: If you deactivate the experiment, every Container you created will be removed from your website, you will be able to return them if you reactivate the experiment and restore a previous revision.
Below you will find the controls that adjust the Container’s layout, and their behavior:
Container:
Items:
Individual element (widgets and inner containers):
On the individual widget within the Container, users will able to determine the following from the Advanced tab on the individual widget
In addition, the Width and Position controls have been made more accessible, and are located in the layout section in the advanced tab of a widget, as a result, the positioning section has been removed and the inline position will not function inside containers.
Convert your Legacy Layout (Section-Column) to the New Container Layout
To ease your transition from the Section-Column to the Flexbox Container layout in existing pages, you can use the converter to save valuable time, and avoid the redundant task of dragging in all your widgets and content.
The converter can be found under the layout tab when you click on a section, or in the page settings (cogwheel icon) to convert an entire page. Clicking 'Apply' will create a new duplicated container beneath the chosen section, with all the original content inside in its appropriate position.
To enjoy the full benefits of Flexbox Containers, we recommend reviewing the resultant Container, and exploring how the layout can be further improved. Once you’re satisfied that all the content has been optimally converted from the Section to your new Container, simply delete the Section.
Here’s how to test it:
New Capabilities in the Import/Export Feature
The Import Export Template Kit feature accelerates the process of creating a website significantly. This feature allows you to export the Content, Site Settings, and Elementor Templates (Theme Parts for Pro users) from one website and import it to another, and also allows you to import a full website kit to your website.
To improve your process further, the Import / Export process now includes:
Here’s how to test it:
zip
file you downloaded and start the import processNew Onboarding Wizard - Get Started With Your Website Efficiently
The new onboarding wizard will enable you to set up your next website in a truly friendly and efficient manner, allowing you to get started quicker. Throughout the wizard, you will be able to configure the basic configurations of your website including setting up the ‘Hello’ theme, adding your site name, and uploading your logo. Then, you will complete the wizard by choosing whether you want to start with a blank canvas, or import one of Elementor’s full website kits.
Here’s how to test it:
Rearrange your Global Colors and Fonts
One of the first steps you take when building a website is setting up your design system, choosing the colors and fonts the website is going to have. With Global Colors and Fonts, in the Site Settings, you are able to easily set up your 4 system colors and fonts (Primary, Secondary, Text, and Accent) and add your custom ones.
Up until now, there was no clear distinction between system colors and fonts and custom ones, and any time you would add another custom color or font, it would take the last place on the list. But sometimes, you want to change the order of your fonts and colors. With this update, the separation between system colors and fonts and custom ones will be clearer, and you will be able to rearrange their order. For example, if your website’s custom colors include various shades of pink and blue, you can arrange all your pinks in a row, and all your blues in a row in the Global Colors under Site Settings. Additionally, you will also be able to change the position of your system fonts and colors, for example, you can position your Secondary font on top of your Primary one in the Global Fonts under Site Settings.
Here’s how to test it:
Performance Improvements
Lazy Load Added to Carousels
Lazy load empowers you to improve performance on your website by only loading the content that is immediately visible and necessary and loading the rest as users scroll and the content becomes visible. With the new Lazy Load control in the Image Carousel widget and Background Slideshow feature in every section, your website will load faster.
Optimized DOM Output
The Optimized DOM Output Experiment has been extended, to remove the
elementor-section-wrap
More Improvements
elementor-section-wrap
by adding it to the DOM experiment (#16950, #10633)eicons
library to v5.15.0Difference
,Exclusion
andHue
to Column and Section blend mode optionsMake 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
For bugs and remarks, please reply with a comment on this issue here on GitHub. Please keep this related to the Current beta Only! any other issue or feature request, feel free to open a new issue.
Designated time for release:
March 23, 2022
(Estimated)Many thanks for your support and help! Cheers, Elementor Team