419 – Elementor V4 Unveiled With Gabriella Laster  ## Metadata - Author: [[WP Builds]] - Full Title: 419 – Elementor V4 Unveiled With Gabriella Laster - Category: #podcasts - URL: https://share.snipd.com/episode/b076dbe3-9f77-4682-8f15-0280b88bc602 ## Document Notes ## Highlights - **Major Rewrite for Modernization** - Elementor v4 is a major rewrite to modernize the codebase for better performance and new capabilities. - It enables features difficult to implement in previous versions without breaking millions of existing sites. Transcript: Speaker 1 Than everything that came before it? Speaker 2 Elementor has been around for over eight years at this point. Over this time, we have introduced many, many, many different features and capabilities. In the beginning, the very, very beginning, each version was able to introduce a lot more features because there was a larger gap to close at that point. And then ever in the past couple of years, the versions became a little bit more incremental. We had so many capabilities available already, and every new capability we wanted to introduce became a lot more complicated because you have to take into consideration all of the Previous code that existed and how you modify, how you introduce a new feature and integrate it with all the code that had already existed. And how do you make sure that you do that without breaking any of the 18 million websites that exist? So part of the reason we're building Editor v4 is we want to obviously introduce a more modern code. And that will also enable us to introduce many capabilities that we've wanted to do for a while, but it was very difficult for us to do with the current version and the current, the way It was built currently. Speaker 1 Yeah, I guess any developer will know this moment where, you know, your technology, the technology just moves on. And the thing that you've built, if you want to update it, you've got to do a pretty, you know, you can get away with updating the current code base for long, a long period of time. But at some point, typically you have to go back and rewrite a whole bunch of stuff. So we're recording this in the middle of April 2025. And I will hopefully get this episode out fairly swiftly. But how, is the kind of timeline that you're looking at for for actually launching it i know that you're probably going to go through a batch of testing and what have you just tell us about The alpha beta and then final release date should everything work out and obviously we won't hold you to any of that because there might be some hiccups along the way so we're taking this Speaker 2 Entire year to build a really solid V4. The first alpha version that we plan on introducing, the beta version of it, so the first, first ever introduction of it is planned for the end of April, should all the testing go as expected. And then after that, we plan on having incremental releases. So the first introduction is going to be pretty massive. It's going to introduce the entire infrastructure of what we want to introduce going forward. We'll be introducing a number of different widgets or atoms, we're going to call them going forward, and many different features and capabilities. Some of ([Time 0:08:34](https://share.snipd.com/snip/b0c9b51d-fbd9-45ae-93eb-d780702190f7)) - **Phased UI Rollout for Easier Transition** - Users will find v4's UI familiar but more intuitive with modest design changes. - Gradual rollout allows users to phase into v4, deciding when to opt-in and start using new features. Transcript: Speaker 1 Going to be a big design change as well? If I launch V4 on the day it finally comes out and I'm not being part of a beta test or anything like that, should it look basically the same? Speaker 2 If you're waiting until the entire V4 is available and usable, then it will probably look a little bit different. Also, very familiar. We're doing two things. One thing is we're trying to keep the UI as familiar as possible on the one hand, but also modernize it a little bit. We still want to make sure that the user experience is incredibly intuitive and we are spending the next couple of months trying to phase people into the new version. So we're taking this time to also gradually introduce new features and capabilities and giving you the ability to decide when you opt in and giving you also the opportunity to start Getting used to the new capabilities and the new UI. It's not going to be a massive overall. It will still look very familiar. It's ([Time 0:12:17](https://share.snipd.com/snip/5347d403-f419-48ab-8ea8-b038f98537c3)) - **Coexistence of Versions Ensures Stability** - Elementor v3 and v4 will coexist without breaking existing websites. - Users can mix v3 and v4 elements on pages but new styling features only apply to v4 elements. Transcript: Speaker 1 Over to four with care or should it just be a case of okay just get on with it version four is now out nothing will should break so for the foreseeable future they both are going to coexist Speaker 2 Oh okay so enabling v4 is not going to break anything on your website you're going to be able to use v4 components or features, capabilities with v3 on your website. You are not obligated to update your website entirely to v4. So if you have an existing website and you want to add a new page or you want to add a new section to a page, you can use v4 on that page and it will coexist with v3. Right. Having said that, there might be, because we're introducing new features in v4, they won't work on v3 elements. So if, for example, I introduce a new feature in v4, a new styling feature in v4, I won't be able to necessarily use ([Time 0:14:26](https://share.snipd.com/snip/7c473d60-8a45-4d02-99d4-6580daf26b39)) - **CSS-First Approach Empowers Styling** - The CSS-first approach allows more styling capabilities and consistent responsive design. - Users still build visually without mandatory coding, but enjoy powerful style controls. Transcript: Speaker 1 Why we need to change it? Two, three big things. Speaker 2 We want to be able to improve performance tremendously. So that's one aspect of it. I think the CSS first approach will empower us and our users to be able to design, to improve their workflow, to design more consistently, to build more responsive websites. And it will also enable us to introduce many more features a lot faster than we have been able to in the past couple of months. So I think at the end of the day, it's worth it. I don't know. I wouldn't consider it a pain. ([Time 0:17:37](https://share.snipd.com/snip/fc194f5b-0ba8-46bc-a773-044693807af6)) - **Reusable CSS Classes for Efficiency** - Elementor v4 will allow creation and reuse of CSS classes like "big red button" for consistent styling. - This builds a global palette simplifying design and enabling quick reuse across a project. Transcript: Speaker 1 All of that. And then say, let's call that big red button. And I can reuse big red button over and over again. Speaker 2 You got it. Speaker 1 It's almost like you're kind of creating global styles then. So right at the beginning of your Elementor project, you'll, I don't know, you'll drop the button in for the first time and decide, okay, this project needs it to be this. You could really, okay, that's interesting. So you can start to lean into things like you could have multiple classes. Background color with bottom suddenly I've got background color red bottom is I don't know padding this margin that and so the combination of those classes then means that over time You can build up this sort of global palette of css things is that it have I kind of got it no you got it you got it. That is, that is the, that's the kind of the way that I've seen just a few companies ([Time 0:21:59](https://share.snipd.com/snip/2eea2a28-0fa2-471e-ae4c-0d22c4f16806)) - **Use Educational Resources for Transition** - Elementor prepares educational content like documents and tutorials to ease user adaptation to v4. - Users can adopt new features gradually; extensive usage is optional. Transcript: Speaker 1 The initial kind of pain of this? Yes. Speaker 2 So in that regard, we are working on the educational material that would be required, whether it is help center documents or tutorial videos or anything that can help you or anyone using It adapt the new version quicker. And to have that simpler transition, at the same time, you don't necessarily need to use the more complex features. These are more geared towards professionals that want to improve their workflow, but you're not required to use it. ([Time 0:24:22](https://share.snipd.com/snip/8f008632-dc2e-48e4-a2fa-f6fac941cd45)) - **Clean HTML and Faster Editor** - Elementor v4 reduces excessive HTML wrappers, simplifying output and improving performance. - Editor itself will be faster and cleaner, eliminating unnecessary divs by a large margin. Transcript: Speaker 2 Actually both so we want to on the one hand make the editor more performant so that the so that your work is faster at the time, we are removing a lot of the extra divs, a lot of the extra wrappers. The CSS build also contributes to that, but we are eliminating every unnecessary div that we can. So I've actually seen it myself in person, where we compared a v3 widget to a v4 widget. So you could have maybe four rows, four divs in a v3 element and just one in v4. So it's a huge difference. Speaker 1 One of the things that ([Time 0:28:16](https://share.snipd.com/snip/e27c1f14-6b60-401a-9e21-bdbe43bcf065)) - **Supporting Developer Ecosystem** - Elementor is preparing developer documentation and outreach to third-party developers for smooth integration. - This supports a huge ecosystem that relies on Elementor compatibility and functionality. Transcript: Speaker 1 Ready to move, that they will also be in the loop and be able to be supported through that? Because I know that that's a pretty big ecosystem and a lot of your users will be relying on those third-party products as well. So I guess they, you know, we'd like to know whether or not you're going to be thinking about them. Speaker 2 Yes, that is something we think about. So we will be preparing documentation for other developers to use and to update their products. And we're also going to be reaching out to them. That is 100% something that we are taking into consideration. We are preparing developer documentation. And we will definitely be reaching out to everybody to make sure that this is as smooth a transition as possible for everyone involved. ([Time 0:29:30](https://share.snipd.com/snip/e998fedb-f8f8-4018-ba38-23ee1ab0e46f))