Hello Theme Header and Footer Tutorial – Make Free Header & Footer using Hello Elementor Theme

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.

Video: Hello Theme Header and Footer Tutorial

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)

YEkmwvs6sYb6e5IiPHHr410FMVDfLNeUd yevt5uAaOEyocf8HOu0vA9m1T4yEuY

Activate your Hello Theme (01:31)

NwR5W7tstkO33yB

Back to your dashboard, go to Elementor > Tools, then go to Version control and enable the Beta Tester option (01:42), then save changes.

9brdnsl5K1hrQr5H 3qNRT4Ck1cpWhK0QAINgvuZMHpflMP3f3vGNGPtYJCnMgOnoY3FV bfSIcT8vd0xMrVfd BcgTV26mAcPIw5886nibgDdyCq10Pp

After activating your plugins, go to Pages and open up the Sample page (02:00), then Edit with Elementor.

NvruqzK1UzEM7Hy ScUVJq0CaqcnmjgvtyuV715rsndQV5xcFr3qkhhalic mwivDgz12Uj7TxufaXNpbvpf0JxT7dsW42

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)

PHoxaNr7W6oZZ8O1RsE6h3TiJSEiQ7A8mBJyGlN1Eh23b0MmU417XhcKBTKMYWln Y91nPtnoVazmmXR fDnuxlImLB7zSPuqrftWpA

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)

zq6KCN6gbkta0GapKeF61zd9YSGS2jTmsrFTLAUYrLpGM9viB8 WNaVyBSTQH014yD7 z WjOXY6OSyNcL8mre gf1z5pIS0rfn4Ez1 xXoa7Wer6m11pQlWG6hjRey9CWZ75m

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).

qcbJ9nxxYs00twr6upGqjL50es6x kJaxATcxgAxuh6Dhb1FPiMXCuH1DQ3wWwu xlXP WgZD156r8g35Zj13rFvJONEJn3tJ9J7qSMjlqA1Lrsptgfu5CfBhqlOsBdcwuh5H4WP

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.

oBDVeRGm2Txf3pUqH2VgytAdGBaFRNjzNc f7dkV EYRzqFAl8bImWCXRvOPm5w6R Ellbpo GLFyYqIH0jX877KghRfpzVIUD9cBmaF1ssg2C6hFImupX9JuJtj9gwi09wE6sk2
vTefwTbfNJDcViZwqV8LAvssOL3gjKJmkSZip5X7RXIHVFFWcKCWSjQP7RHymdGJwfNr67A8cY5RLr d7n8GM2BIvG8hsom6YgztTdNvASyUldJgujVWuNgDwLrJ9d065U6Hrkh

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)

CIbr6aSOByW6hL0KxIksune6bJyIh yhqIzz5DbIn8 LVpR1sSxqACCrDNeg wCDR1plgjuOtBeJmQnG6wH dYULp54gLupaJgj0VifalIL4hFLv yEZ7G5Bw0aahDE xe 8CHgW

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.

hello theme header and footer tutorial

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.

mFfuXu2C6mpaLzBvnUrYcNhTWn3fy6rfa7z6G GYzMZK MoDFEk3KKXxG xb g21OMgtPz4hOs9143X5DWTBAT 0 a51NC2uWCI4h5vhWjlQEnJSWMLctyqnBwIa5eJUZWsu0uTa

Make a Footer using Elementor Hello Theme

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.ljypJfCGzwhXFaNahq8B1NaNGSm4DnL8pxrJFumL31jqHreQiHx4 gmyGBolIHX2UopqVAXLDQrTeaBTNgsmD MUvSeOvb4ztNqI4ZKaZBpkCcKb9c8XuNpurzoft5bzwZ4PGQm

Select the section and under Advanced, add Padding of 100pixels at the Top and Bottom. Then update and preview.

6loCqyFpvK67mHjsWL c0M3eTsk0sfRftmHpvgxfP THJo5egXGb jnxnLH juJ7 Xdpp8O0D6re8ZuDqPkYDZtyDa9ovC8DpjP9YwjZz0ZKpON5UwT 8S6ERM7JsgpMUKwrTH
7z2xl18Lwuct6iGHXQVkZbDXcdsC RvqCtOAWwNKHzvvi1432Ek26HXehjEqEoa4y B2T8w

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.

Also Read. . .

How To Delete A Facebook Group in 2024?

Facebook allows for group interactions through its Facebook groups feature.  Facebook groups are created for specific reasons and attract like-minded people.  At some point, however, you may need to get rid of the group for

Read More »
Newsletter Subscription (EF)
Picture of Hamza
Hamza
Hamza comes from a design background with over 10years of experience in Web and Media design. He enjoys making web design videos on his YouTube channel GoTechUG. He also writes web design articles on this website. In his free time, Hamza loves riding a bicycle, swimming or going hiking.

Leave a Comment

Your email address will not be published. Required fields are marked *

Search

Recommended Tools

Hostinger offers premium WordPress hosting for small and medium size websites at an affordable price rated 4.5/5 on Trustpilot

Elementor is the WordPress most popular page builder with over 10 million active users