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 truly is less in the world of web design. And that’s why, instead of taking a traditional approach, it may be worth your while to create a one-page website on WordPress.

In this article, we’ll go more in-depth about the benefits and applications of this type of site. Then we’ll show you how to create a one-page website on WordPress in just three steps. Let’s begin!

📚 Table of contents:

Why you might want to create a one-page website

Most websites have multiple pages. At a minimum, there’s usually a home page, contact page, about page, and pages for whatever content or services you’re offering.

A one-page website, on the other hand, condenses all of the important information down into a single home page, often by including a number of dedicated sections. One-page website design offers a number of benefits, such as:

• 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.

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 this format.

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 (EXACT STEPS)

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 a single page, you’ll want to pick one or two key things to focus on.

To do this, consider the primary CTA your site will be designed around. What do you want visitors to do – sign up for a membership, purchase a product, attend an event, or hire you for a job? 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.

Step 2: Select a quality one-page theme

If you’ve decided to create a one-page website in WordPress, you can use any theme you’d like. However, a smart strategy is often to choose a one-page theme that’s been built specifically to help you design this type of site. These themes make it simple to include all the necessary information while maintaining an attractive design.

When picking a one-page theme, here’s what you’ll want to look for:

• A page builder with the pre-built elements you’ll need, such as a contact section.
• A method for breaking up your page into multiple sections that can be visually distinguished.
• Navigation that enables visitors to jump to various sections within your page.
• An easy way to add CTA buttons and personalize them.

There are plenty of one-page themes available. Neve, for example, is a multipurpose theme that’s perfect for concise but comprehensive one-page sites. It’s compatible with many popular page builders, includes a live customizer, and helps you quickly set up your one-page site. It also includes pre-built sections for contact info, your bio, a storefront, and much more.

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 actually designing the page. You’ll want it to be appropriate to your audience, reflective of your style, and optimized to fulfill your goals – which means you shouldn’t simply follow a formula.

However, 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 navigation that will quickly jump visitors to the sections they need.
• Make your primary CTAs prominent and persuasive.

Following this advice, you’ll be able to create an awesome one-page site in no time.

Now, let’s talk about tools. So how can you build a great one-page website in the most efficient and fastest way possible?

Build your one-page website with Elementor

Elementor is an easy-to-use, feature-rich page-builder that makes it easy to create any number of pages within a WordPress website. This makes it the perfect tool to craft a great one-page website with.

In the following sections, we’ll show you how to do that. The example we’re using is a site for a fruit and vegetable store. The website will have:

• one page with many sections housing the content
• a menu that visitors can click on to go directly to the relevant sections
• a header that houses the logo and the menu
• a footer

Here’s a preview of how the website will look like at the end:

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

1. Install the free Neve theme.
2. Install the Elementor plugin if you haven’t already.
3. Set up your website’s “canvas” – the header, footer, and menu.
4. Add your content with Elementor.
5. Link the menu to different sections in your design, to create the one page navigation effect.
6. Set your design as your site’s homepage.

1. Install the free Neve theme

• Go to Appearance → Themes → Add New 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 free Elementor plugin

• Go to Plugins → Add New
• Search for “Elementor”
• Install and activate the free Elementor Page Builder plugin.

Now, with a clean WordPress install, active Neve theme, and the Elementor page builder, you’re all set to build your one page website.

3. Set up the header, footer, and menu

You’ll use the Neve theme to set up your one page website’s header, footer and menu.

Header

Head to the WordPress dashboard and click Appearance → Themes → Customize to customize the Neve theme:

First, you’ll select the colors and background for the website

Next, on the Customizer panel, click Header → Change Logo and add your site’s logo. Adjust the width of the logo, add the Site title, site icon, and a tagline. Choose whether to display or hide the site name and tagline in the header.

Under the Layout tab, choose a layout for the header as well as the color, and set the padding and margins. Alternatively, pick one of the header presets.

Menu

Next, you need to create the navigation menu that will display in your header. To do this click on Menus → Create New Menu. Give it a name and set its Menu Location equal to Primary Menu.

Click Next and Add items. Here, add the names of the sections you’ll be creating. For example, Main, About Us, Products, and Contact. To do this, click on the Custom Links button.

In the URL field, enter a hashtag followed by the name of that section. Later on when you set up Elementor, you’ll configure it so that these links go to specific sections in your design. For example:

• #about-us
• #products
• #contact

Footer

Move on to the Footer and add text and background color. You can add any content you like here:

Hit Publish to save all the changes

At this stage, your site has a header, footer and menu. It should look something like below. Now, you’re ready to use Elementor to add the content that goes between your header and footer:

4. Create a new page and add content with Elementor

To get started, go to Pages → Add New to create a new page. Give the page a name. If the theme provides sidebars, that too will show up. But you can cut out the sidebars by adjusting the Page Attributes to full width.

On the new page that opens, click Edit with Elementor. It opens up a panel on the left. On the right side there’s the editing area where you’ll see the website taking shape.

A quick introduction to the Elementor interface

