Hero image

Hero image

Een krachtige hero image. :)

*Een hero image is een grote afbeelding op de homepage die direct de aandacht van een bezoeker triggert. De afbeelding sluit aan bij de stijl van jouw bedrijf en ondersteund de uitstraling van jouw shop.

Wat kan ik allemaal met de hero image?

1. Activeer de hero image

Geef je webshop een boost en kies voor de ultieme hero image. Dé eyecatcher die we allemaal nodig hebben. Zet hem eenvoudig aan of uit.

3. Desktop: Upload hero image.

Upload de afbeelding in de volgende afmetingen 1380 × 415 pixels.

*Tip: gebruik geen tekst in de afbeelding wanneer je de tekst apart wilt invoeren met de tekst optie. (zie hieronder)

4. ‘Super’ hero image

Doe eens gek. Let wel! De foto moet echt cool genoeg zijn want dan alleen bereik je met deze optie het allerbeste.
Durf je het aan? Upload deze super hero in: 1900 × 575 pixels.

5. Super hero lichte text functie (handig!)

Heb je een superhero image die je gaat gebruiken. Dan kan het zo zijn, dat deze wat donkerder is. Of: je maakt hem zelf donkerder met onze color overlay functionaliteit (zie hieronder) Zet dan deze optie aan! Alle teksten zoals het menu, usp’s, etc. Worden dan wit! Je hero tekstkleuren zelf kun je zelf nog bepalen. Maar dit is natuurlijk mooi meegenomen.

6. Mobile: Hero image upload.

Het is belangrijk om iedere banner apart voor mobiel te uploaden. Dit zorgt voor een optimale gebruikerservaring en optimaliseert de webshop is z’n geheel.
Gebruik voor de mobiele variant de volgende afmetingen: 355 × 415 pixels.

*DMWS kan je helaas niet gratis ondersteunen bij opmaken van banners. Maar mocht je er zelf niet uitkomen dan kun je gebruik maken van onze design pakketten.

7. Hero image Color overlay

Is de tekst niet leesbaar of ben je opzoek naar een fancy effect? Voeg dan een gekleurde overlay toe aan je foto.

*Wat we eigenlijk doen is een kleurlaag over je foto heen plaatsen. Kies dus eerst de kleur en daarna de ‘helderheid’ of ‘doorzichtigheid’. Je kunt zo de foto donkerder of lichter maken, speel er maar eens mee. Het kan allemaal en dat zonder Photoshop te gebruiken :)

8. Hero image color overlay helderheid

Kies de helderheid in percentage 100 – 0 %.

9. Hero image tekst positie

De ideale positie van de tekst over je foto is natuurlijk afhankelijk van de foto. Wil je tekst links, rechts, of in het midden tonen?
Bepaal zelf wat het beste bij jou past.

10. Hero image titel

Wat is de titel van je hero image? Om een enter toe te voegen gebruik:

 

11. Mobiel: Hero image titel (*nieuw)

Voor een optimale weergave gebruik je een verkorte versie voor op je mobiel. Kies een titel die past in je scherm. Deze optie is nieuw en draagt weer bij
aan een optimale gebruikerservaring.

12. Hero image titel kleur

Kies hier de kleur van de titel

13. Hero image tekst

Welke tekst wil je onder de titel laten zien? Deze wordt kleiner getoond dus kun je gerust langer maken dan de titel.

14. Mobiel: Hero image tekst

Hier geldt ook, houd de tekst op mobiel iets korter dan de tekst op desktop.

15. Hero image tekst kleur

Dit is de kleur of de tekst in de hero image.

16. Hero image button tekst

Wat wil je in de button vertellen? Waar linkt deze naar toe? Of wat is de actie die een gebruiker gaat doen?

17. Hero image button kleur

Bepaal de kleur van de button

18. Hero image linkt naar welke URL?

Waar moet de hero image naar verwijzen? Knip en plak de url van de gewenste pagina.