In this video to show you how to create a
custom header and footer for your WordPress
website if you're using Elementor hi my name
is Adam from WPCrafter.com where I release
a ton of content to help you get better results
with WordPress faster if you're new here consider
clicking on the subscribe button and the links
to everything I talked about this video will
be linked in the video description down below
so something new came out for Elementor today
now it's only for Elementor Pro now if you
head over to Elementor Pro's website ledges
go over first how much this darn thing cost
it's included if you already own Elementor
Pro scrolling down here we go $49 for single
sites 99 for three sites in 199 for unlimited
websites and essentially this is a companion
for Elementor the free WordPress page builder
for WordPress and it's going to give you lots
of new features one of those new features
was announced today and I've been playing
around with the beta for a few days and essentially
what they just released was seen at the ability
using Elementor Pro to create navigation menus
now it might seem like a small thing but is
actually a huge thing because what were seeing
happen is page builders being able to create
anything for your website with them and that
is the direction that I been hinting around
that Elementor's going it's been obvious the
writing is bent on the wall a few months ago
they released the ability to create coming
soon pages and maintenance mode pages that
was the first indication then they released
a way to a new feature to add the login pages
login forms to your website and now were seeing
that you can build navigation menus for your
WordPress-based websites and I've got to say
I'm a link to this of course below everything
is good to be linked down below but this has
got to be the most amazing navigation menu
widget builder I've ever seen and you know
a few months ago I reviewed a theme called
the X Pro theme and that was really the first
thing that came out that had a header builder
header and footer builder and I was really
harsh on it because they made it way overly
complicated and that's the thing I love about
using Elementor is it's not complicated to
use once you get used to it and as they keep
adding new features and functionality to it
you don't have to re-go through the steep
learning curve because you already know how
to use Elementor if you know how to use Elementor
your know how to use whatever they add to
it and that's the same thing with this new
menu builder and it's pretty amazing I'm to
just scroll through the blog post here to
give you an indication of what it can do and
then I'm going to show you how to use it on
your particular WordPress-based esteem so
you got this video here I suggest you watch
Ben from Elementor created it and it's very
revealing of all the features that come with
this a builder now here is an example of it
you see I love the slow motion just by the
way I should start adding them to my website
but you see right there you've got full control
over the hover effects right there and you
can do different types of navigation menus
you can have it be a vertical or horizontal
navigation menu you can also have it be where
there's a hamburger icon you click on it and
then it reveals the menu now there's all these
pointer animations and that's what happens
when you hover over the different menu items
and you could see them right here they're
all categorized right here there's no sense
in even actually showing you this other than
that reference this page because this is where
you see when everything does and I love it
I write really love everything that's happening
so there's two different things there is the
if you notice right here it's the way the
animation happens so fade slide grow drop
and drop out and then the different types
of animations right here you could see them
right here for the framed animations overline
and underlined to there's just it just keeps
going on there so many different ways to make
this look exactly how you wanted to look on
your website and make your website look how
you wanted so and then you have full control
over the spacing which is pretty huge as well
I tell you prior to this if you want to customize
your menu say that comes with your theme it
is so tedious in such a hassle but now with
Elementor you can use the page builder that
you already know how to use in order to change
the spacing that colors the animation every
single thing you could want to do to a menu
you can easily do now with Elementor you can
even have submenus right there all the colors
are controlled you can put use all right there
momentarily there was like a pill background
you could do anything with this it's just
so amazing okay so now you're probably looking
at this and is actually good to also look
through the comments but now you're probably
thinking this is great but my theme has its
own menu system how do I use this in my theme
and I want to share with you right now so
there are two ways to do it so number one
there is a plug-in by the makers of the Astra
Theme cup header footer Elementor now what
this is is a free plug-in that you can install
on your website now your theme has to support
it now luckily right here they've made documentation
to that you could actually send to your theme
provider if it doesn't support and say hey
can you support this or can you tell me what
I need to do in order to make this work on
the theme I'm using at your the developer
up you could just send them this link and
this will be linked down below as well and
this will be some simple instructions for
them to add support for this plug-in and here
is the plug-in right here now here are the
a list of supported teams of course Astro
they make Astro so at Astros one of the supported
themes GeneratePress Genesis Beaver Builder
and OceanWP now obviously you probably wouldn't
use the Beaver Builder theme if you're an
Elementor user but their support for that
as well anyway now using this plug-in couldn't
be any easier and I'm to show you that in
this video now the second way is if you just
want to so this way you can be of the creature
entire header right Bill put a logo in their
calls to action navigation menu buns whatever
you want that's the ideal situation now if
you just want to swap out the navigation menu
that your theme has for what you're now able
to create an Elementor you have to use something
a little more complicated and that's called
hooks so you'll need a theme that has support
for hooks in an easy way for you to put those
hooks and I know all the themes on this list
do have that Astro though it's the theme is
free and the ability to add hooks is free
as well I am going to make a video that is
more newbie friendly on hooks what they are
how to use them but that videos not out just
yet just know that's the second way to just
use this menu option with your theme now before
I actually show you using this plug-in on
your theme I do want to give you a little
caveat I really think that this is almost
to be something that you only temporarily
need and that's because if this new release
is any indication within a period of time
whether be a month to month by the end of
this year I am pretty sure and I'd be willing
to bet my money on it that with Elementor
you're not can I need this plug in your to
be able to build the entire header with Elementor
not just the menu the entire header I'd be
willing to bet money on that that that is
coming so you can use this for now and then
in a few months or so if they release it when
they release it you can go ahead and just
swap it out it would be very easy to do but
I never recommend waiting till something is
out or a better way because you're gonna find
out that you're waiting for a better way all
of the time so it's best to just jump in now
and use this header footer Elementor plug
in so check out your website just go appearance
Ansari plug-ins and new do search for a header
footer Elementor it's in a pop-up do the installation
and the activation then under appearances
could be this new option that says header
footer builder and it could be easier to use
guys so what you do here's you go here click
on add new and you can name it whatever you
want probably just header or footer would
be just fine so I've gone ahead and created
this one that's his header now what you want
to do is right here it says Elementor header
and footer options you want to choose whether
what you're creating right now is the header
or the footer and that's it the minute you
sign it header then it's going to go and be
active in that's can be the header on your
website then all you have to do is click on
edit with Elementor and it's going to pop
right up now I've actually already dragged
and dropped in the element there the named
new nap menu element element now this is not
to be a tutorial in every single option with
this new menu building systems and that's
because there's probably a and B bunch of
videos coming out on that and I don't think
I'm to be of the do a better job than what
Elementor does so that's what I'm doing something
a little differently so probably what you're
gonna want to do is add some columns so you
can just drag and drop the columns and we
could toss a logo and here we can toss the
nab menu in here so if I want to do a logo
I'll just go here and I would choose the choose
the image option right here I think I might
have some of these like default local looking
things here about this gift that looks fine,
go ahead and insert it and there we go now
probably want a left align this like that
and we have all this extra space on Marie's
size my column like that now actually here
let me do something a little more different
to let me go ahead and add a column so now
we have these three columns on the go like
this and I'm going to go like that someone
to go ahead and put my math here in the menu
or in the middle someone go ahead and drag
it in it's the new Pro element right here
and it is called now have menu Dragon drop
that into of the first thing you're gonna
want to do before you start doing all this
is actually create a menu in WordPress it
basically pulls from that which is a very
good thing so I have created a menu I just
actually threw together and so all your menus
will be listed here I'll go ahead and select
that main and then boom there is my menu not
finish a couple little tips and tricks here
with alignment and making this look great
on a mobile device so one of the things that
I like to do is go into one of the column
settings like this and you would click on
it and it says edit column now one of things
I like to do is modify this content position
so this is the alignments vertically I don't
lay whether you wanted everything on the top
or the bottom are centered so for me I like
everything centered so I will go here and
I'll choose middle and you should notice now
everything's gonna be aligned perfectly in
the middle there and there we have it so let
me go ahead and save that now think what I
want to do right here is II think throw button
in some to go ahead and choose the button
element right here now let me make all three
of these elements centered something to go
into this column to change the content position
the middle I'm in a go into this column and
I'm in a make the content position middle
and there we go everything just perfectly
middle so let me go ahead and take this button
and I'm going to write alignment like that
actually let go center that might look a little
better and we have a fully customize header
where you got this button on the right is
actually very modern header where you have
the logo than they have over there on the
left and then you toss some kind of a button
on the right so let me go ahead and click
and treat just some of the options that you're
getting with this snap menu like I said it's
best to refer to the blog post if you want
to see the variety of pointer options and
animation options but we have basically you
can cost everything on this on this plug in
here when you go here to scroll down this'll
probably be the best guide of what you can
and cannot do with it so let me go back here
and let me just go ahead and click on save
just in case let's take a quick look at it
by going like this and we have it right there
and I think this looks great so far if you
want to get some elements closer we could
just change the spacing there now what you're
going to want to do and it's a very crucial
that you do is you have to run this through
what it's gonna look like on a mobile device
okay so what we want to do is click right
here on the bottom left and choose mobile
now this does not look good at all and I'm
there to show you how to tweak it now and
so what I would probably want to do is I want
this in this on the same line and then I probably
don't want this button there someday hide
that on a mobile device so let me go back
exit here I can start tweaking all that right
now summer click on the button I'm in a go
to advanced and then right here there's going
to be on the responsive option there's these
hide on option so actually hide that on the
mobile device and I'm probably going to go
hide on the tablet at all so this is how I
wanted to look at only want that button when
I'm on the desk the desktop actually I'm not
sure why it still showing them that's alright
so now we want to get these two items right
here on the same line and then we probably
want to align this hamburger icon off to the
right and this is actually one of the best
features of Elementor is they give you total
control of that so what you want to do is
you want to go into the different column settings
for this column in this column summit click
right here and then right here it says column
with and this is actually where we wanted
and it's in terms of a percent percentage
so right now it's taken up the flow with working
to make it take up less with us so we could
say make this take up 70% and you see now
we've got this opening here to push this Colman
so if I made this 70% I just need to make
this column 30% so when I click on this and
then I enter 30 like that you can see now
they are on the same line now probably what
I want to do so want to click on this and
hoop section I want to click on the click
on it and what I want to do is I want to make
it right aligned now let's see how that works
if I go to mobile drop down here is where
the specific mobile settings for the navigation
menu will be so I don't want to change it
right here I want to change it on the mobile
drop-down options so right here it says only
toggle a line I'm going to make this go to
the right and there it is that is the navigation
menu that I am after so let me go back to
the desktop and you can see it's like this
and then when I go to the mobile device it's
like that this should I don't know why it's
actually not hiding in preview but that could
be just how it is and that's okay so this
is how it should look on a mobile device and
work and actually test that right now all
right someone to go back to desktop now obviously
there's a ton of options here I didn't really
go over them at all you can reference that
post if you wanted to there some different
style options you can make this look exactly
how you wanted to look some go ahead and click
on save now I've already assigned it to be
the header in that header footer Elementor
so when I click on a refresh right here it
should show that new header right there where
I have the logo and I've got the menu right
here in then I have this button now what I'm
to do I making this video in chrome but in
Safari it has this really cool way of testing
websites on different devices is one of their
developer tools and it's right here so you
can see what a website looks like on various
different devices so you can see what I was
going after was that button wouldn't be there
and so it looks sexless on what I want and
so this is now what it looks like on a mobile
device I could probably play around the padding
little and pull that up but I wanted you to
see how you don't see this column or that
button on the mobile device which is what
I didn't want so when we test the toggle right
here for the menu you can see everything scan
is scrunched in the side and that's because
there's one setting that I needed to enable
that I didn't let me go back to chrome here
we are there's this option here that's is
full with thunder mobile drop down so what
this is going to do is when it's the mobile
option it'll take up the full with not be
stuck in that little 30% or whatever that
I set it as so if we enable this and then
click on save I should be able to go back
and do a quick refresh and that should work
properly so now when I go there it is you
can see it right there it is actually perfect
this is exactly how I would want it so anyways
this is the new menu navigation for Elementor
approach if you don't have Elementor Pro is
a great time to purchase it I do have a link
in the video description and I also have a
little promotion bonus I like to do I created
an entire extensive course on Elementor and
I like to give that to
