10 Hacks To Design The Perfect Homepage!

10 Hacks To Design The
Perfect Homepage!
By Jack “Straight Talk” Sarlo

As part of the overall strategy to build a successful Info business you need to create
content on a regular basis. Content in the form of articles or videos (whichever you prefer)
… And therefore you’ll need a website to put this content on it. This website can be called
your content site, or your official site.
This guide will also show you how to design the homepage of this website.
And there are two main ways (or templates) to build this content site. You’ll discover both of
them below. Choose whichever suit your particular business the most.
Table of Contents
2 Main Website Templates................................................................................................3
Template #1: Styled Like A Blog....................................................................................4
Template #2 Styled With Sections.................................................................................6
10 Hacks To Design A Better Home Page.......................................................................10
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 pre-made templates that you can use.
Page 2
Video URL: https://player.vimeo.com/video/81679234

You can see all the templates of Elementor on this page:
https://library.elementor.com
You can see all the templates of Thrive Architect on this page:
https://thrivethemes.com/landing-pages-gallery
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, than the second template will be better for you. Example
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 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
Page 3

Click here to view full image

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.
Note: 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.
Page 5

If you use this template you can still create a normal blog and put your content (articles,
videos, etc.) on it. Then you can simple link to it from the top menu, like the following
example:
Usually the inner pages, 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 background image or even a video (a bit more advanced) behind any
section. Click here to view a complete example of a homepage using this template.
Page 6

In that template 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 eight 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 in 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)
Page 7

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, as
I’m writing this March 13, 2019.
Now let’s discover several tips to help you build a better homepage, regardless 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 tells your website visitors clearly 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 they
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).
Page 8

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 you 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.
Page 9

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:
Page 10

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.
Page 11
Video URL: https://youtu.be/TCBZPr3WRbk

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 it’s still lacks several features. You can read more about it on this page.
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:
Page 12

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:
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 image:
Page 13

It’s a slightly more advanced optin form, but there’s two good reason 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 light box. 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:
Page 14
Click here to see an animated view of this image...

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.
Page 15

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:
Page 16

Here’s an example of a Floating Bar at the bottom of the page:
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.
Page 17

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, this is one of them:
https://www.color-meanings.com
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:
Page 18
Video url: https://youtu.be/nOuiMB8BrQQ

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 is 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, tob 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. Less links is 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.
Page 19

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:
Page 20

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’.
Page 21

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.
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.
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.
Page 22

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:
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.
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.
Page 23

Keep your navigational menus simple and easy to use like these examples and you’ll keep
your visitors happy.
So to recap, first choose one of the two templates. And then design a homepage following the
10 tips in this guide, and other pages of your website.
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.
Jack “straight talk” Sarlo
P.S. For more free guides go to InformationMarketingExpert.com
Page 24

10 Hacks To Design The Perfect Homepage!

Recommended

Recommended

More Related Content

What's hot

What's hot (19)

Similar to 10 Hacks To Design The Perfect Homepage!

Similar to 10 Hacks To Design The Perfect Homepage! (20)

More from Straight Money Talk, Inc

More from Straight Money Talk, Inc (11)

Recently uploaded

Recently uploaded (12)

10 Hacks To Design The Perfect Homepage!