Huisstijl: Kleuren, lettertypes & logo instellen

Duur: 5 - 10 minuten | Moeilijkheid: gemakkelijk
Onderdeel van: Stappenplan: Aan de slag met SYS
Doel: Je 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.