A hero (often called a hero section or hero banner) is the large, prominent area at the top of a webpage. It is usually the first thing a visitor sees and is designed to quickly communicate what the page is about and what the visitor should do next.
Hero sections are most commonly used on homepages and key landing pages.
What a Hero Typically Includes
A hero can contain one or more of the following elements:
Headline: A clear, short statement that explains the page’s main message
Supporting text: A brief description that adds context or value
Call-to-action (CTA): A button or link encouraging the visitor to take an action (for example “Register”, “Book a demo”, or “Learn more”)
Visual content: An image, video, illustration, or background colour/gradient that supports the message
Optional extras: Logos, key statistics, event dates, navigation prompts, or a search bar depending on the site
Why Hero Sections Are Important
A well-designed hero helps visitors:
Understand the purpose of the page immediately
Find the most important action without scrolling
Build confidence through clear messaging and strong visuals
Engage more quickly, especially on campaign or event pages
Because it appears above the fold (the portion visible before scrolling), the hero is often one of the highest-impact areas on the page.
Where Hero Content Is Managed in ShowOff
In ShowOff, hero sections are most usually set up within a specific panel (often labelled something like Hero, Hero Banner, or Header).
The exact setup steps depend on the template you are using. However, you can normally locate the content by:
Opening your ShowOff back office
Navigating to the area where your panels are managed for the relevant page/template
Looking for a panel named Hero (or similar)
Once you have found the hero panel, you will be able to see where the content is edited, including the hero text, imagery, and any CTA buttons.
Common Types of Hero Sections
Image hero: A strong background image with text and a CTA on top
Video hero: A background video used to showcase a product or atmosphere
Split hero: Text on one side and an image on the other
Minimal hero: Simple headline and CTA with little or no imagery
Carousel hero: Multiple slides rotating through messages (usually best used sparingly)
Best Practice Tips
Keep the headline short and specific
Make the CTA clear and action-focused
Ensure text is readable over backgrounds (use overlays if needed)
Optimise for mobile so content does not become cramped or oversized
Use imagery that supports the message rather than distracting from it
Summary
A hero is the main introductory section at the top of a webpage. It highlights the primary message, sets the tone, and often includes a call-to-action to guide visitors toward the next step.
Comments
0 comments
Please sign in to leave a comment.