Website Hero Section Improvement – Hero Section Tutorial by Thomas Digital

Website Hero Section Improvement – Hero Section Tutorial by Thomas Digital

hey this is Victor hope you’re doing
well okay so in today’s video I wanted to talk to you about your website’s hero
section so your website’s hero section is the the very first thing you see when
you come to a website is the big typically it’s an image above the fold
on the home page of your site and most people don’t really understand like what
the purpose of this is for you know like what are some things that you should
think about when you’re setting up your hero section and kind of like how to
think you’re over your hero is like the main advertisement or the main first
thing that people see it’s you know like there’s an 80/20 rule with everything
well your website’s hero section is definitely like one of those things
we’re like you should really spend an inordinate amount of time thinking about
your hero section rather than kind of all the other elements of your site
because that’s gonna be like the very first thing that most people see when
they come to your site so I’ll share with you some of the best practices some
of the things that we do on putting together hero sections for your site so
let’s watch okay so let’s take a look at some hero sections and just let me give
you kind of my thoughts on things that you might want to think about when
putting together a hero section and kind of best practices and and that type of
thing so the very first thing you should think about when just like putting
together your hero section is understanding like this is like the
headline for your website you know one thing I study a lot of is direct
response advertising and so that’s people who like used to send stuff in
the mail and now they do it through you know internet marketing but they would
you know sell stuff and if they didn’t sell it that one time like that was
their big chance and so they would spend an inordinate amount of time thinking
about the head the the the headline of their their piece and like they would
split test that and work on that forever and so kind of your hero section is like
that headline like if you thought of it as a sales letter that’s the main thing
and the main purpose of the headline when it came to direct response is just
to get people to keep reading right you can’t you can’t buy something if you
don’t keep reading the letter so the very first thing was just to get people
to stay there so you know one thing that most people see when they get to their
website is when when they get to their Google Analytics on their website I
should say is that they see their bounce rate and their bounce rate is how many
people like come to a site and then just hit
the back button and then don’t do anything else right and so and it’s it’s
huge typically you know with people there’s like something like 80% of most
web sites they stay for less than 10 seconds sometimes it’s as much as 90%
for most of the clients that I see and so your your headline your hero section
here is your big opportunity to kind of change that and not have people kind of
bounce out without seeing you so let me give you some thoughts in terms of like
what I do with my clients for kind of making engaging and you know engaging
and active like that with strong calls to action where they wanted people take
action on the site that kind of thing so so here’s my own site here and so you
know our thing is you know there’s there’s two ways to think about number
one there’s like what’s the message right and if all the things you can
think about I would say this is the most important thing is you want a clear
strong message to have people take a next action or at least be curious right
so in this particular one I’m saying I have a free my free custom mock-up
anyone who comes to the site you know they’re looking for a website hopefully
that’s something that would be interesting them and intrigue them and
want to kind of have them take that next step right so the very first thing is
what’s the thing that you’re saying and it should definitely relate to like the
needs of the people who are coming to the site right so you’re gonna think
about you know one of my favorite marketing sayings is you know people
don’t want to buy drills they want to buy quarter inch holes they want the
result they don’t care about you they don’t care how long you’ve been in
business they don’t care about you know even your reviews on Yelp only to the
degree that it builds critic credibility but what they care about is the problem
they have in the result they want and so your headline your main offer has to be
something that makes it clear and easy to understand that you do the thing that
they’re looking for they don’t want to be confused when they come to the site
they want to know okay this is this person does the thing I’m looking for
and then if there’s a compelling offer there’s something you can give them for
that even better but at least make it clear a lot of people get caught up in
being too cute to fancy or whatever and like that’s just like the wrong way to
do it and then you have like your actual hero image right behind you the thing
that you do it and so typically there’s a few things you can
do so you can either have a video like I have here you can do a slider where you
have like a slider sliding through here or you can just have like a good old
static image so if you go to like a stripe comm this is just a static Hiro
section there’s no slider there’s no video and you know the kind of there’s
benefits to all of them so let me explain like why people do kind of each
one of those and what you know what will the reasoning be would be and why you
might want to do one for for like your particular site like what would be best
for you okay so with the video I like video
what’s cool about a video is you can tell a story so like in this this
example here I’m doing a free mock-up and then this is a video of a guy you
know drawing a mock-up and then there’s a person coding a website and then the
the third video is someone receiving the mock-up where they’re looking at the
finished product right and so it’s kind of telling the story and tying into this
you know free custom mock-up here’s another company this is called
infinity fuel we did them and they do like batteries that work in outer space
and underwater and we happen to find this amazing video on iStockphoto where
it shows it starts off in outer space it goes all the way into underwater and it
says power at any altitude so they provide battery fuel cell storage in
underwater and in outer space so it just kind of works out well that this is kind
of telling that particular story right here’s another ones that batini
where you know there are a family office they own a lot of commercial real estate
in San Francisco and this is a very cool kind of over I don’t know if it’s a
drone but it’s a stock video of above the sky in San Francisco and that you
know number one it looks really cool and that’s a perfectly good reason to have a
hero video as long as it’s engaging and ideally relevant to the thing that
you’re you’re trying to say so one is a video challenges with videos that
sometimes they run a little slow it’ll make your site load slower so we did a
special we did a different video on like how to load a hero video fast every time
and so be sure and watch that video because it’s totally relevant and it
will help solve that problem but that’s that’s
the idea with the video it’s cool it’s engaging for right now it’s like you
know still kind of new not everyone has one so it’s kind of fun people like them
so that’s you know there’s some novelty aspect to it so that’s that’s one idea
another one is just the good old static this is what you’re gonna see and so you
know obviously with stripe and a lot of you know kind of these other big
companies they just have one thing this is the first thing you see and that’s
kind of all you’re gonna see and you’re really directing people’s attention you
know when people come to the site you have to think about like what’s the the
visual hierarchy you’re you know what’s the first thing they’re gonna see what’s
the second thing they’re gonna see and what’s you know kind of what’s how is
that gonna go down and you want to kind of think about that when you’re putting
together your hero section you want to make it clear and easy and so sometimes
you just want a static you know kind of no-nonsense we did that here where you
know kind of this is the only thing they’re seeing and that’s it now this is
a good example of kind of what not to do as well so there’s two things that
looking back at this kind of our problems and the these are big problems
that typically show up in hero sections so one of them is when you have text
over a busy image background like you see here right it makes the text very
very hard to read and so like I would not recommend using this image again for
this text there’s a the only other way around it is to make the text really
really big which I’ll show you an example of in a second and then the
other thing is just think about here how your hero section will look across
multiple width so for example this is what it looks like on a regular desktop
but on widescreen it doesn’t quite look as as good and this is kind of a little
bit proportionately a little bit off to the right
I was looking where is it here yeah so this is like my wife’s website and so
one thing is is like it looks again this is just a static image right and this is
kind of telling a story clean statement of purpose that’s it and then it looks
kind of much better here on regular but when I when you look at on widescreen it
kind of goes over the baby’s face a little bit
and that’s not as good what you really want to do is whether it’s a video
whether it’s a static image you want the text to be either in some kind of
negative space so that you can read it or you want to have some kind of
background you know behind the text or what we do a lot is do some kind of an
overlay so for example example going back here to the Sabatini say like this
site here there’s an overlay overlaying the text it’s like some kind of a dark
filter that then makes it hard to see yeah I’m probably not gonna be able to
find this right here but I assure you there’s an overlay that makes all of
this darker and so that’s kind of one of the challenges that people have is you
know they want to have like a bright image but then you have to kind of
overlay that thing to make the text visible so that’s another thing to think
about other things to think about as well oh so let’s finish with the slider
okay so why would you have a slider so one of the biggest challenges with a lot
of websites in general is that you know there’s a person you know the way I
think about a website there’s a person they’re looking for something there’s a
next step they want to take and and my job is to help identify you know who are
those different types of people what is it that they’re looking for and so you
know in a non-profit for example you know there’s different people there
people looking for different things so in this particular one that have camper
ships they have scholarships they have they want to share about like you know
the history people who are interested in going and then they might have like
specific announcements like things that they want to share that are topical and
so that’s a reason to have a slider or another reason might be you know they
have different areas of expertise or specialties where they want people to
kind of pay attention to it this is a good example of like bad contrast here
you can’t see the text that there’s actually it looks better here
right on regular screen but then when you go to widescreen then all of a
sudden this half of the text here becomes invisible so that’s always
something to think about yeah this is a good example of the overlay so here’s
you know kind of there’s a video it’s kind
sharing about small businesses and then there is a tax but it the only way you
can read it is with this over life it wasn’t there you wouldn’t be able to
read it okay so that’s that other things to think about our buttons like so do
you want one button two buttons no buttons there’s no right answer but you
you always want to make it as like call to action as possible right and so in in
my example there’s people the way I think about some people will just want
to read so when you click one more it’s just gonna go to start reading verses
some people you know like want to watch a video so in this particular instance
it goes to a pop-up video that tells more about that thing which I think is
fine I think where it gets a little problematic is we have two separate call
to actions uh that are different but sometimes you have to like for example
here on the tracker Corp like the problem with them is they have like two
major brands that are different that the i9 brand and the immigration brand and
they really want to make it clear that you can do either so in this particular
example they really do need to have these two buttons here because otherwise
you know people when they come here the very first thing I want to know is that
they already know about the company they already know about the brand and they’re
just trying to find the right place and so this is where they would need to go
this is also another example some people kind of get freaked out with this hero
section and they want it to be like as short as possible so they can kind of
shove more stuff in here underneath and like that’s not always the way I would
do it the way I like to think about it is I like to have one thing at a time I
think most people know how to scroll these days so this notion that
everything has to be above the fold is kind of no longer as relevant or as
useful anymore so that’s some thoughts there
let me see you some thought okay so yeah this was another example so where you
see like the text is hard to read over this image now if you look here at what
we did initially we had the text really really big here so it was you know you
could actually see it and it was it makes sense but when you have it like
this and you have like much smaller text then it’s going to be much harder to
read other things you could do you could have like an actual form
of the fool that’s definitely something that people can do again you want to
make sure that you’re able to focus on this is the first thing I want to read
learn more there’s a arrow pointing here and then it’s going to a forum again
this is a good use of negative space so you’re using an image but it’s got big
text here it’s got a negative space here with the background it’s just kind of
neutral and you’re seeing this first then the Golden Gate Bridge it all kind
of makes sense right let’s see here yeah this is another example of a slider
where they have like you know different use cases that they want to highlight
here and so this is where you would kind of want that slider and again there’s
like news and information directly above the fold as well that’s something to
consider so the other thing I wanted to do is I just thought those are all like
my sites I just randomly googled dentist Oklahoma for the purpose of just kind of
doing some random reviews and seeing if I could kind of give quick critiques on
things people are doing just to give you some ideas out like what works what
doesn’t work for a hero section so I’m don’t know any of these people and
please take no offense so so this site here you know it has the video it I
would like it better if they had some kind of headline I feel like this logo
section is taking away from everything and yes it’s kind of trying to tell you
something but the watch with sound is a little bit not too clear and it just
feels a little busy like I really don’t know what I’m supposed to be looking at
and so I feel a little bit disjointed like looking at this video this one here
was interesting um it says you know a different dental experience it has the
overlay so you can read the text better it does have a call to action to the
video but the video in the background is telling the story and it seems to me
like there’s a it’s all about personalization it looks like these
people care there’s everything here is all about you know kind of the
experience and that there is engagement here and so I think this works I would
say yes to this hero video this is another good clear call to action if
people smiling you have you know the name of the company here I’m sure
they’re trying to do some SEO here with the north
okay see and you have the call to action of making an appointment with a button
or phone call Yelp reviews like this all looks like very good kind of marketing
driven stuff here whereas this one here this looks okay it’s not ugly but it has
the text in the negative suits but it doesn’t have a strong call to action
it’s not nearly as is it’s not going to drive nearly as many conversions as that
other one I just showed so and it just kind of has like yeah you can do this if
you want but where the other one is like call us right now and here’s why you
should do that so I like that better yeah this one here kind of going to that
first image I have read studies that people looking away are less engaging
than people looking at you and so when you’re doing your hero image you
probably won’t have people looking at you looking at the at the user rather
than looking away because I’ve heard that that is at least read in books via
studies that that is not as engaging again here it’s a little hard to read
and it doesn’t really explain like what that first video image did to here and
now we’re going to something else a little disjointed probably don’t love it
okay so this one here is like bad right and so the reason it’s so bad
is like my my brain my eyes don’t even know like where to look here so am I
supposed to be looking at this first or this first there’s way too much room for
this header and then the hero section is kind of smushed down we have this kind
of weird green color with the overlay this text here is too hard to read my
brain is looking at this and kind of couldn’t read this if it wanted to and
then there’s like three calls to action so bad right not not a good hero section
this one too not that great you know it it has all this text here way too much
text like you want your you want a sentence like a you know like four or
five word sentence tops to be your your hero headline and that’s it like no
one’s gonna read this and then there’s no there’s no call to action so it has
everything’s kind of busy so I would say no to like this particular hero section
this looks like the same one that we just saw I think it’s just a different
company an internet marketing company but again
good stuff people are smiling looking has the headline make an appointment
call to action that would work for me so those are some thoughts I have about the
hero section again remember it’s like the very first thing that people see
when they most people come to your site it’s definitely worth working on and
thinking about and the main things are is like make it clear make it engaging
make a call to action and then think about the visual hierarchy think about
like what’s the first thing people are gonna see was the second thing what’s
the call to action what’s the contrast where’s the text
gonna go that type of thing so hopefully you found this video useful if you did
please feel free to leave a like feel free to subscribe to the channel if you
need help with your website project we offer a free mock-up of your website
before you sign or pay for anything so visit thomas digital to learn more
thanks again and I will see you in the next one


  1. Post
    Cassandra Diamond Lavender

    You have a very interesting video with valuable content. I will study your content and try to implement what you suggest and demonstrate to improve my website.

    People don't want to buy drills, they want a hole! I first heard a quote similar to this from Mike Dillard's book "Magnetic Sponsoring." I love it.
    Thank you for taking the time to help us. Subbed, thumbed, All the notification bell.

Leave a Reply

Your email address will not be published. Required fields are marked *