What themes work with Beaver Builder

Hey all. I'm excited to introduce a guest author and friend, Joe Casabona. Joe was generous enough to share this lesson from his course, Up and Running with Beaver Builder.

The is a preview from the WP in One Month Course, Up and Running with Beaver Builder.

One of the great things about Beaver Builder is that it gives you complete control over the content area of your website. You can add rows and columns of content, calls to action, images, post lists, sliders, and much more; you have seemingly unlimited flexibility. However, there is one barrier that does create limitations: the theme. While Beaver Builder is compatible with just about any theme, some definitely lend themselves better to the plugin. In this tutorial, we’re going to look at what Beaver Builder replaces, what to look for in a theme, and ultimately how to pick the right one for your site.

The Content Area

So what exactly does Beaver Builder replace? Beaver Builder basically replaces whatever you can change with the WordPress Editor. For example, If there is a set footer on posts with the author, categories, tags, and date, you will not be able to edit them. On the technical level, it replaces anything that is added with the the_content() template tag. Let's look at an example using Twenty Sixteen.

In this first screenshot, we see a page with some basic content on it, using the WordPress editor. There’s even a shortcode in there that no longer works. That shortcode comes from the widget shortcode plugin, which has been disabled. We see the actual shortcode, which highlights another limitation of the default WordPress Editor.

In the next screenshot, we see the same page using Beaver Builder's Page Builder. The red box was added to highlight the editable section.

Only a small section of the page for Twenty Sixteen is editable. The title of the page still displays where it would normally show up, and the sidebar cannot be removed. Because of this, we aren’t taking full advantage of the page building tool.

Based on this, we should highlight a few things to look out for if you'd like to choose your own theme.

Finding a Good Theme

Here’s a list of useful criteria for finding a good theme that fully takes advantage of Beaver Builder:

  • Make sure it suites your needs. Whether you're building a site for a restaurant, a sports team, a college, or whatever, make sure the theme has the look and feel you're going for.
  • Find one that's flexible in terms of header and footer elements. One of the hallmarks of Beaver Builder is it allows for incredibly flexible content. Try to keep that going with the site’s header and footer. This could be through a robust customizer, widget areas, or other theme options.
  • Look for a theme with a full-width content area (either by default, or using a Page Template). Beaver Builder allows for some great page layouts and having a full-width content area goes a long way it making those layouts look even better. You also want to have as much flexibility as you can, so if you can exclude the sidebar, you should. You can always add one in using one of Beaver Builder’s predefined layouts or page templates.
  • Try to find one where you can disable the title. Placing the title on the page could play a big part in the look and feel of the site, so if you can find a theme that will hide the title by default, that's great! If not, you could always recruit the help of a plugin. There’s an inherent added bonus here: the page’s heading doesn’t have to make the page’s name in the admin.
  • The fewer page elements, the better! Much like looking for a full-width content area and no title, the fewer elements on the page means the less you have to fight with. Less is more here, because Beaver Builder will handle a lot for you.

Good Themes for Beaver Builder

Based on this criteria, here are a few good themes that might work well with Beaver Builder:

As a reminder, Beaver Builder works with just about any theme, but some will definitely work better than others.

The Beaver Builder Theme

Perhaps the best theme to use with Beaver Builder is their own theme, which is available in the Pro and Agency packages. The team took the same approach they took with building the page builder, so it easily meets all of the criteria above, and does a lot more. With a robust set of tools in the Customizer, you can transform the theme quickly and easily to suit just about any need you have. This is the theme that we will be using in the rest of the course, using it to do the following:

  • Build a custom header and footer
  • Modify the content area
  • Create and apply a color scheme
  • Apply and modify the typography using all of the fonts available at Google Fonts

…and all without touching any code. However, if you are comfortable with code, the Beaver Builder accounts for that too, allowing you to insert custom CSS, as well as custom code in the head or footer of the website.

Wrapping Up

Beaver Builder’s WordPress Page Builder gives us the opportunity for a robust set of pages with endlessly custom designs and layouts. It’s incredibly important to pick a theme that nurtures that functionality. While the plugin works with just about any theme, Beaver Builder’s Theme is the clear winning as far as matching functionality and flexibility.

Do you have a favorite theme that we haven't mentioned? Leave us a comment and let us know which and why!

About Joseph Casabona

Joe Casabona is a Front End Developer that works in WordPress…a lot. In 2014, he authored a book called Responsive Design with WordPress, develops WordPress courses over at WP in One Month and has developed an accredited course on WordPress theming. He also hosts the How I Built It podcast.

Posted in Guest Posts and tagged Beaver Builder Theme, Guest Post, Themes