Learn how to include Elementor Blocks and templates within the Gutenberg editor using the Gutenberg Elementor plugin in this article.
If you use the Elementor page builder plugin, you might be looking for an option to make it work with the default Gutenberg editor in WordPress.
Or maybe you are simply confused about how both of them work together?
How Elementor works with Gutenberg?
Considering that both are page builders powered by blocks, it’s easy to get confused about how they work together.
Think of it this way – Elementor lets you build main page layouts, including the individual blog page layout, while Gutenberg lets you add blocks and edit content for what goes inside that page layout.
For bloggers and content creators, Gutenberg might still be an effective solution to edit the content on the blog posts.
Although you could edit and build any page/post entirely on Elementor, this might be time-consuming and you might want some form on consistency across your blog posts.
Recommended Solution: Design a blog page layout with Elementor and continue editing your blog posts in Gutenberg.
Sounds simple, right?
Now, the confusion and complexity begins when you start thinking about adding Elementor widgets/elements within your blog posts.
Well, the obvious solution is to edit the entire post with Elementor and add the widgets that you want. This makes the post editable entirely with Elementor and you will have to do the same every time.
What if you want to retain the option to edit in Gutenberg and still include Elementor blocks and templates?
In such cases, the Gutenberg Elementor plugin which enables you to add blocks within the editor might be the solution that you are looking for.
In this post, we will further look into how you can enable the plugin to work inside of your Gutenberg editor.
Gutenberg Elementor Blocks Plugin
Elementor has officially released the Elementor Blocks for Gutenberg plugin which enables you to do the same – insert Elementor blocks in the default Gutenberg editor.
Here’s how you can use the plugin.
How to use Elementor Blocks within Gutenberg?
- Install and activate the Elementor Blocks for Gutenberg plugin.
- While in Gutenberg editor, click on Add sign and search for ‘Elementor Library’.
- Select an existing template from the Elementor library or create a new one.
- The Elementor template should now be inserted in your Gutenberg editor.
Have you upgraded to Elementor pro yet? You can experience the full power of Elementor with Pro version which allows you to quickly insert hundreds of beautifully crafted templates. Check out Elementor Pro features for the pro version of the plugin. See our Elementor resources page for tools and other resources to make most of the page builder.
Follow the above instructions with screenshots and additional details below.
Step 1: Install and Activate Official Elementor Blocks for Gutenberg
You can install the latest version of Gutenberg Elementor blocks plugin directly from the official repository.
Search for the plugin from within your WordPress dashboard.
Plugins > Add New > Search
Once installed, activate the Gutenberg Elementor blocks plugin for your website.
Step 2: Search for ‘Elementor Library’ in Gutenberg Blocks
Back in your Gutenberg editor, when you want to add blocks, search for the ‘Elementor Library’ block.
The above plugin has added the Elementor blocks to Gutenberg and made it similar to searching and inserting any other Gutenberg block.
Step 3: Choose an existing template or create a new Elementor template
You can choose to insert an existing template or create a new one from this window.
Add the template is now within your Gutenberg editor.
Video Instructions to add Gutenberg Elementor Blocks
If you find it easier, watch this video below to see how you can use Gutenberg Elementor blocks.
Note: The plugin supports multiple languages and with their integration of RTL and multi-language support, you can easily get a translated panel for your Elementor blocks.
Your initial confusion should have now cleared away after seeing Elementor widgets within the Gutenberg editor.
Use Cases of Elementor Blocks within Gutenberg
So, why would you use Elementor blocks inside Gutenberg when you can do everything (and arguably more) with just Elementor?
As we discussed initially, this makes it easier to keep Gutenberg for the main editing experience.
Few use cases where this can be important include;
- Adding CTAs that you have designed in Elementor within your post.
- Inserting complex blocks such as Pricing Table in your post or page.
- Including any reusable blocks designed with Elementor inside blog posts and pages.
- Inserting any Elementor specific blocks without having to fully edit with Elementor.
Gutenberg Elementor FAQs
Let’s look into some of the most frequently asked questions about the Gutenberg Elementor combination.
-
Can you use Elementor blocks inside Gutenberg?
Yes, you can use Elementor blocks and templates inside Gutenberg by installing a plugin.
-
Do I have to choose between Gutenberg vs Elementor?
No, you can use both for different purposes. While Elementor is certainly powerful and an all-in-one solution for design and editing, Gutenberg is faster and simpler for editing and publishing posts.
-
Will Gutenberg replace Elementor Plugin?
As of now, Gutenberg is more of a content editing tool that enhances the WordPress experience. Although both Gutenberg and Elementor offer blocks based experience, they have different strengths.
-
What does Elementor Blocks for Gutenberg plugin do?
The plugin allows you to easily insert hundreds of pre-designed Elementor blocks within your Gutenberg editor. This can be useful to insert blocks such as contact form, subscription form, pricing table etc when creating posts with Gutenberg editor.
Gutenberg Vs Elementor?
As we considered how to make the best use of Elementor within Gutenberg, I want to briefly touch on the “Gutenberg Vs Elementor” discussion.
While the topic can be a much longer post on its own, I don’t think they should be looked like one or the other option.
Elementor is certainly a more powerful option as of now with complete capabilities of adding templates and blocks. It can be taken as an all-in-one solution to design templates and edit content in WordPress. (Check out Elementor Pro and see why it’s worth upgrading. )
Gutenberg, however, is a new and evolving editor that replaces the previous WordPress editor and enhances the default editing experience. It can definitely be faster to write blog posts within the native experience of Gutenberg editor.
Gutenberg and Elementor thus have different use cases and as a blogger, I like using both of them.
For some business websites, however, it’s possible that the website entirely depends on Elementor and in such cases, I don’t see any need to look for integration of Gutenberg Elementor blocks.
Are you making use of both Elementor and Gutenberg? or Do you prefer to edit entirely using the Elementor blocks and editor? Let us know!
