How to Create a One-Page Website on WordPress

Many successful websites are large, complex affairs with lots of pages and content. However, sometimes more is truly less when it comes to web design. And that’s why, instead of taking a traditional approach, it may be worth your while to create a one-page website with WordPress.

We’ll begin this tutorial by briefly going over the essential elements of one-page sites. Right after that, I’ll teach you how to create a one-page website using WordPress in just six steps. Let’s do this! 💪🏻

The essential elements of a one-page website

When your website only spans a single page, you need to be very deliberate about what you include. It’s important to provide all the information your audience will need, without cluttering the page or overwhelming them. Everything you add to your page should be there for a reason.

Here are some of the essential elements if you’re looking to create a one-page website:

• A prominent Call to Action (CTA), such as sign-up, contact, or purchase button.
• An About section explaining who you, your company, or your organization is.
• Branding elements such as your logo and tagline.
• A list of products or services, if relevant.
• Links to your other places and content around the web, including social media profiles.
• Contact information, including various channels if possible.

It’s also important to pay attention to the order of these elements. In general, you’ll want to place the most crucial information and CTAs early on, with contact details and links closer to the bottom of the page. Think about what your audience will need to see and in what order, and that will help you determine what elements to include and how to arrange them.

Finally – just because you’re using a one-page website design, that doesn’t necessarily mean you can’t have a blog. If you still want to include a blog, WordPress will still let you link to your blog from your one-page homepage.

How to create a one-page website (overview of the process)

Now, let’s talk about how to actually go about designing your site. The first thing you’ll want to do is check out some existing examples of one-page websites for inspiration. Then proceed to the first step.

Step 1: Determine your site’s focus

As we’ve discussed, choosing to create a one-page website means you’ll have to be very deliberate about its design. That includes being clear about its goals. When you’re constrained to one page, every single section, image, and word carry more weight than they do on a traditional website. That’s because the site isn’t just a first impression for your visitors – it’s the only impression.

You need to do everything possible to keep them engaged with your page and eventually take the action that you’re trying to steer them towards. This could be signing up for a membership, purchasing a product, making a donation, attending an event, hiring you for a job, or whatever other action is crucial for your business.

Everything on your page should encourage people to take that action. This means providing the information they’ll need, explaining the benefits, and making the next steps clear, with prominent call to action buttons added in strategic places.

Step 2: Select a quality one-page theme or a theme with pre-built one-page templates

When building a one-page website in WordPress, you can choose from over 13,000+ available themes in the WordPress repository (and thousands of others from theme stores and individual developers). But rather than just using any theme that happens to quickly catch your eye, it’s smarter to choose a quality theme from a reputable developer.

Preferably, the theme should either be a specialized one-page theme or it should provide a pre-built site template that is designed for single page websites.

Below are some general guidelines that will help you narrow down your theme choice. Choose a theme that has:

• Pre-built sections (e.g., testimonial and contact sections) that are distinguishable from each other.
• A navigation menu that will make it easy for visitors to jump to any of those sections.
• Call to action buttons (or an easy way to add them) and personalize them.

Our recommendation

If you want to save yourself the hassle of theme hunting, our flagship Neve theme not only meets all of the criteria above, but it has a powerful free version that’s been downloaded 5,417,334 times. It also has a 94% favorability rating based on 1239 reviews.

All you have to do is choose one of the pre-built one-page website templates, install it, and customize it with your own images and text. The most straightforward option that can be used for a variety of purposes, is the aptly titled “One Page” template. It looks like this (you can also try the demo):

As you can see, it has 11 different sections that you can customize to fit your branding. You can also remove sections that you don’t need or replace them with others (more on that soon).

There are other, more specialized templates in the Neve starter site library, but for the purposes of this tutorial, we’re going to use this one.

However, don’t be afraid to choose a different one that’s better aligned with your needs – or even an entirely different theme altogether.

The general concepts and process will be very similar for any classic theme. Block themes function a bit differently, but you’ll still be able to apply most of what we’re going to cover next. I’ll also point out a workaround when we reach the step where block themes diverge from the rest of the tutorial.

Step 3: Design your site

Once you know what you want to include on your site, are clear about its focus, and have chosen a strong theme, you can start designing the page. You’ll want it to be appropriate for your audience, reflective of your style, and optimized to fulfill your goals.

Here are some suggestions to keep in mind as you put your site together:

• Keep your page simple, and don’t include anything that doesn’t serve a distinct purpose.
• Clearly distinguish between different sections with a variety of headers, backgrounds, and so on.
• Create a navigation menu that will let visitors jump to the sections they need.
• Make your primary CTAs prominent and persuasive.

If you follow this advice, you’ll have an awesome one-page site done in no time.

Build your one-page website (step-by-step tutorial)

Let’s talk walk through a practical example of building a one-page site using Neve with the One Page starter site mentioned earlier.

