Need to figure out how to use widgets/templates Elementor like Gutenberg blocks?
With Elementor or other page builders in general, you can create a beautiful page on your website WordPress without having to deal with CSS code.
However, it is impossible to create all contents of your Website with Elementor. Especially if you run a Website dynamic such as a blog or a news portal. You still need Gutenberg — the default WordPress editor — to write the posts.
As you know, Elementor comes with many unique widgets. The good news is that you can use an Elementor widget in the Gutenberg editor as a block. It's great if you want to add a contents visual — such as pie chart — or other types of contents in a unique way in your article.
In addition to the widget, you can also use an Elementor template as a Gutenberg block.
In this article learn the steps to use an Elementor widget/template as a Gutenberg block.
Step 1: Install Elementor Blocks for Gutenberg plugin
Before you can use an Elementor widget or template as a Gutenberg block, you must first install Elementor Blocks for Gutenberg. This is an official plugin developed by the Elementor team, which aims to help you get the most out of Elementor on your WordPress website.
To install this plugin, go to Extensions – > Add and find the plugin via the search box. Click on the button install now to install it on your WordPress and activate it immediately once installed.
Step 2: Create global widget/template
Once the plugin is installed, you can start creating a global widget or template that you want to use as a Gutenberg block. Please note that the global widget is only available on Elementor Pro.
So, if you are using the free version of Elementor, you can only use an Elementor template as a Gutenberg block.
- Create 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 on the button CREATE A MODEL to start creating.
In the next step, you can choose to use a template offered by Elementor or create the template from scratch. Once the model is complete, click the arrow button next to the button PUBLISH at the bottom of the left panel and select Save as Template.
You will be asked to give your model a name again. Just type your preferred name and click the button RECORD.
- Create Elementor Global Widget
In Elementor, a global widget is a widget that has been customized. You can use a global widget whenever you want to create a new page with Elementor. The global widget is great if you want to use the same custom widgets for different pages because you don't need to do any settings from the start.
To create a global widget, you can create a new page (Pages – > Add ) and edit it with Elementor. Or, you can also edit an existing page. In the Elementor editor, add a widget which you want to make it a global widget.
Customize your widget. When done, right-click on the browser widget and select Save as global.
In the next step, you will be asked to name your global widget. Enter your preferred name and click the button RECORD.
You can see the global widgets you have created in the tab Global enviroment from the left panel of the Elementor editor.
Alternatively, you can go to Templates – > Saved Templates. Click on the tab Global enviroment widget to see your global widgets.
Step 3: Use 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 this, create a regular post or page in WordPress (Items – > Add). Add a new block by clicking the plus button and select Element Library.
Select the global widget/template you want to use from the drop-down menu. Wait a while until Elementor has finished loading the global widget/template and it will be added to your post or page.
It's done you just use Elementor widgets or templates as Gutenberg blocks.
Get Elementor Pro Now!!!
Conclusion
So ! That's it for this article that shows you how to use Elementor widgets/templates as Gutenberg blocks. If you have any concerns about how to get there, let them know in the Comments.
However, you can also consult our resources, if you need more elements to carry out your projects of creation of Internet sites, by consulting our guide on the WordPress blog creation or the one on Divi: the best WordPress theme of all time.
But meanwhile, share this article on your different social networks.
...
