How To Create A Home Page That Connects and Converts

Share this post or save it for later!

I had the privilege of hosting a training session for KadenceWP’s virtual Amplify event in October 2023! Click the video below to watch the hour-long presentation. (Feel free to speed the video. up to 1.5x or 2x speed to save time!) I’ve also written out the content in blog post format below for your convenience! Enjoy.

In our session, we are going to be talking about homepages. Specifically, how to connect a homepage that connects with your idle clients and converts them into either subscribers or paying customers.

So, in this specific talk, we will be going over two things:

1. First, I want to make sure that you know what the two main purposes of your website are.
2. And then I also want to go over nine ingredients to a successful homepage.

A Little About Me

I am a website designer and marketing strategist, and I primarily work with KadenceWP, the whole Kadence plugin suite. My team and I design custom websites, and we also have DIY resources on diydreamsite.com, where we sell Kadence child themes and have a monthly membership that gives you the templates, tutorials, and coaching to DIY your own website without breaking the bank.

At this point in time, I’m pretty much doing 99% of my website builds with the Kadence tool suite because it’s so incredible, versatile, easy to use, and I love it.

I’ve had the privilege of working with a lot of (primarily) content creators and online businesses including The Hawaii Vacation Guide, Making Sense of Cents, Money Making Mommy, Teaching Millionaires, Milestone Mom, The Cooking Mom, SpeakUp Conference, Moving to Spain, Country Now, a ton more. I hope that gives you a little context about myself and my business!

So without further ado, let’s talk about…

Does design really matter?

I’ve got a few stats that I pulled from the internet here for you:

1. Users will form an opinion about a website in 0.05 seconds.
2. 48% of people cited that a website’s design is the number one factor in determining a business’s credibility.
3. 57% of users won’t recommend a business with a poorly designed website.
4. The final stat I want to share is that 89% of consumers will shop with a competitor after a poor user experience.

So I want you to answer the question, does design really matter based on these stats? I would say yes, 100% it does. So since design matters and it’s going to impact your conversions if you don’t have a good one in place, let’s go back to the heart of your entire website and talk about…

What Are The Two Main Purposes Of Your Website?

If you guys have ever read the book, “Opting into Optimization” by R. Jon MacDonald, who is the founder of the company The Good, you should know the answer to this question. I learned about these two specific purposes of the website in this book, which is a really great read.

Reason #1

So the first one is that your website exists to help your visitors buy

Reason #2

And the second is to help your visitor research.

At the end of the day, you are in the business of solving people’s problems. So if I am having an ailment, maybe my wrist is hurting, I’m going to go to Google and type in a question. And then hopefully, people will find our website in order to research the answer to that question. And then also, if there is a cream that I can purchase, maybe I’ll make a purchase in order to fix that problem.

So, ultimately, I want you to start thinking about your website not in a way just to display everything that you have but in order for someone to research or make a purchase. That will transform how you start to think about your whole homepage.

Step 1. Know The Who, What, and How

So to craft a strategic homepage, you got to do a little bit of homework first, and you need to know three things. You need to know the who, the what, and the how.

1. WHO – who are you serving? Are you clear about the person that you want to attract and convert into your business?
2. WHAT – You also need to know what problems you’re helping them solve.
3. HOW – How will their life be transformed if they work with you or read your content?

Now, there are a lot of tips and strategies we could dive into with all of this, but I’m not going to do all of that since we have a limited amount of time. But I just want you to make sure that you do have these three factors decided on before you even start working on redesigning your homepage or starting a brand new homepage design.

So if you are stuck on that, I do have a free blog post about how to identify your ideal client in four easy steps. Plus there is a free worksheet that you can download within that post. It’s a Google Doc that you can literally type in all your information. If you fill that worksheet out in-depth, this will help you with your copywriting when it comes to what to say on your website homepage. So that’s really important that you do know who your ideal client is, what problems you’re helping them solve, and then how their life will be transformed.

Step 2. Follow Best Practices

So one thing about homepages and really any page that you design on your website is that content should dictate design and not the other way around.

I know it’s so tempting to just want to grab a template online and figure out a way to plug your content in there. But if you truly want to build connection and convert your readers, that is going to take a very unique approach…

There’s No Perfect Home Page

Because there are no two businesses that are the same this means there’s no perfect homepage layout for every single website. There are some ingredients that you can put on your homepage to make a successful homepage, there’s not a step-by-step step-by-step formula that says your home page has to go a specific way. It’s more like, do you have these elements in order to build that connection and also present your offers in a way that’s going to lead to a conversion?

Tailor This Advice To Your Niche

