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.
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)
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)
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)
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)
Follow this same process and install and activate the other plugins;
- Elementor Header & Footer Builder plugin by Astra, which will enable you to add headers and footers for free, and
- Envato Elements which has several premade headers, footers and block sections that you can use on your website.
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)
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)
Go to Add New again, name it ‘Footer’, under Type of Template select Footer, under Display on, select Entire website, then Publish (06:18)
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.
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)
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)
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)
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)
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)
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)
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)
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)
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)
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.
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)
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.
