Gutenberg vs Elementor?


Gutenberg vs Elementor? What do you think about Elementor Blocks for Gutenberg from a code perspective? Is it better to use templates created in Elementor and insert them in Gutenberg editor or is it exactly the same if you would use Elementor and design a page with it?

Gutenberg vs Elementor

What if you use non-elementor blocks in Gutenberg but let’s say other pre-made blocks? What is the difference from the code perspective? I am just curious to understand as I know that Elementor adds a lot of HTML and CSS which is not always good for performance and people say using Gutenberg block editor WordPress is much better.

Elementor vs Gutenberg

Elementor vs Gutenberg?

What would you do for example if you would like to design a single post template or post archive cards? What about Elementor in these cases? As I understand it overrides parts of the activated theme and adds a lot of CSS and JS. Isn’t it bad from performance and code perspective? There is Oxygen builder which is said to be really good and provides nice code, but I don’t like that it disables the theme completely. I like e.g. the WooCommerce functions of OceanWP that I don’t want to loose.

I’ve also read, using Gutenberg Blocks is better than building with Elementor. Why is this better from code perspective?

solved 0
Elementor Page Builder 10 months 2020-06-23T20:35:05+00:00 8 Answers 0

Answers ( 8 )


    I optimize WP sites for speed and better load time on a daily basis and Elementor based sites are crazy slower, and working with it is not my cup of tea. Beaver Builder is so much better, faster and produces superior code. Elementor is too slow, really hate sitting and waiting. Beaver Builder is much faster and time is money.
    Beaver Builder lets you design pages and BB Themer lets you design template parts like header, footer, single/archive post layout, etc. If you want to be able to design both pages and template parts you need both Beaver Builder and Themer.
    Beaver Themer allows you to use Beaver Builder to build layouts in areas you can’t usually with the builder alone. so normally the builder handles the area between your header and footer on pages or posts only. With Beaver Themer you can now use the builder to build out your headers, footers, archives (like blog pages), and posts (like blog posts). There’s a whole lot of other stuff and that’s really a simplified description but basically it allows you to use the builder to design 100% of your site top to toe.
    If you have more than one site to maintain, getting a Themer license will be an immediate payout. Everything is so much simpler and faster, you’ll have things done in less time. This shouldn’t mean you charge less to your client, just make sure they know you use the right and some of the best tools.

    Get Beaver Builder


    Based on my professional experience, when I build sites, I exclude Elementor from posts be it visually, while formatting or by using Gutenberg to include portions of Elementor sections/blocks on the content, this to keep it as straightforward as possible, and distraction-free.

    The way I work is to keep Gutenberg as clean as possible. If there is the need to add blocks to illustrate a paragraph or add something else that requires formatting, or a visual approach, I use something like EditorsKit which extends the functionality of the editor.

    Concerning Elementor, I used it only and exclusively to build the frontend visual when needed. Currently, I stopped using Elementor and started using Beaver Builder as Beaver Builder is far better than Elementor for speed and SEO.

    An excellent host, caching plugin, specific tweaks, etc. always helps to keep the site running with a good load, it all depends on how you approach it. My combo is Beaver Builder with Astra theme including the ultimate addons for beaver builder and ultimate addons for Gutenberg.

    I do design the post visual using Beaver Builder if needed and add the Text Widget that pulls the content published directly to the visual without interfering with the content, this allows me to edit the content on the backend, normally, using Gutenberg without Elementor messing around. Elementor as any other builder, inject CSS and JS, as well as fonts, etc and the best solution is to optimize it, for that, I use a combination of Code Snippets, alongside WP Rocket to optimize the delivery. Oxygen is quite good, however, if you plan using OceanWP, the builder disables it as it works on a Themeless way, meaning you cannot make use of OceanWP features, besides that, Oxygen is not that user friendly as it aims to developers, you will need to know CSS, to begin with, to accomplish what you need. OceanWP Theme Panel offers the ability to disable what you do not need, and Beaver Builder has a feature NOT to override the theme’s styles that comes in handy.

    Things depend on how you approach things if you set the theme with a certain font and use on your post Beaver Builder with 3 additional fonts, then you will have to optimize the delivery of those fonts since they would originate from Google, even thus you can host it locally. Best way to decide either to use or not Elementor is not to be impulsive, you may start by exploring the theme and see what it offers, and then decide if you want to add bits, or a full custom blog post with Elementor. Gutenberg blocks often use the core of WordPress to provide features, meaning there are not often additional files, while Elementor pulls libraries it needs, for instance, to load sliders, animations, etc. You can disable Elementor default styles by heading to Elementor > Settings and check both Disable Default Colours and Disable Default Fonts.

    I hope this helps.


    It depends on your own goals for the site and what works well for you. If you can build what you need with the Gutenberg block editor, then that’s great! Use it. If you find it easier, faster, or you get results you’re happier with by using a page builder, then use that. Both are good tools, but it depends on what you’re looking for.
    As far as Elementor Pro or Beaver Builder or Divi – you can not only style individual pages but you can also style and edit the header, footer, sidebars, etc. You can essentially or completely create your theme with those premium page builders.


    Beaver Themer for header and footer, archives and post templates, then gutenberg to build out the content portion. Win win.

    I like full control over my templates/layouts and just am super comfortable with the BB interface over the years. Never locked into one look.

    I absolutely LOVE integrating gutenberg for post creation within my beaver theme. Basically same thing you would do for your elementor layout. I am really excited to see this come into a better functionality.


    +1 Gutenberg for creating clean and attractive content. Elementor is pretty heavy and creates too much unnecessary code… Also, Elementor has issues with some third party SEO plugins. I use Gutenberg + Ultimate Addons for Gutenberg (Brainstorm Force) for writing blog posts.
    I am currently in the process of ditching Elementor and going Genesis + Stackable. The way I see it, in a few years the Genesis blocks will be so good there is no need for complex, resource-heavy page builders. Easier for every client. But I understand complete I can only do that because I have a developer in my team. If you don’t page builders are way easier to build a website.

    Best answer

    In our company, we’re using both Elementor and Gutenberg together. And we find it quite beneficial indeed. As we’re making addons for Elementor so it’s pretty obvious that we used to explore every arena and new features of Elementor continuously. Moreover, there is no doubt Elementor makes the development process easier than ever. But while it comes to update content on page/post Gutenberg introduced a smarter way indeed!
    So, for me debating on Gutenberg vs Elementor is like comparing two superheroes. There is no clear winner in this contest. Both of them have significant merits rather than demerits. 


    We are moving to Gutenberg (Default Editor). Elementor is bloated with lots of features that I don’t need.
    I moved from Elementor to Beaver Builder recently, and what a relief!
    I hated Elementor as it feels more like a toy than a serious web development tool, it limits you in so many ways.
    Now I Mostly use Beaver Builder when doing WordPress with a page builder.
    I think it’s a bit cumbersome to work (as a dev) with Gutenberg.
    I prefer a headless CMS in that case. CPT UI and then export the code to (if necessary) continue to work with the CPT by writing code.

    Gutenberg blocks editor vs Elementor:

    • Use Beaver Builder instead of Elementor for better SEO and Speed.
    • Use Gutenberg for the post layout. Try to move smaller websites builds to full Gutenberg.
    • For websites with less advanced custom field requirements use Pods plugin for CPT (and custom fields).
    • For more complex implementations where use ACF Pro,  Use CPT UI plugin for registering custom post types.



    Why Gutenberg is better than page builders?

    I prefer simple sites and find all the element choices available in the page builders more confusing than helpful. Today I also found that I can speak into a voice recorder, transcribe it to text with Dragon, and the resulting file will drop right into Gutenberg. Each paragraph becomes a block. Grammarly runs fine in the editing window. So I can speak a draft and edit right on the page or post.

    As time goes by the Gutenberg editor and associated plugins will be able to achieve a similar layout style to your blog posts as Elementor can now. it’s actually pretty close now if you take the time to learn it and are willing to learn to create your own blocks.

    One day i said that page builders will die cause they don’t give a dice for the bloat and people that ask for cleaner HTML. And now here we are. to see page builders to be replaced slowly by Gutenberg blocks.

Leave an answer

What is the capital of Egypt? ( Cairo )