Beaver Themer Tutorial – Create Custom WordPress Headers & Theme Parts

by Adam @ WPCrafter   |   Last Updated: June 27, 2017
Share on facebook
Share on twitter
Share on linkedin
Share on pinterest
Share on email

Video Transcript

Beaver Themer Tutorial – Create Custom WordPress Headers & Theme Parts

This is the second video in a video series
I’m doing on a new plug-in called Beaver Themer

hi my name is Adam from WPCrafter.com were
I make WordPress videos for non-techies and

if you like the content in this video series
I’d ask you to consider clicking on the subscribe

button and subscribing to the channel and
if you want email notifications when a new

video is available all you have to do is click
on the cute little bell next to the subscribe

button now in this video working to talk about
custom headers and a concept called theme

parts and I want to show you examples of these
and how that they can be used in the prior

video it was about these things called theme
layouts that you’re going to be able to make

using Beaver Themer so you’re going to essentially
be able to customize the look of really cool

things like WooCommerce product pages blog
posts custom post types etc. so to keep me

on track to go ahead in do this a slideshow
style custom headers and custom theme parts

let’s get in on the custom headers first of
all this is a feature that’s only going to

work on certain supported teams right now
there are three themes I know of 1/4 one that’s

coming so it’s a Beaver Builder theme the
GeneratePress theme Genesis themes and also

a little thing that’s coming out called Astrid
Astra and that’s gonna be a hot theme to take

a look at and you get to create as many custom
headers as you want so essential you know

what a header is right for your logo is where
your menu navigation is and there’s all kinds

of opportunities to customize that area because
that is the first thing your visitors see

when they come to your website I made a video
about three weeks ago where there was a another

theme developer that it made a crack at this
whole custom header concept I was little harsh

on them because they made it overly complicated
and that’s what I like about Beaver Themer

it’s so easy to create custom headers and
I do consider this kind of like the holy grail

of WordPress website development because you’re
now going to be able to unlock the first thing

that someone sees on any website your in have
full control over that and it’s a pretty exciting

development and you can assign these custom
headers however you want and this is so powerful

because there are certain areas of your website
where if you have the same header on every

single section of your website it just doesn’t
make sense and it’s also counterproductive

so if someone is that you have a WooCommerce
shop summons checking out your products doesn’t

make any sense to show them your about page
in the navigation I mean you put in the footer

but in the navigation does it make any sense
to have your blog page there it really doesn’t

because you want to keep people focused on
where they are on your website another excellent

example is on my website I have a holes online
learning course platform there and some of

the team the way my menu navigation is and
what I’m doing in the menu it makes absolutely

no sense when someone is actually in the lesson
or in a course on my website so now with Beaver

Themer you’re going to be able to create custom
headers and footers sorry actually shrimp

my foot hurts hoops custom headers and footers
you can dynamically assign them to bits and

pieces of content however you want and it’s
going to show you in a moment of some of things

that I’m already doing with it so nice let’s
take a look at theme parks and this is a whole

new concept that no one’s ever heard of before
so essentially what they are oops well let

me tell you a little bit about a first first
all this I will as well is only on supported

themes and it’s the same supported themes
that I talked about just a moment ago you

can make as many of these as you want and
you can assign them conditionally just like

we were talking about with the custom headers
and you’re already seen these things called

the theme parks whether you know it or not
these are typically notices or calls to action

or various things like that so I’ll give you
an example if you go to a website that has

a product for sale you land on the product
page and then from the top of the above the

header a little notice comes out saying hey
this is on sale for the next three hours go

ahead and buy it now because when the sales
gone it is gone this is an example of a notice

which can be now now can be easily implemented
with a theme part another example and kind

of how your to see it used on my website when
I have my custom blog post layout so say for

example I have a custom blog post layout on
something about Beaver Themer well right at

the very top which is going to be the area
right under the header and can have a real

thin little area there that says if you would
like to know more about Beaver Themer check

out this course is something like that and
I’m going to do that conditionally for all

the content on my website this is powerful
powerful stuff to be able to have these notices

and other example is maybe above the footer
area of your website you want maybe a call

to action for opting in or another great usage
would be to have some rotating testimonials

that’s actually good to have all throughout
your site and you can assign them conditionally

to areas so if you are a WooCommerce shop
owner in someone’s on a page about a fidget

spinner you might want some reviews of how
awesome your fidget spinners are but then

if they go in they are on a page about a fidget
cube there you don’t want to have a testimonial