Before we move on, let’s take a look at the Elementor panel. It has many creative elements or widgets like headings, paragraphs, images or videos. You can add these to your content by dragging them over.

In the top left of the panel is the hamburger menu which opens up many options. Here, you’ll be able to adjust colors, fonts and theme style at a global level. Needless to say, this saves a lot of time while adding new pages.

From this tab, you can also exit to the WordPress dashboard at any time.

At the bottom of the panel, there are options to adjust page settings, name the page, view edit history, and switch between responsive modes. Also, there’s a navigator which shows an organized view of the page.

By clicking the eye icon, you can Preview the page, and when ready to go live, hit the Publish button.

Now, it’s time to start adding some content.

Two ways to create a one page website with Elementor

At this stage, you can choose to go about building the one page website with Elementor in two ways:

1. Insert one of Elementor’s pre-built templates and then customize it as desired. For this purpose, click on the folder icon in the live preview of your design and it will open up a number of templates, some free and many pro. In the Pages tab, you’ll find completely finished designs for entire pages. In the Blocks tab, you’ll find pre-built templates for specific sections of a larger page (this is the most useful for a one page website).

You can insert any template by clicking on it. Then, you’ll be able to fully customize every element.

2. Alternatively, you can start from scratch by clicking on the plus button to add a section and building your design from a blank canvas.

For the purposes of this tutorial, we’ll adopt a combination of both methods – we’ll build the first section of our website from scratch and then choose from template blocks to fill in the remaining sections.

How to create sections of the one page website with Elementor

Elementor uses sections, columns, and widgets to create the layout of any page. Sections are the largest building blocks and you can add columns inside them. Inside these sections or columns, you’ll be able to add the widgets you want.

Click on the ‘+’ sign to add a section and choose the column structure.

As you hover over a section, a blue border appears with a handle at the top. This handle lets you add a new blank section above the existing section, or edit/delete a section. Clicking the dots in the middle allows access to section controls – layout, style and advanced. Further, you can move the sections up or down by dragging on the dots, and right click to bring up more options like duplicate or delete.

Similarly, you can click the column icon handle at the top corner to choose column layouts within the section. You can also adjust the width of the columns and the space between them. Right click on the boxes to add more columns, duplicate existing ones, delete them, and more.

From the Elementor panel, you can drag any element (called a widget) into the column. Once you add an element to a column or section, a Pencil icon appears in the top right corner. Click on this icon to bring up content, styling, and advanced editing options in the Elementor panel.

How to create the first section

We’ll use the first section to let visitors know the nature of the business and a little something about it. For this purpose, you can use the full width of the section to carry a background image. While editing the section layout, you can adjust the content width and stretch the section to the full width of the page, simply by toggling a button.

To add the background image, choose the edit section option by clicking the dots in the handle. Visit the Style tab that appears in the panel and upload the image from the Media Library. Adjust the size of the image as well as the overlay.

We’ll add a single column within the section and center it within the section. Inside the column, we’ll use three widgets – Heading which tells visitors that you’re selling fresh fruits and vegetables, a text editor that draws attention to home delivery options, and a button from where visitors can place an order.

Adding a Heading widget:

Dragging a text widget:

Adding the Button widget:

Now you can customize each widget by using the editing options.

If you wish, you can also add the widgets in three separate columns by adding columns by clicking the column icon. What’s important to note here is that each widget can be adjusted minutely for layout, style and more.

Create the remaining sections

Now that the first section is done, you can move to the remaining three – About Us, Products and Contact.

As mentioned before, we’ll use readymade template blocks from the Elementor library to build these three sections. Elementor has many free template blocks under each of these categories and the library is searchable.

For the About Us section, we’ll choose a simple template block with a heading, text editor and video widget. You can replace all of this with your own content.

The template block with the substituted content:

In just the same way, you can use template blocks for the Products and Contact section. The template used for the Contact section comes with social media icons. Click the Style tab to control the icon color, size, padding, and more.

Since Elementor allows a great deal of customization, you can make these sections look different from the imported templates.

When you’re done making the desired changes, click the green Publish button and the changes will be live on the site.

5. 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 Elementor design with the navigation menu that you created in step #3. To do this, open a section’s ID and go to the Advanced tab. In the CSS ID field of the Elementor Panel in the corresponding section, fill in the correct section name without the hashtag.

For example, if your menu links to #about-us, you would add the CSS ID as about-us. Then, repeat the process for all the sections that you want to link to:

6. Set your design as the homepage

As a last step, you can set up the page you just created as the homepage of the one page website created with Elementor. To do this, head to Settings → Reading. Click Select a static page under Your homepage displays, and select the design that you’ve created. Lastly, click Save Changes.

If you’re confused by any step, we have a full guide on setting up a static WordPress homepage.

Finally, your one-page website is now ready. Here’s an example of what it might look like:

Conclusion

Here are three simple steps that will enable you to create a one-page website today:

1. Determine your site’s focus.
2. Select a quality one-page theme, such as Neve.
3. Design your site using Elementor if needed.

Do you have any questions about how to create a one-page website with WordPress on your own? Let us know in the comments section below!

Written by John Hughes and Priya.