Elementor and Gutenberg – It’s Not Either Or

Video Version

Introduction – Why Do You Need to Use Both

In this post I want to look at using the Elementor Page Builder together with the Gutenberg block editor. Wait, what? At first glance this might seem counter-intuitive. Why would you want to use the two together?

Gutenberg is the new block editor that was added to WordPress core in version 5.0. At first glance some people wonder, “If I have Elementor then why would I ever use Gutenberg?” or “Do we still need page builders now that Gutenberg is built into WordPress?” The truth of the matter is that Gutenberg is designed for creating long text content and page builders are not. Typically, when you want to add text to a page with Elementor then you would drag in the Text Widget. This is fine for small amounts of text, but trying to compose posts with thousands of words inside of the small text widget area would be unwieldy.

Gutenberg, on the other hand, is lacking when it comes to page layout control, design elements, marketing features, and in creating interactive content. The Gutenberg column block is still under development and there aren’t really any other layout blocks. Although you could create a landing page in Gutenberg, there are no marketing features, like an email signup form. Layout control, design elements, marketing features and interactive content are all areas where Elementor excels. So, even though they are both “block based,” they are very different editors, each with their own strengths.

Elementor Blocks for Gutenberg

Would you be surprised to know that you can use Elementor content in Gutenberg? The Elementor team realized that Gutenberg was missing many of the advanced content features that Elementor offers and they went out of their way to make it easy to use the Elementor goodness in Gutenberg by creating a plugin “Elementor Blocks for Gutenberg” which allows you to use Elementor templates when creating your posts in Gutenberg.

In this tutorial, I’m going to show how easy it is to use Elementor templates in Gutenberg and highlight some of the ways that Elementor can fill the gaps in Gutenberg. Note, you will need Elementor Pro in order to save Elementor content as a reusable template.

The Elementor Blocks for Gutenberg plugin is free and is available in the WordPress plugin directory. You install it the same way as any other plugin and can find it by searching for “Elementor Gutenberg.”

Demo Setup

I created a test site using the Page Builder Framework theme and installed Elementor, Elementor Pro and the Elementor Blocks for Gutenberg plugins.

For this demo, I created pages in Elementor for a bird watching group. On the home page there is a call to action with a background video, a row showing team members, some testimonials, and a link to the contact page.

There is a simple page for signing up for the group’s newsletter. It uses the Elementor form builder to create an email signup form.

There is a landing page for the group’s online bird identification course. In addition to a large call to action, there is also a row with an option to join or, if already a member, to log in. This uses the Elementor login form widget. There is also a fun little bird ID test where you can guess the bird in the picture. This uses Flip Card widgets.

Finally, there is a landing page for an upcoming bird watching tour that includes a Google map using the Elementor map widget. You can imagine that the group would have a landing page for each tour so that members could click on the map to get directions.

Using Elementor with Gutenberg

Now, imagine that you went on the tour and it was a great success. You want to write a blog post about the group’s adventure and at the same time, use that blog post to help promote the organization. You have already created a lot of the elements that you would use in the blog post … but they were created in Elementor and Gutenberg doesn’t have those types of blocks. This is where you can use Elementor templates like Gutenberg blocks.

You can save an entire page as an Elementor template, but you can also just save a singe section as a template. For example, Gutenberg doesn’t have a block for newsletter signup, but we that created already on our newsletter page. To use that section in Gutenberg, we go into the Elementor editor, right click on the section, and then click the save to template option and give it a name.

When the Elementor Blocks for Gutenberg plugin is installed, you get a new Elementor Library block in the Gutenberg editor.

You can use this to insert the template where you want it in the post. Then select your saved template and it will render.

Summary

Here is the finished post. You can see that we were able to reuse the content to include a map, a newsletter signup form, and the flip box game.

It was easy to save a section in Elementor as a template and reuse it in Gutenberg. This gave us access to features like an email signup form, a Google map, and an interactive flip box game. It is possible to use both Elementor and Gutenberg, each for their own strengths, in a complementary manner to produce attractive and feature rich content.