Monday Masterclass: Building a One-Page Website on WordPress

This week we’re demonstrating how simple and efficient it is to work with Hello Theme together with the Elementor Theme builder. To do this, we’ll create a one-page website, complete with a navigation menu in the header/footer.

Monday Masterclass has been up and running and continuously inspiring tens of thousands around the globe for weeks now. During this time, among the users’ comments, one request kept coming up: could we demonstrate the process of building a full website using Hello Theme and the Elementor theme builder.

As we mention every week, our goal is to be the best at helping others excel in their craft. Which is why we‘ve decided to dedicate several masterclasses to this purpose, each time showing the creation of different parts of the site.

We’ll begin this series by showing you the easy process of building a one-page website, to include a header, footer, and content of the page.

Why One-Page Websites?

It shouldn’t come as a surprise that more and more businesses are relying on one-page websites. 

For one thing, having all of your content on one streamlined linear page means that visitors remain focused on your content. As such, your one page becomes the funnel itself, continuously convincing readers to scroll down to a Call-to-Action. This reduces the risk of losing customers when clicking on links to other pages, that could load too slowly or create a distraction. 

This format of website layout also limits us to the amount of content, forcing us to be spartan and laconic, something that is perfect when targeting younger audiences and mobile users – which is where Google is directing its search engine bias, with its Mobile-First agenda that began July 1st.

One-page websites are great for all sorts of businesses and causes. Not long ago we published a list of 12 Essential Tips to Making Your Portfolio Website Stand Out, just one of countless examples of ways that One-Page website are used more and more.

How to Create a One-Page Website

In this week’s tutorial we will be building a one-page website from scratch that will include:

  • The page itself, with the content divided into sections
  • A menu that will allow visitors to skip ahead to the relevant sections
  • A header that will include our menu.
  • A footer.

Our example client has commissioned us to build a website for his yacht rental service, Yachtora.

To set the ball rolling on this tutorial, we’ll need some basics:

  • WordPress (we like to work with a clean install, and the 2019 theme activated)
  • Elementor builder (free) and Elementor Pro

We will also install the Hello Theme, a free starter theme that is so minimalistic, it’s practically blank. As such, it will not only allow us to use Elementor’s theme builder, it will allow us to add elements to theme parts (header, footer, etc.) without any worry of conflictions, as well as help to reduce load time and the need for additional plugins.

To install Hello Theme:

  1. In the WordPress dashboard, go to Themes, and click on Add New
  2. In the Add New Theme dialogue box, use the search box to search for the ‘Hello’ theme.
  3. Install the Hello theme.
  4. Once it is installed, activate it.

Creating Your One-Page Website

We’ll create our page in the simplest, most efficient way possible, by clicking on New on the WordPress dashboard and selecting the Page option. 

Once your page has opened, select the Edit in Elementor option. 

While in Elementor Editor, click on the library icon and in the template library search box, search for the term ‘Yacht’. Click on the template and insert it.
We’ll be using this as a foundation for our page.

Creating a Menu for Your One-Page Website in WordPress

As you will see, our page now includes the following sections:

  • Top (Home)
  • Features
  • About Us
  • Our CEO
  • Destinations
  • Photo Gallery
  • Subscribe
  • Contact Us

These are the basic sections that we want our menu to refer to. But there’s a chance that when we imported the template, the sections might have been renamed automatically. 

As we want to avoid this causing any future problems, we’ll assign each of these sections a CSS ID.

To do this, we’ll simply right-click the Section Handle of each section and select Edit Section. From the menu. Enter the Advanced tab in the Editor panel, and in the CSS ID field, enter the correct section name.

