How to Display Gutenberg Blocks in Elementor? [Tutorial Included]

Want to display Gutenberg Block Template content inside Elementor Editor?

You’re probably familiar with the Gutenberg editor and the Elementor page builder. Gutenberg is the default WordPress editor that allows you to create content using blocks, while Elementor is a popular page builder that lets you design custom layouts without coding. 

There’s already a plugin called Elementor Blocks for Gutenberg. This plugin allows you to add Elementor content to Gutenberg but not vice versa.

But why would you want to add them in the first place? Isn’t Elementor more powerful? We had this case where we wanted the RSS feed block, as Elementor does not have an RSS Feed widget.

Similarly, there can be multiple reasons why you wish to render Gutenberg Block in Elementor. 

Let’s find out how.

Table Of Content

Steps to Display Gutenberg in Elementor:

Fortunately, it’s possible to display Gutenberg blocks in Elementor with just a few steps. Using a plugin – The Plus Blocks for Gutenberg, you can easily integrate Gutenberg blocks into your Elementor designs.

Step 1: Install The Plus Blocks for Gutenberg

To Install The Plus Blocks for Gutenberg, click on PluginsAdd New and search for ‘The Plus Blocks for Gutenberg’ and then install this plugin.

Install the plus blocks for gutenberg how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor

Step 2: Create the Content in Reusable Blocks

Then, from the admin sidebar, hover on The Plus Settings from The Plus Blocks for Gutenberg and click Reusable Blocks.

Create the content in reusable blocks how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor

Then click on the Add New button and create the content that you want to render on the Elementor Page.

Let’s add the RSS Feed block, like in my case, and then publish this.

Adding rss feed how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor

After this, publish the content. You can add additional content if you want using Gutenberg blocks here. The Plus Blocks for Gutenberg comes with a wide range of block collections for the Gutenberg Block Editor.

Step 3: Copy the Reusable Block Shortcode

Then, on the Reusable block page, you will find a shortcode for every template.

Copy the reusable block shortcode how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor

Simply copy this.

Step 4: Paste the Shortcode in the Elementor Page

Open the Elementor page where you want to add the Gutenberg block content, and then paste the shortcode you copied above on the page.

Adding shortcode in elementor how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor

That’s it, and you’re done.

This blog covered how to use Gutenberg blocks in Elementor, I hope it was helpful.

20 checklist for wordpress site maintenance how to display gutenberg blocks in elementor? [tutorial included] from the plus addons for elementor
Do you Manage WordPress Websites? Download Our FREE E-Book of 20+ Checklist for WordPress Site Maintenance. ​

    FAQs on Displaying Gutenberg Blocks in Elementor

    1. Can I use any Gutenberg block with Elementor or only specific ones? 

    You can use any Gutenberg block with Elementor to add content to your pages and posts. You can choose from the blocks that are available in the Gutenberg block library and insert them into Elementor using The Plus Blocks for Gutenberg plugin.

    2. Is it possible to display a Gutenberg block in Elementor?

    Yes, it is possible to display a Gutenberg block in Elementor:
    1. Install The Plus Blocks for Gutenberg plugin.
    2. Create a reusable block in Gutenberg.
    3. Copy the shortcode for the reusable block.
    4. Paste the shortcode into the Elementor editor using the Shortcode widget.
    That’s it!

    3. Is it possible to display Elementor Widgets in Gutenberg Editor?

    Yes, it is possible to display an Elementor Widget in Gutenberg Editor using the Elementor Blocks for Gutenberg plugin. You can do this by creating a template in Elementor and then importing it from the Elementor Library in Gutenberg Editor.

    All-in-One Elementor Addon with 120+ Elementor Widgets
    Get Free 25+ Secrets to Make Elementor Website Faster [Guaranteed Results]

      Subscribe to our YouTube Channel for Elementor Tutorials
      New Video Every Week!
      X