In this tutorial I will explain how to set up the header & footer with the free Astra theme for WordPress websites.
As indicated in an earlier tutorial, if you use the Elementor Pro plugin, you can also design the header and footer even more easily by using the Elementor Pro version. This will give you way more flexibility and options to design everything exactly as you want it to be.
But if you only have the free version of Elementor, you can use the Astra theme for that and you can see how it’s done in this tutorial.
Watch tutorial on YouTube
What are the header and footer of a website?
If you are completely new to web design, it’s good to know that the header refers to the top bar with often the logo and navigation menu.
The footer is the bottom part of the website and it often also contains the logo with contact details and possibly a couple of links to pages of the website.
Header Astra theme settings
To get started, from the WordPress dashboard go to the left navigation menu and then click on Appearance and then choose the top option Themes.
We see that the Astra theme is activated and to adjust the settings click on Customize.
After the page has loaded you will see the default header design at the top of the page.
At the moment it is still very boring and it would look better if the logo was displayed instead of the title.
I’ll show you how to change some basic settings.
For example, to change the color of the bar, click on the pencil icon at the top left.
Then click on the Design tab and over at the Background option you can choose a color.
You can choose any color you want by using the color palette or by entering a color code in the field below. For this tutorial I’ll choose a white background color.
But if you want a different color you can set it up here.
To remove the title, hover over the title and click on the pencil icon. Here you will see that the Display Site Title option is enabled and if you disable it, you will see that the title is no longer visible.
On the left side of your screen you will also see the options Select Logo and Select site icon, so let’s do that right now.
In the previous tutorial I’ll showed you how to create a logo and site icon and we are now going to add them. If you missed that tutorial and don’t know how to easily create a logo and site icon, I would recommend you to check it out.
First you have to click on Select logo.
After the page has loaded you need to click on the Upload files tab and drag and drop the logo image to upload it.
Now select the logo and you can fill in the Alt. Enter text, Title, Caption and Description and make sure some keywords are in there for which you want the site to be found on in search engines.
In this example I enter Luxury watch brands logo black. Now copy and paste this text in the other fields. After that click on Select to proceed.
Now you can select which part of the logo should be visible by dragging your mouse. After you are done you can click on Crop image.
By defeault the logo is still too big for the header and we need to reduce the size. Therefore go to Logo Width on the left and here you can set the size. Just see for yourself what you like and I will now set the logo width to 130 PX.
By the way, it is always the case that the logo links to the homepage of a website, so you don’t have to set that yourself anymore.
The next step is to ensure that the logo is also properly displayed on tablet and mobile devices.
To do this you can click on the middle icon at the very bottom for the tablet view.
Here you can see that the logo is still too big for this view and you can reduce it again with the Logo Width option. The settings you are doing now are only for tablet devices so it doesn’t affect the settings for desktop.
A minor disadvantage of the Astra theme is that you cannot see how the design looks like on all tablet sizes.
On most screens it just looks good so it’s nothing to worry about. But with Elementor Pro you can really easily check all the different formats in literally a few seconds.
To continue I set the Logo Width for tablet to 120 PX.
You can switch to the mobile view by clicking on the mobile icon at the bottom. For mobile you can set the size at the Logo Width option.
90 PX seems fine to me, and now click on Publish to save the settings.
By clicking the pencil icon again when you hover over the logo, you can also add the site icon or favicon with the Select site icon option.
Go to the Upload files tab and drag the file to upload it. Change the Title to something relevant such as Luxury Watch Brands site icon and copy this text again in the other fields. Then click on Select.
We see that the icon has now been added to the top of the browser. Now click the blue Publish button to save the changes.
The last step to finish the header is to set up the navigation menu.
At the moment only the About us, Contact and Home pages are shown because this is set by default. To adjust this you can go back to the WordPress dashboard and you can do that by clicking on the crossmark.
Go to the Menus option which you can find below Appearance. Here you can see that no menu has been created yet, so that’s what i’m going to do now.
Enter a name and it does not matter which name you choose because visitors of the site can’t see this.
I fill in Menu 1 and then select the option Primary Menu and after that I click on Create Menu.
Every time you add a new page or blog to the site you can add it to the menu by checking it and then clicking on Add to Menu.
In this example I only want the About us and Contact pages to be shown so I add them by clicking the Add to Menu button.
You can also choose a category and add it in the same way.
Now I save the menu by clicking on the Save Menu button.
Go back again to the Themes settings via Appearance and then click on Customize for the Astra Theme.
Now you see that the links have been changed and are displayed exactly as we have set.
To change the settings, click on the pencil icon in the navigation menu.
Now click on the Design tab and at the Menu Color option you can set the colors.
I change the first color to black. And here we also have a few options, the first one is Normal.
The second is Hover and that is the color you see when you move the mouse over the text. Here I adjust it to light gray and I copy the color code and I also set it for the third dot.
That is the Active color and if you are on the About us page, for example, it will be continuously gray because it is active.
With the Menu Font option you can select a different font, but I think it’s fine as it is now with Inherit as it is set by default.
You can then view how it looks on tablet again by clicking on the tablet icon at the very bottom.
Now you see that the option Toggle Button is also shown below the option General.
Click on it and at Icon Size you can adjust the size if necessary. I’ll just leave it as it is but if you want you can also change the style. Therefore you need to go to the Toggle Button Style option.
To set the color you can click on the Design tab and here I also set the icon color to black.
Now click on the toggle button to expand the menu and click on the blue pencil icon.
Go to the Design tab and adjust the Link color to black.
To choose the correct menu, you can click on Configure Menu from Here in the General tab.
Now go to the Off-Canvas Menu option and select the menu you created earlier in the WordPress dashboard. In this case it’s Menu 1.
The correct menu is now being displayed.
Also make sure to view how the display is on mobile devices. If everything is to your liking save the settings by clicking on Publish again.
Footer Astra theme settings
So now the header is done and now it’s time to customize the footer.
You can change the text in the footer by clicking on the pencil icon and entering a new text in the text field.
For example, you can remove the part Powered by Astra WordPress Theme.
With alignment you can align the text to the left, right or the center if you wish.
To adjust the color of the text you can click on the Design tab and then choose a different color at the Text Color options.
To change the background color of the bar, you can again click on the pencil icon on the left side of the bar.
Then click on the Design tab and adjust the color at the Background options. For this example I will make the background black.
You can add the logo as an image next to the text by adding an extra column to the section. To do this, go to the General tab and select how many columns you want display in the footer. For this example I select 2 columns.
You can also select how the ratio of the columns should be at the Layout settings.
To add the logo you can now click on the + sign in the column and then choose the option Widget 1.
Now click on Widget 1 in the column and now you can add a widget on the left. Click on Add a Widget to see an overview of all the different widgets. Over here I select the Image widget.
After the widget has been added you can click on Add image to select an image.
In this case the logo in white color with a transparent background.
Change the title to something that is relevant for SEO such as Luxury watch brands logo white.
Copy this text and paste it into the other fields as well and then click the blue Add to Widget button.
Now we see that the logo is visible. It’s still very large, so we are going to make it a little smaller. You can change this by clicking Edit image.
After that you can select the Thumbnail option and then click Update.
I also set the allignment for the logo to the right at the Allignment options.
In the footer I want to move the text a little bit more to the middle so that it fits better with the logo.
Click on the text and select the Design tab. Now go over to the Margin settings and enter 35 PX in the top field.
You can also enter a higher or lower value to change the position.
Now go to the tablet view and there we see that the position is now also fine.
Over at the mobile view I fill in 10 at the top and also at the bottom Margin.
You could also add an extra column and add an extra widget such as a navigation menu. This way you can completely build the footer per widget in different layers and columns. For now I’ll just leave it clean and basic as it is.
In the General tab you can align the text to the left with the Alignment option, but I will also leave that as it is for this example.
I always use the Astra theme as a backup theme, that’s why I kept this header and footer very basic.
Now we are done with setting the header and footer in the Astra theme!
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’ll show you the Elementor basics for beginners for those who aren’t familiar with Elementor yet.
The tutorial after will explain how to set up the header and footer with Elementor.
Check out this tutorial if you want to learn how to create a sticky header scroll effect with Elementor.
In other tutorials I have explained how to use Elementor to design: