Tutorial: Create a header layout (Themer)

This is a quick tutorial to show you the basics of creating a layout in Beaver Themer and choosing where to display it on your site. Once you finish this tutorial you'll have all the basics of using Themer.

In this tutorial, you'll create a header that will replace the header on all Pages of your site, but not Posts or custom post types. Then we'll set an exclusion rule so the header occurs on every Page except for a landing page. You'll need a test site to try it out, but if you don't have a test site for some reason, we've tried to include enough screenshots to give you an idea of how it works.

It's assumed you've already installed Beaver Themer into the appropriate environment. See the Related Article about Beaver Themer installation if you haven't.


Set up what you're going to connect to

In the page layout for the header, we're going to connect to the site's tagline, select an image for a header logo, and set up a menu. Here's an example of what we're gong for.

You need to have those things ready to go first, so do the following if you haven't already.

  • Have an image ready to use as a logo.
  • Create a site tagline in Settings > General > Tagline.
    In this tutorial, we're using the phrase "We keep it simple".
  • Create a menu at Appearance > Menu or Customize > Menu.

Create a new themer layout

  1. In the WordPress admin panel, click Beaver Builder.
    The Themer layouts screen opens by default if you have Beaver Themer installed.
  2. Click the Add new button at the top of the Themer layouts page.
    See the screenshot below to enter the settings, or follow these steps.
  3. Enter a title. We'll use All page header as the layout title in this tutorial.
  4. In the Type field, select Themer layout.
  5. In the Layout field, select Header.
  6. Click Add themer layout.
    The Edit Themer layout screen will open automatically

Here's the screen with these choices:


Configure the themer layout

Configure the layout settings on the  Edit Themer layout screen as in the screenshot below, or read the following points for details.

  1. Verify that Type is Header.
  2. Leave Sticky and Overlay set to No.
    With these settings, the header will scroll out of sight as the page moves up, and the header won't overlay the page content.
  3. For Location, choose Page in the left field and All Pages in the right field.
    This makes the header apply to all Pages (as opposed to Posts, archives, etc.).

Note: If you set the WordPress edit page's Page Template to No Header/Footer for a particular post or page, it will not remove the header produced by a Themer layout. You must control where the Themer header occurs through the Location settings here.

  1. As of Beaver Themer Version 1.2, you can set up conditional logic rules or rule groups. Prior to Version 1.2, there is a Users field, where you can limit which users see the layout. This has been incorporated into the rule groups, with more options. We won't set any restrictions for now, but see the Related Article below for more information about Beaver Themer conditional logic.
  2. Click Publish.

    Add an exclusion rule for one page

    Now suppose you want to exclude one page from where your Themer header layout applies. Here's how to exclude that specific page.

    1. Choose a page that you want to exclude, or create a page for that purpose.
    2. On the Edit Themer Layout screen, in the Location section click Add exclusion rule.
      An Exclude section opens.
    3. Click the Choose field and choose Page.
    4. In the field on the right that appears, choose the name of the page that you want to exclude.
    5. Click Publish or Update to save the Themer layout.

Create the Themer layout

The Beaver Builder editor is used to build Themer layouts. When the new header layout opens for editing in Beaver Builder, it displays the default template for the Header Themer layout, as shown in the following screenshot.

There are two rows, one for the top bar and one for the main header area. The top bar has two columns. The left column contains an HTML module and the right contains an Icon Group module. The second row also has two columns. The left column contains a Heading module, and the right column contains a Menu module.

How does the Heading module display the name of the company? It's listed as the site title in  Settings > General > Site title from the WordPress admin panel, and the Heading field in the Heading module has a field connection to Site Title, as shown in the following screenshot.

You can modify the layout as you normally would in Beaver Builder. For this tutorial, we're going to remove the top bar, replace the site title with the site tagline, and add the business logo above that. 

  1. From the editing screen for the header layout that you edited in the previous procedure, click Launch Beaver Builder.
  2. Mouse over the top-bar row and click the X tool to remove it.
  3. Open the heading module for editing and make the following changes, then save the module.
    • Click the plus sign to the right of the Heading field.
    • Scroll to the bottom of the list and choose Site tagline.
    • Click the Style tab and change the Font size to 20 px.
  4. Open the Menu module for editing and select the menu you want to use. 
    You must have already created a menu for it to appear in the Menu field.
  5. Drag a Photo module above the Heading module in the left column. Add a photo to serve as the business logo.
  6. Publish the page.

Tip: When you're editing a theme layout in Beaver Builder, you can preview specific pages and posts in your site by selecting them in the Preview list at the top of the editing screen.

Here's a screenshot of what we ended up with:

This isn't beautiful yet, but feel free to tinker with any other parts of the layout. Try it out for responsiveness to see how it behaves.


View the header layout on a page

Now it's time to view your handiwork. Because we set this header to apply to the entire site, you can view any page on your site, and you will see the header has replaced the standard theme header, as in this screenshot:


Extra credit

You added a field connection to the site tagline in the header layout. When the field is text-based, you can use a shortcode instead to mix and match field connections or add your own text. For example, instead of just the site tagline in the header, you could add the site name and the site tagline. To see how to add field connections as shortcode, see the field connections article in the Related Articles below.



Now you've got the essence of how easy it is to build a theme layout in the Beaver Themer Theme Builder! 

What next?

For more information about how field connections work, start with the  field connection basics article.