How To Use Gutenberg With Elementor — The Right Way

Elementor is one of the most popular WordPress plugins of all-time — and for a good reason. The page builder has leveled the web-design playing field by helping legions of WordPress users to build beautiful websites, without learning how to code. But recently, the Gutenberg block editor has emerged as the new standard for WordPress content creation. Given the similarities between these two tools, many have started to wonder if Elementor is still needed. Conversely, some long-time Elementor users wonder if using Gutenberg will break their website.

As I will explain in this post, Elementor vs. Gutenberg is not an either/or proposition. Each tool has something to offer. Elementor and Gutenberg work well together when used correctly. It helps to understand each tool’s strengths and weaknesses and plan for integrating the two on your website.

In this post, I’ll share my best practices for using Gutenberg with Elementor. Follow these guidelines to get the most out of both tools while maintaining compatibility with future versions of WordPress.

Comparing Elementor with Gutenberg

Before I explain how to use Gutenberg and Elementor together, I want to take a moment to expand on each tool’s relative merits. 

There’s been some confusion about Gutenberg’s and Elementor’s capabilities and how each tool fits into a web design workflow. In my opinion, some of this confusion is due to a tendency to overestimate Gutenberg’s current state. While Gutenberg is evolving rapidly and is getting better with each iteration, it is still nowhere near as feature-rich or robust as Elementor. 

As new features like full theme editing arrive, we’ll need to re-consider Gutenberg’s place in our design workflows. But given Gutenberg’s history, these new features will likely take some time to become usable in a production environment.

Reasons To Use Elementor 

• Elementor offers more and better control over your website’s design — from single page layouts to full-site design. 
• Front-end content editing makes Elementor extremely intuitive and provides users with a real-time preview of changes. It’s pretty much what you see is what you get. Gutenberg has a long way to go in this regard.
• Elementor Pro’s Theme Builder empowers anyone to create a custom WordPress theme. And Elementor’s Display Conditions allow site owners to control where each theme part is displayed. For example, it’s a snap to build custom site sections with different headers and footers.
• Elementor’s global design settings are a central place to create and manage your site’s design settings, including color and font selection. These design settings become presets that can be accessed throughout the Elementor interface.
• Features like popups and site maintenance mode eliminate the need for additional plugins.

Reasons To Use Gutenberg

• Gutenberg is the default WordPress content editor. If you plan on using WordPress for years to come, you will be using Gutenberg. Create (most of) your content with Gutenberg to ensure forward compatibility with future versions of WordPress.
• The Gutenberg roadmap is vast and ambitious. The block editor is expanding to replace traditional sidebar widgets. Soon, Gutenberg will have theme editing capabilities. In time, Gutenberg will be even more like Elementor. 

Reasons To Use Gutenberg With Elementor

Elementor can do things Gutenberg can’t (yet). And even after Gutenberg can do those things, we don’t know how it will compare — or how long it will take to approach parity with Elementor. Most people need to build a website today, not three years from now.

Meanwhile, site designers should at least be thinking about what might happen three years from now. 

I don’t recommend creating hundreds of blog posts in Elementor. In fact, I don’t recommend creating any blog posts in Elementor. As you’ll see, it’s entirely possible to create your posts with Gutenberg and have those posts flow into Elementor designed templates. This method is the best of both worlds.

Best Practices for Using Elementor and Gutenberg Together

There’s no reason not to use Elementor with Gutenberg but do so with an eye toward the future. Someday Gutenberg may eclipse Elementor in terms of features and ease of use. Until that day arrives, this is how you can use the two together without conflict.

1. Use A Theme That Supports Elementor and Doesn’t Fight Against It

Stop looking for the perfect theme, because you’re going to build your own theme with Elementor. 

That being said, you still need a theme to get started. But instead of looking for a theme loaded with features, customizer settings, and custom templates, use a minimalist theme that gets out of the way and allows Elementor to do its thing.

Start by trying the Hello Elementor theme. It’s made by the Elementor team for use with Elementor. Expect to be disappointed when you first activate this theme. Hello is as plain as it gets, and that’s the whole point of it. 

Astra is another good choice. Astra includes more features than Hello, but most features are disabled when you first install the plugin. It’s easy to enable Astra features as you need them.

2. Use The Elementor Pro Theme Builder

Elementor’s toolbox is so exciting that it’s easy to skip over the Theme Builder and start building beautiful web pages right away. Don’t do that! Instead, spend some time learning how the Theme Builder works and begin by creating your site’s foundational elements.  

I suggest creating your site header and footer first. These are essential components of your site design that appear on every page. 

Next, create templates for posts and pages. Your Gutenberg authored content flows into these templates. It’s essential to understand the implications of this approach fully. You will be creating and editing your posts in Gutenberg while using Elementor to design the posts’ template.

3. Turn Off Elementor For Posts

As I’ve stated, I don’t think Elementor should be used to design individual posts.  

It’s not hard for an active website to generate hundreds of posts over time. Authoring individual posts in Elementor is an inefficient use of time. Doing so guarantees that you’ll need to recreate those posts if you ever choose to stop using Elementor in the future.

By authoring your post content with the Gutenberg (or Classic Editor), you’re ensuring forward compatibility. If you stop using Elementor in the future, it’s more like changing your theme than rebuilding your entire website from scratch.

To ensure you don’t accidentally create a post in Elementor, I suggest that you disable Elementor for posts. Doing this will prevent post authors from accidentally hitting the “edit in Elementor” button, leading to all sorts of headaches for un-expecting authors. Your Elementor designed templates will continue to function even after post-editing has been disabled.

To turn off Elementor for post-editing.

1. Go to Elementor -> Settings. 
2. Next to post types, uncheck the Posts box.
3. Save your settings.

4. Use Elementor To Create One-Off Templates For Special Pages

Besides using the Theme Builder, you should use Elementor to design your main landing pages. Typically, these are the pages included in your main site navigation.

Some examples:

• Home Page
• Opt-in pages
• Products and Services
• Pricing page
• Contact page

You’ll find a selection of starter designs for pages like these in the Elementor template library.  

Just be aware that if you ever make a move away from Elementor, you’ll need to rebuild these pages. But the same is true when using most themes with unique templates and design features.

5. Use the Elementor Design System Settings

Having a well-thought-out design system is the key to maintaining consistency across your website. This is especially true if you’ve imported a variety of designs from the Elementor template library. Not to mention mixing Elementor designed pages with Gutenberg authored posts.

As of version 3.0, Elementor Pro offers comprehensive control over design settings. These settings allowing users to easily define colors, fonts, and other design preferences to be used throughout the site. Font and color settings become presets that are easily accessed throughout the Elementor interface.

These design settings carry through to the post content you author with Gutenberg. You can think of this as the equivalent of setting preferred fonts and colors in a theme. 

Design Settings is one of those subtle feature enhancements that’s easy to miss if you’ve been using Elementor for a while. The time you spend familiarizing yourself with these new settings will be repaid many times over through a streamlined design workflow.

Not only that, these settings will speed up future redesigns by allowing you to make major color and font changes in one place.

Looking To The Future

As you can see, Elementor Pro and Gutenberg are complementary tools. The key is knowing how to leverage each tool’s strengths while avoiding future compatibility challenges.

If you liked this post, you might also be interested in my new course, “Theme Building with Elementor Pro.” The course includes 90+ minutes of step-by-step video instruction that walks you through the process of building a theme with Elementor Pro.

Join the WP Apprentice training and coaching program to access the Theme Builder course and our entire training library.