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.
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 Plufin 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
Can I Use All Gutenberg Blocks in Elementor or Only Some?
You can use any Gutenberg block within Elementor. All blocks from the Gutenberg library are available. To insert them easily, you may want to use a plugin like Nexter Blocks.
How Do I Add a Gutenberg Block into Elementor?
To add a Gutenberg block into Elementor, follow these steps:
Install Nexter Blocks plugin.
Create a reusable block in Gutenberg.
Copy the shortcode for that reusable block.
Use the Shortcode widget in Elementor to paste the shortcode.
This method lets you show Gutenberg blocks inside Elementor.
Can Elementor Widgets Be Shown Inside Gutenberg Editor?
Yes, Elementor widgets can be displayed in the Gutenberg editor. You will need the Elementor Blocks for Gutenberg plugin. Create a template in Elementor, then import it into Gutenberg using the Elementor Library.
Is It Possible to Change My Existing Gutenberg Content to Elementor?
You can switch your Gutenberg content to Elementor. Keep in mind that the process depends on how complex your content is. Some elements may require extra work to adjust.
