Gutenberg and page builder plugins: Two great tastes that taste great together

So, Gutenberg and page builders…

What’s the difference between them? Does one replace the other? - Let’s briefly look at the purpose and scope of the Gutenberg editor versus a page builder

the aim of this new editor is to make it easy to create and rearrange content - that could be text, images, embeds, buttons — there are a lot of standard blocks available - there are a few more advanced features like saving reusable blocks or adding css classes - but overall, it’s still much simpler than a page builder - the target audience for the block editor is all WordPress users, so keeping it relatively simple is a requirement

now the goal of a page builder plugin is extensive layout and styling control - because there are several similar plugins, I’ll be talking about page builder features, in general - depending on which one you use, content chunks are called modules, blocks, widgets or something similar - typically, page builders also allow you to create reusable sections, theme templates, and landing pages - the target audience here is power users who demand more control and are willing to deal with more complexity

The page builder examples I’ll show today are from these two widely used plugins (Elementor and Beaver Builder) - But keep in mind that there are others too

But the bottom line is — you don’t have to choose between your page builder and Gutenberg! - At this point, all the major page builders integrate with Gutenberg, so there’s no reason you can’t use both on the same site

But to do that, there are some tips for how and when you might use each

The first tip is about having a strong foundation. - No matter how you lay out and edit your pages, your site begins with a theme

There are certain things you should look for when choosing a theme, and these first three are important no matter what… - But to get the full benefit of the block editor and a page builder, choose a theme built with both in mind - For a theme to work with page builders, it must be able able to accommodate full width content - If a theme is “Gutenberg-ready,” it can also handle full width content, and it includes basic styling for the Gutenberg blocks

Generate Press and Astra are two popular themes that check all the boxes — but of course, there are others

Tip 2: - don’t worry that you’ll have to convert all the old content on your site, when you start using Gutenberg

If that content was created in your page builder, just leave it there and - Edit as usual in the page builder interface - For older pages created with the classic WordPress editor, you can convert to blocks — but only if you want to - It probably only makes sense if you’re doing a significant edit

Tip 3 is about creating new content - You should always begin in the standard WordPress editor

Don’t just enter a title and jump right into your page builder - Decide here if you need to edit the URL or add any page attributes like a featured image or a parent page - The last step is deciding whether to use the standard Gutenberg editor to write your content - or to use the page builder interface

Tip 4 - While the Gutenberg editor is great for simpler layouts and writing long text, go with a page builder for complex layouts or more styling control

For an example of the different styling capabilities, here’s the Quote block in Gutenberg - There are a couple pre-set style choices and the text color can be changed, but that’s about it. - The other details are being handled by the theme

In comparison, this is a quote block in a page builder - Here we can control column width, margins, padding, background, borders, whether or not to include an icon, and more

We can even tweak the styles based on screen size - Here the size of the type for the quote widget has been reduced, but only for small screens - If you’ve chosen a solid theme, basic responsiveness will be build in, but sometimes it’s nice to have this level of control

Tip #5 - Use a page builder to design theme templates without digging into the code - Then for each new post or page, just write your content using the Gutenberg editor

You can use a page builder to visually design your theme’s post template layout exactly the way you want including an alternate header, or other elements

Then you or your client can write each new post using just the block editor and focusing only on the main content - When that post is published, the layout from your customized theme template will be applied

Tip #6 - You can selectively insert content from your page builder using conditions

For example, you could choose to display a call to action only on single posts that have a certain category like “history”

And that pop-up will appear on any post with the category: history - even on a site where all posts are written using the Gutenberg block editor

and the last tip… - for the most part, you’ll edit each page or post in EITHER the block editor OR a page builder. - however, many popular plugins are starting to add their own Gutenberg blocks (for instance, Gravity forms and Jetpack)

page builder plugins have started to do the same - here’s an example where you can insert a piece of page builder content into the middle of your Gutenberg page

In this case, it’s a subscribe call-to-action - Because it’s a global template, it can be changed in one place in the page builder, and all instances will be updated

So with those tips in mind, what does the future hold? - Obviously, this is all a moving target as page builder plugins continue to develop and the Gutenberg block editor matures and improves with each passing month - Also, the new block standard could enhance interoperability by providing a structure for others to build on

We’re already seeing this with new plugins that extend Gutenberg by adding additional blocks and styling capabilities - This includes blocks for pricing tables, maps, accordions, and more - And these are just a few of those additional plugins that you might explore - So it seems that the lines are moving and blurring

There’s no doubt that these combinations can really empower designers who don’t have the skillset or desire to build custom blocks for Gutenberg - But of course, that’s possible too - If you’re curious about what’s involved, don’t miss the next talk here on Designing your first Gutenberg block

So, to wrap up… - Ultimately, your best approach will be an individual decision based on your preferences and the project requirements - Embracing the benefits of Gutenberg while extending your capabilities with a page builder plugin or some add-on blocks can be a powerful combination - Once you understand the tools at your disposal, you can make good decisions about the best workflow for you

And that’s it — thank you!