Een hero image neemt de meeste ruimte in op je homepage. Daarmee is deze cruciaal voor de eerste indruk van je merk. Ontdek hoe je een pakkende hero image kunt maken voor je website.
Als je door een aantal online winkels bladert, valt je misschien één belangrijk kenmerk op dat ze allemaal gemeen hebben: een grote, opvallende afbeelding (of serie afbeeldingen) die prominent op de homepage wordt weergegeven.
Deze afbeeldingen worden vaak hero-, banner- of carrouselafbeeldingen genoemd. Hoe je ze ook noemt, hero images op websites spelen een zeer belangrijke rol voor e-commercebedrijven.
In dit artikel gaan we in op het belang van hero images, introduceren we enkele best practices voor het gebruik ervan en bieden we ongelooflijke tools en grafische bronnen om je te helpen prachtige en overtuigende hero images voor je online winkel te creëren.
Laten we erin duiken.
Wat is een hero image?
Een hero image is een grote afbeelding die bovenaan een webpagina verschijnt. Hero images kunnen op verschillende pagina's van een website voorkomen, maar ze worden het vaakst gebruikt op de homepage, onder de header en navigatiebalk.
Een hero image neemt de grootste ruimte in op je homepage. In sommige opzichten vervult het dezelfde functie als een landingspagina. Je hero image fungeert als een eerste indruk van je merk, wat betekent dat het een zeer waardevol bezit voor je bedrijf kan zijn als het op de juiste manier wordt gebruikt.
Wat moet een goede hero-image bevatten?
Geweldige hero images bestaan doorgaans uit drie elementen:
- Een opvallende afbeelding
- Overtuigende tekst
- Een sterke call-to-action (CTA)
Een doordachte combinatie van deze elementen kan leiden tot een overtuigende hero image die de bezoeker aanspoort om de actie te ondernemen die jij wilt, wat helpt om de conversieratio's te verhogen. Je zult zien hoe deze elementen samenwerken in de hero image voorbeelden hieronder.
Laten we de drie essentiële elementen nader bekijken:
1. Een opvallende afbeelding
Het menselijke oog houdt van grote, gedurfde en heldere afbeeldingen. Of je nu grafieken, foto's of illustraties gebruikt, hangt af van je merk. Maar wat altijd belangrijk is, is dat je afbeeldingen van hoge resolutie zijn en de aandacht trekken.
Hero images moeten de meest prominente items op je homepage zijn, wat iets is om in gedachten te houden bij het overwegen van je homepage-ontwerp.
Alle Shopify-thema's bevatten een groot gedeelte voor hero images met een aanbevolen resolutie, zodat je precies weet hoe je je hero images moet ontwerpen. Sommige thema's bieden zelfs extra functionaliteit voor hero-slideshows, banner video's en animaties op de pagina.
Heb je nog geen thema gekozen voor je Shopify-winkel? Doe onze quiz (EN) om erachter te komen welk thema het beste is voor jouw online winkel.
Bronnen voor stockfoto's
Als je van plan bent om je eigen productfotografie te doen, wil je ervoor zorgen dat je voldoende onderzoek hebt gedaan om te weten hoe je professionele, hoogwaardige afbeeldingen kunt maken. Als je tijd wilt besparen, kun je overwegen om stockfotografie te gebruiken.
Er zijn tal van plaatsen online waar je professionele, hoogwaardige afbeeldingen voor je website kunt vinden. Om je zoektocht te vergemakkelijken, hebben we enkele van de beste bronnen voor je op een rijtje gezet:
Gratis, royalty-vrije afbeeldingsbronnen
Als je op zoek bent naar gratis stockfoto's en grafieken, zijn hier een paar opties om te overwegen:
- Burst by Shopify (EN): Burst is de stockfotowebsite die is gebouwd door en voor ondernemers. Op Burst vind je hoogwaardige productfoto's en lifestyle-afbeeldingen die perfect zijn voor marketingcampagnes en sociale media. Als je een Shopify-winkel hebt, kun je foto's van Burst rechtstreeks vanuit je thema-editor toevoegen.
- Pexels: Pexels bevat duizenden gratis stockafbeeldingen die door gebruikers zijn geüpload of afkomstig zijn van gratis afbeeldingswebsites.
- Unsplash (EN): Unsplash biedt meer dan 2 miljoen gratis, hoogwaardige afbeeldingen van zijn gemeenschap van fotografen.
- Pixabay (EN): Pixabay biedt afbeeldingen die gratis te gebruiken zijn voor commerciële en niet-commerciële doeleinden, hoewel het belangrijk is op te merken dat sommige afbeeldingen nog steeds beschermd zijn door handelsmerken, publiciteits- of privacyrechten.
- Stockvault (EN): Stockvault biedt gratis stockfoto's samen met webontwerpindelingen en logo-sjablonen.
- Canva: Canva is een alles-in-één websiteontwerptool die ook een collectie gratis en betaalde stockfoto's voor commercieel gebruik bevat.
- Stocksnap (EN): Stocksnap biedt een breed scala aan gratis stockfoto's voor gebruik op commerciële en niet-commerciële projecten.
Betaalde afbeeldingsbronnen
Als je een budget hebt voor je hero images, overweeg dan enkele van de betere betaalde bronnen voor hogere kwaliteit afbeeldingen en foto's.
- Shutterstock: Shutterstock heeft een uitgebreide bibliotheek van meer dan 300 miljoen afbeeldingen van fotografen over de hele wereld, waardoor het de perfecte bron is voor reisfotografie.
- Adobe Stock: Ontworpen om samen te werken met de suite van ontwerptools van Adobe, bevat Adobe Stock duizenden stockfoto's, sjablonen voor hero images, stockvideo's, vectorafbeeldingen en illustraties.
- Getty Images: Hoewel het aan de dure kant is, bevat Getty Images een diep archief van hedendaagse en historische foto's die beschikbaar zijn voor aankoop.
- iStock: iStock is eigendom van Getty Images, dus je kunt enige overlap zien in de beschikbare foto’s. Toch stelt iStock fotografen in staat om hun foto's op andere platforms te verkopen, zodat je een bredere, meer hedendaagse collectie zult vinden dan op Getty.
- Dreamstime (EN): Dreamstime biedt een verscheidenheid aan stockfoto's, video's, vectoren en illustraties—zowel gratis als betaald—met verschillende licentieopties.
Huur een freelance fotograaf in
Natuurlijk blijven stockfoto's altijd stockfoto's. Als je wat tijd en misschien een iets groter budget hebt, kun je overwegen om een professionele fotograaf in te huren en je eigen foto's te maken.
Hier zijn een paar andere opties om freelance fotografen te verkennen:
- Huur een Shopify-expert in: Gebruik Shopify Experts om freelancers en bureaus te doorzoeken die gespecialiseerd zijn in specifieke disciplines zoals foto-editing en productfotografie. Je kunt zelfs freelancers inhuren op basis van hun branche-ervaring, dus als je een voedselfotograaf nodig hebt, kun je daar naar zoeken via de zoekpagina (EN).
- Fiverr: Fiverr biedt een breed scala aan freelancers die gespecialiseerd zijn in alles van productfotografie tot webdesign.
- Freelancer (EN): De database van Freelancer omvat experts in een breed scala aan creatieve gebieden, zoals fotografie en illustratie.
- Upwork (EN): Upwork stelt ondernemers in staat om banen te plaatsen en verbinding te maken met freelancers die de ervaring en vaardigheden hebben om hen te helpen.
- Guru (EN): Guru biedt freelance fotografen met expertise in alle soorten fotografie, zoals modefotografie, straatfotografie, landschapsfotografie en nog veel meer.
2. Overtuigende tekst
In reclame en marketing beschrijft tekst het geschreven materiaal van een mediastuk. Voor ondernemers is copywriting een nuttige vaardigheid om in je arsenaal te hebben.
Gebruikers kijken maar even naar je hero image voordat ze verder gaan, dus je hebt slechts een paar seconden (maximaal) om de aandacht van de gebruiker te trekken. Goede tekst moet in een begrijpelijke manier inspelen op de behoeften van de klant.
Hier zijn enkele snelle tips voor het schrijven van overtuigende tekst:
- Wees beknopt: Langdradige teksten hebben hun plaats, maar een bannerafbeelding is dat niet. Bannertekst moet krachtig en to the point zijn.
- Vermijd moeilijk leesbare lettertypen: Zelden gebruikte lettertypen kunnen meer tijd kosten om te lezen. Hoewel de extra tijd minimaal kan zijn, telt elke milliseconde als het gaat om bannerafbeeldingstekst.
- Repliceer de toon van je klanten: Gebruikers staan vaak meer open voor taal die vertrouwd aanvoelt. Denk na over de taal die je doelgroep gebruikt op sociale media en gebruik dit om de stijl van je schrijven te beïnvloeden.
- Focus op voordelen, niet op functies: In plaats van te zeggen: “Onze klantenservice is 24/7 beschikbaar om vragen te beantwoorden”, zeg je: “Krijg snel antwoorden met 24/7 klantenservice.”
- Wees niet bang om verschillende teksten te testen: Hero images zijn ideale kandidaten voor A/B-testen, aangezien verschillende woordkeuzes de manier waarop je bezoekers omgaan met je ontwerp van de hero image drastisch kunnen veranderen.
- Vermijd marketingbuzzwoorden en clichés: De ogen van gebruikers neigen vaak om overgebruikte reclame-slogans zoals “handel snel”, “enorme besparingen” en “tevredenheidsgarantie” te negeren.
3. Sterke call-to-action
Tenslotte moet elke hero image een prominente call-to-action (CTA) bevatten. Een CTA is de tekst die de lezer vertelt welke actie je wilt dat ze doen, meestal vergezeld van een knop die die actie start. Voorbeelden zijn “Nu winkelen”, “Onderteken de petitie” of “Leer meer”.
Hoe je je call-to-action schrijft, hangt af van welk segment van je marketingfunnel je aanspreekt. Als je top-of-funnel gebruikers aanspreekt, kun je ze vragen om “Meer leren”, terwijl voor bottom-of-funnel gebruikers de CTA een directere “Koop hier” kan zijn.
Begrijp het doel van je hero image
Je kunt dit waardevolle onderdeel van je website voor verschillende doeleinden gebruiken, afhankelijk van je bedrijf en doelen. Laten we eens kijken naar enkele van de meest voorkomende benaderingen voor het gebruik van hero images hieronder:
1. Om je merk op te bouwen en je verhaal te vertellen
Een mogelijke toepassing van je website hero image kan een merkverhaal zijn. Merkverhalen zijn het gebruik van narratieven om de unique selling proposition van je merk te communiceren. Verhalen vertellen is een zeer effectieve methode voor merkopbouw, omdat een goed verhaal vaak memorabel is.
2. Om klantvragen te beantwoorden
Een andere veelvoorkomende aanpak is om antwoorden op veelgestelde vragen te tonen. Je kunt een veelvoorkomend pijnpunt van klanten aanpakken of de ruimte gebruiken om tijdgevoelige vragen die je bezoekers mogelijk hebben te beantwoorden.
3. Om je waardepropositie te benadrukken
Merkverhalen zijn niet de enige manier om je unique selling proposition te presenteren. Je merk zal beter herinnerd worden door bezoekers als ze begrijpen wat het anders maakt dan de concurrentie. Wat is een betere plek om je klanten je waardepropositie te vertellen dan op je homepage, waar de meeste bezoekers als eerste terechtkomen?
4. Om een aankondiging te doen
Je homepage-banner is dé plek voor het promoten van verkopen, evenementen, productlanceringen en andere belangrijke aankondigingen. Bannerafbeeldingen krijgen de meeste aandacht van je websitebezoekers, dus elke aankondiging die je breed zichtbaar wilt maken, is een goede kandidaat voor bannerafbeeldingsinhoud.
Optimaliseer je website met een verbluffende hero image
Daar heb je het, de reden, het doel en de toepassingen van een hero image op je homepage. Het regelmatig veranderen van deze afbeeldingen houdt je winkel fris voor terugkerende bezoekers, houdt het levendig en stimuleert bezoekers om de acties te ondernemen die het meest in lijn zijn met je conversiedoelen.
Hoe maak je een hero image voor je online winkel
Het creëren van een goed ontworpen en aandacht trekkende hero image helpt nieuwe websitebezoekers aan te trekken en hen aan te moedigen om nog meer van je producten te verkennen. Bekijk deze stapsgewijze gids voor het maken van een hero image voor je online winkel.
1. Gebruik hoogwaardige productafbeeldingen
Trek nieuwe klanten aan met verbluffende foto's van je producten of fysieke winkel. Je kunt altijd professionele stockfotografie gebruiken, maar het is het beste als je een fotograaf kunt inhuren om hoogwaardige foto's van je specifieke producten te maken.
Hier is een geweldig voorbeeld van een online plantenwinkel. Iedereen die deze site bezoekt, is waarschijnlijk geïnteresseerd in planten en zal gemakkelijk worden aangetrokken door de verbluffende groene achtergrond in hun hero image.
2. Maak een afbeelding met een online ontwerptool
Je kunt je productfoto's opvrolijken of een hero image maken door grafische elementen te gebruiken. Zoek een online ontwerptool zoals Canva, Visme of Adobe Cloud, en maak een opvallende afbeelding.
Hier is een geweldig voorbeeld van hoe dit eruit kan zien—Detour Coffee heeft een uitsnede van hun product gemaakt en deze geplaatst op een afbeelding met gedurfde kleuren en vormen om de aandacht te trekken.
3. Voeg de meest relevante call-to-action toe
Geen enkele hero image is compleet zonder een call-to-action (CTA), dus voeg een knop toe die specifiek is voor de afbeelding of grafiek die je hebt opgenomen.
Je wilt ook ervoor zorgen dat je knop overeenkomt met het algemene ontwerp, zodat deze opvalt maar niet uit de toon valt. Hier is een geweldig voorbeeld van hoe dat eruit kan zien:
4. Gebruik video als onderdeel van je hero image
Een andere geweldige manier om aandacht te trekken is door een herhalende, geluidloze video of GIF voor je hero image te maken. Bijvoorbeeld, de website van Nomz heeft een aantal videoclips die verschijnen, waardoor de websitebezoeker wordt aangetrokken en langer op de pagina blijft terwijl ze de volledige scène bekijken.
5. Werk je hero image regelmatig bij
Je hero image is geen eenmalig proces. Hoewel je misschien dol bent op de afbeelding die je hebt, moet je deze af en toe bijwerken om terugkerende klanten kennis te laten maken met nog meer producten en aanbiedingen.
Je kunt zelfs overwegen om een hero imageslider te maken, zodat je meerdere call-to-actions tegelijk kunt delen. Dit is een geweldig idee wanneer je een aankomende feestdag wilt promoten, zoals we zien in het voorbeeld hieronder, terwijl je nog steeds andere productlijnen promoot.
Klaar om je bedrijf te starten? Begin je gratis proefperiode van Shopify—geen creditcard vereist.
Veelgestelde vragen over hero images
Hoe voeg ik een hero image toe aan mijn website?
Als je een Shopify-thema gebruikt, kun je je hero image toevoegen in je thema-editor. Log in op je Shopify-winkel en ga naar Online Winkel > Thema's en selecteer “Aanpassen” naast je huidige thema.
De meeste thema's hebben standaard ruimte voor een banner, maar als je deze moet toevoegen, selecteer dan “Sectie toevoegen” onderaan je rechtermenu en selecteer het hero-sectorelement. Dit element kan worden gelabeld als hero image, bannerafbeelding of diavoorstelling—afhankelijk van het thema dat je gebruikt.
Houd er ook rekening mee dat hero images op websites niet tussen thema's worden overgedragen zoals productafbeeldingen en inline blogafbeeldingen. Hero images moeten afzonderlijk in elk thema worden toegevoegd en verschijnen alleen op de pagina als je ze aan je huidige thema toevoegt.
Wat moet de grootte van een hero image op een website zijn?
Je kunt PNG- en JPEG-bestanden tot 20 MB toevoegen, maar het is een goed idee om de bestandsgrootte laag te houden om redelijke laadtijden van de pagina te waarborgen. Exacte afbeeldingsformaten zijn afhankelijk van het thema dat je gebruikt, maar doorgaans moeten hero images minimaal 2048 pixels breed zijn om in scherpe resolutie te worden weergegeven wanneer ze in volledig scherm worden bekeken.
Houd er rekening mee dat thema's responsief zijn, wat betekent dat de ruimte die voor hero images is gereserveerd, verandert afhankelijk van de schermformaten waarop de website wordt bekeken. Zorg ervoor dat je ruimte rond het kader van je afbeelding laat om rekening te houden met delen die mogelijk worden afgesneden.
Je wilt ook vermijden om je tekst en CTA direct in de afbeelding te plaatsen. Gebruik in plaats daarvan je thema-editor om tekst en CTA-knoppen te overlayen die voor je afbeelding drijven en onafhankelijk van je afbeelding kunnen worden aangepast.
Wat is het doel van een hero image op een website?
Hero images op websites dienen een breed scala aan doeleinden, maar over het algemeen zijn ze geweldig voor elke aankondiging die je aan zoveel mogelijk bezoekers wilt doen. Veelvoorkomende doeleinden zijn het aankondigen van verkopen, het benadrukken van je merkwaarden of het aankondigen van nieuwe producten.
Wat moet een hero image bevatten?
Een hero image op een website moet een grote, aandacht trekkende afbeelding bevatten, samen met beknopte, overtuigende tekst en een sterke call-to-action.
