How to Use Elementor Blocks in Gutenberg? (Easy Way)

Over the past few years, Gutenberg has gained huge popularity among WordPress users as the default block editor. Still, it’s hard to imagine leaving behind a reliable visual builder like Elementor, which offers unmatched design flexibility. So, why not combine the strengths of both?

That’s exactly what the Elementor Blocks for Gutenberg plugin makes possible. With it, you can insert Elementor-designed templates and sections, such as image grids, call-to-actions, navigation menus, tabs, pricing tables, and more, directly into the Gutenberg editor. This way, you enjoy Gutenberg’s streamlined editing experience while keeping the creative freedom of Elementor.

In this blog article, we will show you how to use Elementor blocks in Gutenberg websites. First, we’ll focus on basics: 

What are Elementor Blocks for Gutenberg?

Elementor Blocks for Gutenberg is a free plugin, published by Elementor itself. In short, it allows you to insert Elementor-designed templates in the Gutenberg editor. Basically, it bridges the gap between Gutenberg’s block-based editing and Elementor’s advanced design capabilities. 

Therefore, one can enjoy the simplicity of Gutenberg while still leveraging Elementor’s creative freedom. Now, focusing on the flexibility of using this plugin, it lets you bring Elementor templates into Gutenberg in one click. You can preview a template before adding it and access it directly in the Elementor editor if there are any changes to be made. Another good thing is that this plugin has multilingual and RTL support.

So, now you know the purpose of using Elementor Blocks for the Gutenberg plugin. Next, you will learn how to use this plugin to use Elementor templates in Gutenberg.

How to Use Elementor Blocks in Gutenberg?

In this stage of our guide, you’ll see how to use Elementor blocks in the Gutenberg editor.

To install and activate the Elementor Blocks for Gutenberg plugin, log in to your WordPress dashboard and follow Plugins > Add New. Now, you’ll be on the WordPress plugin repository, from here search for the Elementor Blocks for Gutenberg. 

Bemærk det you will not be able to install and activate this plugin if you do not have the Elementor plugin installed on your website.

Additionally, this plugin is specifically designed for Elementor users. Therefore, proceed with installing the Elementor plugin on your site.       

After activating the Elementor Blocks for the Gutenberg plugin on your WordPress site, simply open a new or existing page/post and start editing it in the Gutenberg editor. 

Then, search for the Elementor Blocks, which is named “Elementor Library,” and click on it or drag and drop it on the block editor area. 

Now, the Elementor block loads with two options: first, you can create from scratch by clicking the “Create a new one” option, or you can choose an existing template from the dropdown of template options. 

If you choose to create from scratch option, you’ll see the Elementor builder interface load in another tab of your browser/, and you will find all the Elementor builder features depending on the free or pro version you’re using. 

Even if you’re using an Elementor addon like ElementsKit, you can use its features and functionalities as well. 

So let’s begin your Elementor block building journey. As you’re in the Elementor editor interface, drag and drop Elementor and ElementsKit widgets within the container and complete your design. If you’re a Gutenberg user and using Elementor for the first time, you can read this Elementor user guide. 

However, there’s an easy way!

You can skip designing from scratch, but you will still create your Elementor block templates in your personalized way. Just choose an Elementor block template. 

Elementor block templates are generally part of a pre-made page or full website template. You can find it in the same way you follow to add an Elementor website template. 

Simply click the “📁” Folder icon within the Visual Builder interface, and a new screen will appear with the Elementor template library. Here, select the Blok option. You’ll see a huge library of block templates. 

So, just insert one that matches your design. And once an Elementor block template loads on the builder interface, you can customize it by tweaking some content or color. 

Plus, for some advanced and trendy designs, you can also check for the ElementsKit block collection. Read this blog for a detailed guide on using Elementor templates. 

Now, after adding a template or finishing your design, enter the Beholder Settings. Then, click the Save as a template option, enter the template name, and choose where to store it. And, hit the Gemme knap. 

So, once your design is saved successfully, it will be available in the dropdown of the Elementor Block Template option. Sometimes, you may need to reload your Gutenberg page to see your added template in the dropdown. 

In our case, we’re designing a Blog Category template. This template will be placed on blog pages to allow visitors to navigate the blog categories easily. So, now you know how to design and upload your template for Elementro blocks. 

But we’re not finished yet; we can still edit our added template anytime we want. Just open the block settings bar, and there will be a “Edit Template with Elementor” option. Clicking it will take you to the Elementor builder editor and allow you to customize it. 

Noter det det “Edit Template with Elementor” option will be visible only when you select a template from the dropdown. 

Another handy option is the ‘Hide Preview’ toggle. Enabling it hides the template preview, making the WordPress editing interface cleaner and easier to work with.

So, your Elementor-powered template is successfully inserted in the Gutenberg editor. 

Afslut!

Now, we know a flexible way to use Elementor blocks or templates in Gutenberg. For beginners, it is easy to go for Elementor templates rather than creating a new one from scratch. Elementor itself provides over 300+ pre-designed blocks & 100+ pre-designed pages. If you’re not satisfied with this collection, consider a third-party source like ElementsKit. It provides around 400 blocks or sections for free and another 500+ blocks or sections in its Pro version.