Beaver Themer Tutorial – Create Custom WordPress Headers & Theme Parts

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

About the author

Comments

  1. Hi Adam
    I see that you are excited about Beaver Themer if I consider the number of videos you publish. I would suggest that you slow down and plan your presentation more. We only now look you experiment. It would be better if you would show us on a real project. Thanks.

  2. Hi Adam, thanks for these videos! I'm thinking I could add the UABB pop up modal set for exit intent to my footer assigned to the entire site to ask for emails before visitors leave. Your thoughts?

  3. Hi Adam, u r great. which one you like better elementor or Beaver Themer? since i'm a newbie which one is better for me? or maybe i should buy both of them? thx

  4. Hi Adam … thanks for your time & effort you put in these videos. Really helpful. Will check up on your other video regards the Sticky plugin, as that triggered my interest as well.

    What came to my mind, when watching the part about "sticky parts" = is there an option/possibility to add a "close" option for the row, if someone doesn't want the sticky row to be there all the time? Is that possible with Beaver Builder/Themer ?

  5. Hey want my course Beaver Builder Essentials for free? When you purchase Beaver Builder or Beaver Themer through the link on my website, I will enroll you in this $149 course for free. Here is the link with all the details https://www.wpcrafter.com/beaver-themer

  6. Hi Adam. Any ideas on how to deal with a retina logo? A bit disappointed they forgot this part, considering logo and menu are the most important part of any header.

  7. Thank you for this video series! It's exactly what I needed to get started developing my first site while using Beaver Themer. It's really quite awesome, and like you, I'm betting Themer will be especially helpful when using Woo Commerce and generating improved customer engagement. FYI, if you happen to be a WPStudio member, the Voce Theme for members only, but provides the code and simple instructions to integrate Beaver Themer.

  8. Thanks for sharing Adam! That stick(e)y trick for the CTA row you had at the top of the page was slick! Great idea! 🙂

  9. Can I use Beaver Themer custom headers & theme parts on my WPLMS Theme? Appreciate your advice. Thanks.

  10. 27:02 That sticky tip for call to actions is great! I wish I knew how it looked on a phone as well. I wonder if there is an option to only have it show up on desktop versions (or desktop + tablet versions) if it takes up too much of the screen on a phone.

    18:00 The menu overlay really looks professional. I really like it a lot.

    I think I'm going to get Themer on Sunday; I already have the standard Beaver Themer, and if I do, which I'm 99.99% sure I will, I need to remember to buy Themer via your affiliate link. You really have given me a good introduction to the capabilities of Themer. Thanks so much!

  11. Good vid! Does disabling the WordPress theme's natural header and footer and making a header and footer with Beaver Themer have any effect on how Google crawls the site and SEO? Thanks.

  12. Which is superior / more powerful in your experience: Astra Pro Advanced Custom Headers or the header location settings available in Beaver Themer? Thanks Adam!

  13. Sooo inspiring Adam, thanks! Considering building a corporate website using Beaver Themer and Pods. Already made a directory site with Pods and Avada, but being able to create layouts visually and applying it to specific content looks much more fun!

  14. Hey hello I have standard beaver builder and there is no such option for themer layout for header footer? How to add it?

Leave a Reply

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