In website design, there are basically three types of pages: the standard, blog archives and posts pages and marketing-type of pages (lead magnet, landing page, sales page, etc). One thing they have in common is that they all follow a structure. In digital marketing pages, you only see sections of content and content with the CTAs typically positioned in the center for the user to take action, while the standard page and blog archives and posts follow the header – content – footer structure, though some blogs may decide to include a sidebar to the right or left of the content.
When it comes to WordPress, not until recently, the majority of themes came with headers and footers designed leaving you only with the content to create. This made the customization of these two sections very difficult because you had to know, at the very least, CSS to be able to mess with the elements (you also had to know PHP if you wanted something more custom).
With Elementor 2.0, the Pro version got theme building capabilities, something that many considered game changing in the world of page builders, as it pretty much meant you didn’t have to depend on themes no more. You could just use what’s called a “vanilla” theme, couple it up with Elementor Pro, and your website was the proverbial oyster.
However, this also meant that you had to get Elementor’s Pro version, and while it never has been that expensive to begin with, it was – and still is – an investment you have to consider. I’m never going to be against getting Elementor Pro, but if you already have a theme like OceanWP, Astra or even if you have Hello Elementor (without planning to use a blog) and want a more customized header and footer section, you don’t necessarily have to get the Pro version of Elementor because there is a plugin called Elementor Header, Footer & Blocks that extends the free version’s functionality to allow you to easily build those sections via the page builder. And in this tutorial, I’m going to show you how to use it. So, install it first and keep on reading.
Go to the Appearance tab on your WordPress and look at the new option that appears called “Header Footer Builder”. Click there.
In that page, click on the “Add New” button next to where it says “Header Footers Template” like in the image below.
Then you’ll see a dropdown where you can select what to create first, either the header or the footer. Let’s work on the footer first.
You will be redirected to a new page that’s pretty much like the normal pages of WordPress and where you’ll see an “Edit with Elementor” button. Click on it to be taken to Elementor’s visual editor.
Once you’re there, proceed to design the footer as you see fit, implementing the layout you desire and the widgets that will make up your footer. Given that the footer is what’s being built first, knowing how to design a fixed call to action button for mobile may come in handy.
When building the footer, keep in mind that users either don’t reach the footer before they exit your site or use it only to see how to contact you. So, consider placing link icons to your social accounts, the ways how people can communicate with you, or other links that may be helpful to the user, but aren’t as important as the main action you want them to take.
After you’re done with the footer, it’s the same process for the header. This part of the website is pretty much always the same, you have the logo and menu laid out usually the former to the left and the latter to the right. Some website designers may decide to have a bar on top of the header to include contact information while others place a call to action button next to the menu.
In my opinion, the call to action button is a nice addition and it looks great on desktops and laptops, as it makes it easy for the users to navigate the site and when they’re ready to take action, they’ll know exactly where to click on. It also works if you have a membership portal or something similar, kind of like how Elementor’s own site has it. I don’t feel as good about the top bar, as it is something that can take real estate off your hero section and it may make the site feel charged with too much information (I’m big on the KISS principle, though).
Suggested reading: Transparent Sticky Headers in Elementor Pro: How To Create Them
Elementor Header and Footer: Built from start to finish
Select the structure of your footer
On the left sidebar, go to “Style” and set the section’s background color in Style/Background Type/Classic.
Add an inner section to the container and make it a three-columned inner section.
Start inserting your widgets. For the purposes of this tutorial, I’ll include in the left column info about the company, then some resources links on the middle and a search bar with social icons on the right.
Below that, I’ll add another inner section, but removing one of the columns, making it a one column inner section. This is to add the copyright text.
This pretty much wraps the footer up. So, let’s create the header.
For the header, the procedure is the same, with the only difference that Header will need to be selected in “Type of Template” instead of Footer. Open Elementor’s visual editor by clicking “Edit with Elementor” and start designing.
Just like with the footer, add a new section and make it a one column section, so you can then work with the inner containers. Drop the inner section widget, so you’ll have two columns; one for the logo and the other one for the menu.
Optional: You can instead add a new column to the inner section, so you can work with the logo on the left, menu on the center, and CTA button to the right.
After you add the inner section widget, the other two you’re going to look for the Image and Nav Menu. If the site logo widget is available, you can add it as well.
Header and Footer with Elementor Free: Final Words
That’s pretty much it! These are very basic designs for the header and footer of your website that you can build with Elementor without upgrading to the pro version, though if what you want is to build a complex more dynamic site, then you will need Elementor Pro.
Let me know what you think in the comments! Do you work only with the free version or is Pro a necessity for you?