Beaver Themer 101: How to Build Themer Layouts in Just 4 Steps

You might already know and love our Beaver Builder plugin for WordPress. It’s handy for creating individual posts and pages, or tweaking your site’s navigation. However, if you want to create layouts for parts of the page that are outside the content area, you might need Beaver Themer as well.

In this article, we’ll provide an in-depth look at the Beaver Themer plugin and how you can use it to enhance your Beaver Builder toolkit.

We’ll also take you step-by-step through how to build layouts in locations that standard Beaver Builder can’t go.

Let’s dive in!

Introducing Beaver Themer: Everything You Need to Know

In the simplest terms, Beaver Themer is a premium add-on for Beaver Builder. That means it’s a plugin that uses and enhances our page builder.

***Note that you still need to have a WordPress theme installed if you use the Beaver Themer plugin.

WordPress themes allow you to control many aspects and styles for your site. But, Beaver Themer lets you override layouts or parts of the page normally controlled by a theme, such as headers, footers, archive pages, and posts. 

Please make the distinction that Beaver Themer is NOT a WordPress theme.

Its specialty is to take the page builder a step further, enabling you to fill in some of the gaps that might exist between your theme and your content. 

For example, Beaver Themer brings the power of Beaver Builder to your website’s headers and footers.

You can also create layouts for parts of your site that are normally harder to customize, such as its archive and search pages.

One of Beaver Themer’s unique features is the use of field connections.

In a nutshell, some modules offer you an option to connect data from your site to a field in the module’s settings. We’ll give you an illustrated example of how this works later on.

How to Integrate Beaver Themer into Your Website

Before we jump to the fun part and start creating some Themer layouts, let’s make sure you have everything you need in order to install Beaver Themer. 

You’ll need to have a premium version of Beaver Builder installed in order to use Beaver Themer, so if you have the free Lite version, you’ll have to upgrade first.

Also, the Beaver Themer add-on does not come with our Beaver Builder premium packages, so you’ll need to purchase Beaver Themer in order to download the plugin package and receive your license key:

The good news is that you can use the Beaver Themer plugin on as many websites as you want, and the initial $147 investment in a Themer subscription can be renewed at a discount. 

After you’ve purchased Beaver Themer, download the add-on from your My Account page. It’s included in the same license as Beaver Builder, so after you install and activate the Themer plugin, it’s automatically licensed on your site.

Beaver Themer gives you a new Themer Layouts option in your Beaver Builder menu:

That’s the place where you’ll create and edit your Themer layouts or add rules for where the layouts are used. Here’s a screenshot of the settings for a Header-type Themer layout:

With Location settings, you include and exclude the where your layouts appear. By creating Rules, you can use conditional logic to control when your layout is applied.

For example, you could show a particular Themer header-type layout only when a user is logged into your site.

How to Build Beaver Themer Layouts in Just 4 Steps

There are just a few steps to follow to create a Themer layout. What you can accomplish with your designs is only limited by your creativity.

Step 1: Create a New Themer Layout

To get started, navigate to Beaver Builder > Add New:

Enter a title for your Themer layout. The title is not displayed publicly.

For Type, choose Themer Layout. In this example, for Layout choose Header:

When you’re satisfied with your choices, click Add Themer Layout. This opens the Edit Themer Layout screen.

Step 2: Launch Beaver Builder and Edit Your Layout

From the Edit Themer Layout screen, you can set the location where this layout will appear:

To start editing the Themer layout, click Launch Beaver Builder.

Instead of a blank layout screen, the Header layout template has already been applied to your layout. 

If you ever want to go back to this template, you’ll find it on the Templates tab in the Content panel:

Just like any other Beaver Builder layout, you have access to modules and other page builder tools:

But first, let’s take a look at one of the modules included in the Header template because it shows how field connections work.

The site title is displayed through a Heading module.

As you can see in the following screenshot, instead of the name of the site, the Site Title field connection pulls that information from Settings > General > Site Title in the WordPress admin area.

The URL for the site title in the header is pulled from Settings > General > WordPress Address (URL).

By adding the URL, If the user clicks on the site title in the header they will go back to the home page.

The beauty of using field connections rather than static text is that if your site title or address ever changes, your heading will automatically be updated. 

Any setting in Beaver Builder that accepts a field connection has a plus sign at the right-hand side of the field.

Besides site information, there are other field connections to content that changes page-by-page, such as Post Title, Post Featured Image, and so on.

