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 Site Design Flow by Vertical as you build. For Woo sites, after [6] continue to Step [7] from the "Initial 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:

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:

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:

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:

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.