Summary
- Making a website that gets leads is different now than it was four years ago.
- I've been creating winning websites for over 10 years, and old layouts can get stale.
- If your website looks like your competitor's, leads won't remember you, and you'll lose new clients.
- Focus on the hero section; if you get it right, you're 80% there.
- The hero section, at the top of every home page, must show what you can do, how it helps, and how to get it.
- Typical hero layouts have a headline, subheadline, button, and image.
- Avoid layouts where the image is behind the text as it can be hard to read.
- It's better to have text on the left and an image on the right since people read left to right.
- Using social proof like ratings and pictures of happy customers in the hero section can be very effective.
- Including multiple images can show you work with different types of clients, making everyone feel included.
- Consider using a layout with social proof elements like testimonials and statistics to boost credibility.
- Show actual results with screenshots or detailed statistics to build trust.
- For utilitarian services like plumbers or locksmiths, a simple form in the hero section can help people take immediate action.
- Display different services and results right in the hero section to let visitors know what to expect.
- Use a primary call-to-action button styled for easy visibility and a secondary "ghost button" for less urgent actions.
- For visual businesses like interior designers, showcase multiple images to cater to different tastes.
- Use a design where a person in the image looks towards the text; this makes visitors more likely to read it.
- The Bento design can keep your layout organized and modular, making it easy to adjust for mobile.
Video
How To Take Action
I would suggest implementing some easy, high-value changes to your website to help attract more leads and clients. Focus on the hero section, which is the first thing people see on your homepage. If you get that right, you’re mostly done.
Start by crafting a clear headline and a subheadline that tells visitors what you do and how you can help them. Keep the text on the left and an image on the right because people read left to right. Avoid putting the text over an image as it can be hard to read.
Using social proof can greatly improve trust. Add logos of companies you’ve helped or pictures of happy clients. For example, if you're an HR consultant, show a five-star rating and images of happy clients. This shows visitors that you can deliver results.
If you offer multiple services or cater to different types of clients, add multiple images to the hero section. This can make everyone feel included, whether they are young, old, male, or female.
Consider including a form in the hero section, especially if you offer services like plumbing or locksmithing. It saves people time and reduces the steps needed to contact you.
For more visual businesses like interior design, showcase several images. This caters to different tastes and can capture a broader audience.
Don't forget the call-to-action (CTA) buttons. A primary CTA button should be styled prominently, while a secondary "ghost button" can serve less urgent actions, like reading more or pricing info.
By organizing your hero section with clear, engaging elements and focusing on presenting social proof and multiple images, you’ll make a more memorable impression on visitors and increase your chances of getting leads.
Quotes by Wiki Wayne
"making a website that actually gets leads for your business is very different than it was even four years ago"
– Wiki Wayne
"I've made a living creating winning websites for service business owners for over 10 years"
– Wiki Wayne
"when your website looks like just any other one of your competitors your leads won't remember you"
– Wiki Wayne
"the words you use are going to sell people more than the image"
– Wiki Wayne
"what I like to do is have the headline really be about the result that you're going to get somebody"
– Wiki Wayne
Full Transcript
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 and 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 and it's what we call the hero section it's the one that's at the very top of just about every home page 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 them and how they can get it so 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 so 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 so they typically include a headline a subheadline a button and an image so the image 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 um if you're going to still want to go with a basic hero layout something like this is a lot better now where you've got all the information people need to read off to the left and then your image is off to the right and you don't generally want to flip-flop these because in most cultures people read from left to right and there's been a lot ofu 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 so 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 so this one is interesting because it really lets you showcase social proof which can be really important for a lot of businesses so we have a place for a headline you could even put a sub headline 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 businesso 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't never forget that we still have a place for an image that helps us kind of tell the story more visually so I like this layout let's check out what it could look like for a real website so this is for you know a fictitious HR Consulting company so just showing you how this can look when you actually do it right so I've actually added a little sub headline 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 sub headline is more about but how do you do that like what what do you actually offer and 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 you know 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 uh different types of people you work with maybe you work equally with men and women or young people 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 you know 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 sub headline here and the button and now we just have a place to show multiple people so let's take a look at what this could look like for a real website so this would be for a tutoring business and if it just had one image maybe of you know a male student then the female students might feel like it's not for them vice versa and in this case it's like high school age U maybe College age and then more like Elementary Middle School here so it can show that they work with different types of students so that's why I like this one in particular in our next one is another version of where you can add different elements so this one right here you could handle it 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 you know 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 you know 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 so let's see what this could look like for an exterminator company it just goes to show you 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 you know reading some testimonials for some extra an extra hit of social Pro 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 you know 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 um when you do it right so in this case we have an image of you know happy customer and then this is interesting so rather than just showing a stat it's a screenshot of actual result that this person has gotten so there's 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 um 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 the headline sub headline in 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 and if they're not ready to do that they can still go down the page and get more information um 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 so 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 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 you know 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 called action is styled more like a traditional button right it's 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 it's treated secondary visually too so a little designer trick to 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 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 they can 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 so this one would be for kind of a marketing agency so and this kind of treatment showing something in an iPad like this with like graphs and results can be great especially if you're B2B and you want to show people like kind of an actual screenshot of results you've gotten for people again showing not telling and 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 it this one definitely calls for the most attention on it all right next one so here is another way that you can show off um if you have multiple images to show so again if you have multiple customer types if you have a more visual type of business like maybe you're a graphic design designer or you know a contractor 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 so this would be for an interior designer and obviously when people are coming to a website like this where they want they just 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 represent 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 so um it's 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 you know 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 your clients this is a great way to do it so we again we have the the headline in 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 doesn't have to be like an image of a person I 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 a cool color gradient or something like that um 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 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 so 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 um I like to use that as a trick and then in this case we just have three different um accounting services so that people as soon as they get there they 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 sub headline and the button so let's see what this could look like in a scenario so here we've got a nice hero image and a statistic of how many clients or with 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's so many different ways you can do it and what I like like about this kind of a 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 you know eliminate it for mobile right so I like the modularity of it it's modularity 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 Al together but of course the hero section isn't the only part of your website you know it all has to work together if 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 onDemand Master Class 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