Important Note: Avoid using the hash key (#) in front of the IDs in Elementor, as Elementor adds this automatically to the code.

We’ll be naming our sections as follows (you can of course use any names you prefer):

  • Top
  • Features
  • About
  • CEO
  • Destinations
  • Photos
  • Subscribe
  • Contact

With every section now clearly named, it’s time to build our page’s menu.

Use the Finder tool (cmnd or ctrl + E) to get to the Menus options on the WordPress dashboard (you can also find the Menus options in the Appearance section on the WordPress dashboard). We’ll name our menu “One Page Menu”, and click Create Menu.

Now we can begin adding the menu items to our new menu. 

To add Menu items, click on the Custom Links button, and in the URL field, enter the website’s URL followed by a hash sign (#) and the appropriate CSS ID to create the slug for each section. In the Link Text field, enter the menu title as you would like it to appear on your website. 

We’ll start with the features section because we want to turn the Company Logo into a ‘Home’ Button later. So the menu items that we created are as follows: 

URL

  • #features
  • #about
  • #ceo
  • #destinations
  • #photos
  • #subscribe
  • #contact

Link Text

  • Features
  • About
  • CEO
  • Destinations
  • Photos
  • Subscribe
  • Contact Us

Once we’ve finished creating our menu items, we’ll assign the menu to the appropriate location in the menu settings and check the Primary checkbox, and click Save to save this menu.

Navigation Menu Editor

Creating a Header/Footer for Your One-Page Website

We’ll create our header and footer in Theme Builder, found under the Templates section in the WordPress dashboard. Both the header and footer can be created this way, however, for the purpose of this tutorial we’ll focus mainly on the header, rather than repeating the same instructions. 

In the Theme Builder, click on Add New and in the dialogue box that appears, select Header, and give it a name, then click on the Create Template button.

From the Template gallery, we’ll select a header that suits our design (we selected Header 1), and click Insert.

Adding a Logo

Having returned to Elementor mode, we’ll begin tweaking our header by deleting the logo, and replacing it with an Icon Box. 

In the Elementor editor panel, we’ll change the icon to an Anchor from the icon library that appears when we click on the icon image. 

We can also add a custom icon/logo here in SVG format, the same way, in both the Free and Pro versions of Elementor. 

Continuing in the Elementor editor panel, I’ll set the icon’s view to be Framed, and I’ll type the name of the company Yachtora in the Title box and delete the text from the description box.

To turn the icon or logo itself into a home button, enter the link to the top section in the Link field. Be sure to use your websites’ address, followed by a hash key and the name we used as the CSS ID. In our case, the link would read: http://yourwebsite.com/#top

Use the widget’s flexibility to your advantage, and make good use of the variety of settings in the Editor panel to stylize and perfect your header.

We used changed the icon’s position in the content tab and in the style tab we changed the icon color to the same reoccurring dark blue that’s used elsewhere on the page. We also changed the icon’s frame and background color to white and adjusted the spacing to 27 pixels and the size to 21 pixels. 

As for the text, we changed the color to white, and entered topography settings to set the font size to 18, the weight 500, and Transform the letters to Uppercase.

We would also like this icon to look more contemporary and add some animation by selecting the Float option in the Hover settings.

Customising Your Header Menu

Moving on to other header elements, we’ll tweak the Navigation menu.

In the Content tab, on the Elementor panel, we’ll set the pointer to Text, set the animation to Float, to stay consistent with our icon/logo. We will also set the Sub Menu to Classic

In the style tab, under Topography, we’ll set the font size to 14 pixels, and the weight to 400, as well as setting the text Transform to Uppercase.

We’ll remain consistent with our icon/logo, and change the color of the text to white, and do the same to the search icon (in the editor panel for the search form widget, under the Style tab)

While here, we thought to add a solid border, with a width of 1 pixel, on the bottom of the heading section.

We also want to make the background of the whole header transparent, so that we can preserve the romantic and peaceful seascape with all the yachts that we have on our page as a video. To do this, we’ll go into the Section Editor, and under the Style tab, we’ll use the color selector to make the background transparent.

To ensure that this lovely video background appears as the background of our header, we’ll make 2 small adjustments. First, under the Advanced tab of the section editor, we’ll set the Z Index to 4 (the index can be any number so long as it is higher than everything else). Second, we’ll set a negative margin for the ‘hero section’, the section containing the video at the top of the page. This, however, might be more convenient to do when we return to the main page, once we’ve finished our header/footer.

Setting Up a Header/Footer on Your Website

Once we’re done designing our header/footer, we’ll click Publish at the bottom of the editor panel. In the dialogue box that appears, we’ll add a condition, and select it to appear throughout the Entire Sight, then click on Save and Close

Using the Finder (cmnd/ctrl + E), we’ll return as promised to our main page and there, go into the section editor, to the advanced tab and set a negative margin of -300 pixels, to ensure its place as the background of our header.

Click on the view option (bottom of the editor panel) and in view mode, test all the links in the header to make sure that they actually work and navigate down your page reaching the assigned locations.

As aforementioned, we’ll use this same procedure to create our footer, using the Theme Builder, then selecting a template, customizing, then publishing it with a set condition to appear across the entire site.

Setting Up the Main Page as Homepage for Your Website

Once we have completed building and entering the content of our one-page website, we’ll go back to the WordPress dashboard, and in the (WordPress) Settings section select the Reading sub-section. In the options under Your homepage displays, select A static page, then select your main page from the dropdown menu below the option. 

Click on Save Changes, and you’re done. We now have our one-page website, that includes a header, content, and footer.

Hello Theme/Theme Builder Workflow

The purpose of this post is two-fold, to introduce a significant number of our users to the Theme Builder, its tremendous potential and flexibility. 

Obviously, the site that we built here, will need additional optimization to make the site load faster, including caching. But this is a subject for a future masterclass.

Meanwhile, the rudimentary function of the Hello Theme, like a minimalistic foundation, will prove very efficient in lowering the weight of the page and speeding up the load time.

We’d love to see what you’ve designed, and really appreciate hearing about your experience. 

What advice would you give other users? If you have any tips or tricks you use when building pages in Theme Builder, please share them in the comments below.

About the Author

Simon Shocket
Simon Shocket
With a background in graphic design and animation, Simon began his writing career in the entertainment industry, followed by a fruitful career in advertising, before moving into hi-tech journalism. Simon also performs with several bands and musical productions. After all, he was born in Manchester, UK, and that’s a lot to live up to.

Share on

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

you might also like

Liked This Article?

We have a lot more where that came from! Join 885,286 subscribers who stay ahead of the pack.
By entering your email, you agree to our Terms of Service and Privacy Policy.

Comments

31 Responses

    1. Hi Muhammad,

      While I agree that is you want a basic website the theme ‘Astra’ or any other theme would be quicker, If you want to be truly unique, and have a customised website then ‘Hello’ theme is the way forward. Its a lightweight theme packed with everything you need, whereas ‘Astra’ is a lot more bloated containing a lot of unnecessary features. Because of that ‘Hello’ theme is better for not only cutomisability, but also for general web development and even SEO because of code bloat.

      Atleast, this is the way I see it, we love using ‘Hello’ theme.

  1. Thanks for this, i would recommend to insert a “to the Top” button which will show everywhere, so you don’t need to scroll all the way up.

    Patrick

  2. Nice tutorial. What about the SEO of 1 page website?

    With yoast you can only focus on 1 meta description, keyword, …

    Binh

  3. This is a great intro to the Theme Builder especially since I wasn’t that familiar with it.

    On the menu I thought it was interesting you used the full URL, I’ve always just used the slugs and that works fine and is less work.

  4. I want to do the same thing with Zakra (‘cos I think that Theme is the bees knees).

    So I’ve installed it – and picked the Cafe demo.

    “Fixed” the menu, per tutorial, and I think it’s working pretty damn well.

    Zakra’s so cool – you install the Theme and pick one of the demos and it installs Elementor (always – isn’t that nice! 🙂 ) and all other required Plugins.

    Love to see what the Elementor folk can do with Zakra.

    The best stuff I like about Zakra:
    * installs Elementor, always
    * and all other required Plugins for the ‘demo’ you’ve picked.
    * has truly excellent Themes customisation options – just what ya need!

  5. This is a wonderful and useful tutorial! I‘ll definitely try it following the tutorial’s guide with a new site. By the way, can the one page site make an Ecommerce site?
    Thanks guys made such good works!

    1. I don’t know if what I’m about to say is correct but I imagine that any updates to the hello theme won’t impact the styles of your site because hello theme has no styles. Is there any other reason why you’d want a child theme?

  6. I have seen the video and the text, Please help me find answers to the following points so that I can learn from you

    1- When you click on a new page do you have to give the page a name? if yes why you did not say so?

    2- I do not think I have elementor on my dashboard .do I have to install it how?

    3- what else do Ihave to install other than element or before I start?

    1. 1. You can give your page a name, no big deal

      2. Install Free Elementor and Elementor Pro

      3. Just the two and hello theme

  7. Hi Christopher,
    I followed your instruction three or four times, but I didnt get the header IN the top-picture of the Yacht-template. In the canvas mode as well as in the full width mode I have the the same result: The header is positioned above the template ( see https://amwind-beratungsagentur.de). Can you help me?

    best regards
    christian

  8. You might want to suggest that people watch the video first, as I found that trying to follow the written instructions alone to be quite difficult.

    Otherwise, it’s a fantastic explanation!

  9. Hello, nice tutorial I have a question in the video Simon select Elementor Canvas, but when I tray to show the menu, only work in full width and default template but not in with elementor canva. So does not work right?

  10. Hello, thanks for the building a one-page website masterclass. I have worked my way through it with some success, and have some questions before I publish the site.

    I couldn’t make the ‘template’ show on the ‘header’ I created, so I just went ahead and built my site underneath the ‘header’ using the elementor tools. I was advised by my hosting company to install SSL in order to use https:// for the links which I did. I have tested the ‘menu’ bar in preview to check the button scrolls down to the appropriate area of the site as instructed on the video. However, I get this warning notice and wonder if you can advise what to do before I publish the site please? Also, I still have the name of the page ‘Hear You Think Welcome and Header’ in black type at the bottom (the name I gave the one page menu / header page) – how do I delete that bit please? Thanks for your time. Best, Lesa

    Your connection is not private
    Attackers might be trying to steal your information from http://www.mywebsiteaddess.elementor.link (for example, passwords, messages, or credit cards). Learn more
    NET::ERR_CERT_COMMON_NAME_INVALID (NOTE: I have changed the real name of my web domain to mywebsiteaddress in this message for security purposes.

    Help improve Chrome security by sending URLs of some pages you visit, limited system information, and some page content to Google. Privacy policy

Leave a Reply

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

Want to learn how to build better websites?

Join 885,286 Elementors, and get a weekly roundup of our best skill-enhancing content.

By entering your email, you agree to our Terms of Service and Privacy Policy.