Hoe maak ik een hero-afbeelding in Canva?
Een hero-afbeelding is een grote, opvallende afbeelding, meestal met tekst, die bovenaan je webwinkel wordt geplaatst. Het geeft klanten direct een eerste indruk en wordt vaak gebruikt om producten te promoten, een sfeer weer te geven, of een call-to-action toe te voegen. Zo kun je klanten overtuigen om iets te kopen.
Stap 1. Bepaal het formaat
Je kunt een hero-afbeelding op twee manieren in je webwinkel plaatsen. Met een Slideshow (beschikbaar vanaf Pro) kun je de hero-afbeelding zowel schermbreed als paginabreed tonen. De andere optie is om de afbeelding direct op de pagina te plaatsen, waarbij deze altijd paginabreed wordt weergegeven.
Breedte
Om ervoor te zorgen dat je afbeelding met tekst scherp blijft, raden we aan de onderstaande formaten te gebruiken. Het kan zijn dat je webwinkel iets afwijkt van onderstaande formaten, doordat je bijvoorbeeld zelf een andere breedte of witruimte hebt ingesteld.
Geen zijkolommen:
- Slideshow - Schermbreed: 2200px
- Slideshow - Paginabreed: 1098px
- Op de pagina: 1068px
1 zijkolom:
- Slideshow - Schermbreed: 2200px
- Slideshow - Paginabreed: 858px
- Op de pagina: 828px
2 zijkolommen:
- Slideshow - Schermbreed 2200px
- Slideshow - Paginabreed: 618px
- Op de pagina: 588px
Hoogte
De hoogte is geheel afhankelijk van wat werkt voor je afbeelding en webwinkel. We raden aan om de hoogte tussen de 200px en 1000px te maken.
Stap 2. Maak een nieuw ontwerp in Canva
Ga naar Canva.com en maak een nieuw (gratis) account aan of log in op je bestaande account. Canva biedt ook betaalde abonnementen aan, waarmee je meer ontwerpmogelijkheden hebt dan met de gratis versie. In dit artikel maken we uitsluitend gebruik van de gratis versie.
Wanneer je bent ingelogd kun je rechtsboven op de knop Een ontwerp maken klikken. Kies daarna voor Aangepast Formaat. Vul vervolgens de gewenste breedte en hoogte in. In dit voorbeeld zullen we een schermbrede afbeelding maken van 2200px bij 800px.
Wanneer je het gewenste formaat hebt ingevuld, klik je op Nieuw ontwerp maken.
Stap 3. (Optioneel) Kies een Sjabloon
In Canva zijn er veel sjablonen beschikbaar die je eenvoudig kunt aanpassen. Je kunt een bestaand sjabloon gebruiken en dit vervolgens voorzien van je eigen teksten en afbeeldingen.
De sjablonen vind je in het linkermenu onder Ontwerp. Kies een geschikt sjabloon en pas het naar wens aan! Maak ook gebruik van de zoekfunctie om snel een passend sjabloon te vinden.
Meer informatie over het gebruik van Sjablonen in Canva lees je hier.
Stap 4. Creëer een eigen afbeelding
Wil je liever geen sjabloon gebruiken? Geen probleem! Je hebt nu de Canva ontwerpruimte voor je. Je kunt gemakkelijk een afbeelding toevoegen en bewerken.
Klik in het linkermenu op Uploads om een nieuwe afbeelding toe te voegen. Sleep vervolgens de afbeelding naar de ontwerpruimte en pas eventueel het formaat aan.
Canva geeft je verder nog de mogelijkheid om de afbeelding te bewerken. Zo kun je bijvoorbeeld een filter of effect toevoegen. Wanneer je de afbeelding hebt geselecteerd klik je linksboven op Afbeelding bewerken om de afbeelding nog verder aan te passen. Hoe dit werkt en wat er mogelijk is lees je in deze Canva handleiding.
Tip: Heb je nog geen afbeeldingen of wil je liever een sfeerafbeelding? Je kunt gebruik maken van stockfoto’s. Online heb je veel gratis en betaalde stockfoto websites. Voorbeelden van gratis websites zijn: Pexel, Pixabay en Unsplash.
Het voordeel van stockfoto’s zijn dat er geen rechten aan vast zitten. Je kunt deze afbeeldingen dus vrij gebruiken!*
*Let op: het kan zijn dat sommige stockfoto’s alleen op een bepaalde manier mogen worden gebruikt. Controleer altijd de licentie.
Stap 5. Voeg tekst toe
Nu de achtergrond afbeelding staat, kun je de tekst toevoegen. Klik op Tekst in het linkermenu en voeg een tekstvak toe (Canva heeft al een aantal leuke lettertype/kleurencombinaties!)
Pas vervolgens je tekst aan naar eigen wens. Vergeet niet om het lettertype aan te passen naar je eigen huisstijl!
Meer uitleg over de tekst editor van Canva lees je hier.
Afhankelijk van de grote van je afbeelding (heb je deze bijvoorbeeld schermbreed of paginabreed ingesteld) dien je het lettertype aan te passen. In de regel: hoe breder je afbeelding, hoe groter je het lettertype moet instellen. Dit komt omdat je afbeelding op mobiele apparaten ook nog goed leesbaar moet zijn.
Stap 6. Exporteer de afbeelding en plaats het in je webwinkel.
Ben je tevreden met het resultaat? Dan kun je de afbeelding exporteren.
Klik rechtsboven op Delen en vervolgens op Downloaden.
Kies vervolgens voor JPG (als je een foto hebt gebruikt) of PNG (als je alleen tekst en vormelementen hebt gebruikt).
Open daarna de beheeromgeving van je webwinkel en voeg de afbeelding toe. In dit geval plaatsen we de afbeelding als een Slideshow en kiezen we voor de positie Tussen paginaheader en pagina-inhoud.
Tips!
- Op mobiele apparaten wordt de hero-afbeelding automatisch meegeschaald. Controleer daarom altijd of de afbeelding goed leesbaar is op zowel desktop als mobiele apparaten. Als de tekst niet duidelijk genoeg is, kun je de grootte van het lettertype aanpassen.
- Zorg altijd voor genoeg contrast tussen je foto en de afbeelding zodat het goed leesbaar is. Dit kan door de afbeelding donker of juist lichter te maken. Een andere optie is om een gekleurd blok achter de tekst plaatsen of de afbeelding iets te vervagen.
- Heb je geen inspiratie? Gebruik een sjabloon of neem eens een kijkje bij andere webwinkels of Pinterest! Zorg wel dat je nooit zonder toestemming een afbeelding van een andere website namaakt of kopieert.
Hulp nodig?
Wil je niet of lukt het niet om zelf een hero-afbeelding te maken? Dan zit ons Design team voor je klaar om een leuke afbeelding voor je te creëren! Voor meer informatie of vrijblijvend advies, neem contact op met onze designers via services@myonlinestore.com
Neem een kijkje in ons Lookbook voor leuke voorbeelden!