Cyber Monday Sale

Save 30% on any PublishPress purchase with this coupon:

CYBERMONDAY30

Buy Now

How to Show Gutenberg Blocks in Elementor

Show Gutenberg Block Elementor

Both the and are excellent ways to build a WordPress website. We recently checked the numbers and found that these are the two fastest growing options for WordPress sites.

However, in most situations, you need to choose either Gutenberg or . The two systems are not very compatible with each other.

So we considered it a challenge this week when a PublishPress customer asked us if they could use the PublishPress Blocks plugin inside pages built with Elementor. After some research, we found that this is possible. I'm going to show you how to insert any Gutenberg block into Elementor layouts.

The example I'll use in this tutorial is inserting the Login / Register Form block.

Plugins Elementor Reusable
Plugins Elementor Reusable

Now that we have the plugins ready, our next step is save the Login / Register Form block as a reusable block.

  • Go to “Blocks” then “Add New” in your WordPress admin menu.
Add New Block
Add New Block
  • Give a name to your reusable block. In this image below, my title is “Login Block”.
  • Add the block that you want to use inside Elementor. In this case, I'm choosing the Login/Register Form.
Reusable Block Login
Reusable Block Login
  • On this screen, make any changes you want to your block. Change the settings, colors, and other block options:
Customize Reusable Block
Customize Reusable Block
  • Click “Publish” and return to the “All Reusable blocks” screen.
  • Find your new reusable block and copy the new shortcode.
Block Shortcode
Block Shortcode
  • Go to edit a post or page that is built with Elementor.
  • Find the “Shortcode” element and add to your layout.
  • Enter the shortcode you copied a few moments ago. Your Gutenberg block will appear inside the content. Don't worry if the appearance isn't 100% perfect.
  • Click the green “Apply” button.
Add Shortcode
Add Shortcode

Click “Publish” and view your content. You'll see that your Gutenberg block is displayed inside Elementor!

Block In Elementor
Block In Elementor


Leave a Reply

Your email address will not be published. Required fields are marked *

Professional publishing plugins for WordPress! Get PublishPress

  • SUBSCRIBE TO OUR NEWSLETTER
  • SEARCH THIS SITE