So I also know that the Kadence audience has a lot of different viewers. I know that just from being in the Facebook group… (if you’re not in the Kadence Facebook group, by the way, it’s a wealth of knowledge, resources, and community. It’s incredible.) …we’ve got designers and developers who are in there, to people who have been in the industry for a long time, but are now moving away from other tools and they’re switching over to Kadence, to people who are starting their brand new websites for the first time.

So I also want to make a disclaimer here too, that if you’re a restaurant, or you’re a new site, or you’re a food blogger, you’re going to need to adapt this to what your niche is doing as well. So just keep that in mind, a little disclaimer because, again, there’s no perfect homepage layout.

The 9 Ingredients For A Successful Homepage

So let’s dive in. Let’s talk about where are the 9 ingredients for a successful home page?

#1 – Clear, Visible Navigation

The first ingredient is that you need to have clear, visible navigation. So after reaching a company’s website via some sort of referral site, whether that’s Google, or Facebook post, or something, 50% of visitors will use the navigation menu at the top of your website to orient themselves and to figure out where they should go.

I like to think of your website homepage a little bit like a hotel lobby. So I don’t know if you notice, but I’m in a hotel room right now. I’m actually at a conference in New Orleans, and I’m at the FinCon conference. It’s been fun, but being in the hotel has kind of made me think about that. When you walk into the hotel lobby, it’s like you can take the elevator and go up to a different floor.

You can go check in at the check-in desk, you can go to the bellhop it and do all the things you need with… You have a little system in the lobby in order to orient yourself about where you need to go and take the next steps. So I like to think of your website really similarly to that, and so we need to make sure we have that clear visible navigation.

So here’s an example and we’ll talk about these little pieces that make up clear menu navigation.

Now, the screenshot that I have here is from one of my demo sites on one of my Kadence child themes. So don’t pay attention to really what the words say, because that’s not the purpose of this. But you do need to make sure that in the top left corner is typically the best layout. You want to have a small, legible logo in that horizontal format if possible.

If you have a real chunky logo, like a square logo or something like that, you may have to play around with the margins and have them fall on top or below. I’ll show you an example of that in just a minute, in order so that there’s not too much spacing all the way around in your menu. So I can dive into a little bit more explanation on that here in just a second.

So horizontal format, if you’ve got one on your logo and it needs to be small. I know a lot of my clients, whenever we work together, they’re always asking, “Can you make my logo bigger?” People don’t necessarily need to know your logo anymore. You need to persuade them to research and buy on your website. So just make it so that it’s visible and noticeable, but not the main thing. That’s not the whole point of the website.

The other thing that you need is seven navigation options or less. So I’m talking about this part right here. You need seven menu navigation options or less in order for people to orient themselves around. And honestly, the less that you use, the better, especially if you are going for conversions. So the about, your blog, your contact, those are technically kind of ancillary things depending on your business. Those could go in the footer. We’ll talk about the footer towards the end, but the footer is basically more like your junk drawer, and it’s an additional navigation place for you. So you can eliminate all of those ancillary items that are in your menu and put those in the footer, so that you can streamline and get a more focused experience for your idle client. So we’ll look at some examples of menus and I’ll walk through that too.

The other thing is just that there’s an X over that, and that is because most people know that they can click on the logo in order to navigate back to the home screen. The only reason I would say keep it there is if you have maybe an elderly audience or something, or something along those lines where it needs to be super clear, or you don’t have a lot of menu navigations because it’s a one-page website or something like that. But for the most part, you can eliminate that.

You also can have your shopping cart or search icons there. And then people typically like to read in a Z pattern down the page. So they’ll take a look at the top left, scan all the way over. So on your website, your top right corner in your menu is your prime real estate. So if you can, include a call to action with a button. That will be one of the most clicked items on your entire website. So I encourage you to add that button if you can. Now, if you have too many options, I totally understand. Then just do your best to illustrate those in the main navigation section.

Now, if you’ll notice in my screenshot, I do not have social media icons in the header. Why do you think that is? If you are here in the comments, share that with me so that I can see. I’d love to know.

Okay, so the reason that I don’t want you to put any social media icons in the header is because especially if you want to convert your people into subscribers or customers, you don’t want to send them into the abyss of social media land. As soon as you click over there, even if you’re there for a specific person to follow you, you will get lost in the sea of notifications and all the flashy things that are going on.

So I highly recommend that you do not want to send people away from your site. Yes, Tammy just said that, she said, “Because you don’t want to send people away from your site.” Absolutely, absolutely.

Okay, I think that’s a good overview of the clear menu navigation. I’m going to actually pop over here and show you an example of a really poor menu navigation.

So why do you guys think that this doesn’t work? I mean, I’ve already got it on the screen, so spoiler alert.

