How to Use Elementor Widgets/Templates as Gutenberg Blocks

Updated: March 25, 2022

With Elementor or other page builders in general, you can create a beautiful page on your WordPress site without having to deal with CSS code. However, it’s impossible to create all of your website contents with Elementor. Especially if you run a dynamic website such as a blog or news portal. You keep needing Gutenberg — the default editor of WordPress — to write the articles.

As you know, Elementor comes with a bunch of unique widgets. The good news is, you can use an Elementor widget on the Gutenberg editor as a block. This is great if you want to add a visual content — such as pie chart — or other types of content in a unique way in your article. In addition to widget, you can also use an Elementor template as a Gutenberg block.

Here are the steps to use an Elementor widget/template as a Gutenberg block.

Step 1: Install the Elementor Blocks for Gutenberg plugin

Before being able to use an Elementor widget or template as a Gutenberg block, you need to install the Elementor Blocks for Gutenberg plugin first. It is an official plugin developed by the Elementor team, aiming at helping you to get the most out of Elementor on your WordPress site.

To install this plugin, go to Plugins -> Add New and find the plugin via the search box. Click the Install Now button to install it on your WordPress and activate it immediately once installed.

Step 2: Create a global widget/template

Once the plugin is installed, you can start creating a global widget or template you want to use it as a Gutenberg block. Please note that the global widget is only available on the Elementor Pro. So, if you use Elementor Free, you can only use an Elementor template as a Gutenberg block.

  • Creating an Elementor template

To create a new template in Elementor, go to Templates -> Add New.

Select the type of template you want to create and give it a name. Click the CREATE TEMPLATE button to start creating.

On the next step, you can choose whether to use a template offered by Elementor or create the template from scratch. Once the template is done, click the arrow button next to the PUBLISH button on the bottom side of the left panel and select Save as Template.

You will be asked to give your template a name once again. Simply type your preferred name and click the SAVE button.

  • Creating an Elementor global widget

In Elementor, a global widget is a widget that has been customized. You can use a global widget every time you want to create a new page with Elementor. Global widget is great if you want to use the same customized widgets for different pages since you don’t need to make the settings from the beginning.

To create a global widget, you can create a new page (Pages -> Add New) and edit it with Elementor. Or, you can also edit an existing page. On the Elementor editor, add a widget you want to make it as a global widget.

Customize your widget. Once done, right-click the widget on the Navigator and select Save as a Global.

On the next step, you will be asked to give your global widget a name. Enter your preferred name and click the SAVE button.

You can see the global widgets you have created on the Global tab on the left panel on the Elementor editor.

Alternatively, you can go to Templates -> Saved Templates. Click the Global Widget tab to see your global widgets.

Step 3: Use the Elementor global widget/template on Gutenberg

Once done with the global widget or template, you can start using it on the Gutenberg editor. To do so, create a regular post or page in WordPress (Posts -> Add New). Add a new block by clicking the plus button and select Elementor Library.

Select the global widget/template you want to use from the dropdown menu. Wait a moment until Elementor is done loading the global widget/template and it will be added to your post.

This page may contain affiliate links, which help support WP Pagebuilders. Learn more

1 thought on “How to Use Elementor Widgets/Templates as Gutenberg Blocks”

  1. Anybody know how to do the opposite of this, use an Elementor Widget to render out Gutenberg blocks? I know we can do it in PHP with parse_blocks() and render_blocks() but has anyone already made an Elementor Widget for this?


Leave a Comment

Pin It on Pinterest

Thanks for commenting

Help us grow by sharing this post with your friends!

Join 1,000+ WordPress users receiving tips and insights on creating on WordPress with Elementor.

Creating with WordPress?​

Subscribe and join 1,000+ WordPress users receiving tips and insights on creating with WordPress in the no-code era. At WP Pagebuilders, we write about the following topics a lot.