How to Make a One-Page Website with Elementor Pro in 10 Simple Steps

A one-page website – as the name suggests – is a website with only one page. All the items, whether that be the text, images, videos, or such, are on the same page.

One-page websites have been a popular design trend for years, and there are many compelling reasons you should build one.

Benefits of One-Page Websites

Here are some benefits of one-page websites:

• They are easier to maintain since you only have one page to update.
• They give a better experience on mobile since you don’t have to jump from one page to another.
• The page structure can help with conversions: all the content is on one page, and users can just focus on the content.
• The reading experience is simple. Just scroll through the page and consume the content the more you scroll.
• One-page websites can lead to higher user engagement. Combined with a strong Call to Action (CTA), you can convert the user to take a specific action on the page. 

Now that you know what one-page websites are and what makes them exciting, let’s roll up our sleeves and build one.

How to Build a One-Page Website with Elementor Pro

In a typical website project, you gather a list of business requirements and then develop your site according to those specifications. But we’ll skip this step here.

Instead, we’ll focus on building a simple site with Elementor. Once you know the steps, you can implement them with your business requirements.

1. Make Sure Your Toolbox Is Ready

Before we start the project, ensure you meet the minimum project requirements:

• Do you have a web host? Take a look at different options here.
• Purchase the Pro version of Elementor. Although you can follow this tutorial with the free version, we recommend the Pro version. It gives you all the powerful tools (like the theme builder) in one package.
• Install both versions of Elementor. The Pro version builds on top of the free version, so you must also install the free version. You can find the free version under Plugins > Add new plugin and search for Elementor:

You’ll have to purchase the paid version separately on the Elementor website and upload the plugin to WordPress.

2. Install a Theme

In our tutorial, we use the blank Hello Elementor theme from Elementor. While you can create your one-page website with any theme, the Hello Elementor theme makes our project faster and more straightforward.

Go to Appearance > Themes > Add New Theme in the WordPress admin panel. Then, enter Hello Elementor in the search form on the right. You should see the following search results:

Hover your mouse over the Hello Elementor theme and click the Install button. After successful installation, the text on the Install button changes to Active. Click the button to activate the theme.

3. Pick Your Template

In step #2, you installed a theme, but it didn’t give your site that much look. After all, it was just a blank template you can build upon.

But fear not; you don’t have to design the whole one-page layout from scratch (unless you want to). We can use the ready-made templates created by the Elementor team to speed up the design process.

So, in the WordPress admin panel, go to Pages > Add New Page. Give your page a meaningful name and click the Save Draft button on the right. Then, click the blue Edit with Elementor button to open the page in the Elementor editor. 

Next, click the Add Template button to pick your preferred template:

You should now see the template library with all the templates you can use in your one-page website project.

I chose the Business Consulting Company template for our project:

Just hover over the thumbnail image to activate the template and click the Insert button. Next, click Apply when Elementor asks, “Apply the settings of this Page too?”

One final thing to do is to hide the page title. Just click the settings (the gear icon) at the bottom left:

Then, under General Settings, change the title and set the Hide Title option to Yes.

You have now picked the professional-looking template as the basis for your one-page website.

4. Plan and Configure Your Page Sections

Before we start tweaking the outlook of our site, we need to do two things:

1. Plan proper page sections. These sections divide the page into different areas, and you can fill each with specific content. 
2. Set up each section with an ID so the menu system works flawlessly.

You need to do these steps to build a menu for your one-page website in step #5 of this tutorial.

First, you decide the sections you want to show on your one-pager. In our case, we have the following parts:

• Home
• Mission
• Values
• Our Experts
• Our Partners
• Contact Us

Second, it’s time to identify the different sections of the page. In technical terms, each section should have a unique CSS ID so the visitor lands on the correct part of the page when they click on a menu item at the top.

Move your mouse to the top of any section in the page editor. Once you do that, you should see a rectangle surrounding the area, accompanied by three icons on top of the section:

Click on the Edit Section icon in the middle (the dots in two rows), and the Edit Section menu becomes visible on the left. Then, choose the Advanced tab and enter the section ID without the # character into the CSS ID field:

In our case, our page sections and their corresponding IDs are as follows:

Section Name	CSS ID
Home	home
Mission	mission
Values	values
Experts	experts
Partners	partners
Contact	contact

Once you have prepared the sections, it’s time to build the menu.

5. Design a (Sticky) Menu

Navigation is an essential part of a one-page website. The visitor should be able to jump smoothly into different parts of the page from the menu.

You start the menu building inside the regular WordPress menu tool. Exit Elementor for a while by clicking on the hamburger menu on the top left and choosing Exit.

In the WordPress admin panel, go to Appearance > Menus. Then, build the menu to look like this:

When you add items to your menu, make sure you link types into Custom Links. Also, every custom link needs the CSS ID we defined in step #4.

For instance, after configuring the Home menu item, it should look like this:

In the Menu Settings at the bottom, untick the Header checkbox and click the Save Menu button.

Your menu structure is now in place, and we’ll add it to the page later in this tutorial.

Make it sticky!

