I installed Beaver Themer, now what?

Let's take a quick tour of Beaver Themer. If you're still not clear on where it works, there are examples plus screenshots in this article.

What can I build with Beaver Themer?

The Beaver Themer plugin is an add-on to the Beaver Builder plugin. Beaver Themer lets you use Beaver Builder to create layouts for the areas of a page or post that are normally controlled by the theme, plus a couple other layouts that you can't create directly in WordPress. This includes the following areas:

  • Headers and footers
  • Post title, post info, featured image, comments, sidebar (in other words, everything but post content) on single post pages.
  • Index and archive pages that display a list of blog posts or organize lists of posts by specific categories, tags, authors, etc.d
  • Inserts such as banners into specific parts of the page, such as before the header, after the header, before the content.
  • The page displayed after a 404 error.

For more information about theme-controlled areas, see the Primer on WordPress content and theme areas in the Related Articles. For some screenshots and descriptions of Themer layouts, see the Beaver Builder introductory article.

Which themes does Beaver Themer support?

See the Related Article below for which themes are supported. If your theme isn't currently supported, see the Related Articles on how to add support to your theme for Header, Footer, and Part layouts in Beaver Themer.

Where do I find Beaver Themer after I install it?

Beaver Themer has been integrated with the Beaver Builder plugin, and you'll see it mainly in two places in the UI, as described in the following sections.

1 Beaver Builder menu in the WordPress admin panel

There's a Beaver Builder admin panel nested in the WordPress admin panel, and when you install Beaver Themer, a new submenu appears called Themer layouts, as shown in the following screenshot.

Tip: Can't see Beaver Builder in your WordPress admin panel? See the article about how to enable it.

2 Identify and edit Themer layouts from the WordPress admin bar

You'll also see Beaver Themer options in the WordPress admin bar at the top of the screen when you're logged in:

2a New menu

The New menu has a Themer layout selection, as shown in this screenshot.

2b Edit Themer Layout /Beaver Builder in the admin bar

When you're viewing a Themer layout, you'll see options to edit the Themer layout's settings or to open Beaver Builder to modify the Themer layout itself.

If there's already a Beaver Builder layout on the page you're viewing, Beaver Builder will appear with a green dot next to it in the WordPress admin bar. If the dot is gray or white, it means there's currently no Beaver Builder layout.

If you're viewing a regular page and mouse over the Beaver Builder link, you'll see options to edit the page itself or any of the Themer layouts that apply to that page. ;For example, in the following screenshot you can choose to open either the page that you're viewing in Beaver Builder, or the Header-type Themer layout called "Sneak Peek home page," which is controlling the header on that page.

3 Field connections

When you open a module for editing in a Themer layout, you'll notice a plus sign next to some of the setting fields, as you can see in the following screenshot.

These plus signs indicate that you can set field connections to eligible data from another area of your site. Field connections pull the content of the field from the particular page or post that's being displayed. 

For example, the following screenshot shows part of a Singular Themer layout, in which the featured image is displayed as the row background, and the title, date, and author's name come  from the post that's being displayed, all by means of field connections. In other words, no matter which post the Themer layout appears on, it will display the content that's correct for that post.

See the Related Articles for field connection basics.

Beaver Builder layouts in Beaver Themer vs. Post content area

As mentioned, Beaver Themer lets you create layouts that apply outside the content area of a page or post. In particular, Singular layouts apply to post titles, post info, the featured image, and so on, but not to the post content area.

It's important to note that if you apply Singular-type layouts for single posts, you can no longer use Beaver Builder to create layouts inside the post content area, and vice versa. For example, here's a single post as viewed outside of Beaver Builder. In the WordPress admin bar you can see that the button following Beaver Builder is white, indicating that the post layout doesn't have a Beaver Builder layout. The submenu also indicates that there's a Header-type Themer layout and a Singular-type Themer layout applied to this page. If you click the Post to open this single post in Beaver Builder, you'll get a warning that if you do choose to open Beaver Builder to create a layout in the post content area, the Themer layout will no longer apply to this post.

Got it. What's next?

Try out the quick tutorial in the Related Articles below on designing a header layout.

There are a number of Vimeo videos to show how powerful and easy Beaver Themer is to use and give you some creative ideas.

If you're a developer, have a look at the articles on how to customize field connections and field settings forms and how to add headers, footers, and parts to other themes.