free consultation
The Elementor plugin for WordPress is a sensational tool that revolutionizes the editing capabilities of content and site structure. However, with the update of the WordPress editor, known as Gutenberg, this platform also introduced a number of features similar to those offered by Elementor. This article will introduce you to the differences between Elementor and the new WordPress editor (Gutenberg), helping you choose the right tool for your website project.
spis treści:
The new WordPress editor, or Gutenberg, has introduced revolutionary changes in content editing. It's not just a classic text editor, but a block-based system, meaning that each element - from text to multimedia - is treated as a separate block. This makes it easy to add, move and edit different components of a page using an intuitive drag-and-drop interface.
Elementor is a tool that, although it works in a similar way, is still considered the most popular tool for building websites, going beyond the capabilities of the standard WordPress editor. It's a platform that allows you to create sites with great functionality. In the paid PRO version, it even offers the ability to construct complete templates, taking into account footer, header or blog page layouts.
Gutenberg and Elementor are two popular page builders for WordPress that differ in features and customization options. The choice between them depends on the individual user's needs and preferences.
Gutenberg is a built-in WordPress editor that offers a simple and intuitive way to create content based on the block system. It is an ideal tool for bloggers, small business owners or those who want to create basic pages and posts quickly and easily. Its main advantage is its ease of use and the fact that it is free and fully integrated with WordPress.
Elementor, on the other hand, is a powerful premium page builder that allows you to create more complex and advanced layouts without coding knowledge. It offers a rich set of tools and features, including custom headers, footers, pop-ups and advanced animations and effects. It is ideal for those who need more control over the look and functionality of their site, such as designers or developers.
The main difference between Gutenberg and Elementor is the range of customization and advanced features. Gutenberg provides basic tools, while Elementor offers many more options for advanced design. However, Elementor comes with a fee, with price plans ranging from $49 to $199 per year.
In summary, if you need a simple and basic content creation tool, Gutenberg will be the right choice. However, if you want more flexibility, advanced features and custom design, Elementor will be a better option.
See also 5 fastest wordpress themes
Page builder is a practical tool that allows you to create web pages by dragging and dropping various elements and blocks. It's like an interactive toolkit, where adding text, images or buttons is done in an intuitive way, without having to write HTML code from scratch. This makes creating pages more accessible even for people who are not programming experts.
However, while page builders make the process of creating pages easier, it is worthwhile to gain at least a basic knowledge of HTML. Knowing these basics allows you to make more informed decisions when building a page, such as code structure and appropriate use of headers. Still, it is largely the tool that determines what HTML code will be generated from a given element or block.
When comparing different page builders, you can see that visually the sections created look similar, but the code generated by different tools can be significantly different. Now, to see how these differences look in practice, we will compare the same sections created with two popular page builders, Gutenberg and Elementor.
The differences between Elementor and the new WordPress editor are an extremely important consideration when choosing a website building tool. Elementor and its Pro version provide a number of features that take editing capabilities to a higher level than the standard WordPress editor offers. Nonetheless, there are several aspects to consider that may affect your final choice.
One of the main factors is the page loading speed. Elementor introduces additional code that can increase loading times, which can negatively affect your Google search engine results. On the other hand, WordPress is much lighter and faster, which can be crucial due to the ranking factor.
The experience of the developers is also an important aspect. Elementor has been on the market since 2015, which has allowed its developers to accumulate more experience and fully refine the tool. The new WordPress editor is still relatively young, which may mean that it still needs further improvement and development.
Elementor offers proven widgets, even in its PRO version. WordPress, on the other hand, uses plug-ins from the library, which, while offering wider possibilities, can at the same time increase the risk of incompatibility or problems with outdated plug-ins, which can be a potential threat to our site.
You will find a number of other page builders on the market, for example, Brizy, Brics Builder, Beaver Builder, Visual Composer (which seems to be related to WPBakery or had a history with it), Oxygen Builder or the newer Zion. And these are just some of them, because in reality there are many more such tools.
The platforms I mentioned above have a small market share, so let's rather focus on the two most important - Elementor and Divi. In the case of Divi, the advantage is the availability of a lifetime version, which means that you can purchase a lifetime license, with no limits on the number of pages. However, whether this represents an advantage for customers is up to individual preferences and needs.
It's an interesting question whether an annual subscription-based model, like Elementor's, can foster faster growth of the platform, due to potentially higher subscription revenues. It's essentially a conversation we could have in the form of a podcast about the different payment models that can be used in business.
The absence of Divi in these statistics may be due to the fact that Divi is also a theme that covers the page. When we use Divi, we are not using another theme - it is Divi that acts as a theme and page builder at the same time, which makes it different from other solutions. However, all these tools fall into the category of page builders.
I hope that this issue is clarified for those who are not familiar with the technical terms or have not been exposed to such definitions before. If not, go ahead and ask. I am at your disposal below, and if my explanation was insufficient, I will be happy to provide additional information.
In the past, creating custom elements on a site was a challenge. It was often associated with adding code and using plugins, such as ACF, that were valued by developers. This required more effort and skill, especially when it came to custom elements that were not part of the original theme. Now, even without a page builder or in Gutenberg, the process was not as simple or intuitive as it is today.
Our offer to create websites :
I would like to conclude the analysis by highlighting the technical aspect. One of the key drawbacks of page builders, as with WordPress, is the way they are used by users. Often, how people use these tools is the biggest difficulty, just like with WordPress, where inappropriate use of the platform is one of the main problems.
I've noticed that a lot of people use online tutorials, where you can create a website in a short time - 10 minutes, an hour or more - by importing ready-made elements, adding various plugins. As a result, the site works, but the person who does it doesn't gain any deeper programming or technical skills. It's a somewhat abbreviated approach, which of course is possible.
In such cases, we have a price to pay. A site created from pre-made elements will have a large size and load slower. This is the best-case scenario, where the biggest drawback is precisely the slower loading. But there is also the risk of incompatibility between elements. When we install a lot of ready-made solutions, sometimes one plugin does too many things, and then we install another one, which in turn tries to do even more.
See also:
We decided to run a quick overview, so we installed the Astra theme, which provides ready-made example landing pages to import. Some of these examples allow you to choose the page builder with which the page was created. This provides a great way to compare two identical sample pages created with different page builders.
At first glance, there are subtle differences between the template for the block editor and the version created in Elementor. Although some of the design elements may be a bit poorer for the block editor version, overall, the pages are quite similar. Even the page created in the block editor does not differ significantly in terms of design quality from the one created in Elementor.
However, when it comes to the editing process itself, using Gutenberg is unfortunately less intuitive than Elementor. The Astra theme, like most themes from the WordPress repository, is not fully optimized for the block editor. It lacks perfect style compatibility between the backend and frontend, which negatively affects the user's editing experience.
However, it should be remembered that these inconveniences apply only to the administration panel and may be inconvenient for those editing the site. As for the appearance of the site itself for users, it has been customized reasonably well. Also positive is the fact that the theme's developers only used standard WordPress blocks to create landing pages, without forcing the installation of additional block plugins.
In conclusion, despite some imperfections on the side of the admin panel, the Astra kit with block editor allows you to create a pretty solid company website. Visually, it does not differ significantly from what can be achieved using Elementor.
See also our websites created in-house or on Kadence builder
A DOM tree, or document object model, is the kind of data structure that a browser creates based on the HTML code of a page as it loads it. It's like a page mapping that the browser uses to understand and render all the elements on a page. It's like a blueprint that the browser uses to organize and present content in the browser window.
The more complex and elaborate the DOM tree is, the more work the browser has to do to interpret and render the page. This means that a larger DOM tree can slow down page loading because the browser needs more time to process all the data. That's why the size of the DOM tree matters for page loading speed, and also affects the user experience in terms of page speed. This is one of the criteria considered in the Core Web Vitals audit, which evaluates the user experience of a website.
Now let's take our two pages and focus on comparing at least one section, for example, the one with the header placed at the top of the page. One column contains the title along with a brief introduction and a button, while the other column contains the image.
At first glance, we notice a significant difference, although both sections look almost identical visually. However, the code generated by Elementor is more elaborate. Each element additionally contains two redundant divs, acting as wrappers, which is an unnecessary extension of the structure.
Compared to Elementor, the code generated by Gutenberg is simpler and resembles the one we would create on our own by hand-coding this section.
The section we analyzed shows differences in the number of HTML elements:
Gutenberg: 13 HTML elements
Elementor: 34 HTML elements
Throughout the home page section, the number of elements in the DOM tree looks like this:
Gutenberg: 283 items
Elementor: 539 elements
If we abandon Elementor in favor of WordPress' block editor, the site will be created from more simple and high-quality HTML code.
Other HTML tags, with the exception of <div> and <span>, assign meaning to individual elements on a page. This allows the content on the page to be correctly interpreted by different devices (such as screen readers for the blind) and algorithms such as Google bots.
The correct use of semantic HTML tags makes the site accessible to different groups of users, even those who cannot use the site in the standard way. This also allows programs to correctly interpret the content on the page. In addition, by using semantic tags, we gain advantages in the eyes of Google, which can contribute to better positioning of the site.
When you create a page using a page builder, you do not directly control the code generated from individual blocks or modules, but choose for yourself which of these elements you want to use. It is the decisions to choose specific blocks or modules that affect the semantics of the code that the page builder generates.
Za pomocą funkcji Kolumny możemy stworzyć sekcję, gdzie każda kolumna zawierać będzie logotyp w postaci obrazka. W takim ułożeniu obrazy logotypów zostaną umieszczone w znacznikach <div>, które są częścią struktury generowanej przez blok Kolumny.
Możemy też użyć bloku Galeria, by umieścić w nim obrazy logotypów. To spowoduje wygenerowanie listy <ul>, co lepiej odzwierciedla semantykę listy logotypów.
When you delve into Gutenberg, you will notice that the developers of this tool place great importance on creating semantically correct code.
It boils down to this:
These are elementary HTML tags, but even the more complex modules, such as Media and Text or Cover, generate very clear code.
In the case of Elementor, as far as semantics are concerned, there are no big problems here, but all semantic tags are surrounded by additional divs that act as wrappers, for example:
It's completely redundant, and that's what makes Elementor's DOM tree twice the size of Gutenberg's, as I mentioned earlier.
I encourage you to take a look at the code of the page you created with your favorite page builder. Comparing several builders in terms of code quality can shed light on the differences in their performance and quality of generated code.
The number of requests and the volume of data transferred are indicators that affect a website's performance budget. They are also important for scores in Core Web Vitals evaluation tools.
Meanwhile, if many of the requests are CSS and JS files, there is a risk that most of their content is not actually used on the site. This, in turn, lowers the rating in tools like Core Web Vitals and activates warnings such as: "Limit unused JavaScript" and "Limit unused CSS code."
The excess CSS and JS code may hide the problem of resources blocking rendering of the page, which will be signaled by a warning: "Eliminate resources blocking rendering".
The number and size of files loaded on a page are of paramount importance to its loading speed and performance in Core Web Vitals. When using page builders or all-in-one themes, which often contain redundant resources, such as those available on platforms like Themeforest, it is more difficult to get good results from Core Web Vitals tests.
Now let's take a look at the number of HTTP requests required to download all the files on our test pages. It's worth checking this especially for CSS files, JS, media, fonts and other resources.
At first glance, it is noticeable that the site using Elementor uploads twice as many files. In addition, the amount of data transferred is more than double that of the other site.
That explained, this difference is mainly due to the Elementor plugin. On the Elementor page, there are an additional 8 CSS files and 10 JS files (containing libraries such as Swiper with a size of 139 kB).
If we look only at JavaScript files, the difference in kilobytes transferred is huge - it is more than 15 times more for one of these page builders.
Now let's check how much code in CSS and JS files remains unused. For this we will use the Coverage tool available in Google Chrome Tools. You can immediately see that many Elementor resources remain unused, even though they are fully loaded on the page.
The number of database queries and their execution time affect TTFB (time-to-first-byte), which measures how long it takes for the first byte of data to arrive from the server. When we have a lot of database queries or suboptimal SQL queries, they delay the server's response. Therefore, it is important to limit the number of such queries. In WordPress, we can achieve this by, for example, removing plugins that generate database queries and slow down the site.
On our test pages we will use the Query Monitor plugin. This is a tool that allows us to easily monitor SQL queries sent to the database. It shows where these queries are coming from, such as whether they are related to a specific plugin, and allows us to locate those queries that cause delays.
Elementor in this list generates as many as 66 queries, accounting for two-thirds of the total number of database queries during the page loading process. In contrast, WordPress' built-in block editor does not generate additional queries beyond the default operations performed by the WordPress platform itself.
The WordPress block editor does not generate additional load on the page loading speed. It functions similarly to a classic editor, presenting static HTML loaded from the database at the WordPress loading stage and rendered by the theme.
Elementor is a standalone tool that, once installed and activated, becomes an overlay on the default block editor in WordPress. It comes with its own resources, such as CSS or JS files, has a unique operating logic and a dedicated team of developers who are responsible for the quality of the implemented solutions. On top of that, it also has its own business goals, which can sometimes make it a priority to maximize profits, rather than always the excellent quality of the generated code.
A great result for a site with a block editor can be even better with the selection (or self-creation) of a more lightweight theme. However, this is already a very good result, especially considering that no optimizations have yet been carried out on the site.
Abandoning Elementor in favor of WordPress' built-in editor has clear benefits, especially in the context of the relevance of Core Web Vitals results as a ranking factor in Google. In addition, the HTML code generated is decent enough that even a webdeveloper can make a page out of blocks with a clear conscience
On the other hand, Gutenberg is not focused on offering extensive style customization for each block individually, as it is not primarily a tool for creating page designs. Its main purpose is to generate HTML code. The developers of this tool focus on adhering to good web page practices. Basically, most of the HTML code produced is supposed to inherit styles from global settings, instead of being set separately for each block.
And I can imagine that for people who are unfamiliar with the principles of web development, yet accustomed to the various features offered by Elementor, the transition to something else may be difficult.
Gutenberg is constantly evolving, expanding its capabilities. Although its full potential will come to light in a few years, it currently offers quite a few features. It already allows you to create a pretty robust and, above all, fast company website.
Digital Agency Hauerpower
Copyrights 2010-2022