or review of it spinner you wanted to be of
a fidget cube and this is how you can have

these conditional theme parts now unfortunately
with the whole themepark concept it really

is duplicating some functionality that a third-party
developer has already created called beaver

tunnels and it’s pretty much canna doing the
same exact thing so let’s go ahead and jump

in and take a look at the custom headers so
here we are of them get back into my dashboard

now in the last video you know I actually
already created one so if I go here to the

homepage I click on shop and then I click
on my fidget spinner you know that I already

created a custom header and I signed it to
anything having to do with fidget cubes so

I have them all organized in a category if
you’re in a product in that category you’re

gonna see a different header so you can see
it’s all pretty much a basic Beaver Builder

stuff just go ahead and build one together
right now some going to my dashboard I’m in

a go to builder and then theme layout cinema
to go ahead and add a new layout and let’s

call this may be header for posts about fidget
cubes okay now that I’ve typed that enema

choose the typing it’s going to be a theme
layout and then for the layout here’s your

options obviously header or footer and these
are the options we used in the prior video

where we were creating singular posts templates
for WooCommerce pages and here’s can be that

option for creating a theme part okay so let’s
go ahead and choose header click on add theme

layouts and what I can do right away is launch
the page builder and then here is my options

for where it’s going to be assigned to severity
now let’s go ahead and choose that now someone

who assigned this to posts in a particular
category about fidget spinners and this is

a category that I’ve already set up in here
some of the of different header options that

you have number one you can make it a sticky
header might as well choose that because I

haven’t actually tested it so I can be a little
bit dangerous and then you can have it shrink

when you start to scroll down the page let’s
just turn it on were just gonna see what happens

why not and then what the overlay is is is
the navigation will be overlaid on the content

beneath it so if there is a big hat header
image for the post the menu will be underneath

it I’m not can enable that now I haven’t played
with it so it might be dangerous in this video

but maybe will do that after I just create
the basic structure so go ahead and click

on publish and now I’ve created it but I haven’t
customized it in any way this would be actually

interesting let me go and see what it looks
like right now so if I click on that a minute

click on the actual post right here and then
it’s already showing us the new header even

though it has been customized this is a theme
part I actually should get rid of real quick

choice to go ahead and launch the page builder
and this is what I love about Beaver Themer

if you use Beaver Builder you already know
how to use the Beaver Themer there is nothing

to it you know how to change this background
row color and this is actually a secondary

topic bar that you see a lot in navigations
so I mean these are just two separate rows

in these are essentially just modules right
here so here is my menu navigation module

right here for my menu settings and let me
scroll this down I can choose the menu that

is assigned to that self for blog post I might
want a totally different menu and totally

different options in those menus now you can
choose what you wanted to be vertical accordion

or expanded so vertical is really going to
be when you’re making one of those of vertical

menus where it’s not at the top those the
headers kind of off to the side left to right

and there some other different menu styles
right here we obviously can go accordion or

expanded him to go back up to horizontal that
your more typical menu would be to have it

be horizontal I’m in a probably stick with
that we have our responsive options here as

well which is really nice it’s definitely
consideration a huge consideration when you’re

building out a header is what is that going
to look like on a mobile device so we have

our mobile toggle options here and we also
have the style that we can choose I personally

like a kind of a miniature or a compact header
cell on a mobile device so I would probably

go with in-line in line would probably be
your logo or site title to the left and then

on the right you have yourself a hamburger
icon or something like that we also have our

style here so I have the menu alignment by
default is on the right but I can go ahead

and make this on the left if I wanted like
that and there’s different options here for

your colors and also for your submenus and
it’s pretty awesome all the options that it

gives you I mean you can really do some nice
stuff with the menu I will say it doesn’t

give you the flashy this that you may want
to with a menu like where you hover like cover

affects right you hover and then is a nice
thin line underneath the menu item you not

to get those now I don’t think you’re going
to ever get the most I don’t think Beaver

Builder themselves or to build that into Beaver
Themer I think they’ll let a third-party add-on

developer like powerpack or ultimate add-ons
go ahead and develop that and I know that

ultimate add-ons already does have some of
that they just need to integrate it with the

WordPress menu system which I think they would
be smart to do here very soon so I’ve already

gone ahead and I aligned this to the left
and you might be wondering well if I lined

it to the left why is it so far in the middle
and that’s because these are columns right

here and I can easily just go ahead and resize
my column however I wanted so if I wanted

a three column layout where I have my logo
I have my menu and then I have something else

here on the right that’s actually very easy
I would just go to add content road layouts