But number one, the logo is way too large. Look at how much space it’s taking up on the screen. That’s what I was talking about. If you have a chunky logo and you add a little bit of padding on either side, there’s going to be a ton of negative space down underneath your main navigation, like menu options. It just doesn’t work. Also, you cannot read the menu because there’s not enough contrast between the photo and the words here. And the background photo is very visually overwhelming.

So if you were to use this exact same layout, I would include a background overlay that’s dark, like a dark black that’s maybe at anywhere from a 50 to an 80% opacity so that those white words will really pop off the screen, and I would totally reduce that logo over to the left-hand side. Theresa, exactly. Can’t read text, bad contrast, it’s the worst.

So here are some additional header navigation menu examples.

• The first example is from Business Insider, so that’s a news site example.
• Abi Connick, she is a illustrator, and she is actually one of my favorite people to follow. She teaches you how to use Illustrator. But she has a very focused menu navigation here, which I think is great, and her primary call to action on the right-hand side, she wants you to shop, which is great and very clear.
• With the Membership Academy, this is a particular website that is only there to convert you into a member or allow you to sign in. So you won’t find any additional menu options here. So depending on what the goal is of your main homepage, you may want to increase or reduce the number of options. So if you are doing something where you’re just trying to convert someone into a member, or a sale, or something like that, just keep it as clean as possible.
• And then on my website, I do have a chunky logo, but I actually have a negative margin on top and bottom. Have to do that with custom CSS, but it does allow me to include that without having too much spacing on the right-hand side. And arguably, I could probably lose a few of those menu items in my footer.
• And then Making Sense of Cents is a content creator, and she primarily writes content and ad revenue, affiliate marketing. Those are her streams of income. And so in those cases, she’s just going to immediately put her silo categories. I don’t know if you guys have ever heard that term before, but essentially, the blog post categories that are going to have a meaningful impact for her ideal clients. So if they want to learn about making money, working from home, she’s got her categories up there instead of having services or blog, that makes more sense for her. So those are some good menu examples.

#2 – An Effective Hero Section

The second ingredient we’re going to be talking about is an effective hero section. Now I’m curious if you guys know what the term hero section is, and also if you’ve ever heard of the term above the fold. We’re going to be talking about that here.

So the hero section is the very first thing that you see on your website before anyone ever scrolls. And I’ve already got the text here, too, but we often refer to this as above the fold. So back in the day when newspapers were the only way we could get content and information when it was folded, that is what you would see. And then, if you open up the newspaper, everything below that was considered above the fold. Well, we use that same language here as website designers. And so your hero section is what your user will see on the screen before they begin to scroll.

In this screenshot you see here, this is part of the DIY Dream Site membership.

And so I have 27 different hero section layouts inside of this template that you can one-click import directly onto your website. And so as you can see from this one screenshot, there’s no one right or wrong hero section layout necessarily. It could be centered text; it could be left or right-centered. There’s a number of ways that you can design it, but the key is just making sure that you have the right things on a hero section. So what would make up an effective hero section?

In this particular example, I’m going to be talking about a local or a service-based business, and I think that’s really important. If you’re here and you have a news site or you’re a blogger, your hero section may or may not look the same as this, but we’ll just go through these together.

Hero Section Photo(s)

So first, it’s got a high quality photo or graphics that are going to give context to your business.

I think this is crucial. Stock photos that are like people cheesing all awkward, that’s not going to build that genuine connection. So let’s just say that… This is the Milo theme. This is one of our Kadence child themes, and this is the hero section for that. So this is an imaginary person. This is a stock photo technically. But let’s say if you were just going to look at these pictures, you would think that this was for a copywriter or someone who takes notes or something like that.

But in the photos, you just want to make sure that it’s clear about what you do based on the visuals.

So you don’t want to have just a picture of a family skipping through a field if you are a dog trainer. You got to have context. If you’re a dog trainer, you got to put dogs in your photos. I feel like that’s pretty straightforward, but some people actually do miss the mark on their photography. Make sure that they’re high quality.

Hero Section Headline

The second thing is you want to have a short direct headline that explains the who, the what, and the how, which we talked about earlier.

And we’ll look at my hero headline example is that mine says, “Helping content creators and small biz owners easily launch your website and build a thriving business online.”

So right there, who, what, and how? The who is helping content creators and online business owners, the what is launching your website, the how is building a thriving business online. That’s the transformation I’m going to help them achieve. And that’s just one small example. We can go into hundreds later.

Hero Section Description

The next part of the hero section is that you want to have a really short description that either explains your business or text that invites them to click your CTA button.

So for instance, I’ll actually show you an example here in just a second.

Hero Section Call To Action Button

The fourth thing I want to share is that you also want to have a clear strong call to action button that potentially can lead to a conversion or go over to a page that will help them get to that conversion.

