In this tutorial I’m going to show you how to design the header and footer very easily with Elementor Pro and the Hello theme.
I’ll show you exactly what you need to do and I’ll explain every step in the whole process.
This should give you a good understanding of how it works and that it’s actually quite simple…so let’s get started!
Watch tutorial on YouTube
Create Header template with Elementor Pro
First select Appearance to go back to the overview with Themes. Now we are going to activate the Hello theme and I will use this theme as the basic theme for the website.
As mentioned before, this theme works perfectly with the Elementor plugin because it is made by the same developers.
To activate it you have to click on the Activate button.
After that you can click on Customize.
Now go to Site Identity, here you can add the logo and the site icon.
So make sure the Site logo and Site-icon are selected and besides that we don’t have to change anything here because we are going to do that with Elementor.
After the logo and site-icon has been added you need to click on Publish to save everything.
Now click on the cross again to go back to the WordPress dashboard.
Now that’s done, I’m going to import a cool template with the Elementor Pro plugin in a few clicks that you can customize very easily.
This works as follows, in the left navigation menu there is also an option with Templates below the Elementor option. If you click on it you will see that no templates have been created yet.
To create a template you can click on Add New in the left menu or you can click the button at the top of the page with Add New.
So now click on one of the links to continue.
Now you see Choose Template Type and here you can choose what kind of template you want to create.
For example, you can choose a Pop Up, Page or Blog and you can use templates for all parts of your website.
Once you have designed a template, for example for an individual blogpost, then all posts will have this same design by default when you add a new post.
You can also add specific rules to your template, for example you can create a template for posts from a specific category and create a different design for posts from another category. That’s something I usually don’t do but it’s possible.
For now I choose the option Header and after that you can enter a name for the template such as Template Header. Then click on Create Template.
At Blocks you see all kind of templates and the Pro icon indicates that these are only available with the Elementor Pro version.
To view a template, you can click on it and by clicking on Back to Library you can return to the overview. You can import a template by clicking on Insert.
In this case I choose this template and click on Insert to add it to the canvas.
Now you see that the template has been added.
You can remove it again by clicking on the cross in the blue tab that becomes visible when you hover over the header.
Now the canvas is completely empty again and we can import a template again. You can do this by clicking on the map icon
Over here I select the template again or you can choose any other template you like and click on Insert to import it.
Now the template has been added to the page and the first thing I want to do is change the background color to white. Make sure you have the section selected and go to the Style tab.
At Color we see that a dark color is selected, to adjust that just click on the color and choose another with the color palette. You can also add a color by using a color code and for this example I set the color to white.
This already looks better and the next thing I want to do is move the logo to the left. To do this you need to select the logo by clicking on it and at the first tab Content you will see the Alignment option and select Left there.
To make the logo larger or smaller, go to the Style tab and at the top you will see the Width option. By dragging you can make the logo big, bigger, very big or very small.
Or you can select how many pixels the logo should be by entering it in the field, for now I’ll set the size to 160 PX.
For both sections I set the Content Width to 1250 PX to make it wider.
If you want, you can also add a Search Form widget so that visitors can easily find information on your website. That is also done here in this template as you can see.
In this case, I choose to remove this widget because I will add it to the homepage later on, so click on it and then select the Delete option.
Now we see that only the widget has been removed and the empty column that you recognize by the gray lines is still in the section. You can now add another widget to this column.
Click on the icon with the 9 dots to go to the overview with all the widgets. Scroll down to General and somewhere in the middle you see the Social Icons widget on the left.
Drag the widget in the column to add it.
To adjust the alignment you will see the options in the first tab again and here I select the option Right.
You can completely customize everything as you want to for every widget that is available. To add an icon to this widget, you can click + Add Item.
After that you can click on Icon Library by hovering over the WordPress logo.
All common social icons can be found and to search quickly you can filter by name in the search bar.
For example, you can add Instagram or WhatsApp icons.
By clicking on the icon in the left menu you can add links so that the icons will link to your social pages.
Because this is a tutorial and I don’t have any social profiles for this site so I’m not going to add the links, but if you have social media for your website you need to fill in the links over here and in the case of WhatsApp a number.
To remove a social icon you just have to click on the cross like I do for the Whatsapp and Instagram icons on the image below.
If sometimes the adjustment is not immediately visible, you just have to select something else on the canvas and then the widget will be updated.
By default, the official colors are selected but you can also customize this if you’d like.
To do this you need to go to the Style tab and select the Custom option at Color. Here you can choose a color again, in this case I select black.
Now I want to make the size of the icons smaller and you can do that with the Size option and I set it to 16 PX.
On the Style tab you can also change the shape of the icons and I make it a Circle.
Below that I set the number of columns to 3.
Now I go to the Advanced tab and at Margin click on the Link Values Together icon to disable it.
You can fill in the fields separately now and only in the field Right I add 40 PX.
Now we are done with the first section and in the section below we also have the navigation menu.
The links that appear are linked to the menu we created earlier in the WordPress dashboard. This is explained in the tutorial on how to create the header and footer with the Astra theme.
If you make adjustments there, it will be automatically applied to the navigation menu widget.
The first thing I’m going to do is change the section’s color to black. Select the section and go back to the Style tab and change the color to black.
Now I want to change the font to the same as I have used in the logo so that it has the same look and feel to it.
Click on the blue pencil icon from the Nav Menu widget and go to the Style tab and click on the pencil icon at the first option.
In the field Family now Default is indicated and if you click on the check mark you will see an overview of all available fonts.
Now I search for Playfair Display via the search bar and select it. You will now see that it has been adjusted in the menu.
You can also make the font bold with the Weight option.
At the Size option you can adjust the size if you want to, here I set it to 15 PX.
In the logo there is more space between the letters and you can easily adjust this in Elementor at Letter Spacing by setting this to 2.6
If you move the mouse cursor over the menu, you will see a red hover effect. We can also adjust this in the Style tab by going to Hover. Over here I set the Text Color to black and the Pointer Color to white.
Now the logo already looks good and I want to do one more thing and that is make the white space above and below the logo smaller. Therefore I select the section and set the Minimum Height to 150 PX.
Responsive header with Elementor
Now I’m finished customizing the header for desktop screens and now we are going to see what it looks like on tablet view.
To do this click on the Responsive Mode icon with the two screens at the bottom left.
Now you will see a gray bar at the top of the screen with three options. The first is for mobile, the second for tablet and the third is for desktop.
You can change the view by selecting one of those three icons.
It’s good to know that if you make adjustment for sections, columns and widgets this will only be visible on that specific device that you have selected. And the settings done earlier for desktop will remain as it is.
I’m going to show you how it works, let’s start at Tablet by clicking on the icon in the gray bar. A big advantage of Elementor is that you can view the design on all different screen sizes.
At the top right of the bar you see the width and height. You can set this here manually but it can be done much faster and easier by using the icons on the side. With this you can adjust the size by dragging it.
For example, we see that the navigation menu is well displayed by making the view completely wide
and on the small tablet view it does not look good yet because it is to narrow as you can see on the image below.
You could of course make the distance between the titles of the menu smaller or reduce the font size, but what I often do is set a toggle button for tablet and mobile devices to keep it clear.
You do this by selecting the navigation menu and then at the first tab Content you see the options for Mobile Dropdown and here I adjust the breakpoint to Tablet.
So now we see the toggle button appear and if we now hover over it you see the color is red and I want to change that. The dropdown menu looks good but I would also like to change the green hover color.
Let’s do this first for the toggle button and therefore I go to the Style tab and then to the options for Toggle Button. Click the Hover tab and adjust the red color to something else. For this example I set the hover color to light gray.
Now I’m going to adjust the green hover color in the dropdown menu. Therefore I go back to the Style tab and then select the Hover tab and I change the color from green to black.
Now I think everything is looking fine!
Let’s have a look now at the mobile view by clicking on the mobile icon in the top gray bar.
The bottom section with the dropdown menu looks good but the first section isn’t quite there yet.
The logo is displayed above the social icons and it would be better if they are side by side.
You can adjust this by adjusting the width of the columns. Do this by selecting the first column and adjust the Column width to 50. Then do the same for the second column.
Now the columns are side by side as you can see on the image below.
The icons are still too big, so I select the Social Icons widget and adjust the Size to 12 pixels.
The next thing I do is go to the Advanced tab and set the margin of the social icons to 0 by clicking the Link Values Together icon at Margin.
I also want to make the logo larger, therefore I click on the logo and adjust the Size to 100 PX .
Then I go to over to the Content tab and here I set the alignment to Left.
The last thing to do is select the left column and go to the Advanced tab and here I set the Padding values to zero.
Save your header template
After you are finished with designing the header template, you need to click on the green Publish button.
After that click on the option Add Condition.
Make sure the Entire Site option is selected to use this header for all pages and posts, but if you want to make a separate header that should only be shown on archive or singular pages for example, then you can also select another option.
Personally, I always set one header and one footer for the entire site so it’s the same on all pages. To create conditions you can also use the Include or Exclude options shown here.
When you are done you can click on Save & Close to save the header template.
Create Footer with Elementor
Creating the template for the footer can be done from the WordPress dashboard the same way as we just did for the header template via the Templates option and then clicking on Add New.
But if you already have the Elementor editor open as I have now, you can also use the Theme Builder option that is available directly from the editor.
To do this, click on the icon at the top left with the three lines.
Then click on the second option Theme Builder in the menu.
Here you see an overview of Your Site’s Global Parts and you can see that the header template has been created.
In a separate tutorial I will go deeper into all the possibilities with the Elementor theme builder, but it’s actually all quite self-explanatory.
From this place you can also create templates for other site parts such as the Single post, Single page, Archive page, Search results and the Error 404 page.
To create the footer you need to click on Footer and then click on Add New.
Now you see that the blocks are displayed for the category Footer.
Pick a footer template that you like, and for this example I’ll use the third from the bottom left and click on it to see what the footer looks like, and if you like what you see click Insert.
Of course you can also choose one of the other templates and you can even import multiple templates to the canvas.
Now I’m going to adjust the footer so that it’s completely the way I want it to be and to show you how eveything is done.
To start off I want to change the Width from full width to boxed and then I set the Content width to 1250.
I don’t do anything with the third section because I’m going to delete it in a moment.
Now I’m going to make the background color of the first section black by selecting it and go to the Style tab.
For the Background Type options I select the first icon which is a solid color and then I select the color black.
Now you see that not the entire section is black, and the reason for this is because the two columns in the section already have been set to a light color.
I will first adjust this in the first column by clicking on it and going to the Style tab and changing the color to black.
Now I select the Heading widget and click on Delete.
Now I want the logo I made where this image is now being displayed. Therefore I select the widget, in this case it’s an Image widget and go to the Choose Image option in the left menu.
Click on Choose image and select the logo from the Media Library or upload it.
Also fill in something relevant in the fields if they are empty, such as Luxury watch brands logo white.
Then click on Insert Media.
Now it looks way too big so let’s adjust the size of the logo. Select the Image widget and go to the Style tab and as you may have noticed you have 3 clickable characters above the field. Here I select the PX option and set the Width to 157 PX.
I drag the text widget from the third column below the image with the logo.
In the Content tab I set the Alignment to Left.
That already looks good, but I want the text to align better with the logo.
You can easily do this by going to the the Advance tab over at the Padding options.
If you now enter a value you will see that it appears in all fields and that is because the icon on the right is enabled. By clicking on it you can disable this and if you now enter a value only in the Left field, the other fields will remain at 0 pixels.
Over here I set the left Padding to 25 PX.
You could also adjust the font, but I think it looks nice.
I also remove the 2020 from the All Rights Reserved text so that this does not have to be updated annually. There are also codes that you can use so that that it’s automatically updated, so that could also be an option.
If you now go to the Advanced tab of the first section, you see that 180 PX has been added to Top Margin, which creates a white space above the section.
I think it’s better to remove this extra space and that’s why I set the Top Margin to 0.
Now I only need to adjust the right column a bit in terms of styling and the section below it.
I’m going to make the background color of the column black, but if I do that now, I can’t see all widgets so that’s why I’m going to customize them first.
I start with the first widget and that is a Divider, and I want to change the color to white. To do this you need to select the widget and on the first tab you can adjust the text if you want. I leave everything as it is and now go over to the Style tab and set the color at the Divider options to white.
After that I expand the options at Text and over here I also set the color to white.
I also adjust the font so that it is the same as the text below the logo. That was the Rubix font with Size 14 PX, Weight 300 and Letter Spacing 0.4
Now you can barely see the widget, but that will be all right in a moment.
In the text below I remove weekly from the text and adjust the color to white by going to the Style tab.
I also want to adjust the font to Playfair display by going to the Style tab and at Typography I also set the Weight to Bold and the Letter Spacing to 2.3
And after that I also change the color of the Find Us Here text to white by going to the Style tab. I also make the size of this text a smaller so it’s the same as the other text in the footer. Go to the Style tab again and click on Typography and set the size to 14 PX.
Now I want to change the color of the column to black. So I select the column, go to the Style tab and choose the color you want and in this case it’s black.
We just need a few minor tweaks before the footer is finished!
You can even change the text color of the Form widget in the Email address field by selecting the widget and going to the Style tab.
I set the text color to black to make it more visible.
By the way, with this widget you can easily link to a service such as Mailchimp, Activecampaign or you can manually link an e-mail address to which all the info that is filled in the fields will be send over to.
It would also be nice to add a white border around the section. Let’s try that by going to the Advanced tab and then to the Border options. At Border Type you need to select Solid and then set the color to white.
The border is not completely visible yet, but that will be fixed in a minute.
I also want to make the font in the button with the text subscribe a bit thicker. To do this I go to the Style tab and set the Weight to 600.
The next thing to do is adjust the Hover color of the button to green.
It’s a small detail but it would also be nicer if the divider is a bit thicker, so it’s the same as the border of the button.
To do that I select the Divider and go to the Style tab, here I adjust the Weight to 2.
I want to make the social icons smaller. To do this, select the widget and go to the Style tab and adjust the size to 12. The social icons are already in the header so you can also delete them or use another widget but that’s up to you.
I think it looks nice like this, I just remove the LinkedIn logo because I don’t like inconsistencies and we don’t have the LinkedIn logo in the header.
So I go to the Content tab and click on the cross behind the logo you want to remove.
At the bottom I also set the number of Columns to 3.
Sometimes when using the Social Icons widget and you delete an icon, it is not immediately visible on your screen.
I don’t know if that’s a bug or something, but if you notice this you can click the green Update button and set the conditions to Entire Site. and refresh the page. You will then see that the changes are visible.
*You only have to add the condition Entire Site the first time you click on the green button.
The next step is to change the hover colors of the social icons and the newsletter signup button.
I start with the Social Icons by selecting the widget on the canvas and going to the Style tab. Go all the way down to the options for Icon Hover and set the Secondary color to black.
That already make it look better.
Now I go to Icon settings above and set the Icon Spacing to 15.
Now select the Form widget above it and go to the Style tab and then choose the options for Buttons. Then you need to go to the Hover tab and adjust the color to green.
Select the left column and go to the Advanced tab. Now go to Padding and click on the icon to edit the fields individually and enter 10 PX in the field Left.
After that select the column on the right and go over to the Advanced tab. Set the Padding values to zero again by clicking the icon and after that fill in 40 PX in the field Right and 20 PX in the field Left.
The next thing I do is select the logo and go over to the Advanced tab and add 20 PX Padding on the left side so that it aligns well with the logo in the header, and also 20 PX in the Bottom field so that the text below aligns well with the text Find Us Here.
Now I select the All Rights Reserved text widget and go to the Style tab and set the Padding values to zero by clicking on the icon.
In the field Left I add 25 PX.
Now we move on to the section below that we can actually remove because we already have a sticky navigation menu in the header.
Select the section and click on the cross or on the Delete button on your keybord for the two sections below.
Responsive Footer with Elementor
Now we’re pretty much done, the only thing left is to check out how everything is being displayed on tablet and mobile devices.
Click on the Responsive Mode icon and it’s the best way to go from big to small. So the desktop view is now ready and now I’m going over to the tablet view first and after that mobile.
Select the tablet view and here I want to adjust the Margin of the entire section first, so I go to the Advanced tab and set the Padding to 20 PX for Right and Left.
Click on the logo and go to the Advanced tab. Because I have added Padding on the desktop view, it has also been applied to the other screens.
To reset this click on the Link vaulues together icon. Now the Padding is set to zero again for tablet view.
Now I go to the Content tab and set the alignment to the Center.
I also want to add more space between the logo and the top of the section. To do this you need to go to the Advanced tab of the logo widget and enter 40 at Top Padding.
By the way, I also need to adjust the top Margin of the first section as I also have done for the desktop view.
Therefore I go to the navigator and select the first section and then go to the Advanced tab and set 0 for the Top Margin.
I also select the text below with All Rights Reserved because I have added Padding on desktop there, so I want to reset it by clicking on the Link values together icon at the Padding options in the Advanced tab. This sets all values back to zero again.
Then I go to the Content tab and set the Allignment to the Center.
Now I select the column with the newsletter form in it. Then I go to the Advanced tab and enter 10 at Margin in the field Left and also in the field Right.
After that I set the Padding for all the fields to 10 PX.
I also add some Top Margin to the form widget. So I select the widget and go to the Advanced tab and enter 10 at Top Margin.
Now I want to add some more space to the bottom of the section below.
Select the Inner section and go to the Advanced tab and enter 40 PX only at Bottom Padding.
Now go over to the mobile view and there I adjust the Alignment to Right for the text Find Us Here by going over to the first tab Content.
Then I do the same for the Social Icons.
After that I adjust the Size on Mobile to 8 to make it smaller.
The last thing I need to do is select the left column and go to the Advanced tab to the Padding options.
Here I need to select the PX icon instead of % because I forgot to adjust this earlier.
Save your footer template
Now click on the green Update button to save all the changes.
It’s also useful to know that you can quickly switch from the Elementor editor to different templates for different parts of your website by clicking the orange tabs that you see when you go over the header, footer or page.
For example, if you are editing the footer and you also want to change something in the header, you first have to click on the orange Edit Header tab.
So now the header and footer are completely done!
As you can see creating your own unique design is just a matter of importing a template and customize the sections, columns and widgets.
You can watch the video tutorial on YouTube over here.
Don’t forget to like and subscribe to the YouTube channel. I would appreciate that very much!
In the next tutorial I’m going to show you exactly how to create Pages with Elementor completely from scratch, so without using a template!
Check out this tutorial if you want to learn how to create a sticky header scroll effect with Elementor.
If you have responsive issues with designing in Elementor for mobile or tablet view you should check out this tutorial. There I will explain how you can fix this very easily.
Check out this tutorial to learn the Elementor basics in 7 minutes.
In other tutorials I have explained how to use Elementor to design:
- Archive pages
- Search results pages
- Blog overview organized by category on one page
- Pages
- Posts
- Error 404 page
- Landing page (without header & footer)
- Under construction/Coming soon page
If you have any questions or suggestions for topics for tutorials, please let me know in the comments of the video.