The perfect combination between Beaver Builder and Gutenberg


The web world is growing by leaps and bounds. A large number of new tools appear daily that help us in the development of websites and mobile applications. In WordPress, two of these tools are Beaver Builder and Gutenberg. Thanks to these tools, we can edit our website more easily and give it a better appearance. Considering that, as it is popularly said, “everything enters through the eyes“, these tools will allow us to have a professional quality website without much effort.

What is Beaver Builder and how to use it?

Beaver Builder is a plugin that helps us with the development and layout of our website. It is a WordPress Page Builder of the drag and drop type. With this plugin, we can create a very good quality website without needing to be an expert in the web world; Just activate the plugin and start using it. Below is a small sample of how it is used, and some elements it provides.

The creation of a page does not change at all. When previewing our page, a new option will appear in the top menu of WordPress, just the one with the green dot, which is called Page Builder. By clicking on this option, we will load the visual elements that Beaver has.

Clicking on the Page Builder item will load the page as follows:

This indicates that the page is in edition mode with Beaver Builder, on the right you can see that a section appears with some modules that Beaver offers, they have simple modules, from inserting text or images, to more advanced ones such as adding a carousel or accordions. You can even define how many columns you want to appear on your page to organize the content.

But you will wonder ¿why would I want Gutenberg in my site if I already have Beaver Builder to build my website? Well, unfortunately, Beaver Builder does not work in the content of the post, so I cannot have the elements that Beaver offers me when creating or editing a post, so this will remain with the default styles that the theme has. You may want it to appear differently or even edit the structure of your blog. Well, for that there is Gutenberg, which is going to help us make our blog look better.

¿What is Gutenberg and how to use it?

Gutenberg is a plugin for text editing that helps us and facilitates us with the structuring of our content in blog posts, with Gutenberg we can do things like changing the size and color of our text, to even layout it with columns. Currently from version 4.9.8, Gutenberg is already installed in the WordPress core. Next, it will show a few options that Gutenberg has.

When we enter to create a new post, it will appear as follows:

When we already have content in our post, we are going to be able to change the size of our text, its color and format, in the following image there are some options that Gutenberg offers.

But what if I want to add code? Either Python or JS. Good, Enlighter in its lates update, is compatible with Gutenberg, Enlighter is a syntax highlighting tool for our content. Below you can see how it looks:

Wonderful ¿right? Gutenberg is an indispensable tool if we have an article website or a blog, with Gutenberg we are going to be able to give the format we want to our blogs, without having to install as many plugins to supply some needs that we usually have when writing a blog or articles.
Now, imagine a combination of Beaver Builder and Gutenberg. You can use Beaver Builder to build all the site and Gutenberg for the content of the posts, a combination that can be incredible if you use it correctly. For example, this article you are looking at is built with Gutenberg, and the site with Beaver Builder Look how good it looks! Now it is your turn to use them and do wonders with them.