A lot of successful websites are large and complex, filled with pages and content. However, sometimes in the world of web design, the less, the better. An example of this is one-page websites made on WordPress, which have become extremely popular. They are easy to make, maintain, and publish. This article will thoroughly explain the many applications and benefits of such a website design choice. We will also show you how to make a one-page WordPress site in three easy and straightforward steps.
Keep reading!
What is a one-page website?
A one-page or single-page website is exactly what it sounds like – a website that only contains a single page. It doesn’t include the traditional extra pages such as the “About Us” page, the “Contact Us” page and more.
In other words, the user’s sole option is to scroll through the whole page to receive all the information offered.
This is great because it allows the people running the website to provide information in a seamless, direct manner.
Benefits and drawbacks of a one-page website
As mentioned, most websites on the world wide web come with numerous pages. Usually, you would find a home page, about page, contact page, and pages for whatever services or products you’re providing.
A single-page website, however, condenses all of the important pieces of information down to one “home” page. This page often includes a number of sections, each dedicated to a specific item or service.
The benefits of a one-page website include:
- Simplicity, an easy-to-surf website for any visitors basically
- Ease of maintenance
- Compatibility with all kinds of screens and devices (such as mobile devices)
- Finally, single-page websites allow you to control how your users experience your web content
So, if you’re just starting out or you’re a freelancer who’s looking to build a simple website that works as a digital business card, then you might want to consider this avenue. That said, you should consider the following drawbacks:
- One-page websites limit you when it comes to SEO. After all, you can’t target several keywords within the same page without it looking (and reading) like a spam-generated mess. Our agency’s website was once a single-page web property, but we decided to change the model because we didn’t want to miss out on the SEO benefits of multi-page websites.
- The site can be a bit confusing if the page is too long. After all, if your website lacks navigational options, your users may find it hard to locate themselves within the page, especially if the site doesn’t feature clear sections.
- Limited scalability. After all, once a single-page website is complete, you can find it super hard to add new content without ruining the UX.
So, if you’re planning to scale your website or use SEO to drive traffic, you might want to build a regular, multi-page WordPress site instead.
How to create a one-page WordPress site: What to include
When you have a website that revolves around a single page, it’s important to be very careful with what you include and what you don’t. It’s key that you provide your audience will all the information that they might need and without overwhelming them in the process.
Here are some of the essential elements that you need to focus on when trying to make a one-page WordPress website:
- Branding elements (Logo, tagline, motto, etc)
- An about section that goes into detail about who your company or organisation is
- A clear list of your products and/or services
- A Call to Action (CTA), such as a contact, sign-up, or purchase button
- Links to social media profiles
- A contact section
It’s also very important that you pay close attention to the order of these sections. You will want to place the most important bits of information as well as the CTAs early on. Leave the contact details and social media links to the bottom of the page. To put it simply, think of what your audience will see first and arrange accordingly.
Lastly, just because you decided to run a one-page design doesn’t necessarily mean that you can’t have a blog in there. If you’re keen on including one, WordPress allows you to set a link to your blog on the website. Our team of content writers can help here with incredible SEO-optimised blog content.
How to Make a One-Page WordPress Site
It’s now time to discuss how exactly you can create your one-page website. First off, make sure to check out some existing examples. It won’t be difficult to find these since the world wide web is filled with one-page websites. Once you do that, go to the first step.
Step 1: Determine the focus of your site
As we have mentioned above, going with the one-page route means that you will have to be very picky about the overall design of your website. For instance, you need to have a clear idea about your main goals with the website.
Since you’re very much limited to a single page, you will want to choose one or two key things to focus on. For example, consider which CTA your site will revolve around, whether it is a purchase, a sign-up, or more. In other words, most of the elements on your single page should, in one way or another, encourage visitors to perform that action.
You would have to provide them with all the information that they might need, such as the potential benefits of taking action, what comes after it, and more.
Step 2: Pick a quality one-page theme
If you have decided to create a one-page WordPress site, then you could choose from many different themes. However, it is often the safer route if you just pick a one-page theme that’s already been built around your needs.
Such themes make the whole process simple since all you really need to do is add information, and you’re good to go.
When picking a theme, here are some things that you need to look for:
- A clear-cut method for breaking up your page into the needed sections
- The ability for users to quickly jump from one section to another within a single page
- CTA buttons that are easy to add and edit
- The necessary pre-built elements: contact section, CTA, about, more
There are numerous one-page themes out there. Here are some of our favourites:
Hello
Hello is a free theme created by Elementor that focuses on minimalism. It works seamlessly with Elementor’s theme builder, allowing you to add the necessary elements to the page on the fly.
The fact that these elements work hand in hand with each other, without any potential conflicts, helps reduce load time.
Astra
Astra is one of the most popular theme providers for WordPress. They have over one million users and offer a huge number of different themes, many of which are single-page ones.
OceanWP
OceanWP is yet another good WordPress theme provider that offers numerous templates.
Envato
Envato is also popular in the WordPress scene. They have over 53 million creative assets in their catalogue, including many one-page site themes.
Neve
Neve is a great theme for one-page websites. It is compatible with some of the more popular page builders, and it comes with a live customiser. It also boasts a number of pre-built sections that you might need, such as bio, storefront, contact info, and more.
Step 3: Design your website
Once you have a clear idea of what you want to be included in your website, have chosen a good theme, you can then start designing. You would want to make sure that it reflects your brand and style, is appropriate to read and fulfils all of your goals.
Here are some additional things that you need to keep in mind when putting the website together:
- Keep it simple. Don’t include anything that doesn’t belong there
- Make sure that all the different sections are distinguishable to the naked eye. This can be achieved through the use of headers, different backgrounds, and so on
- Include navigation to allow users to jump from one section to another
- Make sure that your Calls to Action stand out
Now that we are done with the advice, it’s time to talk about tools. Exactly how to make a one-page WordPress site in the fastest and most efficient way possible?
How to create a one-page WordPress site using Elementor and Hello theme
First, what is Elementor?
Simply put, Elementor is a drag-and-drop page builder that allows you to design beautiful pages using a visual editor.
Why you should go with Elementor
The great thing about Elementor is that it’s super easy to use, even if you’re not tech-savvy. The visual editor features over 90 widgets, including buttons, star ratings, and progress bars, that you can easily drag and drop to create pages and content.
Why we chose the Hello theme for this tutorial
The Hello theme by Elementor is free to use, fast to load, and responsive. On top of that, it works flawlessly with the Elementor plugin, which is why we chose to go with it for this guide.
How to install the Hello theme
- Go to the WordPress dashboard, select Themes, then click on Add New
- In the dialogue box, use the search box and search for “Hello”
- Instal it
- Once installed, activate it
Creating your one-page website
We’re going to create our one-page website in the simplest and most efficient way possible. Click on “New” on the WordPress dashboard and select the “Page” option.
Once it opens, make sure to select the Edit in Elementor option.
This will open the Elementor Editor, click on “Library”, and in the search box, search for the term ‘Yacht’. Click on the template and insert it.
We will be using this theme for our page.
As you will notice, the page now includes these sections:
- Top (Home)
- About Us
- Features
- Our CEO
- Destinations
- Photo Gallery
- Subscribe
- Contact Us
These are basically all the sections that you would need. However, sometimes, when you import the template, the sections might have different names.
This can lead to problems in the future but has a quick remedy which is the addition of a CSS ID to each section.
In order to do this, you simply right-click the Section Handle of each section and select Edit Section. Click the Advanced tab in the Editor panel, and in the CSS ID field, input the proper section name.
We will be naming our section as follows. You, of course, can choose any names you wish:
- Top
- Features
- CEO
- About
- Photos
- Destinations
- Subscribe
- Contact
Now that we have every section clearly named and distinguished from the rest, it is now time to build the page’s menu.
Use the Finder tool, which you can access by clicking Cmnd/Ctrl + E to get to the Menus options on WordPress. For the sake of this experiment, we will call our menu “One Page Menu” and then click Create Menu.
Now we can begin to add menu items. To do so, click on the Custom Links button, and in the URL field, enter your website’s URL followed by a hash sign (#) and the right CSS ID to generate the slug for each individual section.
Make sure to enter the menu title in the Link Text field as you would like it to appear.
We are going to start with the features sections because we want to make the Company Logo a “Home” button later on. So, the menu items we designed are as follows:
URL
- #features
- #ceo
- #about
- #photos
- #destinations
- #subscribe
- #contact
Link Text
- Features
- CEO
- About
- Photos
- Destinations
- Subscribe
- Contact
Once we have finished adding our menu items, we will assign the whole menu to its appropriate location in the menu settings by checking the “Primary” checkbox and clicking on Save.
Next up, we will create a header and a footer for our one-page website using the Theme Builder, found under the Templates section in the dashboard. You can create both using this way. However, for the sake of keeping this tutorial short and straightforward, we will mainly focus on the header.
Click Add New in the Theme Builder, a dialogue box will appear. Select the header and type in a name. Make sure to select a header that fits your design in the Template gallery. We selected Header 1 and clicked Insert.
How to make a one-page WordPress site: Adding a logo
Using Elementor, we will begin to edit our header by first removing the logo and replacing it with our icon.
In the editor panel, we will change the icon to an Anchor from the library that appears when we click on it. We could also add a custom logo/icon of ours in SVG format using both the Free and Pro versions of Elementor.
Going back to the Elementor editor panel, we will see the icon’s view to be Framed and type in the name of the company in the title box.
In order to turn the logo into a home button, enter the link to the top section of the Link Field. Be sure to use the address of your website, followed by a hash key and the name of the CSS ID of the Logo.
In our case, it would read as such: http://yachtora.com/#top
The widget is incredibly flexible. In other words, using the different settings in the Editor panel, you can get your header looking exactly how you want it to look.
You can adjust anything, including size, spacing, colour, style, and more.
Now that we are done with the Logo and header, it’s time to move on to other elements, such as the navigation menu.
On the Elementor panel, we will pick the animation “Float” for the Content tab so that it stays consistent with our Logo.
We also changed the colour of the text and added a solid border with a 1-pixel width in the name of consistency.
We also made the background of the whole header transparent in order for the seascape picture in the back to stay vivid and clear.
There are a thousand more things that you can tweak using the editor to your own personal liking!
Once you are done editing your header and footer, you can click Publish at the bottom of the editor. You will get a dialogue box asking you whether you want it to appear throughout the entire sight or not. Check it and click Save.
As we have mentioned above, you can set up your web page’s footer the same way you do for the header. You use the Theme Builder, pick a template, customise it, then publish.
Setting up the main page as a homepage of your site
Once we are done designing and entering all the information on our one-page website, we head back to the WordPress dashboard and go to the WordPress Settings section and select Reading.
You will get numerous options under Your Homepage displays. Make sure to select a static page, then select your main page.
Click on save changes, and you’re officially done.
Need help developing your one-page WordPress website?
If you’re too busy to take care of website design yourself, our expert designers and developers can help. Get in touch today!
0 Comments