Once considered a temporary trend in web design, the hero section has since become a key part of any quality website. The biggest benefit of these crucial pieces of your design is that there are plenty of ways you can create them and make your company stand out from the crowd.
Unsure what a hero section is and whether or not you really need one?
This guide will give you special insight into why the hero section of a website is so important. Let’s talk about the details as well as how you can make a great one for your own webpages.
What is a Hero Section?
As the first thing people see when they visit your website, a hero section is the area that immediately shows up on the screen under your logo and menu. This portion of the page should ideally include information about four things:
- What you have to offer
- Why people should trust you
- The benefits of working with you
- What action they should take next
Along with these key aspects, you’ll also want to find a way to make your brand stand out from the competition. There are various hero section design ideas you could use depending on the look of your website and what style you prefer.
A reliable web design company can discuss the options with you and point out which one they think will be most effective for your site.
Keep in mind, you don’t need to create a hero section for every single page across a website. Any webpage that a potential visitor could come to on your site without typing the URL directly into their browser is called a landing page. And every landing page hero section should follow proper guidelines to ensure they are up to par.
You’ll find there are a few best practices to include in each one to find the most success as they are designed.
How to Design a Great Hero Section
Whether you create the website hero section on your own or hire a web design professional to handle it, every result should include the right pieces.
Use a Captivating Hero Image or Video
Sometimes referred to as the “hero image” on a landing page, this could be anything from a graphic design to a high-quality photograph or an engaging video. These are arguably the most important aspect of the hero section because consumers are generally more drawn to colorful designs, eye-catching graphics, and videos that share interesting information as opposed to simple lines of text.
With a handful of ways to integrate your hero image into the hero section design, the type will usually determine its use. For example, a colorful strip can be added along with anything from a unique piece of clipart to a professionally-drafted graphic. You can then integrate text to include the key pieces of information of what you do, why they should pick you, the perks you offer, and other details.
On the other hand, you could also embed an excellent video that will capture their attention and provide them with all of the same information. Video is already one of the best ways to boost the ROI of your marketing efforts and using one in your landing page hero section will often lead to higher conversion rates.
Create a Powerful Headline
Deepak Chopra has often said that “words have power” and that statement can be seen in the first text someone sees when they arrive on your website. The headline of your hero section plays a pivotal role in either grabbing the interest of a site visitor or boring them into pushing the “Back” button.
In Donald Miller’s Business Made Simple University courses, he teaches students about the need for creating what he calls a “one-liner”. He uses this term to encompass what he considers between one to three sentences that quickly sum up your business. Generally, your headline will be the first sentence or short statement that stands out from the rest.
The more effective you can make this one-liner, the less likely people will click away from your website.
Follow It Up with a Strong Subheading
While it’s considered a part of the one-liner mentioned in our previous step, the subheading gives you a bit more room to expand on your business and its offering. You should include brief details about your products and services while also introducing the basic mindset behind your brand.
This is the ideal point to instill trust in your site visitors and to quickly define the benefits they will receive from working with your company or purchasing from your store. It’s also essential that you keep this part of your website up-to-date to ensure people always know what they can expect from you.
Include a Call-to-Action
No hero section of a website would be complete without a strong, clear, and inviting call-to-action (CTA). Too many websites forget this part and leave their potential customers scratching their heads, unsure of what they should do next. Without a CTA to follow, they will likely get confused and frustrated before looking for an alternative option with a different company.
There are many different examples of CTAs you can include in your hero section. Lead your customer to subscribe for your newsletter or invite them to download your app if you have one. You could also offer them a discount on their first purchase or even a free trial of your services.
Effective Hero Section Examples
Take inspiration from some of these hero section examples we’ve hand-picked from our portfolio.
Alexis Serrano
You can immediately see all of the necessary parts of a successful hero section in this example for Alexis Serrano, a life coach offering healings, readings, and more. The high-quality hero image rapidly grabs your attention and leads your eyes to the headline.
Her headline is strong and also includes a subheading with more specific info about what services she provides to her customers. Finally, she offers site visitors the chance to book a free consultation as her call-to-action.
Danville Public School Foundation
The Danville Public School Foundation represents the local education system in Danville, IL and assists with financial aid and other promotions for city schools. Their website hero section is simple but efficient in its approach. Through a good use of ethos, they are able to capture emotion while mentioning their intention to gather donations for the children and schools they support.
DPSF integrates a double CTA to their hero section to give site visitors multiple options. Newcomers can click “Learn More” to become more familiar with their brand and their mission. Previous site visitors can simply click “Donate Now” to dive right into giving to their cause.
Lee’s Famous Recipe Chicken
Restaurants like Lee’s Famous Recipe Chicken get the immediate benefit of using a featured item from their menu as the hero image on their website. This is a great way to quickly get someone craving their food as they stare as the colors and textures of the dish.
As one of the more basic hero section examples, this one has a short headline to promote one of their main dishes. From there, they lead the viewer directly to their online menu to see if any other plates catch their attention. This will often have them hopping in their car and driving straight to the restaurant.
Struggling with Your Hero Section Design?
Putting together a hero section can take a great deal of time, research, and patience. But if you do it correctly, you’ll see that this small portion of your website makes a huge impact on the bottom line of your business.
If you need help designing a top-notch hero section, the team at AWEBCO is here to help you do exactly that! Let’s get started today on creating landing pages that will convert! Reach out to us online through our contact form or give us a call at (217) 903-5999!
7 Responses
Great job , After reading i comes to know about hero section but i have one doubt can i create in blogger ” hero Section ” .But the way you have done great job by collecting .
Great job , After reading i comes to know about hero section but i have one doubt can i create in blogger ” hero Section ” .But the way you have done great job by collecting .
Great information. Thank you for these tips on how to create a hero section. In this article, you mentioned that headlines are included in the hero section. But from what I know, headlines are usually in “above the fold.” Is the hero section and “above the fold” the same?
1. Headlines should be used throughout your entire page or post to indicate to the search engine spiders what each section is about, usually complemented by paragraph text and images.
2. The “Hero Section” and “Above the fold” are not the same thing.
3. “Above the Fold” is anything inside the browser screen before you start to scroll down. You can have multiple elements “Above the Fold”. Examples: Logo, Navigation, Hero Section, Additional Containers, etc. “Above the Fold” It is not limited to just a “Hero Section”.
4. A “Hero Section” is or container with content inside of it. This section is usually located in the “Above the Fold” area of the browser screen.