How to Display Gutenberg Blocks in Elementor?

If you use both Gutenberg and Elementor to build your WordPress site, you might want to combine their features. Gutenberg works with blocks to create content, while Elementor provides more control over page layout. 

For a comparable structural decision inside header building specifically, see the complete guide to building an Elementor header.

There’s an existing plugin named Elementor Blocks for Gutenberg. It enables you to insert Elementor designs into Gutenberg, but it doesn’t support adding Gutenberg content into Elementor.

Sometimes, you need a specific Gutenberg block in your Elementor design, like an RSS feed block, which Elementor doesn’t offer by default. This guide will show you how to add Gutenberg blocks into the Elementor editor, making your site-building easier and more flexible.

In this article, you will learn how to display Gutenberg blocks in Elementor with a step-by-step tutorial.

How to Show Gutenberg Blocks in Elementor?

Luckily, you can show Gutenberg blocks within Elementor in just a few simple steps. By using a plugin like Nexter Blocks, integrating Gutenberg blocks into your Elementor layouts becomes easy.

Step 1: Install Nexter Blocks Plugin

Start by going to Plugins → Add Plugin in your WordPress dashboard. Search for Nexter Blocks and install them. 

After the installation, make sure the plugin is activated to use its features.

Step 2: Build Content Using Patterns

Next, from the WordPress admin menu, find Nexter Blocks and select Patterns. 

Click Add Pattern to create the content you want to show inside Elementor. Use Gutenberg blocks to design this content.

For example, add blocks like an RSS Feed or any other block you need. When done, publish the reusable block.

You can enhance your content by adding more elements using Gutenberg blocks. 

Nexter Blocks offers a comprehensive collection of blocks specifically designed for the Gutenberg Block Editor.

Step 3: Get the Shortcode from Your Pattern

On the page listing your Patterns, you will see a shortcode assigned to each block. Copy the shortcode for the block you created. 

This shortcode connects your Gutenberg block content with Elementor.

Step 4: Insert the Shortcode into Your Elementor Page

Open the Elementor page where you want the Gutenberg block to appear. Insert a shortcode widget or text editor widget, and paste the shortcode you copied in the previous step. 

Once added, save or update the page.

Your Gutenberg block content will now display inside the Elementor design. This method lets you use the flexibility of Gutenberg blocks while working within Elementor pages.

FAQs on Displaying Gutenberg Blocks in Elementor