The homepage of your website is the first thing your visitors will see. It’s how they’ll form their first impression, and it’ll influence whether or not they decide to stay on your site.
With a low-quality, overwhelming, or lackluster homepage, you’re doing your website a disservice.
Even if you have an incredible blog, a useful app, or a service that will immensely help your visitor’s lives or business, there’s a chance they might not ever see it, if they never get past your homepage.
Your homepage needs to do a lot. It needs to:
- Let your visitors know they’re in the right place
- Showcase what makes your website unique
- Speak to your visitor’s needs and problems
- Tell your visitor what to do next
If that sounds like a lot, don’t worry, below we’re going to cover the ins and outs of homepage design. You’ll learn why a stellar homepage is non-negotiable, homepage elements your site needs to have, and finally, we’ll help you get started creating a homepage in WordPress, or using the Gator Website Builder.
Why Your Website Homepage is Important
Your homepage might just be the most important page of your website. Unless visitors are coming to your site via the search engines, or to check out a blog post you shared from social media, your homepage is the first thing your visitors will see.
First impressions matter a lot, especially online. Your homepage will set the tone for the rest of your interaction with your visitors.
Think of it like when you walk into a store. The moment you walk in, you take in the aesthetic of the store, and start talking to an employee. Hopefully, the employee will be able to answer your questions and guide you to the correct part of the store, creating a positive experience through and through.
Your homepage should have this same effect. Your website should guide a visitor to the exact information, or area of the site, they’re looking for. Since there isn’t a person who can guide them around the site, your homepage needs to be intuitive enough so that visitors can do this for themselves.
Without this in place, your visitors will have no idea what your site is about, or if they’re in the right place.
Don’t worry, we’ll show you how to create an awesome homepage below.
Essential Home Page Elements to Include
Whenever a visitor lands on your site, they expect to find what they’re looking for in a few seconds. If not, they’ll hit the back button.
For this reason, the layout of your homepage is crucial; here are elements your site needs to have:
1. Logo and Navigation
We’ll start with two elements every website needs to have: a logo and a navigation bar. The goal of your logo is to invoke a certain feeling of what your brand is about. It needs to communicate the core of your brand while showcasing what makes you unique.
Even though a logo might seem simple, it can take a lot to design a logo that encapsulates your brand. If you’re looking for a great free logo creation tool, then check out Canva. There are a ton of free templates you can use to create a professional logo.
Next up, let’s move onto navigation.
Either underneath your logo, or to the right-hand side of it, will be your navigation menu. Your website navigation menu should present the important pages of your site in a logical fashion, so your visitors can decide which pages they could visit next.
2. A Compelling Headline
Under your logo and navigation bar is the first place your visitor’s eyes will go to. This is an excellent place for your headline, which will uniquely showcase what your website is about.
Here you’ll want to answer the question: what makes your website unique?
For example, here are some homepage headlines you can take inspiration from.
The heading you’ll find on the HostGator home page is “Powerful Website Hosting Services”:
Slack tends to test out different home page headlines, but the one you’ll find currently is 'Whatever work you do, you can do it in Slack':
3. A Descriptive Subheading
Underneath your headline, you’ll have a subheading. Here you can go into things in a little more depth. Your subheading can speak further about the needs of your visitor, or talk more about the service you offer.
A subheading isn’t absolutely necessary, but it’s a great chance to hook your visitors further and let them know that they’re in the right place.
For example, here’s how Trello further clarifies the message they originally stated in the headline:
4. A Call-to-Action
Finally, it’s time for your call-to-action, or CTA. This is where you’re going to tell your visitors the next action they should take. This can be learning more about your offer, having them explore your services, signing up for your list, or something else entirely.
Here’s an example of a homepage call-to-action here at HostGator:
As you can see, the goal is to encourage visitors to 'Get Started!' by signing up for a shared hosting package.
You can even incorporate a subscription box with a CTA into your homepage as well, like Dave Chesson of Kindlepreneur does:
5. Content Below the Fold
This section of your homepage will differ a lot depending on your niche. The “below the fold” section is what your visitors have to scroll to see. This section will vary depending on the type of website you’re running and the goals of your homepage.
For example, some sites will create a homepage that operates more or less like a sales page. So, this page will include things like testimonials, social proof, product or service benefits, and more.
Other sites might go right into a list of the blog content, include company information or biographical elements, or something else entirely.
For example, HostGator includes a benefits section underneath the “above the fold” content:
Meanwhile, the site Goins, Writer has multiple sections, including an about section, sign up form, CTA for his new book, and a testimonials section as shown below.
A lot of homepages operate more like simple landing pages.
Then again, some sites might use a traditional blogroll. We highlight examples of these in the section below, so if you’re running a regular blog, you can take inspiration and layout guidance from these.
Beyond everything mentioned above, there are additional homepage elements you may want to include like:
- A section for your company blog, or your most popular posts
- A short introduction to yourself or your company
- A contact form, or map of where your business is located
- A call-out section where you showcase where your business has been featured
3 Homepage Layouts For Inspiration
Not every homepage will be the same. Massive content sites will have a different homepage layout than an agency site, a small business website, or a site that sells an online course.
But, even when serving different niches and having different layouts, the core principles will remain the same, as does the overarching goal-to let your visitor know they’re in the right place and help them find what they’re looking for.
1. Basecamp
The Basecamp homepage is dedicated towards getting visitors to sign up for the software. If you check out the page you’ll notice the benefits and features of the software, a testimonials section, and more.
If you’re a SaaS provider this company is a great example for how you should structure your homepage.
2. Dollar Shave Club
Dollar Shave Club is an eCommerce company that ships razors to your doorstep. As soon as you land on the homepage you have the ability to order a starter set. As you scroll down the page you’ll see a breakdown of how the service works, cool perks they offer, and an in-depth FAQ section to answer any potential buyers questions.
Those running an eCommerce store can learn a great deal from how they layout their home page, and the site as a whole.
3. James Altucher
James Altucher is an author, podcast host, standup comedian, amongst other things. As soon as you land on the site you’ll have the ability to sign up for his email list. Further down the page you’ll see a brief bio, the latest blog posts, and the latest podcast episodes.
If you have a website that’s focused on content, this is a great example for how to organize everything without overwhelming your visitors.
How to Create a Homepage in WordPress
Luckily, creating a homepage in WordPress is pretty straightforward. However, before you start building your homepage, you’ll want to have your homepage copy written, or at least an outline of the content that’s going to fill the page.
This will help dictate the overall layout and flow of the page. Once you have your copy written, proceed to the steps below:
1. Navigate to Your Home Page in the WordPress Dashboard
Once you have WordPress installed on your site a homepage will automatically be created for you. How your homepage looks will also partly be dictated by your theme.
Some themes will have a widgetized homepage, while others will be more basic.
To create or access your homepage. Navigate to Pages>Add New. Then type in '˜Home’.
2. Customize Your Homepage
Then, using the new Gutenberg editor, you can add new homepage elements called 'blocks.' To add one of these click the '˜+’ icon, as shown below:
This allows you to create new homepage sections, add images, videos, quotes, headings, and much more.
With the WordPress Gutenberg editor, you can create a homepage that contains a number of different sections.
3. Use a Standard Blogroll
If you’re creating a blog and you’d like that to be your homepage, then you can do that too. Since WordPress is a content management powerhouse, this step is incredibly easy.
Just navigate to Settings>Reading, then select '˜Your latest posts’ from the '˜Your homepage displays’ section:
How to Create a Homepage With the Gator Website Builder
If you’re using the Gator Website Builder to create your website, the process will be very straightforward as well. The template you choose will also impact what you can do with your design, however, you can also add more content blocks and rearrange existing site elements to end up with a homepage design you love.
To create a homepage with the Gator Website Builder, you’ll need to have access to the tool. You can sign up for a plan here, or access the tool via your hosting control panel.
Once you have the tool open, follow the tutorial below to start creating a homepage:
1. Choose Your Template
The template you end up selecting will have a big impact on the overall layout of your homepage. You can add and adjust a ton of different homepage elements, but it’ll speed up the site creation process if you can select a theme that’s as close as possible to how you want your site to look.
Once you select your theme you’ll automatically be taken to the homepage:
2. Edit Your Homepage
Now, it’s time to get to editing. The website builder makes it very easy to edit and add new homepage elements.
Find an element you want to edit and then select '˜Change Design’. This will give you a series of pre-built elements you can swap out.
You can also select individual elements too, and you’ll have a pop-up box that’ll allow you to change things that are specific to that element.
As you scroll down your homepage you’ll notice multiple different content areas you can edit as well.
Over to You
Hopefully, you have a better idea of why your homepage is so important. Maybe you already have an awesome homepage that delights your visitors, and you don’t have any changes to make.
But, more likely, your homepage could use a little work. Hopefully, the tips and existing websites mentioned above will point you in the right direction.
It can be helpful to evaluate other popular websites in your niche to see how they structure their homepages. This can give you useful information about how yours should be laid out and other elements you can include.
Kevin Wood writes about technology and human potential. You can find him at his virtual homes Wooden Writing and Counter Culturist.