Introduction
In this template tutorial, we are going to learn how to create a basic footer template and how to display this new header on all pages of the website. The footer is more important than most of you might think. A well designed simple footer offers your visitors an enjoyable ending to reading your page and more importantly, it offers you a chance to add additional call to actions, important links that don’t really belong in the page content like legal notices and an additional option to promote your brand. So let’s get started!
Requirements
For the footer template we are building, you will need the following:
- Your website logo
- Your website footer menu
- Elementor Pro
Elementor templates are created using the Elementor Theme Builder which is part of the plugin’s Pro version. Without Elementor Pro this tutorial will not work! You can find an alternative solution to create a header template without the Pro version in this tutorial.
Preparations
1) Your logo.
If you already completed the tutorial on How To Create A Basic Header Using Elementor, you can skip this step. Otherwise, let’s continue. There are many free online websites that can help you create a nice looking logo. My recommendation would be canva.com. You will find many templates and icons to help you on your way.
When you are finished creating your logo, download it in high-quality PNG format (you can select “transparent background” if you have a Canva Pro account). Before uploading your new logo to your website, convert it to the WEBP format using the free tool RomeoLight Webp Conv. This will reduce your logo’s file size while keeping 100% of the quality. You can read about RomeoLight Webp Conv in this review.
2) Create your footer navigation menu
Your navigation menus are created in the WordPress dashboard, under Appearance, in the menu settings. You will have to create a new menu. For this template tutorial, I have named the footer navigation menu ” Footer Navigation”. You can however name yours whatever you like. Now you will need to add the pages you want in your navigation.
For the header we will be creating today, I selected 2 legal pages namely the Privacy Policy page and the Terms and Conditions page but you can add any page you find important enough to be displayed in your footer navigation menu. Now save your menu (remember you can always return here to adjust your menu later).
Creating The Basic Footer Template
Now that the preparations are out of the way, we can start creating our basic footer template using the Elementor Theme Builder. You can access the theme builder in your WordPress dashboard under Templates, Theme Builder. Inside the theme builder, select “FOOTER” and then “ADD NEW”. I named the template “Basic Footer Template” but you can choose any name you like. Then click “Create Template”.
When the Elementor Page Builder has loaded, the library screen will display. You can find and use any of the pre-made footer templates provided by the Elementor team. However, for this template tutorial, we’ll create our own and you can just close the library screen.
We’ll start by adding a new section with three columns. Leave the column settings to “boxed” and all other settings to default. Now select the style tab. Here we’ll add a section background colour. (Note: the default style will leave the section transparent and you’ll see the “page background colour) For this template tutorial, I have used a dark background colour (#2D2D2D). In the “Advanced Tab” we’ll add some padding to the top and bottom of this section. In this tutorial, i will add 50px (50 pixels) to the top and 20px (20 pixels) to the bottom.
The section we just created will serve as our “Pre-Footer” section. We’ll use it to display our logo, social links and footer navigation menu. In the first column, we’ll add our logo by dragging in the logo widget. In the style tab, I have set the width to 80px and in the advanced tab, I changed the positioning to inline (auto)
In the second column, we’ll add our social links by dragging in the social icons widget but first, we need to adjust the column settings. In the layout tab of the column settings, set the vertical alignment to “middle”. Now you can drag in your social icon widget.
For this tutorial I used the 4 most common social platforms, you only need to add the ones you are using! In the style tab, we’ll reduce the size of the icons to 20 and change the spacing to 10. You can choose to use the default colours for each platform or set custom colours that match your site better.
In the third column, we’ll start again by setting the vertical alignment to “middle”. Then you can drag in the nav menu widget and select the “Footer Navigation” you created as menu. For this footer menu, we’ll set both pointer and breakpoint to “none”. In the style tab you can change the font colour and font-hover colour, then set the horizontal padding to 0px and the space between to 20px.
Now let’s have a look how the pre-footer section looks on mobile and see what we need to adjust to make it look great on your visitor’s phones.
For this basic design, I prefer to set everything to align to the centre. Luckily this is easily done in the column settings. First, select the column with your logo and set the horizontal alignment to centre. Then select the column with the nav menu widget and also set the horizontal alignment to centre. Now you will notice that the menu items did not move to the centre. We’ll fix that by going to the advanced tab of the nav menu widget and set the positioning to inline (auto).
That looks much better and with that, the pre-footer section is completed. Now let’s add another section below with one column. Leave the column settings to “boxed” and all other settings to default. Now select the style tab. Here we’ll add a section background colour. (Note: the default style will leave the section transparent and you’ll see the “page background colour) For this template tutorial, I have used a dark background colour (#1c1c1c).
In this section, we’ll add a “Heading” widget and set the HTML Tag to “DIV”. You can use the style tab to change the font size and colour (I used the colour white and set the font size to 16px for this tutorial). In the advanced tab, we’ll set the positioning to inline (auto). Now go to the column settings and set the horizontal alignment to centre.
For the text, we’re setting it as the “copyright” of your website. I have seen a lot of people asking how top add the copyright symbol in between text and here is a simple way of doing just that. Right-click and select “emojis” the go in the symbols tab and you’ll find it right there.
Now all that’s left is checking the mobile version, but with only one widget and the settings already done, that should look perfect! You can now click the publish button and select “entire site”
Conclusion
That’s all for this tutorial on how to create a basic footer template. I hope you have enjoyed it. You can find other tutorials on “basic templates” in my blog.
For the next step, I would recommend “How To Create A Homepage“.
Thanks for reading this tutorial and see you next time!
One Response