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 Rosa 1 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 Rosa 1, 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 Rosa 1.

This means that in order to achieve a one-page website, we need three elements: the right page structure, page ids, 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…

The first step is to find your page IDs. All pages have an unique ID and they will act as the links to that specific page or child page. Here you can find a detailed article that explains how to identify the ID for each page. 

The next step is to create the menu links. To do that, follow the steps below:

  1. Go to WordPress Dashboard → Appearance → click on Menus.
  2. Add a new menu and assign it to the “Main Menu” location. Please read this article about how to properly manage the navigation in WordPress. In the same article you can learn how to display the menu at the top of your page;
  3. Click on Custom Links on the left panel and add a menu item for each parent page and child page that you want to scroll to:
    • In the URL tab write #post-id-title where “id” is the Page ID that I mentioned earlier. You will end up with something link this: #post-867-title
    • Note: You can skip the“-title” if you want to link directly to the content or if you don’t have a featured image.
    • In the Link Text area, write the text that you want displayed for the menu item (e.g., Reservations). Here’s an example.
  4. Click Add to Menu and repeat the process for all the anchor links you have on a page. When you’re done, click on Save Menu.

Below is an illustration to help you better understand how the menu items are linked to pages:

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.