How To Create Custom Headers & Footers With Elementor For WordPress With This Tutorial


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

Add a Comment

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