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 urine 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
