In this Hello theme header and footer tutorial, i’ll show you how to make an elementor header or footer using the free hello elementor theme.
The Hello Theme is a free theme developed by Elementor for its users. We’re going to use the Hello Theme’s Header and Footer Builder to create a header and footer which will be responsive on all devices.
Note: the digits in brackets e.g. (00:02) indicate the minutes of that exact explanation in the video so you can easily jump to that section and follow along.
Install the Elementor Hello Theme
To get started, go to your WordPress dashboard, under Plugins make sure you have Elementor Free installed, version 3.1.4 at least.
Download the Elementor Hello Theme 2.4 or later.
Back on your dashboard > Appearance > Themes, click Add New and then upload the theme you downloaded and install it (10:15)
Activate your Hello Theme (01:31)
Back to your dashboard, go to Elementor > Tools, then go to Version control and enable the Beta Tester option (01:42), then save changes.
After activating your plugins, go to Pages and open up the Sample page (02:00), then Edit with Elementor.
In your Elementor editor, click the hamburger icon (≡) in the corner, go to Site Settings, click on the Header option, but first, let’s create a menu for our site.
Creating a Menu in WordPress
Inside your WordPress dashboard go to Appearance > Menus, give your menu a name under Menu Name, check the Header and Footer options then Create Menu.
Next, go to the Add Menu Items option, under Custom Links add a hashtag (#) on the URL option then under Link Text add About, then click Add to Menu.
Add # Services and # Contact items (03:33)
Up on the Pages option, add the sample page to the menu and rename it Home (03:44)
Drag the Home item to the top of the other menu items, then Save Menu.
Back to your Elementor editor, you’ll find a hamburger icon on the right for the menu (03:57)
In your Site Settings (remember you get these settings by clicking the hamburger icon in the left corner), under the Header option enable the site logo, tagline, and menu options (04:19).
On your dashboard go to Appearance > Customize > Site Identity (04:30), change the Site Title to Go Digital, Tagline to Webdesign Agency, then upload a Site Icon of your choice (that’s the little icon that appears on the website title in the browser). When you’re done, click the Publish button.
Another way to make these changes is by clicking on your hamburger icon (≡), go to Site Settings > Site Identity and you’ll find the same settings (05:32)
To Read: Create Responsive Elementor Cards with an INNER Section Inside an INNER Section
Make a Header using Elementor Hello Theme
Back to your Header under Site Settings, leave the Layout on default, then for the site logo and tagline to be on the left then the menu on the right.
On the Site Logo option, under Text color change it to orange.
Under Typography use the Poppins font.
On the Tagline option, set Text color to white, Typography Poppins.
Over to the Menu option, select the menu to use; that is the menu you created on your WordPress dashboard.
Set the Menu Layout to horizontal and you can set your Breakpoint to either mobile or tablet. The breakpoint option makes sure that when the page is viewed on a mobile or tablet, it appears as a dropdown.
Set the Color to white, then the Toggle Color to orange, and the Typography to Poppins.
Back to the Header option, choose a background color, I’m using dark blue.
Under Layout > Content Width, set it to 100%.
Under Gap, set 5%, to make sure all the content is visible (08:22). When you’re done update and preview.
Back to your Editor, go to the Settings icon at the bottom, on the Title option, rename the sample page to Home, then enable the Hide Title option (09:25), then click the update button.
In your Site Settings, go to the Footer option, here you can choose to show the site logo, tagline, menu, and copyright, leave the Layout on default, then set the Content Width to 100%, and add a Gap of 5%.
On the Tagline option, set Text color to white and Typography Poppins.
On the Menu option, select your menu, then leave the text color on default, and Typography Poppins.
On the Copyright option set Color to white and Typography Poppins.
Under Background Type on the Footer option, add a Color (a darker blue). When you’re done click the Update button. (11:21)
Under Responsive Mode select the Tablet device; then under Footer set Content Width to 100% and add a Gap of 5%.
To Read: Create an Elementor vCard with Download Link and Contact Modal Popup
Add Content to your Page
Back to your WordPress dashboard, go to the Plugins section and Add New, search for Premium Addons for Elementor, install and activate it (12:59)
With your premium addons activated, go back to your Elementor page and reload it then go to the Premium Templates (13:09), select a template to use.
Select the section and under Advanced, add Padding of 100pixels at the Top and Bottom. Then update and preview.
To Read: Complete Elementor Contact Form 7 Setup Tutorial for Free
In Conclusion
That’s how you can create a header and footer using the Elementor Hello Theme.
Remember this is a Beta version (as of recording the video) and there are still some bugs like on the menu item, which will be fixed when out of Beta.
For any comments or questions, let me know in the comments section below. Remember to subscribe to my youtube channel and newsletter for more tips and tutorials.
