Peter
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 that will be responsive on all devices.
Install the Elementor Hello Theme
01
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 Activate your Hello Theme
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, then Edit with Elementor.
This way you’re able to use the header section and create a vertical menu with HT Mega Addons, for free without Elementot Pro. 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
02
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 Up on the Pages option, add the sample page to the menu and rename it Home
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
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
On your dashboard go to Appearance > Customize > Site Identity, 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.
Make a Header using Elementor Hello Theme
03
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. 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, then click the update button.
Make a Footer using Elementor Hello Theme
04
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. Under Responsive Mode select the Tablet device; then under Footer set Content Width to 100% and add a Gap of 5%.
Under Background Type on the Footer option, add a Color (a darker blue). When you’re done click the Update button. Under Responsive Mode select the Tablet device; then under Footer set Content Width to 100% and add a Gap of 5%.
Add Content to your Page
05
Back to your WordPress dashboard, go to the Plugins section and Add New, search for Premium Addons for Elementor, install and activate it
With your premium addons activated, go back to your Elementor page and reload it then go to the Premium Templates, select a template to use. Select the section and under Advanced, add Padding of 100pixels at the Top and Bottom. Then update and preview.
Video: Hello Theme Header and Footer Tutorial
Check out more on this story on the link below.