Transcription
Making a website that actually gets leads for your business is very different than it was even four years ago. I've made a living creating winning websites for service business owners for over 10 years, and the same old layouts can get stale. When your website looks like just any other one of your competitors, your leads won't remember you, and you can kiss landing that new client goodbye.
So, in this video, I'm going to show you nine brand new website layouts, how each works smarter, not harder, to attract and convert more casual browsers into leads, and how you can make them work for your business with plenty of real examples. But before we get to the layouts, we need to talk about the one section that'll give you the biggest bang for your effort—the one section that, if you get that right, you're 80% of the way there. It's what we call the hero section. It's the one that's at the very top of just about every homepage you've ever seen, and it has to let people know exactly what you can do for them, how that's going to help them, and how they can get it.
If you get this section wrong and people can't really tell what you offer or why you're any better than your competitors, they usually won't make it any further down the page. For that reason, we're going to be focusing on the hero section here and nine different ways that you can lay it out in any situation.
So, let's start off by looking at a typical hero section. They typically include a headline, a subheadline, a button, and an image. The image can be behind the text like this, but as you can see, it's a little hard to see the image behind it. Sometimes it can be hard to read the text on top of it, so I generally don't recommend this kind of layout anymore. If you're going to still want to go with a basic hero layout, something like this is a lot better, where you've got all the information people need to read off to the left and then your image is off to the right.
You don't generally want to flip-flop these because, in most cultures, people read from left to right. There have been a lot of studies that show people's eyes first go to the left, and this is the most important stuff, right? The words you use are going to sell people more than the image; the image is just there to kind of help you out. This is the kind of treatment I go for more these days. Not only does it look cleaner, but it just works out much better when it all has to shrink down for mobile too.
So, those are the two most typical layouts you're going to see. But now, let's take a look at how we can switch it up a bit so you can stand out more and maybe include a few more elements that can help you convert even better.
So, let's go to our first layout. This one is interesting because it really lets you showcase social proof, which can be really important for a lot of businesses. We have a place for a headline; you could even put a subheadline under here. But over here is where you can do a five-star rating and show some pictures of real people you've worked with, or if you're a business-to-business, they could be logos of companies you've helped. And then, of course, we need to have the call-to-action button; we can never forget that. We still have a place for an image that helps us kind of tell the story more visually.
I like this layout. Let's check out what it could look like for a real website. This is for a fictitious HR consulting company, just showing you how this can look when you actually do it right. I've actually added a little subheadline here; I always like to have that because what I like to do is have the headline really be about the result that you're going to get somebody, and then the subheadline is more about how you do that—what do you actually offer? This is just a nice, clean-looking website, and it does the same job that a typical layout does that you see all the time, but it adds this element here, which is definitely a bonus.
All right, let's take a look at our next one. What I always recommend when you're going to include an image in your hero section is to show what I call "happy customer images," meaning you're showing people who are showing that satisfied after state after they've already worked with you. It helps people just connect and kind of see themselves in it. The problem is sometimes one image isn't really going to cut it, right? Maybe you've got different types of people you work with; maybe you work equally with men and women or young people and old people.
So, this layout right here actually lets you add in multiple versions of different client avatars. You could do that, or you could show multiple services you offer. This is really versatile. So, what we've got here is we still have the headline—you always need that—then the subheadline here and the button, and now we just have a place to show multiple people.
Let's take a look at what this could look like for a real website. This would be for a tutoring business, and if it just had one image, maybe of a male student, then the female students might feel like it's not for them, and vice versa. In this case, it's like high school age, maybe college age, and then more like elementary or middle school here, so it can show that they work with different types of students. That's why I like this one in particular.
In our next one, we have another version where you can add different elements. This one right here you could handle in a few different ways. You could show, again, three different images of different customer types or show off three different services. But what I would like to do here instead of that is show one great image, and then you can use these slots for things like social proof. You could have a little mini testimonial; you could have a little statistic of how many people you've helped; you could even show how many five-star ratings you have on Google reviews or Yelp or that kind of thing.
So, there's a lot you could do with this one, and then you also have this kind of secondary call to action. Sometimes it's a good idea to have something like that; not everybody is going to want to click through and book your service right away. Maybe you want to send them to your testimonials or to your pricing page or something like that.
Let's see what this could look like for an exterminator company. It just goes to show you don't always have to use a photo; you can use illustration sometimes, and that can go a long way to giving your business a little bit more personality. But in this case, we have a nice testimonial here and then a statistic of how many people we've actually helped, and then this is going over here from our clients that would be getting people over to reading some testimonials for some extra social proof.
Here we've got kind of a combo platter; it gives us room to show again either two images of two different customer types or an image and a stat of some kind, and then we also have the social proof. So, there's a lot you can do with this one, and it doesn't feel overwhelming, right?
So, let's just see what this could look like when you do it right. In this case, we have an image of a happy customer, and then this is interesting. Rather than just showing a stat, it's a screenshot of an actual result that this person has gotten. There are all kinds of little things like that you can do to basically show, not tell, the kinds of results you get for people. And then, of course, we have the images of happy clients and then a little click-through to read some of their stories as well. So, it's another case of sending people to read more testimonials. This works great if you have a lot of them and a lot of case studies from clients who you can kind of tell that start-to-finish story of here's exactly how we helped someone like you.
All right, next up we have... So, this one's interesting. I don't always recommend a treatment like this, but there are some businesses where it makes sense just to give people at the top, "Here's what you need to do to get started." You know, right off the top of my head, I'm thinking kind of more utilitarian businesses—plumbers, locksmiths, that kind of thing—where people don't really need to read a whole lot; they're just kind of in a hurry and they need to get going. But this is a really good way to do it. You still have the headline, subheadline, and a place for a nice image just to kind of make it come to life a little bit more, but then you've got the form where they can just fill it out right here. If they're not ready to do that, they can still go down the page and get more information.
I would recommend having another version of this maybe at the bottom if you're going to do it that way, but let's see what this could look like for real. In this case, it would be for a realtor, but it just looks nice and clean, and it's a really elegant way of letting people kind of get started without having to go through your whole page to get to the good stuff if they don't want to.
This one is cool if you have multiple services you offer or if you want to show off different results that people can expect when they work with you. So again, we've got the usual kind of elements here, but then right here underneath it, you can put in your different service offerings, or this could be something like, you know, earn more money, save time, results like that. So, this can be very versatile, actually.
And this one has two different buttons. It has a primary call to action, so what you'll notice here is the primary call to action is styled more like a traditional button, right? It's got a color to it, and then the one next to it that's meant to be more of the secondary call to action is treated secondary visually too. So, a little designer trick to know there—we call this a ghost button. It just kind of has the outline around it, and it's a great way to give people kind of another option. If they're not ready to take action now, they can go learn more; they can again read reviews, check out your pricing, anything like that.
And then we have room for an image underneath it too. So, let's check this one out. This one would be for kind of a marketing agency. Showing something in an iPad like this with graphs and results can be great, especially if you're B2B and you want to show people kind of an actual screenshot of results you've gotten for people—again, showing, not telling. You'll notice too that I've carried through with the hierarchy of showing that this is the button you're meant to click; this is the other button if you're not ready yet, but this one definitely calls for the most attention on it.
All right, next one. So, here is another way that you can show off if you have multiple images to show. Again, if you have multiple customer types, if you have a more visual type of business, like maybe you're a graphic designer or a contractor or interior designer, and you really want to show off your work first and foremost, this is a great way to do it.
So, let's check out an example of that. This would be for an interior designer, and obviously, when people are coming to a website like this where they want to see the goods, you got to deliver on that. You kind of have to show them a good variety right away because a lot of times what people do is they'll just show one image, one representation of their work up top. The problem is if it's not your style, right, then you're just going to hit the back button and go on to one of your competitor sites.
So, this way, you get to show a good variety at once, but again, this could be showing different people too. It's a really versatile layout, and one thing too, if you know what you're doing, I've seen this before where you can actually have these images kind of scrolling up and down—that's a pretty cool treatment too.
Okay, I love this one. So, here's another one where, let's say you want to show off different services; you want to make sure people know that you offer this, this, and this, or again, if you have three different really compelling results that you can promise your clients, this is a great way to do it. So, we again have the headline, the button, and then this little box that allows you to show that at a glance before they even have to scroll down.
Now, the one thing you do want to be careful here is this is meant to be kind of an image behind it. It doesn't have to be like an image of a person; I generally prefer those types of images, but it could be, you know, what you've seen on a lot of modern websites—just kind of a cool color gradient or something like that. But in this case, we have a person image, but I was really careful to make sure that it works right. The background's dark, the text is light. I mean, it's a little overlapping on his chin a tiny bit, but you can mostly see exactly what's going on.
And here's another kind of designer trick too—this is no accident. See where he's looking? He's looking basically at the words. This is something that they've done a lot of studies on. Whenever you want to use an image of a person, if you can have their eyeline going to the text that you actually want them to read, people will do it. People will follow their eyeline, so I like to use that as a trick.
In this case, we just have three different accounting services so that people, as soon as they get there, get, "Okay, he does tax planning, bookkeeping, and he can advise me on my business." This is what we call Bento design. So, if you've ever gotten a Bento box, it's that little tray where it's got different little compartments for different foods. So, obviously, you can kind of see the reference here, and I like this one for a different kind of treatment for, again, if you want to add different images of different people, different statistics, social proof, showing how many reviews you have, like an actual testimonial—it's really customizable what you can do here.
This is only showing three compartments, but I've seen it to where there's more. I wouldn't go overboard and start adding too many because then the eye doesn't really know where to look, but we've kept the headline, the subheadline, and the button.
So, let's see what this could look like in a scenario. Here we've got a nice hero image and a statistic of how many clients or the success rate for their clients, and then a testimonial. This could just as easily be an image, another image, and then a testimonial too. So, there are so many different ways you can do it, and what I like about this kind of treatment too is it's so modular. Everything can stack really nicely when you have to kind of shrink it down for mobile. You can even say, you know, maybe this one's not that important, so we're just going to eliminate it for mobile, right?
So, I like the modularity of it. Is "modularity" a word? I guess, but I like that you can just kind of pick out things, stack them in a different order on mobile, or eliminate things altogether.
But of course, the hero section isn't the only part of your website. You know it all has to work together if you want to turn your traffic into paying clients, right? So, I want to help you out with all of it in my free on-demand masterclass, "How to Build a Client-Generating Website That Sells Your Services for You." In this training, I'm going to show you everything your site needs to include and what you definitely need to remove now to make that happen.
So, click right here to save your seat, and I'm going to show you every single step to get it just right. Click here, and I'll see you on the inside.