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.
The form below is an example of the global widget we have.