Almost every type of business needs a content site. Because of the many benefits such as the ability to publish content, get traffic from Google, build your email list, promote products and so on.
This is more commonly known as a blog.
This guide reveals how to design specifically the homepage of your blog.
There are two main ways (or templates) to design your homepage. You’ll discover both of them.
You can choose whichever suits your particular business the most as well as your personal preference.Table of Contents
2 Main Website Templates
First of all, you want to use the right tools to build your website. The current best tools are WordPress.org and a page building plugin that works with it.
Two good ones are Elementor or Thrive Architect.
This video shows you how to install WordPress:
Both those page building plugins give you premade templates that you can use.
You follow this link to see all the templates of Elementor.
You can follow this link to see all the templates of Thrive Architect.Note About Those Templates Some of the templates are designed for optin or other type of pages. Look at the description underneath the template. It should say ‘Homepage’.
Although there are hundreds of templates they are all pretty much the same. In fact, there are only 2 main types of templates that you can use for your content site.
Modern websites use one of these two types of templates. If your website contains 95% content (articles, videos, etc. ) then the first template will be ideal for you.
But if you have a lot of different and important pages (apart from the content) that you definitely want your visitors to see, then the second template will be better for you.
Examples of these pages could be Portfolio, Services, FAQ Page, and on and on…
Let’s discover each template in more detail, and then you can choose which one you think is right for you. You can build any of these templates with Elementor, Thrive Architect or any of the other modern page building tools…
Template #1: Styled Like A Blog
This website is basically like a blog. On each page, you’ll find a navigational menu at the top, a sidebar (on the right or left), and a content section in the center.
On the homepage, the content section will usually contain an Introduction.
The introduction content on the homepage can be a headline and then either a short article, a video or both. It basically tells the visitors how the website can help them… what benefits they get from the website…
You may also find a list of the most recent articles or videos beneath that too because this template puts emphasis on content.
On this template, the optin box (to build a list) is usually in the sidebar.
An example of this is https://losethebackpain.com (Click the image to see a full screenshot)
You can see a headline and a small introduction, which I marked in green. And then a list of the most recent articles, and some free guides at the bottom.
Your introduction should probably be a bit longer than that to explain in much more detail the benefits.
In this case, it is small because it’s super powerful: “Since 2003, the Healthy Back Institute has helped millions of people find lasting relief from pain conditions…”
They’ve helped millions of people since 2003, they don’t really need to say much more than that to convince their visitors to stay on their website.
Another example of a website using this type of template is my own website. My sidebar is on the left, and on the homepage I use a headline to tell them how they can benefit from my website:
“How To Transform What You
Already Know Into Information
Products AND Sell Them
For Big Profits!”
The article on the homepage basically elaborates on that headline, to show them how they can benefit from my website.
I explain how to write good headlines further below…
Template #2: Styled With Sections
In this template, you’ll find only one navigational menu at the top. There are no sidebars. And the content area of the homepage is split into different sections. Each section will showcase something different.
For example, one section can contain testimonials, another section has a list of the most recent articles, and another section has a summary of your story or about us, and so on.
In almost every section you’ll find a link that visitors can click to access more related content. For example, in the section with the most recent articles, a link will take the visitor to a page with a full list of all your website’s articles.
Likewise in the ‘about us’ section, a link takes the visitor to the ‘about us’ page where they can read the full bio or story…
Therefore these sections contain just a sample or taste of the best or most important content on your website.
If you use this template you can still create a normal blog and put your content (articles, videos, etc.) on it. Then you can simply link to it from the top menu, like the following example:
Usually the inner pages like for example the About Us, or Portfolio Page, also have the same style (therefore use sections), much like the homepage.
If you have a really good and long story that you definitely want to share with your visitors on the homepage than this template will probably work better for you.
You can place other sections below or above it…
The first section of this template should tell the visitors how the website can help them… what benefits they get from the website… To accomplish that you can use a headline, and some text or video.
An example of this can be found on https://www.briantracy.com
The headline says “Achieve All of Your Goals, Faster Than You Ever Thought Possible”.
You can also put a video under the headline to explain the benefits.
You can also put a background image or even a video (a bit more advanced) behind any section.
Here’s a complete example of a homepage using this template (click the image to see a full screenshot):
Exmplae of Template With Sections
The top navigation menu contains just the most important links, including a link to his blog.
And then the homepage is split into several sections, which I marked in different colors. You’ll probably won’t use as many sections as he does.
Brian has been doing business for a long time so he has a lot of important pages and content that he can showcase on the homepage.
Quality is more important than quantity – showcase just the really important things.
The first section contains a headline with a background picture. The headline tells the visitors the reason for staying, the best benefit they can get…
The second section allows the visitor to optin to receive a free gift. He uses this section to build his list.
The third section contains a list of free ebooks and other information products on various categories…
The fourth section contains a short bio with a ‘Read More’ link…
The fifth section contains social proof (as mentioned in…) and links to his social accounts. He uses this section to get more followers.
The sixth section showcases his services. There are 4 links to 4 different pages where you can book Brian for speaking and related services.
The seventh section contains a list of his most recent blog posts.
The eighth section contains testimonials.
The ninth section contains his best blog posts.
I suggest you check out the following links, they all use this template. Study them. See how they use different sections on the homepage.
Click and look at the other pages on their website and see how they structure them. Then you can model them, do something like what they’re doing for your own website.
https://www.briantracy.com (homepage screenshot)
https://www.puttview.com (homepage screenshot)
https://theonlinedogtrainer.com (homepage screenshot)
https://www.revolutiongolf.com (homepage screenshot)
https://www.theknot.com (homepage screenshot)
In case they change their website I’ve included a full screenshot of their homepage.
Alternatively, you also use https://archive.org to see how their website looked like today.
Now let’s discover several tips to help you build a better homepage, regardless of which template you’ll use.
10 Hacks To Design A Better Home Page
I’ll be referring to the templates above as template #1 and template #2 when I share with your the following tips.
Hack #1 Use Headlines
You need a good headline on your homepage.
A headline clearly tells your website visitors why they should stay on your website, and what benefits they’ll get.
Your homepage should have a headline at the very top of the page. If you use the 2nd template, the one with the sections, the headline should go in the first section.
You can use headlines on other pages of your website too, in order to make sure your visitors understand the benefit they get from that particular page.
Use a headline swipe file to help you write better headlines. In my other free guide about copywriting I have a chapter entire about headlines, and there’s also a headline checklist.
Hack #2 What’s In It For Me?
Your visitors want to know “What’s In It For Me?” when they land on your homepage…
So underneath the headline, you should put some text or video to explain in a bit more detail how the visitors can benefit from your website.
Think of it much like the introduction chapter of a book. It gives an overview of what the visitor can expect to see and learn on the website…
Try to make it a bit interesting.
If you use the 2nd template, the one with the sections, this introductory part should be placed in the first section (along with the headline).
Hack #3 Don’t Sell
Your homepage should never try to sell anything. Just like I’ve explained already, the homepage is like an Introductory page.
Selling should be done using sales letters. You can put a sales letter on another domain, or on the same domain of your content site.
If you have XYZ product you can buy a domain for that product and put the sales letter on the homepage of that domain.
You don’t need to have any other pages on this domain (apart from the legal related pages like Privacy Policy…)
This is exactly what I do. Each of my products have their own domain name. And the sales letter is on the homepage of the domain.
But you can create a new page on your content site and put the sales letter on that page. This is entirely up to you, do whichever you think is best for you…
Hack #4 Keep It Well Organized
When building your website keep in mind that less clutter is always better.
If you use template #1 in the sidebar put just the most important elements… for example a small optin box to build your list, a list of your categories, and perhaps a list of your most recent blog posts!
Keep it clean and simple just like that.
Less is always better because you’re much less likely to confuse and frustrate your visitors.
Therefore put only the most important elements on the sidebar, those things that you really MUST have, e.g. a list of Categories.
In business, your goal is to SERVE your prospects and customers. And as you better understand their wants and needs you can tweak, modify and improve your website structure or layout to suit those needs better.
I’ve modified my own website several times as I learn more about my visitors and my niche.
Information overload is a problem in my niche because there are a TON of different strategies and techniques…
I used to have a lot more links in my sidebar, but to avoid that problem I’ve simplified my entire strategy and reduced the number of links in the navigation menus.
Hack #5 About Text Links…
When you link to one of your own pages (on the same domain), it should not open in a new window/tab. Only links pointing to other domains (yours or not) should open in a new window/tab.
This simple technique is used to avoid confusing visitors.
Hack #6 Testimonials
Testimonials can be placed on any page of your website, including the homepage whether you’re using template #1 or #2.
They’re always going to boost your conversions.
If you use template #1 you can place them in the footer section just like I do… or somewhere at the bottom of the website beneath the list of most recent articles, or category list.
If you use template #2 you can create a section for testimonials.
Hack #7 Use Photo (and video)
Building rapport with your visitors and earning their trust is very important.
You can accomplish that by placing a photo on the homepage (ideally above the fold), or a video. Show them you’re a real human being. You’re not a scammer hiding behind a computer.What’s Above The Fold? This is the portion of your webpage the visitors see (after the website loads), without scrolling down. Therefore what you put in this section will be seen by your visitors instantly.
Everything you put below the fold will only be seen if the visitors scroll down the page. Therefore we try to put the most important elements (e.g. headline, our photo, optin box…) above the fold!
This good video compares the homepages (especially the ‘above the fold’ section) of two websites in the same niche… and shows you why one is much better than the other:
Adding a video is slightly more advanced. But some people are naturally good at talking on video… (that’s not me – I prefer writing). If you’re one of them introduce yourself and talk a bit about the benefits they’ll receive on your website.
This is basically the same thing I told you in tip #1 and tip #2.
Hack #8 Build Your List
Building a list is extremely important, so every page on your website should have some sort of optin form.
If you use template #1 the optin form can be placed in the sidebar, ideally the very first thing in the sidebar. This means it will be visible above the fold.
If you use template #2 create a section for the optin box, and try to put it as close to the top as possible. Building a list is very important so you want your visitors to see this section as quickly as possible.
Some marketers put the section with the optin form before the headline – that’s something you can try as well.
There are a lot of different types of optin forms that you can use for your website. But I recommend you use either an inline form, lightbox, or exit intent lightbox. You can see an explanation and example of each one below.
Those are proven to be the most effective. Later on, you can consider testing other forms… But until you’re an “expert” keep things as simple as possible.
Follow the K.I.S.S. principle, keep it simple stupid, to avoid complications that can cause frustrations!
Remember that you can put the optin form on every page of your website, not just the homepage.
I personally use Layered Popups to build any of these optin forms. It’s a plugin for WordPress. There are certainly many other options…
If you use Elementor Page builder they’ve just added a feature that allows you to build these optin forms. But Elementor’s popup builder still lacks several features in my opinion.
If you like and use Thrive Architect, you can also use their other product, Thrive Leads for building these optin forms.About optin form names… Note that there are different names that refer to the same type of optin form. For example, a ‘floating bar’ is sometimes called a ‘hello bar’ or a ‘ribbon style optin’.
Here are some optin form examples:
1) Inline form – this appears within the page itself. It’s the most basic and popular optin form. Here’s an example:
Inline optin form
If you use template #1 it can be placed in the sidebar of your website. If you use template #2 you can create a separate section for the optin form, but instead of vertical you can make it more horizontally like this example:
Horizontal Inline Optin Form
2 Step Optin
You can modify the inline form so it becomes what’s known as a 2 step optin form. This is more often used in template #2. In this form, there will only be a download button.
When the user clicks this button, they’ll see the whole optin form with the ‘name’ and ’email’ fields… it opens in a lightbox.
You can see an example in this animated image:
It’s a slightly more advanced optin form, but there are two good reasons why this works really well (in most cases even better than the regular inline form).
A lot more people will click a simple button rather than fill an entire form.
And almost 100% of those people that click the button will complete the form that opens in the lightbox.
The reason is that humans like to finish what we start. After clicking the download button we want to complete the process, so we enter the name and email to optin.
Furthermore when someone takes a micro action (or commitment), a small action like clicking a button – they’re much more likely to take another one especially exactly after it.
Therefore when the lightbox opens they’re much more likely to complete the optin form.
2) Lightbox – this is another common optin form. This appears a few seconds (how many you want, typically after about 7 seconds) after your webpage loads.
It appears as a “popup” on top of your page, here are some examples…
Example #1:
Example 2
The lightbox can appear at the center of the screen or it can slide from the top, bottom, right or left side of the screen.
3) Exit Intent Lightbox – This is just like the lightbox, it loads on top of your webpage content. But it doesn’t load a few seconds after the page loads. Instead, it loads when the visitor is about to exit your page (move their mouse to close the tab).
4) Slide-In Lightbox – This is similar to the lightbox in shape but it’s much smaller. This one slides from the bottom right or left side of the screen and stays there… Here’s an example:
5) Welcome Mat – This optin form is also like a lightbox. But instead of loading as a small box in the center, it’s as big as the entire visible part of the page.
If you want to see an example of this go to this page:
https://elementor.com/popup-builder/ – and click the ‘Try Me’ link next to the ‘Welcome Mat’.
6) Floating Bar (also known as Hello Bar) – This is a horizontal bar that is placed at the very top or bottom of the page.
If placed at the top it will stay there visible, even as the user scrolls down the page.
Here’s an example of a Floating Bar at the top of the page:
Top Floating Bar
Here’s an example of a Floating Bar at the bottom of the page:
Bottom Floating Bar
If you want a recap you can watch this video from the owners of Thrive Leads.
He explains the different kinds of optin forms, and then he shows you how to use their tool to build them.
Hack #9 Fonts And Colors
You should pick a primary color for your website. For example, mine is green, because it’s associated with money.
Green is also associated with nature, so if you’re in the gardening niche it’s also a good color for your website.
There are a lot of pages that explain the meaning of color.
Use your primary color in your headlines. You can also use it in your logo. Use it as often as possible. Ideally use just one color for your website. Your body text should always be black.
Decide also on a font family and size for your headlines, and use them for every headline on your website.
Likewise, decide on a font family and size for your content and keep using them on every page of your website. Also, decide on a color for your text links (and text link color ‘on hover’) and use them consistently throughout your website.
My text link ‘on hover’ color is the same green I use in my headlines.
Follow this tip because if you use several colors, and a lot of different font sizes and families you’ll confuse your visitors!
Here are some resources that might help you to apply this tip:
Make sure you use a modern page building tool to easily build your websites. I recommend WordPress.org and a page building plugin that works with WordPress, like Elementor or Thrive Architect.
Freelancer.com – On this website, you can find programmers that can help you to build your website, or customize your theme.
Learn html – I highly recommend you take this free and easy Html course. It will greatly help you to make basic changes to your website. You won’t have to hire a freelancer or spend hours researching Google to make quick and easy changes.
You don’t have to read the entire course. The basics are enough. From the left sidebar, read the contents under the “HTML5 Tutorial”. If you want to explore more, you can continue from the “HTML Forms” onwards…
Learn CSS – CSS and HTML go hand in hand. If you know at least the basics of CSS they can be incredibly useful when building your website.
Hack #10 Navigation Menus
Navigation menus give your website visitors access to your other website pages.
If you use template #1 you’ll have 3 navigational menus, top, bottom, and sidebar. If you use template #2 you’ll have 2 navigational menus, top, and bottom.
The bottom navigational menu (footer) is usually reserved for the legal related links, like Privacy Policy, Terms of Service, etc.
My biggest recommendation is to keep these navigational menus organized, clean and simple, so you don’t confuse the visitors. Fewer links are always better.
The top navigation menu will usually contain links to just the main, and most important pages of your website, partly because there’s the least amount of space (unless you use drop-down menus as explained further below)
Main/Important pages are for example Home, Blog, Support Page, About Us, etc. You should always have a Home link that links to the homepage.
The sidebar navigation menu is usually reserved for your category and other content pages…
If your website has just 4 pages, you can link to each of those pages using just one navigation menu. But most websites, contain a lot more pages, especially if you have a lot of content.
In that case, you cannot link to every single page from one navigation menu, because it will be very messy.
What you can do is create a sort of hierarchy, and group similar pages together.
This is what blogs do when they create categories.
For example, create a category page and on it put links to all your articles about “cat allergy”. This category page gives your website visitors access to all those articles.
Now you can put just one link in the navigation menu, the category page, and from it, your visitors will have access to all those articles about “cat allergy”.
Another category page about ‘cat food’ will contain links to your articles about cat food…
In this way, you’re grouping your content, together. Then link to these category pages from the navigational menus.
Use the same navigation menus on each and every page on your website. Consistency is important so your visitors know they’re still on the same website when they navigate from one page to another.
Drop Down Menus
This is a slightly more complicated menu. I don’t recommend you use drop-down menus unless you really know what you’re doing. You can put a lot of links on a single navigational menu if you use drop-down menus.
Here’s an example of a drop-down menu:
When you put your mouse on top of the menu, a drop-down appears containing a larger list of links. Most page builders, like Elementor or Thrive Architect will allow you to create these menus quite easily.
Navigational Menu Examples
A great way to understand how to build these navigational menus is to see a lot of actual examples. And remember you don’t have to get it immediately perfect. You can change, tweak, modify and improve anything you do in your business, at any time.
(Note: Websites change often. If you visit these sites they may look differently…)
Example #1 InformationMarketingExpert.com
This is my own website. In my sidebar I placed links to category pages. Of course to be unique and different (which is important) than every other website, I didn’t name the menu Categories. I used ‘Free Training’. It’s also more interesting than just the word ‘Categories’.
idebar Navigation Menu Example #1
In my niche prospects suffer from information overload, so for me, it’s really important to have a clean, organized and easy to use navigational menu.
I also have another menu with a list of my products.
Sidebar Navigation Menu Example #2
That’s all I have on the sidebar. Keep it organized, nice and clean so you don’t confuse your visitors.
The navigational menu at the top contains links to other pages on my website worth mentioning, that don’t fit in the sidebar. You should always have a Home link that links to the homepage.
I change my site from time to time, so it may no longer look like that now.
Example #2: TheOnlineGogTrainer.com
This website using template #2 (with sections) so there’s only one menu at the top. It’s, short, simple and clean.
Those are links to the main pages of the website. The ‘Solutions’ link is a drop-down menu. When you mouse over you see other links.
Here’s a screenshot:
Drop Down Menu
He placed a link to his blog, and on the blog, you’ll find the same top navigation menu (consistency is important). On the blog, you’ll find just a sidebar menu containing links to his most recent blog post.
Sidebar Menu
In my opinion, since he has a lot of articles he can also use categories, and place a list of categories in the sidebar. Because it can be really helpful for his website visitors who want to read articles on a specific topic.
Keep your navigational menus simple and easy to use like these examples and you’ll keep your visitors happy.
Conclusion
So to recap, first choose one of the two templates. And then design a homepage following and other pages of your website using the 10 “hacks” in this guide.
Remember content is king on the Internet, so you need to put content on your website in the form of articles or videos (whichever you prefer) on a regular basis.
Refer to my content creation guide for more specifics about that.
With the tools I provided (WordPress, and Elementor or Thrive Architect) it can be quite fun and easy to build your website. You can always tweak, change and improve your website, so you don’t have to get it exactly “perfect” right away!
If you need even more tips to build a better homepage and website, refer to my other free guide about website conversion.
So do you have any questions about designing your website homepage? Feel free to ask them in the comments.