So let’s talk about a poor hero section. In the comments, tell me what is wrong with this design?

From this screenshot, all we know is that there’s a really beautiful woman on the screen and her hero section says, “Yay, you’re here.” And then we have a little bit of context. It says, “Get your free prayer book.” So maybe she does something in the faith space, but not 100% sure.

This is actually my beautiful client, Rachel Wojo, and she is incredible. I had the opportunity to work with her. She is a Christian writer, speaker, author, and let me show you the after of her hero section.

So her hero section has been improved, and now her headline says, “Helping you cultivate faith to weather life storms, struggling with anxious thoughts. Grab 10 free prayers to calm your heart, plus enjoy our monthly Bible reading challenges.”

What I love about this text is that description text is actually using it to call someone to action. And because she adds the, “Plus, enjoy our monthly Bible reading challenges,” that’s going to communicate, “Hey, there’s going to be a reason to stick around on my email list, not just sign up for the one freebie I’m going to provide to you,” which I really like this language. So it’s clear that her goal of this hero section is to get email list signups.

So I really think that this is a beautiful representation. And because she’s obviously talking about weathering life storms and she writes a lot about grief, it makes sense to have a moving ocean background to really give that additional context. And then we decided to make her photo a little bit smaller. Yes, the CTA button is a lot more visible in this version, Five Figure Lifestyle said that. And Theresa said she has no idea what the business does in the previous version. Yeah, so you can see an amazing difference between the before picture and the after picture.

Okay, so let’s just say another example, since I was really talking about online business owners and possibly local businesses for that top hero section. If your primary goal is to maximize ad revenue, like these two examples I’m going to show you, with a secondary goal of email subscribers, your hero section might look totally different.

So Dash of Sanity is a client we’re launching next week, so here’s a sneak peek at her new design. And so her goal is to again, maximize ad revenue and get people to her recipe posts. So it makes sense to get people into dinner, or to find the dessert recipe that they want, or orient themselves really quickly with a quick icon. But it’s really hard to see in this screenshot, this top bar says, “Get 10 free dinners to cook tonight.” I believe that’s exactly what it says. It’s really small on my screen too.

So if someone clicks on that, a modal will pop up, and people can subscribe to her email list from there. So you can see the primary goal is just jump into my content. I’ve got lots to share with you, but if you also want these in your inbox, you can download those.

Country Now is a country music news site that I designed as well. And similarly, they’re obviously wanting to share the most recent news. So they just want people to jump right into their content, especially since it’s timely. But if you see on the right-hand side of the screen it says subscribe. If you click on that, it will pop up with a modal popup so that someone can actually join their email list and get the news in their inbox.

So I just wanted to show you that the hero section’s not going to look the same. It really depends on your niche and what your monetization goal really or conversion goal is.

#3 – Problem Section

Okay, let’s go on to ingredient number three, which is all about your problem section.

“By talking about the problems our customers face, we will deepen their interest in everything we offer.” Donald Miller said that in his book, Building a StoryBrand. If you guys have not read that book, I highly recommend it. It’s really great, especially if you are an online business owner. And so it’s really important that you don’t just say, “Yay, you’re here,” like Rachel did, and then just say podcast, blog, about. I don’t know anything about that business if that were the homepage that I was trying to read through.

So let me give you some examples of problem sections. And I’ve tried to do my best to include the links to the website so that if you guys want to explore those sites, you can do that on your own later.

But my website homepage says, “Does your current website feel outdated?” And that part that’s underlined. I couldn’t get the movement captured, but I’m using Kadence’s typed text feature, which I love. Thank you so much, Ben, for giving us that awesome upgrade. So that word outdated actually will backspace and will change to stagnant, uninspiring, unorganized, so that I’m able to outline multiple problems that people are having with their websites, without it taking up a lot of space on the website. It’s really effective, and it’s also a lot of movement on the page, so it’s nice and engaging for them to read.

But it says, “If websites aren’t your zone of genius, it’s normal to feel this way. There’s a lot of moving parts to designing website marketing your business online. Fortunately, websites and marketing are my jam and I’ve got just the resources for you.”

So that’s what my problem section is. And if someone reads that and they’re like, “Yes, my website feels outdated,” or, “Yes, it’s stagnant,” or whatever, they’re going to be like, “I’m in the right place. I’m exactly where I need to be. Let me keep reading.” So it hooks them in to the story that we’re beginning to tell and it draws them into the page.

Rachel Wojo, she doesn’t have a big section like I do. She just has a title that’s actually above her services section, which we’ll see here in just a minute. And hers says, “Tired of feeling spiritually overwhelmed?” That is her problem section.