We’ll go through each step in detail, but here’s the basic process:

1. Install the free Neve theme.
2. Install the One Page starter site.
3. Decide which of the pre-built sections you want to keep / remove.
4. Customize the sections.
5. Set up your header, footer, and menu.
6. Link the menu to different sections in your design, to create the one page navigation effect.

1. Install the free Neve theme

• Go to Appearance → Themes → Add Theme in your WordPress dashboard.
• Search for “neve”
• Click the Install button
• Once WordPress installs the theme, click Activate to make it live

2. Install the One Page starter site

After you activate Neve, you’ll be automatically shown a prompt window with a blue button that will say Explore Templates and Start Building Now! Click the button:

This will open up the setup wizard, which will take you through a series of easy-to-follow screens starting with the prompt below. Type “one page” in the field at the bottom and then click on the → button beside it:

On the next screen, you’ll see that “one page” will already be pre-filled in for you from the previous screen. You can explore all of the available one page starter sites or click on the first one, which is the one we’re going to be using:

After you choose your template, you’ll be asked to customize some default settings, starting with the logo for your site. Uploading a logo is optional, but recommended. Otherwise you’ll be left with the placeholder logo that’s part of the template. You can always hide it later if you don’t want any logo at all – it’s up to you.

You’ll also need to choose your site’s color scheme and typography (the font). Click Continue when you’re ready:

The last step of the setup wizard will ask you which features you’d like to add to your import. Site Builder and Contact Form will be checked off by default. Generally speaking, unless you have some specific reason not to, it’s also a good idea to select Image Optimization and Caching. Both of them will benefit your website.

When you finish, tap Import Website, followed by Start Import:

And that’s it for this step.

3. Decide which of the pre-built sections you want to keep / remove

As was mentioned earlier, the One Page template contains 11 pre-built sections. These are:

1. About
2. In a nutshell (basically a TL;DR of your highlights)
3. Portfolio
4. Our team
5. Your product/service in detail
6. Pricing tables
7. Testimonials
8. What you get with (your product/service)
9. Blog posts
10. More features
11. Contact

At a minimum, most one-page sites will need an about section, a contact section, and a section that describes what it is you do or sell. From there, it’s really a matter of individual needs.

To begin editing the pre-built site, click on Edit Page on the wp-admin bar at the top of your screen:

This will take you into the WordPress block editor. If you’ve never used the block editor before, you can always read our beginner’s guide, but it’s honestly very intuitive.

As the name implies, the entire thing is built on a system of blocks, with nested child blocks inside of parent blocks. When you first enter the editor, you’ll be shown a series of mini popup windows that explain this to you. You can read through them by clicking Next, or just click the X to get down to business:

To delete a section

Deleting any of the sections is simple. Start by clicking somewhere in the general area of the undesired section. Ideally, you’ll want to click somewhere away from text or images and in a more open area. The reason for this is that if you click on something like a piece of text, then WordPress will think that you want to edit that block of text and not the overall section block it’s nested in.

If done correctly, you’ll see a thin blue line appear around the entire section. You’ll also see a popup menu bar that will have the section icon showing on the far left. That same icon will also appear in the righthand side menu, along with editing options:

You don’t need to worry about those editing options for now. To delete the section, tap the three vertical dots on the righthand side of the popup menu. This will open a dropdown menu. Scroll to the bottom and click on Delete:

And that’s it. The section will be gone.

⚠️ If you accidentally end up clicking too close to another block that’s inside of the section, and the block editor selects that block instead of the entire section, don’t panic. Just look at the popup menu bar and you’ll see the parent block icon to the left of the selected block you accidentally chose. All you have to do is click it and the block editor will change your selection:

4. Customize the sections

What if you don’t want to delete a section but you want to change the text or remove a specific block inside of the section?

It’s a piece of cake. Simply tap on the block you wish to edit. The block editor will highlight it and you’ll see the popup menu appear again:

• If you wish to delete the block entirely, it’s the same exact steps as deleting the section: click the three vertical dots, followed by Delete.
• On the other hand, if you want to keep it but edit the text, just use your keyboard to delete the existing text and type whatever you want instead.

What about editing the existing images?

It’s as easy as one, two, three. Click on the image you’d like to swap out. Tap on Replace in the popup menu bar, and then choose Upload from the dropdown menu:

If you already have an image that you uploaded to your WordPress media library earlier, then you can click Open Media Library and use that instead.

The rest of the customizing process can be done in a similar fashion. Go through the entire page and find the areas you want to edit, click on them, and then use the menu to make your changes.

There are additional edits and types of edits you can make. Some of those – the most crucial ones – we’re going to cover next. However, the bulk of what you need to do to launch your one-page website will be completed right inside the block editor in the way described above.

5. Set up the header, menu, and footer

