I installed Beaver Themer, now what?

Let's take a quick tour of Beaver Themer.

Beaver Themer and Theme Builder

We're referring to Beaver Themer as the plugin, and Theme Builder as the tool it installs that you use to build your layouts. It's identical to the distinction between the Beaver Builder plugin and Page Builder, the content layout tool. So mostly we'll be talking about using Theme Builder.

Which themes does Beaver Themer support?

See the Related Article below for which themes are supported. We'll be adding support for other themes as time goes on. 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 Theme Builder.

Where do I find Theme Builder after I install Beaver Themer?

Theme Builder has been integrated with the Page Builder plugin, and you'll see it mainly in two places:

1 Builder menu in WordPress admin panel

The Templates admin panel in previous versions of Page Builder has been reworked and it's now called Builder, with a new submenu:

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

If you're familiar with the old Templates admin panel, you'll notice that Saved Rows and Saved Modules are now listed separately from Templates. Theme Layouts is specific to Beaver Themer, and you'll only see that menu choice if you have Beaver Themer installed. See the Related Links for a quick tutorial on how to create a layout.

2 Identify and edit theme layouts from WordPress admin bar

You'll also see Theme Builder 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 Theme layout selection.

2b Edit Theme Layout / Page Builder

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

2c Identify and open theme layouts used on a page

When you're viewing a regular page that already has Page Builder enabled, you'll see Page Builder in the admin bar with a green dot. As of Beaver Themer 1.0.1, if the page also has any theme layouts controlling it, you'll see them in the list that appears if you mouse over the Page Builder text. For example, in the following screenshot you can choose to open either the page that you're viewing in Page Builder, or the Header theme layout that's controlling the header on that page. 

Here's another example. In the case of a Singular theme layout you can use Page Builder to edit the theme layout but not the content area of the Post itself. If you view a Post, Page Builder does not have a green dot in the admin bar because it's not active for the content area of the Post, but if you mouse over it, you'll see the theme layouts that apply to the page. The following screenshot was taken when viewing a single post, and it shows that there's both a Singular and a Header theme layout that applies to that post. You can click to open either theme layout in Page Builder.

If a Singular theme layout is applied to a Page or Post, you have the option to override the theme layout and create a Page Builder layout for the content area of that Page or Post. In the previous screenshot, the Post type was not enabled for Page Builder in Settings > Page Builder > Post types. With Posts enabled, the following screenshot shows that there's now an option to open the Post itself for editing in Page Builder. 

If you do select that option, you'll get a warning that you're going to override the theme layout on that page if you continue.

3 Module field connections

When you open a module for editing in a theme 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. If you click the plus icon, a list of eligible connections is displayed. For example, the Heading field in the Heading module has a number of eligible field connections. The following screenshot shows just a portion of the list.

When you mouse over a field connection, you'll see a choice of Connect or Insert.  When you choose Connect, the field connection you choose becomes the field value for the item you're selecting it for--in this case, the Heading field. If you choose Insert, the text value of the field connection is inserted as a shortcode, which means you can mix it with other text or shortcode you enter in the field.  See the Related Articles for more information about field connections and field connection shortcodes.

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.