and I would drag and drop this column in right
there and now I have a hoops I put that in

the wrong areas let me get rid of this let
me drag that column where I wanted it right

there there we go and now I have my new column
right there so obviously with menus you have

to be careful you don’t want your menu spilling
into a second line and also like this you

don’t want your header name or logo taking
up too much hype like this one is right here

so what I would do here is just lower the
height there to maybe 28 or something like

that but you’re typically going to have a
logo in there anyways’85 Go to 28 to make

this look good I write so there we have that
and right here you might you know it is very

popular these days is putting a button in
your menu and you can have one button or two

buttons or something along those lines so
let’s do that I want to go in and click on

add content now what’s nice is we can use
the button module that comes with the Beaver

Builder if we wanted or we can use it from
one of the button modules that you can get

out of one of the add-on packs which typically
gives you a little bit more visual styling

options or you can even do a dual button from
one of the add-on packs right there so you

have to obviously be careful of the amount
of with your taking so let’s just go ahead

and use this button right here let’s see Emma
to go ahead and change this text to order

now alright I’m not to put anything for the
link and what’s nice when you’re using one

of these add-on packages you get some more
options so I can go with maybe a transparent

button like that let’s see how that’s gonna
look and I would probably want to change out

my colors a bit so I would make my text color
that’s fine the border color I’m probably

gonna want to make that White so let me make
that whites and let’s see that’s all fine

and we can even change the hover colors if
we wanted that’s fine I’m not to customize

that too much but the alignment I would probably
want it aligned lets you get this all screwed

up I probably want this aligned to the right
here it is structure alignment center him

and to make it aligned right just like that
okay so there is my button now let’s see this

is one thing that you might not be aware of
most people are these days and actually I

don’t think you’re in a run into that problem
here and that is your column height alignment

whatever so let’s me show you that so if I
go on any of these columns and I hover there’s

this icon here that’s his edit column and
I can go into column settings now in the column

settings it’s the column height now by default
this is set to equalize that such a yes and

it’s at the center but I was noticed noticing
when I was playing with the center hit to

the top are they alignment to the top just
evened everything out a little better for

some reason so this is by default it’s going
to be in the center but ever so slightly the

menu is not center with what I have here so
when I went to the top it did it just a little

better almost perfect all right and we have
this custom header menu right now or this

is aligned to the left and we have a button
here on the right so let’s go ahead and save

and assign this to something this is a little
different than the one I did earlier I actually

had the menu perfectly in the center so I’m
going to go ahead and edit the theme layout

and I think we might’ve assigned it let’s
see we made it sticky we made it shrink we

didn’t do the overlaying we made it on the
posts so I guess if I clicked on refresh right

here we should see my new header and there
is my new header let’s see there it is when

I start scrolling it shrinks now I obviously
didn’t modify the top area right here of the

header but you can get the point I like that
that’s actually very slick so let me actually

get rid of this theme part and then were going
to go ahead and attempted this overlay mode

so I need to go back into my theme part I
shouldn’t have started this video with this

assigned here let me go like this and that
should get rid of my theme part let’s see

no more themepark there we go okay so now
I like that I want to go ahead and see what

happens when we think that menu transparent
this is dangerous when you do this on video

okay now was in header layout it was this
one right here the header posts fidget cubes

all right overlay yes okay you live on the
wild side of an update that do a refresh and

see what happens actually that was not bad
at all you can see it just eliminated the

color and pulled everything up now for this
it doesn’t look good in my opinion having

this top area right here because obviously
I didn’t make everything in the white color

and I would probably want this menu pushed
up more soaps the beauty about this is I can

easily just go back in here and make the change
immediately and I already know how to do all

this stuff because I own Beaver Builder and
I’ve been using it long enough that these

changes only take a few seconds so now let
me do a quick refresh and see if I like that

that’s actually much better I might wanted
a little tighter so I might want to reduce

some of the spacing here so what I would do
there is go ahead and get back into the page

builder my header and see if I can’t tighten
this up a little bit so let’s go ahead and

go into my row settings in advance and let’s
make these top and bottom padding’s zero like

that and that’s tightened it up pretty good
right there and I’m going to save its and

let’s see what that looks like okay we got
a refresh here I actually like that a lot

that looks fairly perfect for me in you can
change these hover options in the navigation

I didn’t do that in their ego when I start
scrolling then my color pops out and the order

now button just fits in their perfectly everything
fits and they’re just perfectly like that

very professional and the beauty is when I
go back to the homepage it uses the theme

