How to Create a Custom Website Footer with Elementor Pro

By | March 7, 2020


[music] Lots of people ask me how I made the custom
designed footer on my website. It’s not part of the theme. It uses the Elementor page builder and you
can do it really easily too. I’m Dave Foy and I’ll show you how it’s done. Here’s the footer on my website designbuildweb.co. It’s a custom footer built with the Elementor
page builder. And it’s a template which is in Elementor’s
page template library. It automatically appears on all pages of my
site. It’s not part of my theme at all, it’s totally
separate. I use the GeneratePress theme on this site
and in fact on every site that I build. But in this case I have my theme’s footer
switched off totally. If you just have a look it’s got an email
sign up call to action with a popup form just within this white box. The top of the box is pulled up and out of
the footer area, overlapping the content above it, just with a nice drop shadow to help it
stand off the page. It works really nicely responsively. I’ve also got a couple of custom menus here too. I’ll take you through it all step by step. So an overview of the process. Firstly we’re gonna create the basic Elementor
template in the plugin’s template library. We’ll make the white signup box. Then we’ll add the popup. Then we’ll add the 2 custom menus and then
finally we’ll make it so that this template is pulled into the footer area of all pages
of the site automatically. And by the way, if you want my own Elementor
footer template that you’re looking at now, that you can just import into your own projects
with one click, stick around and I’ll tell you how to get it. The first step is to create the actual Elementor
template itself, the footer template. We’ll head down to Elementor>My Library. Then click ‘Add New’. Now this creates a brand new template which
will eventually become the footer. Give it a title, ‘Footer’ seems appropriate. By default the blank template will actually
include all your theme’s usual default template elements, you know like maybe the theme’s
header, footer, page title etc. We don’t want to see those on this template. We want a totally blank canvas. So we’ll change the page template for this
template and choose ‘Elementor Canvas’. This is just a feature of Elementor that allows
you to start with a totally blank page. Now ‘Publish’ and don’t worry Elementor templates
don’t appear anywhere on your site unless you actually tell them to. And finally we’ll ‘Edit with Elementor’. That’s the template file created ready to
actually build the footer out. Before we start creating all the fancy pants
stuff I’ll just make this dark band that stretches across the page. So we go to ‘Add New Section’. You’ll have noticed in mine that we had 3
columns so I’ll choose the 3 column layout for this section. To add this dark coloured background to the
whole section, we click ‘Section’ here to access the settings. I’m going to set ‘No Gap’ here for the columns
gap. Just because, in this case, I just found it
better to control the gaps between columns manually so we’ll do that later. We’ll go to the ‘Style’ tab and it’s actually
a really subtle gradient background so I’ll add that here. It’s such a brilliant feature of Elementor. Now we’ll save that and then preview it here. Now we don’t really see much yet because the
section doesn’t actually have any content yet to give it any height so well, we best
do that now eh? So I’ll make the white signup box first. This is just achieved by giving this first
column a white background. So we hover over the column, click it and
then we’ll change the colour to white over here. And… nothing’s happened! That’s because the column still doesn’t actually
have any content in it. So we’d best remedy that. Go over to the widget chooser icon. We’ll drag in a heading. Ah, now we have a white column. Now leaving this heading as H2 is fine with
me. Let’s first replace the text and then I just
want to beef it up a bit. So click Style. Turn the Typography setting ‘On’. By default, they’re turned ‘Off’ which just
allows your theme’s styles to shine through but we want to override that here. So we’ll whack the size up to something like…
’43’. A touch more line-height. Something like ‘1.1’. And that’ll do us for now. Now we’ll drag some text in underneath. So I’ll drag the text widget underneath the
heading. I’ll replace the default text and the default
styles for my theme are looking pretty good there so I won’t overwrite the typography
for the text. Now we need a button so back to the widget
chooser. Drag in a Button widget. Now I’ll replace the button text and just
make a few little style adjustments, a bit of colour and things like that. And the last thing here for now, this column
needs a bit of padding inside it for a bit of space, a bit of breathing room. So back up to the column settings. Then the the ‘Advanced’ tab. I’ll leave the padding settings linked cos
they’ll be the same all the way round anyway. I’ll just bump these up and I reckon ’30’
looks pretty decent. Now we’ll just make this column a little bigger
by just dragging the column here. And I think I’ll just add a bit of bottom
margin to the outside of the column, just to push it away from the bottom of the section
itself. 25 pixels bottom margin should do it. Now we need to round off the corners of the
white box. Mine have got rounded corners. So back over to Style. Down to ‘Border Radius’. I think I’ll just have it at 5 pixels. And now we’ll just pop that shadow on it that
will help it stand out later on when we pull it out of the top of the footer. I’ll just leave the Box Shadow settings at
default, that’s fine. Now we’ll pull it up so that it’s popping
over the top of the footer. So, in the column settings back to the Advanced
tab. Now just look what happens if we add a positive
top margin number. Alright, so we’ll just add that, bump that
up. The box gets pushed down at the top because
you’re adding margin to the top of the box. It kind of makes sense that, if we go the
other way and we use a negative margin, then instead of pushing it down, it’ll pull it
up. I think I have it at something like minus
70 pixels on my site, so we’ll do that. Of course, while we’re editing, that’s now
pulled it up and out of the site, where of course, on the site itself, it’ll actually
overlap whatever’s going to be above it. So temporarily I’m just going to add some
positive top margin to the entire section itself. We’ll add top and bottom margin actually. Something like 100 pixels. That’s purely just so that we can see what’s
going on while we’re editing. We’ll remove it later when we embed it on
a page. We don’t want there to be any gap at all between
whatever’s above it on our page and the footer eventually. So we’ll remove it later on. Just while we’re on the subject of negative
margins I’d actually like the gap between the heading and text just to be a bit tighter
so I’ll click on the heading. Go to Advanced. I’ll unlink these margins. And then I’ll add a bit of negative margin
to it and because it’s a negative bottom margin it doesn’t push the content under it away,
it pulls it up closer instead. It basically just does the opposite, which
is pretty handy. I’ll save this, then Preview and that’s not
bad at all so far. At this stage I’d always check out what it
looks like responsive so we’ll go down here to the responsive settings and choose ‘Tablet’. Yep, that’ll do. And ‘Mobile’ actually pretty nice as well. So I’ll just go back to desktop mode for now. So now we’ll add the popup to the button and
as you saw on my site, the button is attached to a popup. I don’t want this video to be hours long so
I’m gonna skip the details of exactly how you do this. I’ve got another video where I tell you in
detail how to do it. I’ll pop the link to it in the description
under this video if you want a more kind of thorough walk through. The basic idea is though, you use the free
basic Popup Maker plugin. Create a popup in Popup Maker’s Admin area. Then, when you’ve done that you go back to
Popup Maker’s All Popups dashboard. You copy one of the CSS Classes that it gives
you on the dashboard. You then paste that into the CSS Classes field
in the Advanced tab of the Button Widget’s settings panel. That basically tells the button which popup
to popup. Ok, now we’ll add these 2 custom menus. Pretty straightforward actually. In our main WordPress dashboard go to Appearance
and then Menus. Click ‘Create a new menu’. We’ll give it a name. I’ll call it something really inventive like
‘Footer menu’. Create Menu. On my site this menu is linked to the main
pages on my own site so I just come over here to the Pages area, the Pages Menu. Tick the ones I want and then click ‘Add to
Menu’. I can drag them into the order that I want. We want to ignore the menu settings here. These just allow you to assign this menu to
a pre-set location set by your theme. You know like the main navigation or something
like that but we don’t want to do that in this case. Just ‘Save Menu’ here. While we’re here, we might as well make the
other menu, the social links menu that I’ve got. So again, ‘create a new menu’. Give it a name. Now this menu is made of links to things like
my Twitter page, my Facebook page, so I can’t just add pages from WordPress. But if I come over here to Custom Links, I
can then pop in the URL and the name for each social channel one at a time. And for this video I’ll just put a hash symbol
in the URL field for now just for speed but you’d put your proper Twitter URL, your proper
Facebook URL. Save the menu and now we just need to add
these menus to our footer template. So, back to our footer template. To the widget chooser. I’ll just search ‘menu’. And then what we want is to drag this Custom
Menu widget into the second column, into this middle column. The title is the heading that’ll appear above
the menu so we’ll call this ‘Website’ or something like that. ‘Select Menu’ is ‘Footer menu’. So you can see why we had to create the menu
first. Then Apply. Doesn’t look great so far but, fear not, we’ll
sort it out. But while we’re here let’s just add the other
on too. So again, back to the widget chooser. And again search ‘menu’. We’ll call it ‘Social’ and we’ll choose the
‘Social footer menu’. Right, let’s sort out the awful styling. So first we need to make the links white. I always say to everybody that I teach, try
to make style changes as high up as you can. So, you know, if you change the link colour
on each individual widget, you’d end up with a bit of a maintenance nightmare in future. So if you set that style rule higher up, just
in one place, I’m gonna these to the settings for the entire section, then there’s only
just one place for you to amend it in future rather than multiple places and that affects
everything underneath. So we’ll go right back up to the section settings. And the Style tab. And under Typography we’ll make the links
in this section, the entire section, the links white. And the link hover colour the lovely pink. Perfect. Now to make the headings white I can’t set
that in this section because it’ll make the heading in my white box white too which just
wouldn’t do. So, alright, I’ll go to the column setting
here. Then in the Style tab, set the text colour
to be white. You’d think Heading Colour, I know and there’s
a reason why it doesn’t work but it’s a bit long-winded to explain why here but try the
Heading and if that doesn’t work try Text Colour and you should be good to go. And to remove the default bullet points that
the WordPress custom menu widget adds to make the headings uppercase, honestly, I actually
wrote a bit of custom CSS into the… I popped it into the Advanced tab of the section
settings. It’s pretty simple but I just had to do that
because, as I mentioned, the custom menu widget isn’t actually from Elementor, so it doesn’t
have the easy styling controls. Those custom CSS bits are in my template if
you want to grab that. These 2 menu columns need pushing down so
I’ll go in and I’ll add 50 pixels padding to the top of each column. Now remember, I set the columns gap on the
entire section to No Gap because I really needed a bit of finer control. So we actually now need to create that nice
space in-between the columns. So over to the column settings on the white
column. Advanced. And I’ll add a 50 pixel right margin just
to push it away from the other columns. And because of the space that it takes, it
now shrinks the size of that column. I’ll need to drag the width out a bit more
to something like 60% to make it the right size. And that’s a lot better. And while we’re here I’ll just drag the first
menu column to 15% I think. And that’ll leave the menu column at about
25%. So we’ll save the template again. And Preview. And I think that’s looking pretty sweet. So again, we’ll just have a quick look at
responsive, so Responsive settings. Do Tablet… not bad at all. And now to mobile. Ah! So the first job, clearly, is to get rid of
that 20 pixels right margin I added earlier to the white column. It doesn’t make sense here. So over to the column settings. And you can see here that we’re editing the
mobile view only. Unlink the margin values. This makes them all zero. That’s ok. We can add a bit of negative top margin back
in. Let’s see. Minus 25 or so looks fine for mobile. Now, scroll past the signup box. You can see the 2 menus need a little bit
of love as well, so first we’ll go to Column>Advanced. Remove the excessive top padding. So we’ll unlink and then pop back in that
20 pixels at the top. And I’ll hop over and just do the same for
the other column too. Now on mobile there’s actually room to have
these 2 columns side by side. There’s not a lot of point in having them
underneath each other. So to do that, I’ll stay in this second menu
column here. I’ll come down here to Responsive in this
tab. Click Mobile Width and ‘Custom’. And then I’ll choose a 50% column width for
this column. And we just need to do the same for the other
one. So we’ll click the column settings for the
first column. Do exactly the same. And that looks pretty good. Hop back to Desktop view. Hit ‘Save’ and that’s pretty much the footer
itself done. So we now need to just make this template
appear in the footer of all the pages on my site. Now here’s how I do it. So firstly we come over to Elementor>My
Library. Because I’m using Elementor Pro I’ve got the
shortcode here anyway but if you don’t have the paid Pro version of Elementor there’s
a brilliant free plugin called ‘AnyWhere Elementor’ that also does the job. I’ll copy that shortcode. I’m using the GeneratePress theme as I mentioned
earlier. And one of the reasons I recommend it so highly
is because of it’s Hooks feature. Basically it just allows you to pop shortcodes
like this so that they appear in any part of your site you like. You know there’s hooks for footer, header,
before the content, after the content, in the sidebar… there’s lots of them. I’ve got a link to GeneratePress in the description
under this video but other themes have got similar features too. I’m gonna go to Appearance and then GP Hooks
and I’ll paste the shortcode into the Before Footer Content hook. That’s the best place for it to appear. Click ‘Save Hooks’. Before we do anything else, notice how, in
the GeneratePress Customizer settings. In Appearance>Customiser>Layout>Footer,
I’ve got my theme’s footer turned off completely. I don’t want it on any page so it’s best just
to turn it off here. And again, other themes have got similar sort
of functionality, I’m sure. Now I’ll come over to a basic page that I
created earlier. All it has in the actual page itself, just
for this demo is a testimonial block that I created with Elementor. And you can see underneath it, here’s a footer
being pulled in using the shortcode that I added to GP Hooks. Ah! Now remember, I temporarily added some top
and bottom margin to the entire footer section, just to make it easier to edit. Now I need to remove it. I totally forgot. So back to edit the template. Click Section and Advanced. I’ll set those margins to zero and then ‘Save’. Now back to the page again. Refresh. Right, so that’s better. And notice that I had to add a good bit of
extra bottom padding to this testimonial block. As I say I created it in Elementor so that’s
really easy. That just provides a nice bit of breathing
space to allow the sticky out bit of the footer underneath it to sit. And that’s pretty much it. A custom designed footer that appears on every
page of my site. One question you might have is, ‘What if I
don’t want to use the GeneratePress theme?’. Firstly, there are other themes that allow
you to disable the footer and that also provide a hooks feature. Just one example, OceanWP is really popular
with Elementor users as well and it’s pretty friendly to non-coders. There’s also a plugin called’ Head, Footer
and Post Injections’. I’ve not used it myself actually but it basically
replaces the need for your theme to have a hooks feature. You can just tell the plugin to put whatever
code you want into the footer area of your theme or, in fact, anywhere else. But you would still need your theme to allow
you disable its own footer. Another option, instead of any of that is
to use the StylePress plugin. It’s a pretty new plugin at the time of me
recording this video anyway but the basic idea is that you kind of bypass your theme’s
header and footer templates altogether and instead you create your entire site design
in Elementor. Then you use the plugin to assign your various
Elementor templates you’ve created to be the header, the footer part etc. And if that appeals then it’s well worth a
look. If you want my own footer template to import
into your own site with one click, then visit designbuildweb.co/custom-footer/ – if you’re
not on that page already. There’s a box on that page where you can tell
me where to send the template. If you like this video, leave me a comment,
like the video and subscribe to my YouTube channel. My email subscribers get all my best stuff,
so subscribe at designbuildweb.co. [music]

Leave a Reply

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