This is what makes the Themer layout act as a “template,” displaying the correct information wherever it appears on your site.

You can also set field connections to custom fields, both native to WordPress and using plugins like Advanced Custom Fields and Pods. This gives you the ability to create and use information that truly makes your site unique.

Let’s add a Photo module to the header layout: 

The Photo module’s Photo field does allow field connections, but there’s no WordPress setting for a header logo, so you have to add an image from your Media Library or a URL.

However, you can use the Site URL field connection for the link back to your home page. 

When you’re done, click Done > Save Draft.

Step 3: Add Location Rules

Click Edit Themer Layout in the WordPress admin top bar or navigate back to open the editing screen for your layout from the WordPress dashboard.

Click on the drop-down menu in the Location section, and choose the location where you want to apply the header you just created:

This is a WooCommerce site, so we’ll choose Product Category for this example. This activates a second location field with all of your previously-created product categories, where you can choose all categories or specific ones.

You can add more rules if you want specific pages, or use a blank rule and exclude specific pages.

We’ll choose Hoodie as our product category, which means any product that is in the Hoodie category, and only those product pages, display the Themer header layout.

When you’re done, click Add Location Rule and move on to the last step.

Step 4: Publish Your Custom Themer Layout

When you’re ready for your layout to go live, open it for editing in Beaver Builder and click Done > Publish, just like you would for a standard Beaver Builder layout.

Then test your location rules. For our example, you can go to your shop page, which should display your default site header, not the Themer header:

Now click one of the hoodie products to open the product page. You should see the Beaver Themer layout you just created, rather than the header that appeared on the main product page:

With that, you’ve just created and applied a custom Beaver Themer header layout. It’s really as easy as that.

How to Create Singular Themer Layouts

Another kind of layout template you can make that’s extremely powerful is the Singular Themer Layout. This template is most often used to display single posts in a blog or any kind of custom post. 

Follow the steps described above for creating a new layout but select Singular as your Layout type:

Click Launch Beaver Builder. Once again, you’ll see that the Singular layout template has already been applied, containing most of the information you typically find for a single post, with the standard field connections already set up.

You can tweak this template or start from scratch.

The Singular layout has a few of its own special modules, which can be accessed in the  Content panel group called Themer Modules:

Some of these modules are just special versions of existing modules. For example, the Post Title module is just a Heading module with a field connection to the post title.

If you mouse over this module’s toolbar in the template layout, it will say it’s a Heading module.

The Post Content module is unique and worth mentioning. Unlike all other Beaver Builder modules, it serves as a placeholder in the Singular Themer layout.

The actual content is pulled from the WordPress block or classic editor.

Because of how WordPress works, you can create a standard Beaver Builder layout for the post content, or you can create a Themer layout for the area outside the post content (namely the post title, featured image, meta information, navigation, and so on), but you can’t have both in the same post. 

Here is a video that walks you through this…

Fine-tune When Content Should Be Displayed

Beaver Themer adds one more feature to both standard Beaver Builder layouts and Themer layouts: conditional logic to fine-tune who can see your content.

Here’s a screenshot example of setting conditional logic rules when you’re editing your Themer layout:

In this example, the Themer layout is displayed only when the user is logged in with the role of Editor.

Also, with Beaver Themer installed, these conditional logic settings are available as an extra choice in the Display setting on the Advanced tab for individual rows, columns, and modules in any Beaver Builder layout:

As another example, you could display an item like a button only when a specified custom field has a value. 

The best way to learn more about conditional logic rules is to consult our knowledge base article.

Conclusion

Being able to pick and choose exactly where certain design elements appear on your website can be a game-changer. When you add Beaver Themer to your toolkit, you’ll be able to make sure that your entire site looks and feels cohesive.

Getting started with Beaver Themer is easy if you remember these four key steps:

1. Add new Themer layouts from Beaver Builder > Add New in your WordPress dashboard.
2. Choose a Themer layout type and launch Beaver Builder to access the design modules.
3. Save your layout and add custom Location Rules to apply the layout to specific kinds of content.
4. Publish your custom Beaver Themer layout, and test out your location rules by visiting those locations on your site.

Is there a specific Beaver Themer layout that you’re excited about? Share your thoughts with us in the comments section below!

About Anthony Tran

Anthony Tran is the Marketing Director for Beaver Builder. Before working with the company he managed a WordPress web design agency. He loves Starbucks iced coffee, watching NBA basketball, and catching the latest blockbuster movie.