Kleuren, lettertypes en indeling instellen
Stel op het tabblad Siteontwerp één keer de kleuren, lettertypes, tekstgroottes en hoekafronding van je winkel in, voor alle pagina's tegelijk.
Siteontwerp bevat de instellingen waardoor je hele winkel eruitziet als één merk: de kleuren, lettertypes, tekstgroottes en hoekafronding. Je stelt ze elk één keer in en alle pagina's volgen. Afzonderlijke blokken kunnen deze instellingen nog steeds overschrijven als je dat wilt.
Siteontwerp openen
- Open de editor. Zie De editor in één oogopslag.
- Klik in het instellingenpaneel aan de rechterkant op het tabblad Siteontwerp.
- Klik op een kop om hem te openen: Identiteit, Kleuren, Typografie of Indeling.
Wijzigingen zijn meteen zichtbaar op de pagina en worden automatisch opgeslagen. Je live winkel verandert als je publiceert.
Kleuren
Open Kleuren om de zeven kleuren te zien waaruit elke pagina is opgebouwd.
- Accent: de hoofdkleur van je winkel. Knoppen en links gebruiken die.
- Tekst op accent: de kleur van de woorden op het accent, zoals het label van een knop.
- Pagina-achtergrond: de kleur achter je pagina's.
- Oppervlak: de kleur van kaarten en vlakken, zoals productkaarten en formuliervakken.
- Tekst: de kleur van koppen en andere hoofdtekst.
- Secundaire tekst: de rustigere kleur voor alinea's, omschrijvingen en kleine lettertjes.
- Randen: de kleur van dunne lijnen en omlijningen.
Een kleur kiezen
- Klik op een kleurvak.
- Kies in de kiezer die opent een van deze mogelijkheden:
- Klik of sleep in het grote vierkant om in te stellen hoe helder en hoe verzadigd de kleur is, en sleep de strook eronder om de kleur zelf te veranderen.
- Typ of plak in het vak een hexcode, zoals
#2B2622. - Klik op een kleurvlak onder Themakleuren om een kleur te hergebruiken die je al hebt, of onder Recent voor een kleur die je onlangs hebt gekozen.
- Klik ergens buiten de kiezer of druk op Esc om hem te sluiten.
Controleren of je tekst goed leesbaar is
Onder de zeven kleuren controleert Payly of elke tekstkleur goed leesbaar is op de kleur erachter. Als alles in orde is, zie je Elk kleurenpaar is goed leesbaar. Is een paar te flets, dan noemt de lijst het, toont de contrastverhouding en hoeveel nodig is, en biedt een knop Oplossen die de tekstkleur voor je aanpast.
Payly houdt je niet tegen als je een paar met weinig contrast kiest, maar lichtgrijze tekst op een lichte achtergrond is moeilijk te lezen, zeker op een telefoon in zonlicht.
Typografie
Open Typografie om je lettertypes en tekstgroottes te kiezen.
- Lettertype hoofdtekst: het lettertype voor alinea's, menu's en knoppen.
- Basislettergrootte: de grootte van normale tekst.
- Regelhoogte hoofdtekst: de ruimte tussen regels tekst. Een hoger getal geeft meer ruimte.
- Lettertype koppen: het lettertype voor koppen. Kies Gebruik het lettertype van de site om ook voor koppen het lettertype van de hoofdtekst te gebruiken.
- Grootte van koppen: maakt alle koppen groter of kleiner, als percentage.
- Gewicht van koppen: hoe vet koppen zijn.
- Letterspatiëring van koppen: maakt de ruimte tussen de letters van koppen kleiner of groter.
Een lettertype kiezen
- Klik op het vak Lettertype hoofdtekst of Lettertype koppen.
- Scroll door de lijst, die elke naam in het eigen lettertype toont. De groep Aanbevolen bovenaan bevat lettertypes die bij de meeste winkels passen.
- Typ in Lettertypes zoeken… om een lettertype op naam te vinden.
- Klik op een lettertype om het te gebruiken.
De lijst omvat de hele bibliotheek van Google Fonts. De lettertypes die je gebruikt, worden bij het publiceren in je winkel opgenomen. Ontbreekt een lettertype in de lijst, typ dan de exacte naam uit Google Fonts in het zoekvak en kies het onder Toch gebruiken.
Indeling
Open Indeling voor twee instellingen:
- Hoekafronding bepaalt hoe rond de hoeken van knoppen, kaarten en afbeeldingen zijn. Schuif naar 0 voor scherpe hoeken en naar rechts voor zachte hoeken. Blokken waarvan de eigen hoekafronding op Auto staat, volgen deze instelling.
- Tekstrichting is Van links naar rechts voor de meeste talen. Van rechts naar links spiegelt de hele indeling voor Arabisch, Hebreeuws, Farsi en Urdu.
Identiteit
Open Identiteit om je Browsericoon in te stellen, het kleine plaatje op een browsertabblad. Gebruik een eenvoudig merkteken in plaats van je hele logo, want het wordt op ongeveer 16 pixels getoond. Klik op Afbeelding uploaden of Uploads doorbladeren, zoals beschreven in Afbeeldingen toevoegen en de mediabibliotheek gebruiken. Laat je het leeg, dan wordt je logo gebruikt.
Je logo staat hier niet. Dat hoort in je header, waar het ook verschijnt. Zie Je header en footer aanpassen.
Eén blok apart aanpassen
Elk tekstblok, elke kop en elke knop kan het lettertype, de grootte en de kleuren van de site overschrijven. Selecteer het blok en open de groep Typografie of Weergave. Zie Tekst, koppen en knoppen bewerken.
Tip: Wil je een compleet andere uitstraling, dan kun je opnieuw beginnen met een van de kant-en-klare ontwerpen. Zie Overstappen naar een ander siteontwerp.