So you technically can have a question here that’s really effective because it’s going to make the visitor think, “Oh yeah, that’s me,” and then it’s like a confirmation and they’re going to keep reading. But you don’t have to. It doesn’t have to be like this negative thing. Kay Kay Yoga says, “You deserve to be in alignment with yourself and life around you.”

So if someone is thinking, “I’m out of alignment,” then this statement here is going to again, affirm, “You’re right, I do deserve that and I need that, but I’m stuck. I don’t know how to get there.” So they’re going to then dive into reading more information about that.

So I love this problem section. If you don’t have it, I feel like a lot of websites miss out on this section, especially if you are a service-based business owner or a local business. I think it’s really, really great to have something like this if you can work it in.

Okay, so this screen that you see, we talked about the first three sections. The header navigation menu, hero section, as well as the problem section.

I typically love to see a website have those three stacked together, but the next ingredients that I’m going to share literally can be moved around as much as you want.

So if you want to have ingredient number eight underneath number three, and ingredient number six underneath number eight, you can mix and match. So just keep that in mind that I like to have these three typically, especially for those service-based business owners. But ultimately then… Sorry, I got distracted in the comment section. But ultimately, you can mix and match here in just a minute.

#4 – Ways To Work With You or Buy Your Products

Okay, so let’s move on to ingredient number four. Next, I want you to make sure that you have a clear way for someone to work with you or buy your product. So this is when the buying takes place. So let’s go ahead and I’ll show you some examples.

So one of the most popular services layouts is a three column format.

So in Rachel’s example from rachelwojo.com, she has her problem section as the title of this section, and then she goes into the info boxes with the icons. So hers is an invitation to join her podcast, an invitation to choose a reading plan, and then also to again join her email list and get those free prayers.

And then the other one is The BlueBird Centre. We just launched her website. She and her team are a team of dieticians in London. And so I work with people all over the world. It’s the best. I love it. So her services are all about nutrition and eating disorders. She just wanted to show the three options so people can click which one that they want best. But that’s not the only format, right?

The Hawaii Vacation Guide is one of my dear clients as well. They’re awesome. They sell Hawaii itineraries, and these are digital downloads.

So they just want to display, “Hey, get a Hawaii itinerary of your vacation planning shortcut, and you can choose which island you’re going to in order to get where you need.” So that’s another way to display this.

If you are a restaurant, your services section is probably a little bit different. It might be just featuring your menu, “Hey, discover our menu, come see what we have,” and then you can either view the full menu in order for you to know what to eat when you come in, or you can click that button to order online.

Another example: I couldn’t leave out Kadence in all of this. I love that Kadence has this section here. It’s like, “Want to build effective websites?” which honestly is a little bit of the problem section kind of mixed in, and you can read more all about this, but then they have that get Kadence option.

But look at the difference in the layout between all of these options. They’re doing the same thing, they’re functioning the same way, but we’ve got to give people a way to buy.

On my website, I don’t have them in one section. Mine are layered together. So it’s okay if you don’t have one section for your entire services.

My first one is all about DIY resources for giving people access to shop the customizable themes. I call them website in a boxes is basically what they are, like design shortcuts. And then underneath that, you keep scrolling down, there’s a few extra sections. Then it’s talking about joining the membership, which is a completely different thing.

But you can see why the visuals that I’ve chosen here, I don’t want these to all be fit together in one section. It makes sense to showcase the themes. It makes sense to showcase all of the value that’s inside of that membership with a little tech stack picture here. And then there’s a third section to work with me directly.

So anyway, I just wanted to show you going back through all of these, that there is no right or wrong way to design this necessarily, but you do want to make sure that you have that ingredient where people can work with you and buy your products.

#5 – About Section

All right, ingredient number five is all about the about section.

So when I say the about section, a lot of people will start to think about your about page. And I want you to know that the “about” section” is not about you, and it’s actually relatively short on the homepage. It’s just enough information that someone can connect with you and learn how you can help and serve them.

So leave out any unnecessary details like, “Hi, I’m Katy. I live in Arizona; I’m a mom…” All of that’s great, but that needs to go on the actual about page because you need to do two things in this about section, and that is to express empathy and authority.

So empathy is saying, “We know what it’s like to experience X, Y, Z that you’re going through, and we’ve helped thousands of people, or we’re qualified to help you because we have all these accolades, or we have this degree, or we’ve helped other people do the same thing.”

So you want to ultimately create a little formula here of introducing yourself and your brand, and then use empathy and authority. “We know what it’s like too, and that’s why we are equipped to help you,” in these banners. So try to leave out all of the personal type details, because at the end of the day, people are only there to learn how you are going to help and serve them. Next, I’m going to show you some examples here.

