Free Hello Elementor Theme Tutorial: Make a One Page Website using Hello Theme and Elementor

In this tutorial, I am going to show you how to create a website using the free Hello Elementor Theme and the Elementor Page Builder. I’ll show you how to create free headers and footers, menus, import and use Envato templates for Elementor and then build up a one-page website. 

By the end of this tutorial, our one page website using the Hello Elementor theme will be exactly like the one below.

Free hello elementor theme tutorial

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 Elementor Theme Tutorial

Step 1: Install your Hello Theme and Create a Menu

On your fresh WordPress dashboard under Appearance, search for the Hello Elementor theme then install and activate it (01:43)

TnWmNRq49LDfS C7oeI G kAU0 yCx9yGl70fXyACecJYn2 Kr4lNRbk I CD9nFutkBOoCI6xFMu2uOt9qjfmnMNV4RF1ZsZ flA76w8AoOpQAxsmKNP20Ok bFv7KQWLUsTi2I

After your hello theme is activated, go to your home page and reload it, and you’ll see that it has updated to the new theme (01:55)

dwKaeiw5kmVxQce4mjtww VnBc98oPOzS075bP

Back on your dashboard, go to Appearance > Menus to create a new menu, name it Main Menu, then in the Add menu items section, go to Custom Links, copy the URL of your home page and paste it under URL, add a hashtag and then ‘home’ (yourwebsite. com/#home), then under Link Text add ‘Home’.

Delete the default items that were already on your menu.

Back under Add menu items, paste the Services URL (with the hashtag), and give it the name ‘Services’ under Link text, then Add to Menu (03:11)

Vf9ck0FZhxOlgVLXDtH8QR t5XjwBxoxuxbYCaStSr0neNnFYelH0F7w9cQ297QO7XnM

Repeat the above steps and add the About and Contact page sections, when you’re done click the Create Menu button.

Step 2: Install Elementor Page Builder Plugin

Back to your Plugins section, Add New, search for Elementor Page Builder then install and activate it (03:51)

bp8VGE7EgP SwkNYHtpp2MpTFLzVp6Js z lf8n qGuIbTo6TNy0l3eHMJ078KumzuODrE0 i3AjsI

Follow this same process and install and activate the other plugins;

Envato requires you to have a free account so after you install it you need to sign up, then under Elements on the dashboard, sign in with your Envato account. (You no longer need to have an Envato account to use the free Envato elements templates. Though, getting the paid account grants you access to pro templates and other assets)

Step 3: Create a Header and Footer

When you’re done installing and activating all the plugins needed, go to Plugins > Header Footer Builder > Add New, name it ‘Header’, then under Type of Template select Header, under Display on, select Entire website, then click the Publish button (06:02)

ZZv4fUsMmoRPzaSAljHR3y3drMm5oc1FyVcmO kFmvAmDMmrUmIS3Y5Zj21m6ypsLqV0JaQmulvat1OTIy1 egu3K

Go to Add New again, name it ‘Footer’, under Type of Template select Footer, under Display on, select Entire website, then Publish (06:18)

4H7OTgJwIPAPzYAnMiS7qMuRw liYFuy9rF8nv qNEl48cacYmISKHTZgRBoBX clNTyijoHOR6i7vyI5rh4DLDGFWcJnfvVCNBWcde5oA SdQ LlFIePja4RNf5skDj biplQ6Q

Back under Appearance > Header Footer Builder, click Edit on your Footer and open it up in a new tab, then click Edit with Elementor.

When your page opens up in the Elementor editor, click the Envato Elements icon (06:57), go to the Footer option, find the footer block to use and click Add Block to Page.J6UXHCNgqCDAXu37UjXqKX5zdptcvnUFqTIxi9nbCes92IH0BJVXQ9V7odDmkCTOYkHi5t4RTL0Ld1TJTdpHoJjA3cqWheJvr Zyv5gkbUvm5tVtcoWhfDoCUkQy 3ccuyoe3Qg2

QMu 8UQ88e9koHyyRqX8IywSG266aqWDEWL hjjEooKdn30W W3SN1xVEsOvRprEzQio704AN jPxh35y4ApfeWygFJV FaXZ9DasrJ3dsQWWYunJ1 chP8 g0 v2z8RskcNc8E7

When the footer block opens up in your editor, select the heading widget on the right then in the Edit Heading section on the left, under Content > Title, rename it to ‘Creative Studio inc.’

Select the other sections; the address list, social networks, links and edit the text to your preferred details (08:12)

3hbJwLgOpDsMjILPVdK9PLGfW2UxvGCzbuwpbF dFjMLQBqgttMDKDbufDMsq7w3tDykhJL3Yna2hb5 vLqta dELmqMsjTE8cU6fDTEHIUp4uskqUU6wIV0QwWyHGfx9tfT BK1

You can also make other changes under Style like the Background Overlay, and change it to a colour of your choice.

When you’re done, click the Update button, then reload your homepage to preview changes.

Back to your WordPress dashboard, under Appearance > Header Footer Builder, open up your Header template with Elementor.

In the Elementor editor go to the Envato Elements icon, under the Header option, select the header block. This particular block requires us to have Elementor Pro, but since we have the Header Footer Plugin installed, we can ignore the warning and install anyway (10:01)

aZY67CfEyOakE6iYexG1A eSs aeQDTZ4hYRoXyRZNtq9p3MLFcxESudIjIwt 7M1Y8ydGWkW5ngSF0QPXWcR IJth 54dibTD0yV4gnLs2b7TZJUpHil6WLr5NRBcOQ9whp4jp1

After your header block is imported, select the heading widget and in the Edit Heading area, under Content > Title, rename it to ‘Creative Studio’. 

You can also select the logo and add another image of your choice.

Go to your Widgets area and drag a Navigation widget to your header (10:11)

T33AQz1H1Ey7wreMmzpYT6nTz6p8PAeW4tUU3ytbi kIEvcUlI8INpDkfzCJGk0Es deYq82

Select the widget then in the Edit Navigation Menu area on the left, under Content > Menu, select the menu you created earlier (Main Menu).

Select your menu widget, under Layout > Alignment, and align it to the right. Then under Style > Typography, change the font to Montserrat,  and set the Weight to 400.

Select the Creative Studio heading and under Style > Text Color, copy the colour code and back to the navigation, paste it under the Text Color.

You can also go ahead and add more customizations to your header.

You can also set up the Button to lead to another website or a specific landing page. In this case, I’m going to link it to my newsletter, under Content > Button > Link I’ll add my newsletter link (gotechug.com/newsletter), you can use any page of your choice.

When you’re done setting all this up, click the Update button then reload your home page to preview your header (12:58)

DWttB8XHVp2LAYp5pfqYk8osepxARBa27Mk4JoZWnLfQCImRHX5fE9e1xevefiDRLNJ2firAljc8DVrs2K7kZp gE0EPNiyp2gXPEbfiODxDtieL Lvch Q3 OU6uTzbU2HHnPYi

Step 4: Create A Home Page

Go back to your dashboard, under Pages > All pages; here you’ll find there are no pages except the default privacy policy page and the sample page.

Click Add New to create a new page, name it ‘Home’, then Publish (13:32)

Go to Settings > Reading, under Your home page displays, select static page, then select Home under Homepage, and save changes (13:43)

V5x7CSGnAioqru0ek2GQ9WU8jR1UuBJTPfSGehWssgjSboI6xEslN9t3HF4sVnTplmrhN lWtnBLfowgRY5jWz3QZtrh3QP nQZecanDSicMeuf8pRZWUTjbldjj3TWIeUn5E4pG

Go back to your home page and reload it to preview your new home page (13:52)

Back on the dashboard, under Pages > All Pages, go to your Home page and click Edit to open it, then click Edit with Elementor.

When it opens up in the Elementor editor, go to the Envato icon and under Templates, select a home page template and import it (15:13)

015szX7teuftEbopVo8YOAT0yHmXDuHfrE 2lvyMh4joa1dSi8CS70W7MBUf zWVaYCyi2bs65h70vvdCDvNgYV5NJpg

Back in your Elementor editor, click on the folder icon (📁), then under My Templates select the template you just imported and insert it (15:39)

X31g azj aNDJsuBInsc

To enable the header and footer to appear on the template, go to Settings (⚙) at the bottom and under Page Layout, select Elementor Full Width. Click the Update button then go to the home page and reload it (16:25)

NpVsUQobpkIcinJuy9WaAHt4ZjKvKVnlNod7ZCKBLYi8hEMi9yfiDD9RQ1bLKW184PNdWUuVbO0gLa0dNN7zs47EtRUoEAHaUq s5vVm 8LoIrmo OHrg iLFYtilTkcAc PwUFl

Step 5: Link Menu Items to your Home Page Sections

Back to the Elementor editor, select the first section; Home, in the Edit Section area on the left, go to Advanced > CSS ID, name it ‘home’, you have to give it the same name that you gave it under Menus (17:46)

l8cbMxkNY2IyC UV8
7E3b9Xrn2qbMmvoWRuDF9TiClK dGCEELK2pn3yBke9bAUenI3iHYU64u6FvbAN2UM0Ykga4o4d9ahWibW8uHpzRnVi 1n YwUstKreOMFurPWfDsZHYahtacf6gm3yzizB7qEsY

Select the second section; About, in the Edit Section area on the left, under Advanced > CSS ID, name it ‘about’, remember, give it the same name that you gave it under Menus.

59faK6JnhvOTvJvU6rIz F1greCv72 YLmFFE9hiRXC0RoTuR7bXME2Pc46EMA axkjjm9

Follow the same steps and set up your Services and Contact sections.

When you’re done, Update then reload the home page to view the results (19:08)

khwav4ZPTiQKdpB 9sNrib6g0pgoTc3l2Z0JlPk6mOhAeR3z xjVPAKy5W0eEZc6nJhh4 VxFTYxVE1RCR1XxgXwgwuSp1e11GJaMHhtqiFphVpK8IWYzsXixNg7 P OYuiOZ4wt

In conclusion

That’s how you can use the Elementor Hello theme to create a website for free, as well as use all the other free resources (plugins) to make your Elementor website even better.

For any questions or comments, let me know in the comments section below, and don’t forget to subscribe to my newsletter and youtube channel for more of these tips and tutorials.

Also Read. . .

Snapchat Device Ban: The Why And The How

Snapchat is one of the quickest and easiest social media platforms used to communicate through photos and videos. Because of its emphasis on security and safety, Snapchat may ban a user’s account due to violations,

Read More »
Newsletter Subscription (EF)
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