In the ever-expanding digital world, grabbing your audience’s attention is one of the toughest challenges you ought to overcome. The onus lies significantly on your business’ main touchpoint online – your website.
When your target audience visits your website, they ought to see the value and feel compelled by the first information to explore your offerings further.
And, you only get 8 seconds to do that (as per a study by Microsoft).
Many would argue it’s even less.
That means your website’s hero text has to do the job and do it very well.
Let’s get into the details and take inspiration from some of the best website hero texts that exist on the internet.
What is a hero text and what makes it a good one?
A hero text or hero message is a short statement that encapsulates the value proposition of your brand. It appears on the top fold of a website, usually on the homepage, along with a byline to clarify the main statement, and a call-to-action.
At times, the hero may only be the headline followed by the call to action.
The hero text attempts to answer the most important questions your website visitors have about your business, such as:
- Who are you as a brand and company?
- What product or service or value do you offer? (And determine if it’s what they’re looking for)
- Why should they choose you? (The benefits or USP of your offerings)
Further, two more crucial jobs of the hero message are to:
- Establish trust and credibility.
- Persuade users to take the next step, that is, perform your desired call-to-action.
While encapsulating the above information in one or two statements is one thing, conveying the message in a compelling manner is a whole different game.
An effective hero text should tick the following boxes.
- Short, succinct, and specific while conveying your core value proposition
- Speaks your audience’s language (No jargon or buzzwords, please)
- Speaks to the audience and about their problems/needs (And not about YOU, YOUR brand, or how good YOUR product is)
- Shows the benefits and usefulness of your offerings
- Sets the expectations right
But, what about the design?
You consider all the points mentioned above to craft a perfect hero text. But, is it enough?
Over the years, the growing popularity of visual media has made it critical for brands to attract users’ attention through attractive website design.
Hence, you cannot overlook the role of attractive visuals.
Not to say, design can overshadow the power of an effective hero message, but enticing visuals can certainly multiply the power.
While you should think about the content first for your website, the design should act as a supporting pillar.
However, the weightage you should give to design depends on your niche and audience too. For some, the text on a simple background may be powerful enough. For others, impactful visuals must be there to help the text do its job.
Let’s get straight into the examples to understand all of it better.
Powerful hero text examples
1. Dropbox Paper
Dropbox Paper, a collaborative doc-editing service by Dropbox, features excellent hero text on its website. “Real-time editing for teams” captures a lot in four words.
You instantly know that it is a collaboration tool that will help you in your work.
Further, the next line lets you know of the added value – it is free to use. Who doesn’t like a free product?
If you look at the byline, not only does it clarify the headline and reinforces the value proposition but also makes you aware of its USP – “more than a doc.” You get to know that it’s not just another cloud-based editing tool, it has more to offer.
To use Dropbox Paper, you require a Dropbox account. The CTA “Continue with Dropbox” leaves no guesses for the next step.
If you’re already a Dropbox user, you instantly know what will happen next. If you’re not a Dropbox user, you get a fair idea that the CTA will lead you to sign up for Dropbox.
Since you can sign up using your Google account as well, the secondary CTA is useful and points you in the right direction.
2. Gumroad
Gumroad is a marketplace for digital creators, providing them with an income avenue by self-publishing and selling their creations. Its hero text is simply impactful.
Making the first dollar is the biggest challenge for an independent creator. The headline lets them know it is the platform that’s solving their pain point. “Go from zero to $1” is valuable and enticing, yet does not make any unrealistic promise.
The byline further addresses the audience’s crucial questions, and concerns, as well as gives an idea of how Gumroad works.
“Anyone can earn” and “Just start with what you know,” tells the platform has room for all kinds of digital products or services. Also, one can earn even if they are not a pro.
“See what sticks” lets them know they can experiment and figure out what works best for them. “It’s that easy” emphasizes using Gumroad is not complicated at all.
The CTA “Start Selling” is not only compelling but pointing the audience towards the central action that will bring them money.
If you observe the design, it’s not only eye-catching but also establishes credibility and human connection by featuring a seller and mentioning what she does.
3. Canva
Canva needs no introduction. It is one of the most popular graphic design tools out there today. Chances are you are already using it to create posts for your social media channels.
Moreover, eye-catching graphics are a necessity for any business looking to grow online.
That’s exactly what reflects in its hero text.
The headline is not only confident, suggesting Canva is a preferred design tool, but it lets you know if you have design requirements, this is the right starting point.
The byline highlights the benefits and use cases, giving an idea of all that’s possible with Canva and who can use it.
Furthermore, “no design experience needed” addresses the audience’s biggest concern – whether they possess the skill set to use the tool.
The CTA is straightforward, showing what you need to do to start designing, and again highlights a key value of the platform – it is free to use.
4. Copyblogger
Slightly different from the three hero text examples we discussed above, Copyblogger’s is another fine one.
Copyblogger evolved from a content marketing blog to products and services for businesses and content creators.
Firstly, it shows you don’t always need the same kind of Headline, Byline, and CTA hierarchy for the hero text. Secondly, you can position your message more persuasively to drive action.
With the headline in focus and the rest of the information presented as a popup module is a refreshing way to catch the audience’s attention and drive the desired action. Also, it is a good example of not always needing an eye-catching illustration on the website.
Third, it is an excellent example of encashing the latest trends and buzzwords. While using buzzwords and jargon is not always ideal, you can bend the rules if you have strong reasons to.
For example, the “creator economy” is the thing of today and the future in the digital world. Hence, it is hyper-relevant to Copyblogger’s audience.
Moreover, the headline focuses on the core value of this platform, that is, helping creators (here, content marketers, and copywriters) find success in the creator economy. But how?
The headline text of the subscription box clarifies the “how” which is by subscribing to their email series. Also, it lets the audience know it’s pertaining to content marketing.
Lastly, the CTA is enticing as it talks about the value – the “training” and lets them know that it doesn’t cost them a thing.
5. Unbounce
Unbounce’s hero text is an excellent example of focusing on the long-term goals that your audience can achieve from your product or service. Unbounce is a landing page builder with many integrated tools.
Instead of an immediate benefit (for example, a high-performing landing page), the headline shines the spotlight on the larger goal and impact of their product, that is, growing your business.
The byline provides more insights into the core value proposition by explaining the what, why, and how. “Turn more of your visitors into customers” suggests that business growth will come from better conversions.
The mention of features and time to create a landing page gives a microscopic view of how and why the conversions will be achieved.
The CTA “Build landing pages” and “Write with AI” are not only clear and actionable, but they also hint at the two of Unbounce’s core tools tied to the value proposition in the headline and byline.
Moreover, the hero image here is a good example of visuals evoking excitement and supporting the text instead of overpowering it.
6. Writer
Next on the list of inspiring hero text examples is Writer.com’s website. It is an AI writing tool that helps you improve your writing by catching errors, ensuring consistency, and much more.
However, its hero message says it all in just a few words.
“Give them just the right words” is not only thought-provoking but action-oriented, and packed with value. You instantly gather that this tool will help you bring perfection to your writing.
Unlike the examples we have seen so far (except Copyblogger), the byline is much shorter, yet it does the job. It clarifies the headline in a very straightforward manner.
Another thing to note is that while anyone can use Writer, the byline says the platform is “for teams.” It is a good example of crafting a message according to your business’ focus to drive the most value.
In this case, you can fathom Writer’s primary target is businesses and teams.
Like the byline, the CTA “Request a demo” further speaks to its primary target audience as businesses often prefer a demo before purchasing a product for their teams.
Furthermore, the CTA “Try for free” subtly includes all of its potential users, inviting action and trust by offering the free trial.
Lastly, Writer’s minimal webpage design is another great case for keeping the visuals minimal and embracing the essence of your industry. It works well because the platform is all about text.
7. HubSpot
Your website content is not a one-time affair. Ideally, you should keep evolving it with your business evolution; changing audience behavior and market dynamics; and your competitors. HubSpot’s hero text is a terrific example of the same.
There are too many CRM tools available in the market today with loads of exorbitant features, making it overwhelming for users.
HubSpot’s message “Powerful, not overpowering” nails the pain point, promising a better way out.
The byline provides a glimpse into all the benefits a user can expect from the platform. Notice how it’s short, crisp, and conversational.
The CTA provides the best of both worlds by highlighting two options in one button, without being ambiguous.
Further, the text below the CTA clarifies that there are free tools available and if the audience is looking for more, they can use the premium software.
8. Upwork
Next on our list of powerful website hero text examples is Upwork, the freelancing platform that connects businesses and independent professionals.
While the website homepage targets businesses looking for talent, the hero text does an excellent job of speaking to both businesses and freelancers.
The headline “How work should work” hits the nail for both audiences, addressing their core need – working with the right people the way they want.
The byline is as compelling as it can be. It’s short, conversational, packed with value, encouraging, and at the same time reassuring.
“Find Talent” as a CTA is again strong and value-adding, as it’s hinting at the quality of professionals a business will find on the platform. The CTA “Find Work” opens an avenue for freelancers, which connects back to the promise for businesses.
Another thing worth noticing is the mention of leading companies that use Upwork to hire talent. “Trusted by” instantly uplifts the credibility of the platform.
9. The North Face
Last on the list is the website hero text of The North Face, an outdoor apparel and recreation products company. A lot of e-commerce websites use the top fold to display their latest collection, and are often dynamic.
This hero text is exemplary in terms of the tone and language of the messaging, and the way it attempts to communicate the brand value while being heart-warming.
The headline “Blue skies and bright future” doesn’t talk about needs or benefits. Rather, it makes the audience visualize their desire and reinforces their wishes.
Similarly, the byline brings out a camaraderie between the brand and the customer, suggesting how their products will be a companion on the way to achieving their desires.
The CTA is straightforward, sets the right expectations, and is action-oriented.
Another thing to notice is the visuals. The picture shows the story the text is telling. It is exuding the same warmth as the tone of the text.
Now, your turn to write an excellent website hero text
The hero text on your website is the gateway to grabbing your audience’s attention amidst their declining attention span.
A well-crafted message has the power to convey value to your audience, build trust, and drive action with and without eye-catching visuals. The examples we discussed have all of these ingredients.
I hope these examples inspire you to create an impactful hero text for your website and reap its rewards.
