Some of the best websites are the simplest. If you have a business logo, brochure or flyer, you’re already halfway towards creating a one page website of your own. Using WordPress, you can upload your materials and design an attractive, mobile-friendly site in less than an hour.
In this guide, we’re going to show you exactly how to do. We’ll be walking you through the process of creating a one page website step-by-step, including:
- Choose a Hosting Package and Domain
- Install WordPress
- Install a Theme
- Add Plugin and Create Homepage
- Design Your Website
We’ll be using Bluehost web hosting service. In addition to a WordPress website, Bluehost gives you a custom domain and 5 business email accounts for just $3.45/month
To illustrate each step, I created my own sample one page website – a fictional retail business called Moony Guitars. Here’s how the site looks (click to see the full site). You’ll be able to create something like this after reading our guide.
Step 1: Choose a Hosting Package and Domain
The first step is to head over to Bluehost.com and choose a hosting package.
The main differences between the 3 editions are the amount of storage you get for your website and the number of email addresses you can create. A basic account should be sufficient if you don’t need more than 5 email addresses.
Next, you’ll select your domain. This is something you won’t be able to change later, so be sure to choose carefully. You might want to consul our guide Choosing a Domain Name.
Once you find a name that’s available, you just need to finalize your order. To get the best monthly price, Bluehost will require you to pay for 36 months upfront. While this may sound like an hefty commitment, you can actually cancel your plan at any time and receive a prorated refund.
You’ll also notice a few add-on features available. I recommend selecting Domain Privacy Protection, since this will prevent any additional spam mail from showing up due to your domain registration. By law, your contact information has to be publicly listed when you register a domain. By selecting Domain Privacy Protection, however, Bluehost will post their own address rather than your own.
If you’re not concerned about the occasional spam letter, leave this unchecked and you can save about $12 per year.
Once you’re finished with your order, you’ll set your password and then enter your Bluehost account.
Step 2: Install WordPress
When you login to your Bluehost account, you’ll reach your main dashboard. Here is where you can manage your domain(s), create a website, create email accounts, and more.
If you want to create your business email accounts right away, we explain how to do that in this guide. Otherwise, we’ll jump right into building your one page website.
To start, scroll down to the “website” section of your dashboard. Here you’ll notice several options for creating your website. That’s because Bluehost does not let you create a website directly on their platform. Rather, you can integrate a number of different website builders.
The option we’re going to use in this guide is WordPress, a free and hugely popular content management system. WordPress is actually the most popular website platform in the world, with nearly 25% of sites using it.
To get started, simply click “Install WordPress.” You won’t be installing anything on your computer. Rather, you’ll be adding WordPress to your new domain, which just takes a few quick steps.
First, you need to select which domain you’re installing WordPress onto. Although you only have 1 domain, you have to decide whether to use it with or without the www.
This is purely for visual purposes. Visitors will reach your website regardless of how they type it into their browser. So for example, if I choose www.moonyguitars.com, visitors will still reach my website by typing moonyguitars.com.
Next, you’ll enter the name, username, and password for your new WordPress account. I recommend adding a new password (rather than using the randomly-generated one) since you’ll be using this login every time you want to make changes to your website.
Once complete, be sure to check the boxes below, and then click “Install.”
Installation can take a few minutes. Once complete, you’ll see a message at the top which reads “View Credentials Here.” Click this button, and you’ll find the URL and login information for your new website. Click the URL and log into WordPress.
Step 3: Install a One Page Website Theme
Logging into WordPress brings you to your website’s backend. You can think of this as the main control panel for your site. Here is where you’ll set the appearance, create pages, and make any routine updates to your website.
The first thing we’ll do is install a WordPress theme. Themes are like website templates. They’re pre-formatted designs you can customize for your own website. To install one, find “Appearance” on the left-hand toolbar, and then click “Upload.”
You can browse through many different free WordPress themes. For this guide, we’ll be using a theme called OnePress. It’s a highly rated one page website theme, meaning it can be setup to display all of your business information on a single page. It’s also responsive, so it will automatically adjust to fit smartphones and tablets.
Also, OnePress can support multiple pages. So if you decide later you want to add more pages to your website, you can continue using the OnePress theme. (And it will still look great!)
To install OnePress, type “OnePress” in the search bar. Click “Install” and then “Activate.”
If you want to use a different theme, that’s fine, but keep in mind that some of the steps will differ from this guide. We do have separate guides, however, on building a real estate website, restaurant website (or general small business website), as well as a video on creating a salon website – all using Bluehost and WordPress.
Step 4: Install Plugin and Create Page
With a theme installed, you can begin filling in the details on your website. This includes uploading your logo, writing a description, adding photos, videos, etc.
Before we can get to this step, however, you’ll need to make two quick changes. Assuming you’ve used the OnePress theme, you’ll notice a message appear at the top of the screen: “This theme recommends the following plugin: Contact Form 7.”
OnePress gives you the option to add a contact form at the bottom of your website. A contact form encourages visitors to send messages, since they don’t need to leave your website to send an email. Plus, you customize the form to ask any specific questions you need.
For example, for my guitar business, I’ll ask the type of gear they’re inquiring about. This allows me to easily categorize messages and/or forward messages to the right employee/specialist.
If you want to add a contact form, click “Begin installing plugin” at the top of your screen. Then, on the next screen, click “Install.”
Now head over to “Plugins” on the left-hand toolbar. Click this, and find “Contact Form 7” listed among the options. Click “Activate.”
Create a Page
If you chose the OnePress theme, you’ll also need to create a homepage before you can begin customizing your website.
Click on the “Pages” tab in the left-hand toolbar. Delete any sample pages, then click “Add New” at the top.
Name your new page “Homepage.” Then find the box in the lower right corner that says “Page Attributes.”
Under “Template,” change the option from “Default Template” to “Frontpage.”
Don’t worry about filling in any more information. We’re going to do all of that in the next step. For now, just click “Update” to save your page.
Step 5: Design Your Website
Now find the “Appearance” menu on the left toolbar. Hover over Appearance, and then click “Customize.”
This will bring you to the menu where you’ll design your website. First things first, click “Static Front Page” at the bottom-left.
Now select the following options to match what I have on my screen:
- Choose “A static page” under Front page displays.
- Select “Homepage” under Front page.
This is telling WordPress to recognize the page you created in the last step as the homepage of your website. Now click the arrow at the top-left to head back to the previous menu.
You’ll now see many new options appear on the customization menu. These are all the different things you can edit or sections you can add to your website. We’re going to go through each option one-by-one:
Site Title, Tagline, & Logo
For the first step, start by uploading your website logo. Although WordPress suggests a smaller image, you can really use any size you like. For my website, I’m using a larger banner-type image.
Check “Hide site title” and “Hide site tagline” if you want to decrease the padding between your logo and website body. If your logo also contains your business name and tagline, you can probably skip these.
Here you can make a number of formatting adjustments to your website. Here’s everything I selected for my website:
- Global. Check “Disable Sticky Header?” This prevents my header from scrolling down as visitors scroll down my website.
- Site Colors. Changed “Primary Color” to a yellow/gold. This changes the color of buttons on my website.
- Header Options. Changed Header “Background Color” to a dark blue to match my logo.
- Social Profiles. Added links to my Facebook, Twitter, Tumblr, Instagram, and YouTube pages. These appear at the bottom of my website.
- Newsletter. If you use MailChimp, you can also add a newsletter signup form next to your social media logos.
On a typical website, you’ll have a top navigation menu that links to other website pages (i.e. About, Contact, Store, etc.) Since you’re designing a one page website, you could go with or without a menu.
If you do add one, clicking a menu item like “Contact” will scroll visitors down to the part of the page that lists contact information.
To set this up, you’ll first need to create your website sections. We show you how to do this a little later, so you’ll probably want to come back to this. What you’ll do is add links using a # symbol. So, for example, my About section is http://www.moonyguitars.com/#about and my Contact section is http://www.moonyguitars.com/#contact.
The hero is the first section below your website title/logo. It’s typically used to highlight the main focus of your business. Add a catchy title (which could be the tagline of your business) and then a longer description below it.
Since the hero takes up a lot of space, it’s also a good place for a large image of your store or product. Under “Hero Background Media” you can add an image. Then, under “Background Overlay Color” you can make that image darker or lighter so it doesn’t interfere with your text.
As you can see below, my background image was originally much brighter. Adding a dark blue overlay at 75% opacity made it much easier to read the text.
Your Hero can also contain up to 2 buttons. These can link out to other websites (i.e. your Facebook, Twitter, Yelp, or GrubHub page.) Or, you can link to other sections on your website. For example, to link to my Contact section, I would enter http://www.moonyguitars.com/#contact. Then, when clicked, it would automatically scroll down to my contact information.
Section: Features / About / Services / Etc.
The rest of the menu items are all optional sections you can add to your website. Although each differ slightly, you can usually enter a title, subtitle, body text, and/or images.
Here are the sections I added in particular:
Section: Video Lightbox
Use this to embed a YouTube/Vimeo video on your website. It appears as a simple black box (although you have the option to add a background photo) with a play button and title.
Here you can add photos of your team members. To do this, click “Section Content” and then “Item.”
From there, upload a photo. If you want their name to also show up on your website, you can add this under “Title.” You can also add their position/title under “Description.”
In addition to displaying usual contact information, you can use this section to embed a contact form and list your store hours.
To add a contact form, you’ll need to head out of the customize menu. Click “Save & Publish,” and exit out.
Find “Contact” on the left toolbar, then click “Add New.”
Here you can create your own contact form. You can add fields for any questions you’d like visitors to answer. For example, for my guitar business, I’ll be asking visitors to select which topic they’re contacting me about: “Electric Guitars,” “Acoustic Guitars,” “Pedals/FX,” “Bass,” or “Percussion.”
From the same menu, under the “Mail” tab, you can change which email address the contact form is submitted to. By default, your WordPress login email will be selected. Remember, however, you can create free business email addresses for each employee using Bluehost.
If you want to send the form to multiple addresses, Contact Form 7 explains how to do this here. You can even make it conditional – i.e. if visitor selects “Electric Guitars” it gets send to employee A, if they select “Acoustic Guitars” it gets sent to employee B, etc.
After you click “Save,” note the code that appears in blue at the top. Copy this code.
Now head back to the Customization menu. Click “Section: Contact” and then “Section Content.” Now paste the code in the box at the top. You should see your form appearing on screen to the right.
Publish Your Website
Once you’re finished designing your website in the Customization menu, click “Save & Publish,” and then click the X to head back to the main menu.
The final step is to launch your one page website, so that it’s publicly viewable. To do this, simply click the link at the top that reads: “Your site is currently displaying a “Coming Soon” page. Once you are ready to launch your site click here.”
With that, you should be able to view your website! Open a private browsing tab (or logout of WordPress) to see how your website looks to visitors:
The Bottom Line
Your website doesn’t need to be complicated to get the job done. In fact, many businesses prefer a simple one page website design to communicate more clearly with their visitors. Because there aren’t multiple pages to toggle through, visitors are more likely to find and engage with your call to action.
On that note, make sure you have a strong call to action present – be it a contact form, Mailchimp email newsletter, link to an online store, Yelp profile, etc. Even if you only needed a website to list your address and contact information, consider a more specific call to action to get even more out of your website. For example, you might want to offer exclusive coupons to website visitors.
To start driving traffic to your website, be sure to check out our online marketing section. In particular, you can take advantage of a free $75 credit for Google Adwords and a $50 free coupon for Bing Ads.
Last but not, if you haven’t already, don’t forget to set up your free business email accounts through Bluehost.