Hero
Een opvallende kopsectie met titel, ondertitel en een call-to-action-knop.
De Hero zet de toon van een pagina: een grote titel met optionele ondertitel en knop. Ideaal bovenaan een landingspagina.
Voorbeelden per branche
Op een webshop toont de Hero vaak de actuele aanbieding of een nieuwe collectie: een titel als 'Nieuwe collectie binnen' met een knop die direct naar de categoriepagina linkt. Een portfolio-site gebruikt de Hero juist om in één zin te laten zien wat de maker doet, bijvoorbeeld 'Interieurontwerp met karakter', gevolgd door een knop naar het projectenoverzicht. Bij een zakelijke dienstverlener, zoals een accountantskantoor of juridisch adviesbureau, werkt een Hero met een concrete belofte het beste: niet 'Welkom op onze website' maar 'Grip op je administratie binnen één maand', met een knop naar een adviesgesprek.
Een veelgemaakte fout is de Hero vullen met een titel die niets zegt over het aanbod, zoals een algemene welkomsttekst. Bezoekers scannen een pagina in enkele seconden; een vage titel kost je die eerste indruk. Een tweede valkuil is meerdere knoppen in de Hero zelf proppen — dat vertraagt de beslissing van de bezoeker. Houd de Hero bij precies één actie en verplaats secundaire acties naar een CTA-block verderop.
De Hero werkt goed in combinatie met een Typewriter in de ondertitel, om afwisselend een paar kernwoorden te tonen zonder een lange zin te schrijven. Voor extra beweging bij het laden van de pagina kun je de inhoud van de Hero laten verschijnen met GsapReveal, zodat titel en knop rustig instromen in plaats van meteen stilstaand te verschijnen.
Let bij afbeeldingen in de Hero op de laadtijd: dit is meestal het eerste wat de browser rendert, dus een zware achtergrondafbeelding vertraagt de hele pagina merkbaar. Kies een geoptimaliseerde afbeelding via de mediabibliotheek en houd de titel kort genoeg om ook op een klein mobiel scherm in één of twee regels te passen.
Zet de Hero bovenaan een landingspagina, homepage of campagnepagina: het is meestal het eerste wat een bezoeker ziet en bepaalt in enkele seconden of iemand doorleest. Combineer een heldere titel met één duidelijke actie, bijvoorbeeld een aanmeldknop of contactlink.
Een veelvoorkomend gebruik is een tijdelijke actiepagina: titel met de aanbieding, ondertitel met de voorwaarden en een knop die direct naar het formulier linkt. Wil je naast deze ene knop meerdere acties naast elkaar tonen, gebruik dan het CTA-block verderop op de pagina.
<Hero title='Bouw met Obelisk' subtitle='Headless CMS' cta-href='/contact/' cta-label='Start' />