So you can see mine in the yellow. That is the empathy. So I say, “I know what it’s like to feel frustrated and confused by all the moving pieces it takes to launch a website and market effectively.” And then starting in the green is where I go through all of the authority. I won’t read through all of it. You can pause this video later in order to read it.

Then here’s milestonemom.com.

She does something similar, except she flip-flopped it. So she has her authority piece first because that’s relevant for her industry. Then she has her empathy piece second. She says, “Hi I’m Ehrica. I’m a pediatric developmental therapist, certified teacher, and mom. And I’m passionate about helping parents not only learn different areas of their child’s development, but also figure out what to do if there’s a suspected delay.” And then she goes into, “I know how hard it can be to navigate.” So that’s the empathy piece that she’s added there.

And then Michelle from Making Sense of Cents…

she kind of weaves hers all together where she’s saying, “I started this,” for her own path to basically freedom, financial freedom, excuse me. And then she gives an example right away. For example, she was able to pay off $38,000 in student loans in seven months.

So in this example, she’s not only starting with just introducing and building that connection, but she immediately hits you with that authority. So she kind of weaves those pieces in. But they don’t have to be super long. They can be short and sweet and just get on to the point.

#6 – Social Proof

Okay, number six is all about social proof.

“Social proof is a marketing strategy based on the idea that people are more likely to take a specific action if they see others doing the same thing. If a shopper isn’t sure about your product or service, they’ll often look around and see what other people think about your brand before they make a decision,” according to Forbes.

So there’s lots of ways that we can incorporate social proof. And on this next slide, I’ve got a few examples.

Logo Farm

You can have a logo farm or just a place where you’ve been featured. So you can do an “as seen on” or a featured, or you can even have these little logo…

Visual Stats

Not logos, a little icon section like the second one. So I believe this one is from Trustpilot, if I’m not mistaken. I don’t know if I remember where I grabbed that screenshot from, but this one’s saying, “Trusted by 70,000 active members, 4.7 out of five based on 9,300 reviews.” So this is just showing numbers like, “Hey, we don’t just do this for fun or help our family. We’re doing this for the masses and look at all the people that we’ve helped.” So even just these little snippets of data can be really valuable.

Testimonials

Obviously, testimonials is another way. So you can highlight one testimonial and feature it, or like the screenshot on the right-hand side, you can have a whole lot of testimonials that are showing there.

Okay, this is my client from moneymakingmommy.com. And so Kelly has her about section, and then she immediately includes her logo farm right underneath that.

So when it comes to social proof, you really want to sprinkle this around throughout your website. You may have three or four social proof sections even on your homepage and all throughout your website. So you might have a testimonials.

So in my example, I’ll give you my example. When I go to my website, in between my two services, since I have them stacked apart, I have a grouping of two testimonials that speak to both of those services. So it’s like I sprinkled that in. And then at the very bottom of my website, I also have the trusted by. So, instead of saying, “These are all the places I’ve been featured in,” I say, “These are all the clients that trust me.” And that’s another way to build that credibility because, ultimately, social proof is a credibility builder, and people want to do business with people they know, like, and trust. I’m sure you guys have heard that.

#7 – Grow Your Email List

Ingredient number seven is having some sort of email list sign-up on your page.

So I want you to get your visitors’ email addresses and be able to contact them anytime you want, regardless of algorithm changes. So I’m sure many of you are really familiar right now with the Google helpful content update. I have several clients who got just slammed by, their traffic is just abysmal after this dang update by the algorithms. And so it’s a really great time during times like these to make sure that on your website, you are getting people’s emails long after they’re no longer visiting your website, so you can follow up with them and nurture them. Again, independent from any algorithms that are going on and long after they have left your website.

So there’s a few ways you can do that. The first way is to give away something for free. It is called a lead magnet or an opt-in, in exchange for their email.

The Hawaii Vacation Guide allows you to download their cheat sheets, and if you click on it, a little modal pop-up will appear, and then you could type in your email address. And so they will send that to you via email, and then you’ll be on their email list and they’ll provide additional value until you unsubscribe.

And then on thecookingmom.com, The Cooking Mom is one of my first food blogs I ever did. It was such a joy to work with Amy, and hers just says, “My recipes, your inbox. Join over 15,000 others,” which is another tactic to add that social proof in as well.

So by adding that number 15,000, it’s like, “Oh dang, there’s a lot of people that already enjoy her recipes. I want to be one of them too.” So that’s another great social proof piece. And if you click on that sign up now button, this is the little modal popup that we designed here, and you can see all of that. And again, all of these examples that I’m sharing with you, I literally built in Kadence because Kadence is incredible.

Okay, this is for makingsenseofcents.com, and she just has a subscribe to our newsletter.

