• Introduction
• Theme Installation
• Creating the Page
• Assigning CSS IDs
• Creating the Menu
• Creating the Header
• Testing
• Creating the Footer
• Final Steps

Introduction

We’ve been making these Monday master classes for a few weeks now and during that time, there’s been one request that keeps coming up to show the process of building a full website using the Hello theme and the Elementor theme builder, which is why we’ve decided to dedicate several master classes to exactly that, where, in each master class, we’ll be showing you how to create various parts of a website. And we’ll start this week by showing you the process of building a one-page website with a header or footer. And the content will begin with a clean, WordPress installation using the 2019 theme now I’ve already installed the free Elementor builder and Elementor Pro, but nothing else.

Theme Installation

First, we’ll go into the theme section on the dashboard and we’ll search for the Hello theme, we’ll install it and activate it now, we’ll create our page. As you can see, it’s a blank page and if you were expecting to see something I mean we did just install a theme after all. Well, don’t panic. One of the main benefits of the Hello theme is that it gives us this pristine blank slate to work on in this master class.

Creating the Page

In this master class, we want to create a one-page website for a yacht rental service, I’m going to look for a template that suits our purpose and we have one here so I’ll. Add it and use it as a foundation for our page now, as you can see, our page includes the following sections: the top features about us, our CEO destinations, a photo gallery subscribe and contact us, but there is a chance that when we import the template, the Sections might have been renamed automatically so to prevent that from causing any future problems, we’re going to assign each of these sections a CSS ID right now.

Assigning CSS IDs

To do this we simply right click the section handle and select edit section now, click on the Advanced tab and in the CSS ID field we’ll enter the correct section name I’ll name. The first section notice that one we’re in the Elementor editor – we don’t add the hash sign or the pound sign in front of the ID names, because this already happens automatically within the Elementor code. And if we add it, it just confuses things. A little now. We’re going to speed things up a little while we name the rest of the sections and we’ve decided to name our sections as followed, so we’ve got top features about CEO destinations, photos subscribe and contact. You might prefer to use different names and that’s completely fine.

Creating the Menu

Now that each section has a clear ID, it’s time to build our pages menu to do this I’ll, bring up the finder with command e or ctrl e, if you’re on a PC and use it to get to the menus options. This takes us to the WordPress dashboard in the menus options, which is in the appearance section now, we’ll name our menu one-page menu and click create menu. Now we can begin adding the items to our new menu, we’ll start with the features, because we want to turn the company logo into a home button later now, when I add each item, I specify the URL using the appropriate CSS ID and obviously I include the hashtag here, because we’re not in the Elementor editor – and I specify the name of the section, so I’ve created the following menu items. The name of this item is features in the URL. I’ve added hashtag features. The name of this is about us in the URL. I’ve added the hashtag about next section. Is our CEO, I’ve added the URL hashtag? Ceo, the next section is destinations and I’ve added hashtag destinations. The next section is photo gallery and I’ve added hashtag photos. The next section is subscribe and have added hashtags subscribe, and the last section is contact us and I’ve added hashtag contact to the URL here now that we’ve finished, creating our menu items, we’ll assign the menu to an appropriate location in the menu setting will set this to primary and we’ll save this menu.

Creating the Header

Now, let’s move on and create our header we’ll go to templates theme builder and we’ll add new and in the dialog box, we’ll select header and we’ll give it a name and click create template in the template gallery. We’ll select a header that suits our design like this one and click insert now we’re back in Elementor, and let’s start tweaking this header by deleting this image widget here and replacing it with an icon box. Okay, so in the editor, we’ll change the icon to an anchor and in fact, in both the updated free and pro versions of Elementor, we can add a custom icon or logo here in SVG format. So we want the icon to be framed and we’ll add the name of the company in the title box. Let’s delete the description text and we’ll turn the icon itself into a home button by entering the link to the top section right here. It’s basically the link to the site, with hashtag top in the slug and I’ll change the icon position and now I’ll go to the style tab and change the icon color to the same dark blue, that’s used elsewhere on the page. Let’s make the icons frame and background white and change the spacing to 27 and the size to 21. As for the text, will change the color to white now in typography, let’s set the size to 18 the weight to 500 and let’s use the transform option to set it all to uppercase in the hover settings. Let’s add some animation and have the icon float now we’ll tweak the navigation menu and set the pointer to text will have this animated, like our logo and set the animation to float and we’ll set the submenu to classic in the style tab under typography we’ll set the font size to 14 and the way to 400 and we’ll have the text transform to uppercase. Let’s make the text color white and add some padding here. Let’s also change this icon: here’s color to white by going into the search forms style, tab and changing it. There now, let’s go to the section editor and make sure that the columns have no gap and perhaps make the proportions of these columns in the section a little better. Now, let’s make the background transparent, because we kind of like that lovely seascape with all those yachts that we’ve already got on our page and we’ll make a solid border only on the bottom, with a width of 1 pixel. Okay. So once we’re done with designing our header, we’ll click publish in the dialog box, we’ll add a condition and we’ll select it to appear throughout the entire site and then we’ll save and close and now I’ll bring up the finder and use it to access our page and test it in view mode, as you can see, we’ve got the header nicely up here now we recommend that you click on all the links in the menu to make sure that they actually work and navigate down reaching the assigned location on the page using the Finder with command E or ctrl e on a PC will search and access the theme builder again and we’ll use the exact same procedure to create a footer and then apply our design.

Creating the Footer

Now that everything on this page is starting to look according to plan, we’ll go back to the WordPress dashboard and into the reading settings to set our page as the home page and there we are. We now have our one-page website, including the header, the content, the footer. That is, of course, the optimization, which we obviously need to do to make this site load much faster, including caching, but that’s the subject: we’re saving for a future master class. This week we saw how simple it is to work with the Hello theme and the Elementor theme builder, and we use them both to create a one-page website smoothly and efficiently so be sure to click the subscribe button below and tap that bell. So you don’t miss our next master class in the series, full of tips and tricks for website builders, and we hope this has all been helpful and inspiring. And as always, we appreciate any comments and insight and any criticism you may have and of course, please post any helpful tips so that other users may enjoy them too. After all, our goal is to be the best and helping others excel at their craft.

Tagline: “Learn how to build a stunning one-page website using the Hello theme and Elementor in this detailed master class series.”

Tags: Elementor, Hello Theme, One Page Website, Theme Builder, WordPress