Een Hero voor je homepage – Doen of niet doen?
Een hero voor je homepage? Waar hebben we het eigenlijk over?
Wanneer ik een website voor een klant bouw en begin over een ‘hero’, dan gebeurt het nogal eens, dat de klant geen idee heeft waar ik het over heb. En dat is goed begrijpbaar. Want wat heeft een ‘held’ nu eigenlijk te maken met een banner voor je homepage?
En eigenlijk is zo’n hero niet veel anders. Het is gewoon een scherm vullende banner, veelal op je homepage of specifieke andere belangrijke pagina’s op je website.
Zo’n ‘hero’ is dus de eerste visuele kennismaking met jouw site. En als zodanig natuurlijk best heel belangrijk.
Zo’n hero houdt echter ook een zeker gevaar in. Want wanneer zo’n banner ‘scherm vullend’ is, dan is er natuurlijk ook de kans, dat jouw bezoeker geen idee heeft, dat hij ook verder kan scrollen. Het is een risico dat je klant de site snel verlaat, met het idee dat de site nog niet af is, en hij een ‘werk in uitvoering’ scherm heeft bezocht.
Dat wil je natuurlijk voorkomen.
Bij dit artikel wil ik je een aantal voorbeelden van ‘heroes’ laten zien. De foto’s bij dit artikel zijn gelinkt aan een (beperkte) voorbeeldpagina waar het principe van zo’n specifieke hero wordt gedemonstreerd. Ik raad je van harte aan, om vooral door te klikken (de demonstratie van de hero wordt iedere keer in een nieuwe tab geopend).
Een heel basale hero
Bovenstaand voorbeeld is denk ik wel het meest eenvoudig denkbare voorbeeld. Je krijgt een foto te zien die relevant is voor het onderwerp van de site, met een korte boodschap en een knop ‘Lees meer’
Zou deze knop ontbreken, dan zou de kans wel heel groot zijn, dat iemand niet zou merken, dat deze site nog verder gaat. Druk je op zo’n knop, dan kan je bijvoorbeeld verder gaan naar een andere pagina, of door scrollen op dezelfde. Dat laatste gebeurt in ons voorbeeld.
Een ‘split screen’ hero
Een tweede ontwerp voor een hero wat je vaak tegen zal komen is een ‘split screen’. Het is een variatie op de afbeelding hierboven, maar hier is de helft van het scherm bedekt met een semi transparante overlay en binnen dit ‘donkere gebied’ vind je de tekst en eventuele navigatieknoppen. Natuurlijk geldt ook hier exact hetzelfde als voor de basale hero: Zorg ervoor, dat je bezoeker kan navigeren!
Meerdere navigatieopties
Heb je een hero voor je homepage dan hoef je natuurlijk niet je tot één navigatieoptie te beperken. Liever niet zelfs. Je kan bijvoorbeeld je bezoeker de keuze laten om ‘meer’ te lezen door een knop die omlaag scrolt en door een tweede knop met een meer ‘call to action’ gerichte tekst iemand gelijk naar de pagina over jouw product of dienst te sturen.
Gesynchroniseerde navigatie opties
Nu is zo’n hero voor je homepage natuurlijk wel leuk, maar de hoeveelheid informatie die je hier kwijt kan is natuurlijk wel beperkt. Het onderstaande voorbeeld van een hero moet je eigenlijk in actie zien. Bij de afbeeldingen hierboven kan je nog aardig zelf bedenken, wat er zal gebeuren, maar in het voorbeeld hieronder niet zo. Je moet het gewoon zien.
Hier is in de hero van de pagina een navigatie mogelijkheid opgenomen. Het eerste wat je op zal vallen wanneer je de pagina daadwerkelijk bekijkt, is dat de hele hero constant aan het veranderen is. Iedere paar seconden krijg je een andere achtergrondafbeelding te zien, en krijg je een andere foto rechts te zien.
Bovendien kan je direct een foto naar voren halen door links op de ‘kaart’ te klikken of met de pijltjes door de afbeeldingen heen te wandelen. Op de foto zelf staan een knop ‘Meer informatie’ die je naar een pagina zou kunnen leiden met inderdaad meer informatie.
In het voorbeeld heb ik enkele Europese steden gebruikt, maar je kan je voorstellen, dat je dit eigenlijk voor heel veel verschillende onderwerpen kan gebruiken. Als je een webshop hebt, kan je dit gebruiken om snel en makkelijk je belangrijkste productcategorieën onder de aandacht van je bezoeker te brengen, Heb je een restaurant kan je op deze manier belangrijke gerechten de aandacht geven maar ook bij een ‘gewone’ website kan dit dienen als een gerichte navigatie naar de belangrijkste onderdelen van je website.
Een ‘gewoon’ menu kan soms overvol raken en door een dergelijke hero voor je homepage te gebruiken onderstreep je de belangrijkste onderdelen van je site en leidt je jouw bezoekers makkelijk naar de pagina’s waar je ze graag hebben wilt.
Een content driven hero
Ook dit is weer een ‘hero’ die je live moet bekijken.
In het voorgaande voorbeeld liet ik je een interactieve hero zien, waarbij alles door de bouwer van de hero voor was gedefinieerd. In het voorbeeld hierboven werkt het iets anders. De content die je ziet is daadwerkelijk content vanuit de website. Klik je ergens op, dan ga je daar ook heen (Dit is echter niet geïmplementeerd in het voorbeeld).
Omdat in dit voorbeeld ieder ‘custom post type’ gebruikt kan worden als interactieve content, kan je dit voorbeeld op vele manieren gebruiken. In het voorbeeld hierboven wordt de content uit de ‘Berichten’ van WordPress gehaald, maar je zou evengoed hier een selectie van je producten kunnen tonen. Je kan dit ook implementeren op basis van een gemaakte selectie van post types, dus het zouden ook bijvoorbeeld een ‘sticky post’, een uitgelicht product, een product wat in de aanbieding is, of welk ander speciaal geselecteerd post type kunnen zijn.
Voeg je nieuwe posts toe aan je site, dan zal het aanbod op je pagina vanzelf wijzigen.
In het voorbeeld staat de pagina stil, en verandert de selectie pas, wanneer je ergens op klikt. Door op de pauze/speel knop te klikken, zullen de posts één voor één automatisch getoond worden. Het is ook mogelijk om direct bij het openen van de pagina de selectie automatisch af te spelen.
Hoe voeg ik een hero toe aan mijn homepage?
Veel premium thema’s voor WordPress hebben al een ‘ingebouwde hero’. Het nadeel van zo’n ‘ingebouwde hero’ is vaak, dat de mogelijkheden beperkt zijn. Je kan immers alleen maar doen, wat de maker van het thema heeft ‘voorgebouwd’.
Een tweede mogelijkheid is gebruik te maken van een page builder. Want in zo’n geval kan je jouw pagina net zo opbouwen als je wilt. In feite is iedere moderne page builder geschikt voor het bouwen van een ‘pagina met hero’, maar omdat ik toch vooral bekend ben met Elementor, zal de rest van deze blogpost zich vooral op Elementor concentreren. Een aantal zaken is echter ‘universeel waar’ en zullen ook gelden voor andere page builders. Dus het is zeker de moeite waard door te lezen, ook wanneer je geen Elementor gebruikt.
Ingebouwde Heroes
Welke pagebuilder je ook hebt, vaak heeft een page builder een aantal ‘ingebouwde heroes’, Hero blokken die al standaard zijn opgenomen, die je als basis kunt gebruiken.
Nu moet ik eerlijk zeggen, dat ik niet zo gecharmeerd ben van de standaard heroes die met Elementor meekomen. Al helemaal niet, wanneer je alleen gebruik maakt van Elementor, en niet van Elementor Pro.
Nu is er een plugin die ik al meer dan eens heb genoemd, die ik wel meer dan de moeite waard vind, waarbij je een groot aantal ‘content blokken’, waaronder heroes gratis tot je beschikking krijgt. Wil je alles uit deze ‘Envato Elements‘ plugin halen, dan zal je een betaald abonnement moeten nemen op de content van Envato Elements, maar wil je alleen een aantal voorbeelden van fraaie content blokken voor je Elementor website hebben, biedt deze plugin een aantal aardige voorbeelden.
Let hierbij overigens wel op, dat al deze content blokken wel gratis zijn, maar sommige blokken Elementor Pro nodig hebben, omdat de blokken Elementor Pro widgets gebruiken.
Zelf je Hero bouwen
Natuurlijk is het zelf bouwen van een hero ook absoluut geen probleem. Wanneer je gebruik maakt van Elementor (al dan niet ‘Pro’) is er echter een aantal zaken waar je op moet letten.
- De basis voor je hero is een ‘sectie’. Je hele hero ontwerp moet in een enkele sectie passen. Bestaat het complete ontwerp voor je sectie uit twee kolommen, dan is het eenvoudig. Dan maak je er een twee koloms sectie van. Maar wil je bijvoorbeeld een titel over twee kolommen zetten, dan wordt het iets complexer. Gebruik hier de ‘Inner Section’ widgets voor de layout binnen de ‘Outer Section’.
- Een Hero is ‘pagina groot’ en beslaat de hele breedte van je scherm. Om dat mogelijk te maken, kies je voor de volgende instellingen voor je sectie. Je vind de instellingen binnen de ‘Layout’ tab van de betreffende sectie.
– Breedte inhoud : Volledige breedte
– Tussenruimte kolommen : Geen tussenruimte
– Hoogte… hier heb je twee keuzes. Kies je voor ‘Passend op scherm’ dan zal de hoogte ‘passend op scherm’ zijn. Dus de sectie is even hoog als de schermhoogte. Heb je echter ook nog een site header, dan zal bij het openen niet je hele hero worden getoond. Een stuk net zo hoog als de header zal immers van het scherm afvallen. Wil je wel de hele hero tonen, dan pak je dit iets anders aan.
Kies je namelijk voor ‘Min hoogte’, dan krijg je drie eenheden om de hoogte in te stellen : PX (standaard) VH en VW. VH en VW staan respectievelijk voor ‘Viewport Height’ en ‘Viewport Width’, en dat wil zeggen, de werkelijke beeldgrootte van het ‘beeld deel’ van je browser. VW en VH geef je beiden op een schaal van 1-100 aan, het zijn dus eigenlijk procenten.
Wil ik dat heel mijn hero en een hele header worden getoond, dan stel ik beide dus in op ‘VH’ eenheden. Bijvoorbeeld 5vh voor de header en 95vh voor de hero. Voor tablets en mobiele telefoons kies je voor andere verhoudingen. - Niet ieder ontwerp voor een hero ‘doet het goed’ op een mobiel. Het kan dus goed zijn om in de ‘Responsive’ settings van de sectie (te vinden onder het tabblad Geavanceerd) de sectie met de hero te verbergen voor een mobiele telefoon en voor de mobiele telefoon een aparte sectie (die je verbergt voor tablet en desktop) te maken.
En nu je een goede sectie hebt gemaakt als basis voor je hero kun je verder aan de slag met het bouwen hiervan. Success!
Hero Widets
Sommige Elementor Add-Ons hebben een aantal widgets om makkelijk een hero voor je homepage samen te stellen. Dat heeft een aantal voor- en nadelen. Het grote voordeel is, dat je toch heel eenvoudig een hero op je homepage kan zetten, maar het al weer een stuk lastiger wordt, wanneer je iets anders wilt, dan via die widgets instelbaar is.
Wanneer ik de Elementor ingebouwde hero blokken of de hero blokken van Envato Elements gebruik, dan kan ik naar hartelust aanpassen. Ik kan een video blok vervangen door een slider, of omgekeerd, ik kan extra tekstblokken toevoegen en nog veel meer. Die flexibiliteit heb je niet met heroes die met een widget worden geimplementeerd.
Daar staat weer wel tegenover, dat het -vooral wanneer je wat meer wordt ‘uitgedaagd’ door het werken met Elementor- een makkelijke manier is om snel een mooie hero samen te stellen. De eerste drie voorbeelden in dit blogartikel zijn bijvoorbeeld gebaseerd op verschillende ‘Hero widgets‘ van Unlimited Elements.
Meer leren over Elementor?
Krijg je de smaak te pakken en wil je meer leren over Elementor, denk dan ook eens aan één van deze twee online cursussen van WordXPression
Werk je al met Elementor en heb je af en toe behoefte aan een stukje persoonlijke ondersteuning bij het bouwen en onderhouden van je website? Dat kan ook via Zoom of Skype. Dat kan dan met de WordXPression Support Strippenkaart. Bovendien krijg je een flinke korting op je allereerste strippenkaart!
Heb je liever dat je website voor je wordt gebouwd, en je het niet allemaal zelf hoeft te doen, dan biedt WordXPression je de volgende mogelijkheden
Nog niet uitgelezen?
Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.
