How to add Elementor Blocks in Gutenberg Editor?

Affiliate disclosure: In full transparency – some of the links on our website are affiliate links, if you use them to make a purchase we will earn a commission at no additional cost for you (none whatsoever!).

This article explains how to use the Gutenberg Elementor plugin to add Elementor Blocks and templates to the Gutenberg editor.

If you use the Elementor page builder plugin, you may be searching for a way to integrate it with WordPress’ built-in Gutenberg editor.

The new Gutenberg editor is available, and we are aware that many WordPress users find it intimidating. Naturally, Gutenberg prompts inquiries and worries, some of which are pertinent to Elementor.

How does Elementor work with Gutenberg?

ELementor theme buider- elementor vs gutenberg

Both Elementor and Gutenberg already have excellent compatibility with one another. When you are editing your site as a user, you have the ability to freely choose which editor you will use at each stage of the editing process.

Create a design for your blog post in Elementor, then implement it, and from then on, any new post you create in Gutenberg will use the design you created in Elementor. On any page you create with Gutenberg, you can also easily embed Elementor blocks.

Now, adding widgets or elements from Elementor to your blog posts is where things get confusing and complicated.

Well, the most obvious answer is to use Elementor to change the whole post and add the widgets you want. This makes the post completely editable with Elementor, but you will have to do the same thing every time.

What if you want to keep the ability to edit in Gutenberg and still add blocks and templates from Elementor?

In these situations, the Gutenberg Elementor plugin, which lets you add blocks in the editor, could be the answer you’re looking for.

In this post, we’ll look more closely at how you can make the plugin work in your Gutenberg editor.

How do I make use of Elementor Blocks in Gutenberg?

  • First, install and activate the plugin Elementor Blocks for Gutenberg.
  • Next, click the Add sign in the Gutenberg editor and search for ‘Elementor Library.’
  • Then, choose an existing template from the Elementor library or start from scratch.
  • Your Gutenberg editor should now contain the Elementor template.

Examples of How to Use Elementor Blocks in Gutenberg

So why use Elementor blocks inside of Gutenberg when you can accomplish everything (and possibly even more) using Elementor alone?

This makes it simpler to stick with Gutenberg as the primary editing interface, as we initially discussed.

Several instances where this may be crucial include;

  • Incorporate CTAs that you’ve created in Elementor into your post.
  • Adding intricate blocks, like a pricing table, to your post or page.
  • Including any Elementor-created reusable blocks in blog posts and pages.
  • Inserting any blocks designed specifically for Elementor without having to use it entirely.


With the recent release of Gutenberg, many are wondering what this means for Elementor. While it’s certainly possible to create templates and blocks in both editors (and even make use of their features), there is one huge difference: speed!

When writing blogs within WordPress’ native experience versus using an external editor like Eliestnor Pro with all its additional tools such as WYSIWYG text editing capabilities; you’ll find yourself typing much faster on average because everything just feels smoother – including links generation which has been improved.


Leave a Comment