05. Visueel

Upload in deze sectie je logo. 

We adviseren om een SVG logo te gebruiken omdat deze vele malen scherper en mooier is dan een ander bestandsformaat. 

Voor de afmetingen bekijk je deze pagina

SVG logo: 

Upload je logo in Tools > Bestanden kopieer vervolgens de link en plak die in Logo SVG.

Je kunt dezelfde link ook plakken in Mobile logo svg echter kun je een apart logo maken voor je mobiele webshop. 

– Logo position: Kies waar je je logo wilt tonen. Links in de header of gecentreerd. In geval van gecentreerd verschuift de navigatie mee naar het midden. 

– Logo dimensions: Kies hier welke stijl logo je wilt. Vierkant of rechthoekig. De afmetingen staan er bij maar je kunt ook hier kijken.

– Logo background color: Kies hier de achtergrondkleur van je logo. Mocht je logo al een kleur hebben dan schakel je de optie Logo background uit. 

– Logo padding: Stel hier in hoeveel ruimte je wilt om je logo heen. Daarmee bedoelen we het paarse gedeelte in onderstaande afbeelding

– Favicon: Dit is het kleine logo in je browser, gebruik een vierkante afbeelding.


Theme instellingen

Geef hier aan of je het thema wilt gebruiken met afgeronde hoeken of zonder afgeronde hoeken.

Ronde hoeken

Rechte hoeken


Kleuren

Stel hier je hoofdkleur in die gebruikt wordt als belangrijkste kleur. 

Dat geldt dan voor elementen zoals onderstaand:

  • Green color en Red color: Hiermee stel je de groene kleur en rode kleur in die gebruikt worden voor bijvoorbeeld de “Op voorraad” of “niet op voorraad” meldingen. Dit geldt bijvoorbeeld ook voor “Geopend” of “gesloten” meldingen.

Tekst

Stel hier alle letterypen en tekst kleuren in voor je titels en brood tekst. 

Voor mooie lettertypen combinaties kijk je op https://www.fontpair.co/ of bij https://fonts.google.com/


Knoppen

Stel hier de kleuren in van je knoppen.

– Primary button: Dit is je CTA (call to action button). Deze wordt gebruikt voor belangrijke handelingen zoals toevoegen aan winkelwagen. 

– Secondary button: Je op 1 na belangrijkste button en wordt gebruikt voor bijvoorbeeld de categorie knoppen

– Third button: Dit is je ondersteunde knop. Deze kun je zowel transparant maken als gevuld. Gebruik daar voor de setting Third button transparent

Updated on juni 2, 2021

Was this article helpful?

Related Articles