We see a background image with an overlay to give the hero section some style.
The heading message is in large text and provides clear information about the site.
A subheading provides a supporting offer above the message and shows the site’s branding.
Benefits are placed within short blubs that include icons.
The CTA is a button that stands out and provides an offer.
Navigation is in the header above the hero section. In this case, the header isn’t part of the hero section, but you can include it in the hero section if you want.
This hero section takes about half the screen on a desktop. The main image elements are placed on one side and the text is placed on the other. It’s short, simple, clean, clear, and effective.
Let’s dig deeper into each of these elements.
Image or Background
An image, video, or background color or pattern helps the hero section stand out from the rest of the website. This isn’t the main focus. Instead, it gives the hero section some texture with branding elements. It can be muted with an overlay, so it doesn’t get in the way of the other elements, placed to one side with the text on the other, etc.
Be sure to only use high-quality images or videos. The quality of the images and videos will demonstrate to the visitor the quality of the products or services. It’s best not to use stock photos since they’ll show people that are not associated with your business. This will come across as fake and hurt your credibility. Only use photos, illustrations, animations, or videos that are relevant to your message.
Examples include photos or videos of the products in use, Illustrations or animations that demonstrate the products or services, the results of using the product or service, a demonstration of performance, people discussing the service, or something that supports the CTA.
Heading
The heading is a simple and short sentence to create a short description of your website or mission. It’s a statement that informs the visitor what to expect. Create a powerful headline that captures attention and informs the visitor of what to expect from the website. This tells them why they’re here and is the main element that can keep the visitors from clicking away.
To create an effective heading, try to think of a powerful one-liner that would draw you in. It shouldn’t be vague. Don’t use your company’s tagline, your product, your service, or your company’s name. The heading should convey your message to your audience. Focus on the audience rather than your company, your products, or your services. Only use jargon if it’s a highly specialized website.
Subheading
A subheading is a secondary message. It allows you to expand on the message in the heading. It can be long or short and can provide more information about your services or products. These details can expand on the heading or expand on an offer. This is a great way to build trust, define expectations, or expand on the benefits of using your products or services.
Benefits
Benefits provide a simple list of why visitors should work with you. The list should be short and only include the highlights. Keep it free of jargon and make it easy to understand. It gives the visitor a list of what to expect and what they will gain from your products or services.
Call to Action
Every hero section needs a strong call to action. The CTA is simply what you want the visitors to do next. This is usually a button that links to your main offer or your shop. It can provide a discount or some other type of incentive. Other options include an email sign-up form, a contact form, registration to a course, a number to call, a form to get more information, a link to download an app, a discount, a free trial, and lots more.
It’s best to focus on a single large CTA. You can include two buttons for simpler CTAs, but this should be used sparingly. For example, you could provide a button to your shop or product, and a second button for more information or a free trial. Be sure to keep them simple and clear. Use colors that stand out from everything else. Make the CTA obvious and make its message simple and easy to understand.
Everything else should lead the visitor to the CTA. Without a strong CTA, your visitors won’t know what to do once they’ve seen your hero section. They’ll have to search for a way to get what your hero section offers. This can leave them frustrated and make them move on to the next website.
Main Navigation
The navigation can be placed within the hero section or separately. When the main navigation is placed within the hero section, the navigation menu should stand out and be easy to understand. If you want the menu to remain on screen, it’s often best to lock it within the header once the user scrolls past the hero section.
If navigation is separate, it can sit above the hero section in the header, or at the bottom of the hero section and lock into place when the visitor scrolls. Navigation can also sit vertically on one side and remain in place, or be attached to the section under the hero section and locked into place when the visitor scrolls.
Other Elements
There are lots of other elements that you can add to your hero section. Keep in mind that the hero section shouldn’t be cluttered. Other options include:
Email form – place a small subscription form at the bottom or somewhere out of the way of the main CTA.
Contact information – this is great if you have a physical location or contacting you is the best CTA.
Social media follow – add a few social icons to the navigation menu or somewhere small so it doesn’t take the main focus.
Social proof – add a short testimonial or a star rating near the CTA to build trust. A small slider is great for multiple testimonials.
A second CTA – this can be a second button so users can get more information. Use this idea sparingly.
Hero Section Layout
The layout of the elements should work with the background. It’s best to use an overlay or place the main focus of the background image on one side with the text and CTA on the other. For backgrounds that are colors or patterns, you can place the text and CTA in the center, or on one side and a form on the other. The hero section should take the full width of the screen, and a large vertical portion of the screen or the entire screen.
Once you’ve decided on your elements, layout, colors, fonts, etc., be sure to ask several people you trust for their opinion. Run A/B tests to make improvements. Test every aspect of every element and make the changes that bring the highest conversion.