For this step, you’re going to use the WordPress Customizer to set up your one page website’s header, footer and menu.

Header

Head to the WordPress dashboard and click Appearance → Customize to begin customizing the One Page template:

From the menu, click on Header to open up the header settings:

💡 Also make a mental note that Footer is directly underneath Header, with Menus being a few slots below that. We’ll be covering those right after and you’ll access them through here.

There’s a lot you can customize in the Header section – down to some of the tiniest minutiae. Fortunately, we have a very comprehensive Docs library that covers all of it in great depth. I recommend reading it so you can get your header section looking exactly the way you want.

With that said, one specific aspect of the header that I did want to draw your attention to, is the layout feature at the bottom. You’ll see this layout in any individual header section you’re customizing (and in other areas of the Customizer).

For example, in the image below, it happens to be the Logo & Site Identity section.

As you can see, each one of the rectangle boxes at the bottom has a corresponding equivalent in the header at the top:

To change where those sections are located in the header, simply click on the rectangle boxes in the layout area and drag them to where you want them to appear instead. You can also click the + sign inside any empty rectangular box to add a new element:

This is useful to know when you are trying to arrange your header for the first time. In addition, you can use the left sidebar to:

• Click around the individual section options (General, Layout, Style) to make adjustments.
• Toggle between the mobile, tablet, and desktop version of your site to fine tune what users will see on different screen sizes.

Menu

Next, you need to edit the navigation menu that will display in your header. To get there, keep clicking the back arrow inside the Customizer (it’s just below the X on the very top left and looks like the math < sign) until you get back to the first Customizer screen.

Then click on Menus → main and do the following:

1. Click Add items, which will open a new sidebar menu. It will open to Pages by default.
2. Tap on Custom Links (it’s right above Pages).
3. Copy your website’s URL. Paste it into the URL text window and then add /#anchor-text to the end of it. For example, if you plan on having an About Us section, then the full URL you’d put there would look like https://myonepagewebsite.com/#about-us. Do NOT add a forward slash after the anchor text.
4. Type what you want the name of this to look like in the navigation menu (i.e., what your site visitors will see and click on).
5. Tap Add to Menu and you’ll see it populate on the lefthand side.

Continue this process for all the sections on your page that you’d like to make available in the navigation menu.

Footer

Move on to the footer by clicking the < icon on the top left again, until you reach the main Customizer page. Then select Footer.

Unsurprisingly, the footer builder has a lot of overlap with its header counterpart, including the same exact editing format. So what you saw earlier with arranging the order of items and adding new items applies here too.

Two other things to note:

• Both the header and footer have a Top, Main, and Bottom section and the one you’re on is always highlighted in the layout editing area at the bottom.
• You can edit the number of columns in all three sections and also their size and placement in relation to each other. Whatever orientation you choose will auto-load in the layout editing area.

This is just the tip of the iceberg though. Much like the header, the footer also lets you go very in depth with custom edits, which is why I recommend reading the Docs library section on the footer builder.

When you finish with your edits, hit Publish to save all the changes.

6. Link the menu to the one-page sections

In order to have a clickable navigation menu, you need to connect the various sections in your one-page design with the navigation menu that you created in the previous step.

Here’s how to do it:

1. From the Edit Page screen, find the first section you created a menu item for. Then select the entire section in the same way you learned earlier (in the delete a section part of this tutorial).
2. Click on the Advanced menu item on the righthand side menu.
3. In the HTML ANCHOR field, type the name of the anchor text you used for the section, but without the # before it. So for this example, I put about-us, which corresponds to the /#about-us I put in the menu item earlier.
4. Click the little checkmark ✔️ icon to save the anchor text.

Repeat the process above for all of the sections in your menu and click Save on the top right when you’re finished. As a final step, visit your website as a visitor (either by logging out, using a different web browser, or opening an incognito window) and test the menu to ensure that everything works properly.

If all goes well, your one-page website will now be ready to share with the world.

Is a one-page website right for you?

We all know that most websites have multiple pages, so why buck the trend and build a one-pager?

Well, even though it’s not the norm, a one-page website design actually offers a number of benefits. The two biggest ones are:

• Simplicity, which makes it easier for visitors to navigate your site and find what they need.
• Ease of maintenance, since there’s very little content to keep up with.

Of course, a one-page design isn’t the right choice for every website. Large, complex sites have their place. However, if you’re running a small business site, a portfolio, or a simple storefront, you may want to consider using this format.

So if you’re ready to get started, remember the three simple steps that you need to follow:

1. Determine your site’s focus.
2. Select a quality theme that is either specifically designed for single page websites or a theme that has pre-built starter sites with one-page templates.
3. Design your site following the steps outlined in this tutorial.

Do you have any questions about creating a one-page website with WordPress? Let me know in the comments section below!