How to create a one-page website

One-page websites are often the right choice when you’re looking for a fast and straightforward solution to present the information. All the content is divided into sections directly on your homepage. With the help of a navigation menu, visitors are able to jump directly to the area they are interested in. 

What is a one-page website? 

A one-page website is nothing more than a single page site that hosts all the essential information. If, for example, on a regular multi-page website, you would have a dedicated About page, on the one-page website, you would have a dedicated section that accomplishes the same goal.

There are numerous benefits of having a one-page website, such as: 

  • You can create the website faster: a one-page site does not require the same amount of content, so there’s less work.
  • The information is presented in a concentrated way: people get what they are looking for fast with no need to visit different pages to find it.
  • You can increase your conversion rate: having fewer distractions and comprehensive info on a single page can help users go through all the details and make decisions swiftly.
  • Ideal for mobile visitors: once the page loads, they can quickly scroll through all you have to say about you or your business.

Of course, there are some downsides of going on this route:

  • Ranking in search engines is going to be harder: a one-page is tougher to optimize for more than one keyword. If your offering is diverse and you want people with different interests to find you, you’re going to have a hard time getting visibility.
  • Page load time can increase significantly: having all that information in one place can also mean a very long and resource-heavy page.
  • Analyzing your visitors’ interests will be a challenge: with a one-page website, you have difficulties figuring out where your visitors go and what they want to learn about you.
  • Incomplete details: have a single page for all your information means that you can’t go into detail, and some things will be left out, making it harder for visitors to get the full picture.

If you decide that a one-page website is what you need, keep reading to find out how you can build yours with ease.

How to create a one-page website

Each page in Osteria has a parent page that stays at the top and a list of child pages that are displayed one after the other. This is done in order to have multiple parallax sections on the same page.

For Osteria, creating a one-page website means nothing more than adding multiple child pages to a parent one. Here you can find a demo of a one-page website using Osteria.

This means that in order to achieve a one-page website, we need two elements: the right page structure and a navigation menu. Below I’ve detailed how to tackle each of these elements so that you have all the necessary info to start building everything yourself.

Step 1: Create the page structure

The first step is to create and publish the parent page. Also, don’t forget to check this page in the Parent field on the right side editor toolbar (under the Page Attributes), and click on the Update button to save the changes. 

Once you’ve created the top level Parent Page with a list of Child Pages, you will end up with something that looks like this:

Home page structure with parent and child pages

As a result, your home page structure will look similar to:

  • Parent Page (Home Page)
    • Child Page 1 (Menu)
    • Child Page 2 (Reservation)
    • and so on…

Now that you know the reliance between parent pages and child pages, you can go further and create the menu items for the one-page website you’re creating.

Please follow these particular steps in order to make it happen:

  1. Go to WordPress Dashboard → Appearance → click on Menus.
  2. Add a new menu and assign it to the “Main Menu” location.
  3. Next, add a menu item for each sub-page. Please read this article about how to properly manage the navigation in WordPress;
  4. In the same article you can learn how to display the menu at the top of your page.
  5. Now that you’ve done with creating the page hierarchy, simply set the parent page as your front page from Settings → Reading → Front page displays.

You can link to specific sections inside the page by adding the child page URL by using the Insert Link button or adding it within a shortcode, preceded by the hash symbol⟨#⟩.

Below is an example of how to find your child page URL:

For example, if your child page URL is “#reservation”, you can link directly to that section by adding #reservation in the URL area of a text or button.

If you want to share the anchor link outside of your website, add the anchor at the end of the URL like this: https://example.com/#reservation. Anyone clicking that link will be directed to that specific section on the page.

Updated on September 22, 2020

Can't find what you’re looking for? Ask a human.

We're a small team of real people providing real help. Send us an email at hello@pixelgrade.com and we will give you a helping hand.