Justin Tadlock
Elementor version 3.0 was launched on Tuesday. This release is the first major update to the plugin in over two years and is one of the largest upgrades in its history. The new version focuses on a design system, a new theme builder, and performance improvements. The driving motivation behind this release was to create global design tools, which is a shift from the plugin’s roots as a mere page builder.
One of my biggest complaints about builder plugins is that they have often approached design on the individual page level first. However, web design is not about how you can fancy up a page. It is about taking a holistic approach to the overall design of the site. When building single pages, users of such plugins far too often create more work for themselves, much of it better handled on a global scale. One of the cornerstones of development is to not repeat work you have already done. Builder plugins can too easily push those who use them toward such bad habits.
Design should handle the foundational, global features first. Then, drill down to the atomic level when necessary. Builder plugins have almost exclusively gotten this backward in the past.
Elementor 3.0 seeks to solve this problem by introducing its design system and a new theme builder. The latter is part of its pro offering. The design system is essentially a global style creator and is available in both the free and pro versions. This is a welcome addition to the plugin and should create a solution for those foundational elements that the plugin has been missing.
“Creating a site with a design system in mind (i.e. style guide, colors, and typography) is how professionals approach building websites,” said Ariel Klikstein, the co-founder and CTO of Elementor. “For many creators, this is an integral part of building the site as it helps them, their teams, and their clients to align and communicate around a consistent vision.”
The Elementor team is coming to terms with the principles that have long guided web designers. The goal is to apply these principles to a user interface, breaking outside the confines of code.
“Design system capabilities are among the pillars of building professional websites, as they give the ability to view and control the site elements from a centralized hub and apply sitewide changes to overall colors, typography, and layout,” said Klikstein.
Elementor is pitching its new design system as revolutionary. However, such design systems have long existed in the WordPress ecosystem. Theme developers have created similar systems for well over a decade, and they have since capitalized on WordPress’s built-in customizer to do it in real time.
The question is whether this new system ups the ante, creating a new baseline in which others must compete.
That will be for users to decide. However, it does offer a plethora of options under its Site Settings menu. It allows end-users to customize colors, typography, and several other elements across the site. Current plugin users will have tools in their hands to do some more amazing things with Elementor, and they will be able to do them in a much more streamlined manner. Ultimately, it should save time and make it possible to update the site over the long term without re-editing old work.
It is not particularly revolutionary, but it is something that should be standard for any sort of visual design system.
“While it’s true that applying global styles was always possible using custom CSS code and themes, in Elementor V3.0 we made these options truly global,” said Klikstein. “Today they are independent of a theme, plugin, or widget as part of the element-based web design paradigm. The design system features are integrated into the editor workflow, without the need to use a single line of code. This will let the user implement global colors and fonts across any site element — be it a button, heading, or background. Then, if the user decides to change the color or a font style, he or she can change it once and apply it wherever it was previously placed in the global setting.”
To not mislead readers, note that most themes that have implemented such systems have also not required custom CSS or other code.
Perhaps the bigger question is whether this new design system will be better than the upcoming global styles feature in Gutenberg and core WordPress. The aims of the two are similar, but WordPress will undoubtedly launch its feature with a much more limited set of options. WordPress will also need buy-in from theme authors.
Klikstein did not directly respond to the question of how WordPress’s global styles feature impacted any decision that went into Elementor’s design system feature. However, when cutting through the marketing cruft, he did say, “It’s great to see that Gutenberg/WordPress is also moving in this direction because we believe this is the best way to create consistent and maintainable websites.” He also said this feature was on the roadmap since the plugin’s earlier theme builder concept.
Gutenberg may not be much of a consideration for Elementor’s development team. They are clearly carving their own path to success and outpacing others in the race to building websites through a visual interface.
I’ve been using Make by ThemeFoundry for four years. They’ve had some global styling options in the customizer for the entire time. But today, they are seemingly more focused on their forms plug-in, Happy Forms, and haven’t really advanced the Make theme and Make Plus plugin to keep up with the Joneses. It’s still a light and fast theme, which I do enjoy using. But I’ll take Elementor for a spin here and try it out.
I think Divi has done this with their theme builder for several months.
Since Oct 17, 2019 when Divi 4.0 launched they have had a theme builder which I would say has a solid User interface.
They (Elementor) are clearly carving their own path to success and outpacing others in the race to building websites through a visual interface.
In May we released our first theme on Themeforest that used Gutenberg to create layouts instead of Elementor. We thought customers would would be used to GB by now. We were wrong, at least for our market.
It’s been eye-opening how many struggle to accomplish basic tasks such as selecting the correct parent element or moving blocks where they want them to go – and we’re currently getting mediocre reviews because of it.
I can’t see us going Gutenberg-first again any time over the next 24 months.
24 months will be the time they need to understand Gutenberg is a joke and move it back as plugin in WP 6.0
Theme creators that are using the block editor as their main tool for their demo sites will soon understand their mistake the hard way.
When Gutenberg moved into core I tried to move over to blocks and was disappointed.
But with the improvements made over the past few months GB is now much better. Most Page Builders will have to adopt or die in next 24 months, guaranteed!
The ThemeForest ecosystem is a bit of its own beast. If I were designing themes for that market, I would support both Elementor and the block editor. By my estimation, you’re looking at least another year or two before the block system has gotten to the point where it is truly competitive as a site/page builder. It will be WordPress 5.6 before the beta of FSE even lands, so it’d be hard to argue in favor of going all in with the block editor in that particular market at this time.
I’d be interested in seeing user response if you began adding block patterns, which were not available in May. Given the right tutorials/docs on how to use them and enough patterns, there’s a niche that can be carved right now while the feature is still fresh. Eventually, I’d imagine there’ll be a race to the bottom on TF and block patterns.
In Themeforest land it has been only in the past couple of years have you have seen theme launched at the place that uses a page builder that is not WP Bakery one.
Gutenberg will need at least one more year of constant updates here. I say Gutenberg is moving faster than Elementor on functionality.
Timo, if you drop me an email or a ping on the .org Slack, I’d love to connect you with the Gutenberg team to go through the pain points your users hit. We’d love to get those issues prioritized to be fixed as soon as possible.
We don’t really have any unique insights. By the time we run into something we usually find that there’s already an open issue about it on Github, like this for example.
May you let me know what you Gutenberg theme on Themeforest is please? I’m looking for a GB-optimised theme to see what really is possible with GB. Thanks and good luck.
Divi has had global settings using variables, which is one of the things Elementor core has just caught up on, but the Divi Theme Builder model where you manage headers, footers etc. is still not as versatile or powerful as Elementor’s Theme Builder features for headers, footers, page templates, single and archive views for posts types, taxonomies… not to mention differences in dynamic content.
But it’s great to have them all improving and evolving, so we as developers/builders/designers have more options to fit our workflows and client requirements 😁
Only when DIVI launched the DIVI presets update in July 2020 did we really get a solid way to deal with default settings.
It should be noted, top and center, that 3.0 has been breaking sites left and right. Check out their forum or Reddit for the numerous complaints.
Since 3.0.0, they’ve released 3.0.1, 3.0.2, and 3.0.3 to try to stem the bleeding, but I don’t think they’re there yet. Look for more updates imminently.
Looking into it a bit. There might be something worth exploring if this is beyond the norm for a major update on a plugin with millions of installs.
This is great news. I think that they are really ahead of others. I use another popular constructor, but apparently, in future projects I will work with the elementor
“Global styles” does NOT equal “design system” (Look it up). If Elementor allowed us to create true design systems I’d pee my pants with glee. However, definitely a welcome change in Elementor, which I’ve found to be one of the most easily adoptable page builders, and I do hope that their next move is toward true (or truer) design system build methods.
We have been using Elementor for easy website works. However, Elementor Add On seems to be a bug either influenced by Elementor Pro or because Add on isn’t able to keep up the game.
It’s certainly a nice addition. But I think Elementor had better worked on some other much looked for features such as custom-breakpoints, lazyloading posts on archives, support for the ACF repeater field, and so on.
Well the Custom Breakpoints for Elementor plugin was released this week.
Probably great work, but not done by Elementor itself.
Elementor 3 has broken sooooo many sites.
No response to support tickets.
No response to support requests on wordpress.
What a truly Terri le experience.
Enter your email address to subscribe to this blog and receive notifications of new posts by email.
WordPress Tavern is a website about all things WordPress. We cover news and events, write plugin and theme reviews, and talk about key issues within the WordPress ecosystem…
© All Rights Reserved. Powered by WordPress, hosted by Pressable
source
