With Elementor or other page builders in general, you can create a beautiful website without having to deal with CSS code. However, it’s impossible to create all of your website content 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 that 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 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 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.
The Bottom Line
Elementor is a flexible page builder that is fully compatible with the WordPress core. You can even use an Elementor widget on your blog posts or Gutenberg-powered pages via the Elementor Blocks for Gutenberg Plugin. It is an official plugin from Elementor.
Since you can use any Elementor widget on Gutenberg, there is no need to install extra plugins to add elements like ToC, contact form, etc., as Elementor has native design elements to create one.
5 thoughts on “How to Use Elementor Widgets/Templates as Gutenberg Blocks”
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?
Anybody knows how to edit an Elementor Global Widget that has been added on Guttenberg? HELP!!!
Hi Julio,
Simply edit the associated global widget. You can refer to this post to learn how to edit a global widget https://www.wppagebuilders.com/use-global-widget-elementor/
The new settings you applied to the global widget will apply to any location it added, including Gutenberg.
Once the global block inserted in Gutenberg, is it possible to change it (text, link, etc) directly in Gutenberg, without changing the model of the global block?
Hi Kambro,
I’m afraid it is not possible to change the content of a global block directly in Gutenberg.