Huisstijl: Kleuren, lettertypes & logo instellen

Duur: 5 - 10 minuten | Moeilijkheid: gemakkelijk 
Onderdeel van: Stappenplan: Aan de slag met SYS
DoelJe kan gemakkelijk je branding kleuren instellen om deze eenvoudig in SYSitor overal te gebruiken. In dit artikel leggen we uit hoe je dit doet!
Pakket: Alle pakketten

In deze video de volgende onderwerpen:

00:23 Naar huisstijl gaan

00:39 Kleuren instellen 

01:27 Lettertype instellen

02:47 Logo aanpassen

03:43 Achtergrond instellen 

In dit artikel vind je

Huisstijl instellen op SYSitor
Lettertype instellen
Logo instellen / uploaden
Favicon instellen / uploaden

Huisstijl instellen op SYSitor

Om over je hele website dezelfde stijl neer te zetten maken we gebruik van een huisstijl. Het instellen van de huisstijl bij SYSitor zorgt ervoor dat de lettertypes, kleuren en stijl ingesteld worden op 1 locatie. Op die manier kun je gemakkelijk een aanpassing maken over je gehele website. Zo kun je de resultaatpagina's in 1 klik importeren en staat deze gelijk in jouw stijl. In dit artikel leggen we je uit hoe je je huisstijl instelt.

Belangrijk: Wanneer je een aanpassing doorvoert bij je site instellingen, worden deze over je hele site doorgevoerd. Wanneer je bijvoorbeeld de kleur 'Primair' aanpast van rood naar blauw, wordt alle tekst die gelabeld is met de kleur 'Primair' blauw.

Eerst kijken we naar je Globale instellingen.

Hoe kom ik bij de Globale instellingen?

Open SYSitor op een pagina naar keuze, en klik bovenin je scherm op Bewerk met SYSitor > Site instellingen.

Globale kleuren aanpassen

Er zijn 4 standaard groepen voor de kleuren en lettertypes: Primair, Secundair, Tekst en Accent.

In dit voorbeeld passen we alle onderdelen die het label 'Primair' hebben aan op je site.

1
Klik op Globale kleuren
2
Ga naar de kleur 'Primair'
3
Klik op het kleurenstaal om de kleurenkiezer te openen
4
Kies de kleur die je in wil stellen als 'Primair'
5
Sluit het menu door weer op het kleurenstaal te klikken

Globale lettertypen aanpassen

1
Klik op Globale lettertypen
2
Ga naar het lettertype 'Primair'
3
Klik op het potloodje om de instellingen te openen
4
Kies de instellingen die je in wil stellen als 'Primair' lettertype
5
Sluit het menu door weer op het potloodje te klikken

Wil je dat de resultaatpagina's in 1 klik werken? Gebruik dan de volgende instellingen:

Globale instellingen

Global Color

  • Primary kleur: Donkere kleur - waar witte tekst op kan waarbij de achtergrondkleur de primay kleur is
  • Secondary kleur: Lichte kleur waar witte tekst op kan waarbij de achtergrondkleur de secondary kleur is
  • Text: Grijs-achtig (groen/bruin oid) wat tekst gaat zijn
  • Accent: Kleur die opvalt (wordt gebruikt voor buttons, text highlight).

Primary, Secondary en Accent moeten bij elkaar gebruikt kunnen worden


Global Font

  • Primary font: Geen px meegeven
  • Secondary font: Geen px meegeven
  • Body: Text rem meegeven (1 rem)
  • Accent: Text die opvalt

Thema Stijl

Desktop:

  • H1 (3/3,5 rem)
  • H2 (2/2,5 rem)
  • H3 (1,3/1,8 rem)
  • H4 (1/1,5 rem)
  • H5 (1 rem)

Voor mobiel moet dit ook ingesteld worden. Het is handig om te kijken per lettertype wat daarin het best past.

Buttons

  • Typografie global accent
  • Verder de ideale standaard button creëren

Afbeeldingen

Hoeft voor nu niet ingesteld, tenzij afbeeldingen standaard afgeronde hoeken moeten hebben

Form field

Ideale formulier opmaken


Logo instellen / uploaden

Het logo veranderen gaat via site identiteit

1
Klik op site identiteit
2
Daarna klik je op het logo dat onder het kopje: logo op de site staat.
3
Je komt nu in de mediatheek. Hier kan je een afbeelding uploaden of er een selecteren (wanneer je het logo al eerder hebt geupload)

4
Nadat je jouw logo hebt geselecteerd klik je op Media invoegen.
5
Vergeet als je klaar bent niet op  Bijwerken / Publiceren te klikken

Aanpassen favicon

Een favicon is een kleine afbeelding die zichtbaar is in de browser. Mensen zien dit voor de url van jouw website staan.

Hierboven bij logo instellen staan deze stappen met afbeeldingen erbij.

1
Klik op Site instellingen en dan op  site identiteit
2
Daarna klik je op het logo dat onder het kopje:  site favicon staat
3
Je komt nu in de mediatheek. Hier kan je een afbeelding uploaden of er een selecteren (wanneer je het logo al eerder hebt geupload)
4
Nadat je jouw favicon hebt geselecteerd klik je op  Media invoegen.
5
Vergeet als je klaar bent niet op  Bijwerken / Publiceren te klikken.
Heeft dit artikel je geholpen? Bedankt voor je feedback! There was a problem submitting your feedback. Please try again later.

Meer hulp nodig? Stuur je vraag naar het support team Stuur je vraag naar het support team