She says, “Get valuable financial insights, expert tips, and inspiring stories delivered to your inbox.” I typically don’t like to advise people to do just to sign up to my newsletter, because people really don’t want more news in their inbox. They want to know that you’re going to be there to support them and give value, but Michelle’s the OG of blogging, so it makes sense for her in this case.

But if you’re kind of in the newer phase of your business, I highly recommend doing what The Hawaii Vacation Guide did and give away value in exchange for their email for free. Because this is ultimately their first transaction with you, so you want to make it count and you want to provide that value. So this is another way you can do that. And also, we used a Lottie animation right here for this little thing. So if you actually go to makingsenseofcents.com, you can see all of her animation that we are using for Lottie.

What form fields should you include?

Gary asks, “Do you recommend getting name and email or just email?”

The more form fields that you have on your form, the more friction is there. So, the less form fields can lead to higher conversion.

I would honestly say test it. And do you need someone’s first name? I personally love to have someone’s first name, so I know who I’m talking to and how I’m building a relationship with them because I do read my emails when people reply. So I want to know who I’m talking to and all of that, but it’s not necessary. And a lot of marketers don’t really care to include their first name. They’ll just say, “Hey,” and then comma in their email list instead of using their first names and personalizing. So it’s really a personal preference, and also maybe worth testing because you may increase your conversions on that depending on whether that name field is there or not.

#8 – Feature Your Best Content

Okay, let’s move on to ingredient number eight, and this is to feature your best content. So blogs, YouTube videos, or podcasts. If you are not currently doing this, then obviously omit this, but I highly recommend that you do start content creation. It’s a great way to get some organic traffic, especially if you can rank or you can build some traffic to those places. So here are some examples.

So Rachel Wojo, hers said, “The latest from Rachel.” It’s a picture of her podcasting, that’s her primary resource, and then she’s got her episode names that are flowing in here. Also, I’m going to go down on the screenshot. This is from poshpennies.com. She has a section on her website that’s talking about, “I love finding all the best decor deals online.” We have a little feature of the little couches, and then she’s featuring her posh picks is what she calls them, the Making Sense of Cents. There’s another grid of blog posts. There’s 100 ways you could design these, but ultimately you want to get your best articles in front of people.

And also if you want to make sure that if you have a… I’m going to go kind of an advanced tip here. Domain authority is an arbitrary number, but it is helpful. So if a lot of people are linking back to your main homepage and you want to push some of that domain authority to some of your main blog posts, I highly recommend actually individually linking which posts that you want people to see here. That’s also a great monetization strategy, especially if you’ve got some really high converting affiliate posts in there. So instead of just letting it be a most recent blog role, actually curate this section so that it’s the most helpful information, makes you the most money, things like that.

The other thing I was going to say is if you are a local business and you’re thinking, “I don’t know about blogging,” answer your customers’ frequently asked questions of blog posts. And then as soon as they click into it, they’ll read a whole thing, and you can provide more calls to action either in the sidebar or throughout your content in order to take that next step and become the customer.

So if there is a question in their mind and you can address that right there on the page without them having to call you or anything like that, boom, get their answer, and then they convert, then that’s a really great resource to include on your homepage.

#9 – Final Call To Action

Okay, ingredient number nine is your final call to action. So I like to say on every page, don’t let there be a dead-end road. Don’t let someone get to the end of a page on your website and be like, “Cool. All right. I’m leaving this website.” So when you can, include a final call to action.

This is a nonprofit website from impactfrance.org. This is one of my clients, and theirs says, “Will you stand with the French?” And then I’m going to read the second sentence says, “Let’s unite and allow Jesus to shine his light through French believers. Learn how you can join us and share Jesus’ light in France.” And then there’s two buttons. You can support a French ministry, or you can get email updates. And then it goes into the footer, which is the junk drawer.

So I don’t have a ton of examples. I just wanted to show you this one. I think you’ll get the picture of this. But have that final call to action and make sure that people know, don’t leave without doing the one thing that you really want them to do.

Bonus! #10 – Footer

This is the bonus. So this would make number 10 if we were calling it ingredient number 10, but don’t forget about the footer. Again, this is like the junk drawer of your website. It provides an additional way for your users to navigate around your site. So this is where you want to put your social media icons. This is where you want to put all of the places.

So, if you are a content creator and you have a lot of categories, put them all down here so people can easily navigate. If you want it to be really slim and small, that’s fine too.

Should I include my Instagram feed in my footer?

I know a lot of people ask me, “Should I include my Instagram feed in my footer?” And I would say 100% depends on your strategy. If social media is one of the primary ways that people find you, then it makes sense. Otherwise, I think it can be a distraction. And when someone gets to the bottom, instead of doing your call to action, they might wind up going over to social media. And again, they bounce, and you lose them, and you miss a conversion.