To enhance the navigation user experience, you can make it sticky with Elementor. In this case, the header area stays put while you scroll down the page.

1.Hover over the menu and click the Edit Section icon:

2. Go to the Edit Section pane on the left, then choose the Advanced tab.

3. Under Motion Effects, select the location and devices for your sticky menu.

Test the sticky menu to see how well it works across different devices. 

6. Build a Header

To make the top of the page stand out, we’ll build a header area. While you have many ways to create a header with Elementor, we’ll pick an existing template design and work on that.

Exit the Elementor editor, and go to Templates > Theme Builder in WordPress admin.

At the top of the page, choose the header and click the Plus icon. 

In the Library view, you can see all the available templates. In my case, I chose this one:

Just hover your mouse over the preferred template and click the Insert button. After this, the header opens in edit mode.

Here, I have modified just two parts of the template.

First, I changed my fictitious company’s logo by hovering over the graphic and clicking the pen icon:

On the left, you can now see the Edit Image panel. There, hover over the image and click Choose Image: 

Finally, pick your logo from the WordPress media library or upload it from your computer.

Another tweak to the header was to remove the phone number. So, hover the mouse over the number, right-click with your mouse, and choose Delete:

Once you have tweaked the design, click the Publish button at the bottom-left. You will then define where to display the new header on the next screen.

In the Publish Settings screen, click the Add Condition button:

On the next screen, make sure the Entire Site is selected, then click the Save & Close button:

Your header is now ready. You’ll also notice that the menu you built inside the WordPress menu builder (in step #5) is now included in the header.

7. Build a Footer

We’ll also build a footer for our one-pager to finish your design. The building process works the same way as with the header.

In WordPress admin, go to Templates > Theme Builder. At the top of the opening page, click Add New. In the next view, choose the template type as Footer and click the Plus icon.

In the Library view, pick the footer design you like, hover over the preview image, and click Insert:

Make the necessary adjustments to the template, and once you are ready, click the pink Publish button at the bottom left.

You must define where to display the new header on the next screen. Just click the Add Condition button and ensure the Entire Site is selected.

Finally, click the Save & Close button to save your changes.

8. Add New Sections

When you build a one-page website (especially using a ready-made template), you’ll often have to add new sections to your pages. 

For instance, our website doesn’t have a contact form yet, so the visitor cannot contact our company. So, you’ll have to add a new section to your one-page website for the contact form.

I will show you how to create a new section and add the form, but I’ll leave the form configuration to you as an exercise. 

So, scroll to the bottom of the page and delete the Contact Us button. Simply hover over the button with your mouse, right-click, and choose Delete.

Next, just before the footer, click on the Add New Section icon:

Then, pick the best section for the situation:

Click the Plus icon before the new section so the widget list appears on the left.

Then drag the Form widget (under the Pro section) inside the new section:

When you are adding a completely new section to your one-pager, follow the instructions in steps 4 and 5 to get the section in the header navigation bar.

9. Finalize the Settings

There are still some steps left to do before you can announce the new site to the world.

First, once you have finished building the page, click the Publish button at the bottom-left corner of the Elementor editor. This action ensures your website moves from a draft state to published.

Then, go to the WordPress admin panel and Settings > Reading. In the reading view, set the newly published page as the front page of your website:

Finally, click the Save Changes button to confirm the change.

When you visit your website, it loads as a one-page website:

10. Test, Test, Test!

This step may be daunting, but you still have to do it. With proper testing, you can ensure your website works flawlessly with every device.

To check your site with various devices, turn on the responsive mode inside the Elementor editor (at the bottom):

The desktop mode is selected by default. But you can easily switch between smartphone and tablet modes by clicking any of the icons. 

Lastly, check the navigation to see if it works as expected and that all the content and elements are in place.

You are now a proud owner of a one-page website. Hooray!

One Page Website with Elementor: The FAQ

• Is the one-page website the same as a landing page?

While there are some similarities between them, they are still different.

For example, a landing page focuses on specific content, like selling a product or a service. In contrast, a one-page website is your entire site with all the content on one page.

• How do I make a one-page website for free?

Install the free version of Elementor. Then install the Elementor – Header, Footer & Blocks Template. This plugin is also free.

Please remember that even if the page-building tools are free, you still have to pay for web hosting and domain registration.

• Which themes are compatible with Elementor?

As the Elementor team says, their page builder is compatible with most themes. Before using a theme, check the Elementor compatibility from the theme developer first.

• Should I build a one-page website?

There are pros and cons, no matter which page layout you choose (one-page or multi-page). In your case, you must consider your use-case needs carefully before making a final decision.

For instance, one-page websites are easier to use from a visitor’s perspective since everything is on one page. Then again, if you want to build a blog, the traditional website works much better in that scenario.

The Conclusion

I showed you how to build a one-page website with Elementor Pro in this tutorial. 

Although there were many steps, the overall process was relatively simple. Especially if you take advantage of the ready-made templates, you will get your one-pager up and running quickly.

Now over to you: 

Have you built a one-page website with Elementor? Do you have any tips or tricks you’d like to share? 

If so, leave a comment below.