Elementor vs. bricks: what’s the difference?
I now implement most of my WordPress projects with Elementor Pro*, but I’m also excited to try out new things. That’s why I’ve already implemented several projects with the Bricks Builder*.
The most striking difference: Elementor comes in the form of a plugin for WordPress, whereas Bricks is a theme for WordPress.
Elementor is a plugin
Since Elementor and Elementor Pro are installed as WordPress plugins, the page builder can be used with (almost) any theme. The big advantage here is the flexibility, the big disadvantage is that this can always lead to incompatibilities.
If you are new to creating a website, I can recommend the Hello theme from Elementor*. This theme is very slim and has almost no functions of its own. This will not negatively affect the speed of your website.
Bricks is a theme
Bricks is a theme and does not require an extra plugin. The big advantage: there can be no incompatibilities with a theme. The disadvantage: you have to create all aspects of your website with the Bricks Builder and cannot rely on the standard settings and formatting of a theme.
The winner is…
As the approach of the two opponents is so different, I give this one a draw. The flexibility of Elementor comes at the price of a disadvantage, the speed of Bricks comes with a limitation.
Elementor and Bricks: Functions and widgets
Both page builders come with a large number of widgets as standard; Elementor a little more than Bricks at first glance. But appearances are deceptive, because Elementor also has many “legacy widgets” that are outdated and therefore appear twice in the list.
The sheer number is also not very meaningful. Because each of the simpler widgets (e.g. a testimonial) can be easily recreated with the page builder itself.
Other functions that both page builders offer:
- A theme builder to create headers, footers, templates for blog posts, archives, search results, WooCommerce products, etc.
- The ability to create forms, pop-ups, mega menus and off-canvas elements.
- Responsive design, custom fonts and conditions to control the display of elements.
- A query loop builder to display collections or posts (e.g. created with ACF).
The operation of the two systems is basically identical. Both support drag’n’drop, copy & paste and allow a variety of customizations directly in the editor. For me, however, drag’n’drop feels more sophisticated in Elementor – in Bricks I often don’t find the right place and then have to move elements in the Navigator.
In Elementor you can also work without the navigator; in Bricks you cannot avoid the page structure view. This is why it is permanently displayed.
The differences between the page builders are listed below:
Elementor
Elementor has had classes on the roadmap for a long time, but they are still a long way off. This would finally allow different styles for buttons to be implemented easily and without custom CSS.
When used correctly, however, the global settings for fonts can be defined much more elegantly and centrally than with Bricks.
Bricks
Bricks Builder offers the possibility to integrate your own code directly into the builder. No matter whether PHP, CSS or JS.
In general, Bricks is much more powerful due to the use of CSS variables and CSS classes directly in the builder, but it is also more complex for beginners. Nevertheless, the global styles for headings (H1-H6) cannot be defined class-based in Bricks and must therefore be maintained twice. This is still annoying at the moment.
The winner is…
For me as a WordPress developer, the use of CSS variables and CSS classes directly in the editor is very practical, so Bricks wins here by a narrow margin.
The speed of Elementor compared to Bricks Builder
Loading time of the front end
Even if website speed is not everything (content is more important!), the loading time is also relevant for SEO. For this reason, Elementor has continuously made optimizations in recent releases to improve the loading time of the front end.
The myth “Elementor websites are slow and have a poor pagespeed score” is therefore no longer true, especially if a premium performance plugin such as WP Rocket* is used.
Nevertheless, Bricks Builder has the advantage that it doesn’t have many of the legacy issues that Elementor carries with it.
In my experience, the loading time of a website created with Bricks is therefore always better than websites created with Elementor. The HTML code is also leaner and the CSS styles are tidier.
Elementor is constantly improving here, but is in the dilemma that they also have to ensure backwards compatibility for millions of websites.
Loading time of the backend
We developers also expect a fast editor. I remember the first time I tried Bricks – I was really surprised at how fast the editor loads and how performant everything feels.
Elementor is tougher to use in the editor (although not nearly as tough as Divi).
The winner is…
There is a clear winner here: Bricks Builder.
Elementor Pro um bis zu 20% günstiger!
Ein spezielles Angebot für dich – hole dir Elementor Pro unschlagbar günstig mit dem folgenden Rabatt-Gutschein:
Accessibility: Elementor vs Bricks Builder
The European Accessibility Act (EAA) has put the focus on accessibility and Elementor was immediately penalized in the community. Bricks was and is supposedly the panacea and more “barrier-free” than Elementor*.
But that is not correct. Elementor has continuously made adjustments and improvements (as with speed), so that today there are no longer any major differences in the relevant WCAG criteria.
Because: both page builders can be used to create accessible websites if you know what you are doing. And both page builders can be used to create non-accessible websites if you don’t know what you’re doing (or if you haven’t trained your customers accordingly).
Accessibility is more than just a few ARIA roles in the HTML code… but more on that in another blog article.
The winner is…
Draw with a close tendency towards bricks. This is because Bricks makes it easier to influence the HTML structure of the website. But in case of doubt, this is not decisive for an accessible website.
Templates for Elementor and Bricks
Both page builders provide ready-made templates for websites.
In Elementor, the templates are called “Elementor Kits” and can be found in the Elementor Library. There is a large selection of very different templates available.
Only “Community Templates” are supplied with Bricks. The choice is very limited.
Fortunately, external providers step in here. For both page builders, there is a thriving market of third-party manufacturers offering templates in every conceivable style.
Elementor has the great advantage here that they have been on the market for longer. The choice for Elementor is therefore much greater.
But be careful: many of the templates still use the outdated system of “sections and columns” and have not been converted to modern containers. So before you buy, make sure that you are not relying on the outdated system.
The winner is…
Clearly Elementor. Due to the age of the editor, there are more templates that come with Elementor, as well as more third-party providers.
Extensions for Elementor and Bricks
As with the templates, many third-party providers also step in with functional enhancements. Extensions in the form of plugins are available for both page builders.
This provides functions, new widgets or templates.
As always, less is more. Always consider whether you really need the additional function or whether a standard function would be sufficient.
The winner is…
Elementor also wins here due to its age. There are many more expansions, and Bricks is catching up.
Kennst du schon das Business-Membership für alle WordPress-Professionals?
Workshops, Live-Q&A’s, Austausch mit anderen Webdesigner:innen, Co-Working und natürlich professioneller Support für dich. Das sind die Website Heroes.
Elementor and Bricks Builder for developers
As a WordPress programmer, I naturally pay particular attention to the functions that a page builder provides for developers like me.
In general, it can be said that Elementor* is more suitable for “normal” users and that Bricks focuses more on developers. Without a basic understanding of CSS Flexbox, CSS Grid, CSS variables and CSS classes, developing a website with Bricks is very tedious.
Beginners will certainly reach their goal more easily and with less frustration with Elementor.
Elementor for developers
Elementor offers extensive documentation in the developer portal as well as bug reports on Github. Releases are made available in advance as beta versions and there is a public roadmap. Elementor attaches great importance to ensuring that new versions are backwards compatible.
Although some of the elements have been in “planning” status for some time and are not moving from the spot, on the whole the development process is very transparent and involves the developers.
It is very easy to program your own widgets for Elementor or to extend Elementor elsewhere.
Equally important: Elementor is in an optimal financial position and has more than 400 employees. As a WordPress agency, you get a partner on board who will be on the market for even longer.
However, Elementor* has recently been focusing too much on other products such as hosting, Elementor AI, Image Optimizer or the Site Mailer. These are all products that generate ongoing revenue, but are clearly aimed at end customers and not developers .
Bricks for developers
Bricks Builder also has extensive documentation that developers can access. Bugs and questions are answered in the very active forum. New, major releases are announced in advance, while smaller releases appear without public beta testing. Backwards compatibility is often a problem – it may therefore be necessary to make adjustments to the website after an upgrade.
The public roadmap is more detailed than with Elementor and it is similarly easy to extend Bricks and program your own widgets.
Many things for which I use my own CSS or short code snippets in the child theme in Elementor can be solved directly in the editor in Bricks. However, some things work out of the box with Elementor, whereas with Bricks they have to be programmed manually.
Unfortunately, it is completely unclear how big the company behind Bricks is and how it is positioned financially. Unfortunately, the lifetime deal that is still in place does not exactly speak for competence in terms of finance. We can only hope that Bricks does not suffer the same fate as Cwicly.
The winner is…
For me, Elementor is a very close winner in this category. Bricks is more flexible and closer “to the standard” (CSS variables, classes, etc.), which is practical and more flexible for programmers. However, I also want to choose a company that has a sustainable business model and that I can work with for years to come.
The prices of Elementor and Bricks Builder
With a professional website, the annual license costs are usually not so significant, but customers often haggle over every euro. Interestingly, the license models and prices of Bricks and Elementor are similar, but differ in detail.
Costs of Elementor Pro
As you can see, the annual prices at Elementor are somewhat hidden – the monthly price, on the other hand, is irrelevant in practice. Elementor’s aim here is to emphasize the comparability (and alleged attractiveness) of its own hosting platform. But I think that doesn’t work and is confusing.
Also interesting with Elementor: the “Essential” plan for € 59/year does not include some functions (Popup Builder, Custom CSS, WooCommerce).
Elementor always offers discounts, for example on Black Friday, at the turn of the year, for your birthday, etc.
Elementor offers you a 30-day money-back guarantee.
So you can safely try Elementor*.
Cost of bricks
The prices for bricks are clearly structured. The license for a single website is higher (79,- versus 59,-), but you get the full range of functions and not just a limited version.
From 3 websites upwards, the prices for Bricks are consistently cheaper than for Elementor, which will be particularly relevant for WordPress agencies.
Unfortunately, Bricks offers a lifetime deal – which is beneficial for you as a client or agency, but undermines Bricks’ ongoing funding. Frankly, I see that as a minus point – like free plugins in general.
Bricks offers you a 60-day money-back guarantee.
You can also safely try out bricks.
The winner is…
Bricks offers the lower prices and does not try to hide the true prices and features. There are also no discount campaigns at Bricks, which is openly communicated. Bricks is therefore the winner in this category.
Elementor Pro or Bricks Builder – which page builder should you use?
This question is not easy to answer, as in my experience both page builders have a different target group:
- The focus of Elementor is on making it as easy as possible for beginners to create their own website. The fact that the development is open and structured is more of an accessory and a coincidence.
- The target group of Bricks on the other hand, are developers and agencies. The page builder is more technical and requires more understanding of website techniques to achieve the goal.
In my opinion, it depends on how technically adept you are. Despite the good documentation and the forum, Bricks can be overwhelming and frustrating for beginners.
Developers with a good basic knowledge of HTML and CSS, on the other hand, will have more fun with Bricks, as they can work with the familiar techniques rather than in a very abstract way.
In the list above, the two competitors have nothing in common: you won’t go wrong with either page builder.
Do you still have questions about Bricks or Elementor (Pro)?
Feel free to leave me a comment.
