WP Page Setup [ 4, 5 & 6 ]

How to set up header, footer & main pages/blog page templates in beaver builder after installation using beaver themer. For detailed step-by-step scenario-based instructions on how to use Beaver Themer to edit theme components, or on how to use the blog post and product layouts found on the demo site, view the information on the "Using Beaver Themer" page. Standard and Premium WordPress Setup Ends after step [6], then you will begin Site Design - reference Page Layout Flow as you build. For Woo sites, after [6] continue to Step [7] from the "WP/WOO Setup" tab.

Create A Header [ 4 ]

Layout & Settings

  • 1
    Create a Themer Layout

    dashboard > hover over beaver builder > click themer layouts > add new

  • 2
    Add Themer Layout

    title: header
    type: themer layout
    layout: header

  • 3
    Themer Layout Settings

    location: entire site (unless you have different headers for different pages)
    users: all users
    publish > launch beaver builder

  • 4
    Choose A Header

    once in beaver builder, on the screen top right > click "+" sign > select templates > from the "group" drop-down > select Header Templates

  • 5
    Replace Default Layout

    select desired template > click "replace existing layout" > proceed to style as needed

References:

Builder Guide - Creating a Header in Themer

Responsive Layout

Although the pre-loaded header layouts are already responsively styled, its always good to check anyway and slightly adjust the layout on smaller screens to best accommodate the logo size/text and any other information included in the layout. Make sure the column heights are equalized and centered so the items vertically align in the middle - you can also choose to hide certain rows on smaller screens.

  • 1
    Column Settings

    in beaver builder, select the column holding the logo and click "column settings > go to advanced tab

  • 2
    Layout Preview

    click the little monitor icon to change the layout to tablet or mobile view 

  • 3
    Adjust Column Widths

    change the width of the column holding the logo to about 80% > then change the width of the column holding the menu to about 20% (The exact widths don't matter as long as they add up to 100%)

Important details and useful info from beaver themer knowledgebase:

Header Settings - Sticky, shrink & Overlay

When you edit the Header Themer layout before opening Page Builder, there are three settings that control how the header behaves.

  • Sticky: This is equivalent to the fixed header in the Beaver Builder Theme. The header stays in place at the original size while the page is scrolled.
  • Shrink: If you choose a sticky header, you also get the option to shrink it as the page scrolls up. The amount of shrink is determined by the height required for the full-size header logo, text, and menu.
  • Overlay: The row background for the header becomes transparent, and the content row moves up to the top of the window. The overlay appears on all screen sizes.

Note: Fixed and sticky headers only apply to large devices. No matter what the setting, the header scrolls up out of sight on medium and small devices.

For a Semi-transparent, Overlayed Header

Choose "default" from the "background" drop-down which appears after clicking "yes" on "overlay".

Then in Beaver Builder, style the header color and set its opacity as needed within the header row module itself. 

How Sticky, Shrink, and Overlay settings work together

You can enable all three sticky, shrink, and overlay settings, and here's how that all works together.

  • As described above, the Overlay setting works on all device sizes, but the Sticky and Shrink settings only work on large devices.
  • If you enable Overlay plus Sticky, on large devices the transparent header converts to a sticky header as soon as you start to scroll. The sticky header background is whatever you set for the header row background.
  • If you enable Overlay plus Sticky plus Shrink, the header shrinks as you continue to scroll down, just the same way it does when there's no overlay.

Create A Footer [ 5 ]

Layout & Settings

  • 1
    Create a Themer Layout

    dashboard > hover over beaver builder > click themer layouts > add new

  • 2
    Add Themer Layout

    same steps as above except replace "title" and "layout" with "footer"

  • 3
    Themer Layout Settings

    location: entire site (unless you have different footer for different pages)
    users: all users > publish > launch beaver builder

  • 4
    Choose A Footer

    once in beaver builder, on the screen top right > click "+" sign > select templates > from the "group" drop-down > select Footer Templates

  • 5
    Replace Default Layout

    select desired template > click "replace existing layout" > proceed to style as needed

References:

Builder Guide - Creating a Footer in Themer

Blog / Shop Layouts [ 6 ]

Set up Blog/Shop Landing Page

The page you assign as the default post or shop page will assume this template.

  • 1
    Create a Themer Layout

    dashboard > hover over beaver builder > click themer layouts > add new

  • 2
    Add Themer Layout

    title: blog landing page OR shop landing page
    type: themer layout
    layout: archive

  • 3
    Themer Layout Settings

    location: change this to "post archive" OR "product archive"
    users: all users > publish > launch beaver builder

  • 4
    Choose A Landing Page

    once in beaver builder, on the screen top right > click "+" sign > select templates > from the "group" drop-down > select Blog OR Shop Templates

  • 5
    Replace Default Layout

    select desired template > click "replace existing layout" > proceed to style as needed

References:

Builder Guide - Creating an Archive Page in Themer

Set Up a Post/Product Category Page

Whenever you create a blog post category or a product category, it will assume this template.

  • 1
    Create a Themer Layout

    dashboard > hover over beaver builder > click themer layouts > add new

  • 2
    Add Themer Layout

    same steps as above except replace "title" with "post category page" OR "product category page" and set "layout" to "archive"

  • 3
    Themer Layout Settings

    location: change this to "post > all posts" OR "product > all products"
    users: all users > publish > launch beaver builder > repeat steps 4 & 5 from above

Note: after selecting a template on a category archive, click on the posts/products module used and make sure the content is set to "main query"

Set Up a Singular Post/Product Page

Whenever you create a single blog post or a product, it will assume this template upon publish.

  • 1
    Create a Themer Layout

    dashboard > hover over beaver builder > click themer layouts > add new

  • 2
    Add Themer Layout

    same steps as above except replace "title" with "single post" OR "single product" and set "layout" to "singular"

  • 3
    Themer Layout Settings

    location: change this to "post category archive" OR "product category archive"
    add a location rule: set this to "post/product tag archive"
    users: all users > publish > launch beaver builder > repeat steps 4 & 5 from above

Table of Contents
    Add a header to begin generating the table of contents
    Next Steps

    If its a Woo Site, the next step is to create cart, checkout and account pages. For WP builds, continue to site functionality.