generated header so I can literally create
as many of these headers as I want and assign

them where I want logically with these options
right here so you saw how I assigned it to

the post category so I can also have a different
header based upon whether someone’s logged

in or logged out so I hope you see that this
is really unlocking some very interesting

powerful options to really take your website
in and have it be the very best experience

for your website visitors and you already
know how to do all this stuff is just installing

the theme or and giving it a shot so the next
is and I was just screw around with it a little

bit was these theme parts I will give you
a Caveat with the theme parts if you’re using

a Beaver theme or goalpost layout for maybe
WooCommerce or for a blog post a lot of these

theme parks you hook them into certain areas
some of those areas you’re not to be able

to show you what I’m talking about right now
let’s create a new one so I think in that

scenario I was saying I wanted to have like
a little tiny notice above a blog post and

it would be sort of like a call to action
let’s call this a fidget call to action Eric

all you some abbreviations this can be a theme
layout and for the layout I want to choose

a part and I’m a go ahead and click on add
theme layout and here we are and I’m going

to choose this is where it’s a little different
and it’s a little technical but it’s all like

plain English and I think it will all make
sense so you take these theme parts and you

assign them to different areas on your website
and then you choose when those will show okay

so first we choose what’s called the position
so a position is four pages the page open

the page close the header that would be the
area above the header and you see that a lot

when someone try to get your attention for
sale or something like that and there’s before

the header and then after the header sets
can be just underneath the header and then

for in the content to can be before the content
and then there’s various options there the

same for the footer these post-ones were the
ones that were not working for me when I was

using the theme parts when I was trying to
assign it to a layout that I built with Beaver

Themer so you just might want to know that
there so I would probably do maybe likable

for contents and for the location let’s go
ahead and put it on all of my posts right

here some to choose posts like that and I’m
to choose all posts and it will be for all

users let me go ahead and click on publish
and then I’m in a go on launch page builder

now because of the theme parks and all the
different options with theme parts you don’t

have theme park templates you notice when
I created a new header it already had kind

of a default one in there when I create a
new post layout it already has a default in

there so not so when it comes to theme parts
because could be anything you want so I’m

in a do something real basic soma to go ahead
and take the headline like this and I am going

to let me do the style for someone to go ahead
and I’m in a make it center aligned and I’ll

leave everything the way it is and I’m going
to go ahead and type something in here okay

so I’ve typed this and right there enjoy this
content then you will love my fidget cube

buyers guide click here now it’s taken up
way too much space I I really like them when

they’re compact so in your to see what I mean
with all this so what I want to do here I

need to put a link in I wanted so when anyone
clicks on any of this text it’s going to take

them to where I want them to go and I don’t
want to take them away from where they are

so many have this open in a new window and
let me just choose my fidget cube product

page okay so there it is I have that linked
up so now let’s tweak the style of this a

little bit so I’m in a go here I don’t want
the font to be so large so I’m gonna change

my font size to something custom and let’s
see it’s gonna pop it in a 24 that’s still

a little on the high side some of the goat
with 20 and I’ll just take it how it is and

okay so we want to reduce a lot of this margin
here are the what the spacing so I’m to go

ahead and check on my row settings like this
and I’m in a remove out that patting someone

to put in zero and zero and that already tightened
it up right there that should be fine if I

wanted to tighten it more I can reduce it
for the actual module I put in so it set to

20 X and let me go to 10 and then 10 okay
there you go and that tightened it up just

like that perfect so I have created a theme
park let me go ahead and click on done and

publish changes all right now let me go back
in here and make sure I have this assigned

right so this is gonna be before the content
on all my posts now to be really smart a really

advanced marketer is you would have a relevant
theme parts on relevant content so if this

was a theme hardware I’m having a call to
action about a buyers guide for a fidget to

buyer guide I would only want that theme park
to show on content about fidget cubes okay

there you go right so I got this all saved
out here and click on updates and I’m in a

go ahead and go to my menu that I created
and I want to disable that real quick remember

I created that menu just a that new header
just a moment ago I’m a go ahead and remove

that actually I’m just gonna remove the overlay
because I don’t know that’s going to happen

right okay so very are let me click on my
fidget spinner see what happens there we go

so right here I’ve got my custom header and
it does stick like that and then I have this

right here and so whenever anyone clicks on
it it’s going to take him to the link that

I put in just like that now let me show you
something really neat in this is what I’m

to do I’m not a fan of sticky headers so let
me disable this sticky header right here and