So I would say only unless social media is one of your primary marketing strategies and you’ve got solid funnels in your social media accounts, then I would put it in the footer. But a lot of people would do it just because it looks pretty. And my philosophy is we’re not here to build pretty websites. We’re here to build connecting and converting websites, or websites that connect and convert.

9 Ingredients Recap

So let’s recap all of these together, ingredients for a successful homepage. And you’ll see the straight line. I typically like to advise that those are all together. So like the footer and the first three, those that have to be in that order. And then all the other ones, sprinkle it around like confetti, move things around in a way that works for you.

1. Clear visible navigation
2. An effective hero section
3. A problem section
4. Ways to work with you or buy your products
5. About section that expresses that empathy and authority
6. Social proof to build trust and credibility
7. Your email list sign-up
8. Featuring your best content
9. A final call to action
10. Your footer (also known as your junk drawer).

The Process For Building Out Your Home Page

Let’s now talk for just a second about what that homepage process looks like. Now you know what goes on the homepage. Well, what does that look like?

1. Step one, you need to outline and wireframe and I’ll talk a little bit here about how I do that.
2. Step two, then you need to write all the content, gather the photos, get at everything that you’re going to need in order to go into the design and the build phase.
3. Step three, you can build your design on your WordPress website.

One thing I see, especially DIYers, a mistake I see DIYers make a lot is that they wind up just opening up their Kadence builder and they’re like, “Great, I’m going to build my homepage.” And maybe they’re looking at a template or something like that, but then they’re trying to squeeze their content into this template or just staring at a blank page. And I really want you to work on your content or your strategy for conversion and connection off of the website builder. So do that first. So let’s talk about what that looks like. Remember, content dictates design, not the other way around.

So you can do wireframing. There’s a picture down here that’s showing you what a real wireframe looks like. It looks just kind of like a grayed- out version. You can’t really see text. We just know the title’s going to go there. We know a button will be here. There are really cool tools that you can use, fancy tools like Adobe XD, and Figma, and all of that. But most of my clients aren’t ready to learn a tool like that.

And so I just tell them to go open up a Google Doc, like what you see on the right-hand side. If you see a hero section that you like out in the wild and you’re going to build your own website from scratch using Kadence, you take a screenshot of it.

So this is one of my hero sections that are in my DIY Dream Site library. So I used this and I built this for my own business if this were what my website looked like. So I had a picture of a website, a picture of myself, and then I have my title. But as you can see down below, there’s this little table. You can see title goes here, sub headline goes here, button text goes here. So this is a good way to just get your ideas going like, “Okay, how do we want this to look? How would I wireframe this in a table format?” Even just basic text is fine. Just get the flow down and going. Then come back after you’re happy with the flow of the layout. Then go back and actually add your title, actually work on that description, actually put all of your about content, etc. in there. So going back, then you would go into the design and the build phase.

So you can design and build in Kadence either from scratch, or you can use the built-in templates that Kadence provides.

I am super grateful for everything that they offer. If you are a beginner, you can really build a website for free using Kadence. It’s incredible. They’re very generous with the amount of tools that they provide for free. So get started just by using their design library and using one of their starter templates.

But if you’re going to use one of their starter templates, customize it based on the content you created. So you might need to move sections around, or customize a section, but it’s a great way. A template is a great way to have a starting point and not have to build completely from scratch.

If you want even more resources for templates and things like that, diydreamsite.com like I mentioned before.

We have Custom Child themes. Or not custom, sorry. We have Kadence child themes, and we are just getting started with building our shop. We’ve got two in there now around Black Friday. We’ll have two more in there. We’re going to have a new style site as well as a food blog site, a theme in there coming around Black Friday. And also, you can access the membership.

So if you already have a theme and you’re happy with it, and you just want more templates, tutorials, and coaching to build your site, then that’s a great place to get even more design shortcuts.

So I know that child themes are not required with Kadence because of the way that they’ve built the tool. It’s really incredible actually. But if you want basically a website in a box or a design shortcut, that’s really the main reason to get a child theme. So anyway, I just wanted to share that additional resource. These are not free. These are paid resources, but I’d be happy to help you guys figure out how to DIY your own website if that’s for you.

And then my last thing I’ll share is that if you did want to work with me.

Again, you can work with us on those DIY resources I just talked about, and you can also hire me and my team. And if you need us to restyle one of your themes, so one of the themes that are in DIY Dream Site, we’ll do the whole setup and walk you through the whole process of… Kind of like a custom site, but we’re going to start with the theme design instead of having to build from scratch. And I also do custom design projects for clients too, and I also have a bunch of free blog posts. You can join my email list to get tips and updates as well.

So I really, really hope that you guys found this really valuable, and that’s all that I have to share with you guys today.

Share this post or save it for later!