doing updates and let me do a refresh okay
so now it’s not to stick let me show you how

to make your theme heart stick okay and this
is how I’m getting use it because I don’t

think it makes sense to have your headers
that I think my call to action is should be

sticking so I’m in a go ahead and add a new
plug-in let’s see plug-ins add new and I’m

sorry if I’m going off here in the type a
search for sticky and I forget what the name

of the plug-in is if I can spell it right
I’m sure to pull right on up there goes there

it is sticky menu or anything on scroll this
is when I want to do them to go ahead and

install this is a great plug and I actually
have a video on it that I created last year

I use it to create sticky menus so it’s can
add a new option here to your settings called

sticky menu and let’s go in here we need to
create a class name so what I do is I do.sticky

there is I was spell that wrong I am not a
good speller let me go and toss that into

my clipboard and then let’s see here or I’m
looking to tweak a lot of this stuff is I’m

doing it all on the fly we might need to we
might need to adjust the Z index right here

in the advanced settings just to be on the
safe side I meant to give it three nines like

that okay there we go so what I’m trying to
do and this is good stuff guys it’s worth

the extra minute of your time I’m gonna make
this call to action stick right so many go

back into my theme part like this and it was
my theme part that was in it actually Barnett

it was right here fidget post CTA am I going
to launch the page builder like this and for

the row I’m in a go into my row settings and
then I might go to advance and I’m going to

paste that.sticky right there but I don’t
think I need the.actually I was gonna say

sticky because I wanted to stick click on
done published changes and let’s see if I

did that this all on the fly guys if I make
a mistake please forgive me up there it is

you know why I’m not getting a color as I
didn’t specify color see it’s thinking you

could see the text so if I was smart I would
change the color actually just set a color

all right someone go back into my rose settings
and I’m going to go to background I’m going

to choose an actual background and it’s going
to be a color and I will make its let’s just

grab a quick color like that’s that’s fine
and I need to make this fullwidth like that

all right this is going to be good might want
to make that font smaller legacy I’m just

having fun now when do a refresh and you will
see the power of this so you put your mind

around this you can have these conditional
call to actions that are the right message

on the right piece of content and check this
out it sticks so now when someone comes here

there reading and they’re seeing this call
to action and if you don’t have it stick like

that they just scroll right past it right
but now it’s just sticking right there and

I use this this plug-in that I use to make
this thick all the time and you saw how easy

it is to use so anyways that is a theme parts
in a nutshell that is custom headers in a

nutshell I hope you can see the power and
the ways that you could use this to boost

the engagement on your blogs to have more
relevant content two increase the amount of

leads your website can generate also increase
sales if you have an announcement about a

sale or something like that and I didn’t even
show you some of the more cool things you

can do here when you mix in ultimate add-ons
for Beaver Builder mix in their countdown

timers there different button styles Hector
different row styles I’m hoping that you can

see the power of Beaver Themer and how you
can use it to really make things faster and

how it’s really one of those special tools
that will pay for itself really quick so I’ve

shown you some things and I’ve only scratch
the surface of custom header scratch the surface

of these theme parts I want to hear what is
going on in your mind how you think these

could be used to make things better faster
increase sales increase engagement I want

you to go ahead and leave a comment out below
of how you see these tools being used in your

business

Adam @ WPCrafter

Adam @ WPCrafter

My passion is making the best quality video tutorial online, for non-techies. When I am not behind the camera, I am usually helping out one of my YouTube subscribers.

8 thoughts on “Beaver Themer Tutorial – Create Custom WordPress Headers & Theme Parts”

  1. J

    Hi, great video. Can you help clear up some confusion> I have Astra theme Pro, Beaver builder full version and Beaver Themer. Thing is, a lot of the functionality seems to overlap so it’s confusing which way to approach something. For instance, I would like to create headers for specific page topics or post categories/ product categories. Do I use Astra hooks with beaver builder header or Beaver themer with Beaver builder header. Also for editing Woocommerce pages do I use Astra woocommerce addon editor or Beaver themer? Thanks in advance. Jeff

  2. seems like the latest version of themer does not allow to choose “type” the way you have it where you can choose header. the version I have (the newest one) has

    template
    row
    module

    or am I missing something

    1. Yea with mine I can sort but not filter on the type. That stinks. You can ask them to add it, they are pretty good about things like that.

      For me I can easily add it with a paid plugin I have installed named Admin Columns Pro. But for me, I have that plugin for other reasons.

Leave a Comment

Your email address will not be published. Required fields are marked *