Naast het standaard kleurschema van de website kun je voor de knoppen nog andere kleuren instellen. Instelbaar zijn tekst- en achtergrondkleur. Er dient altijd voldoende contrast te zijn tussen tekst- en achtergrondkleur.

• Achtergrondkleur primaire knop: Achtergrondkleur van de standaard knoppen.
• Tekstkleur primaire knop: Tekstkleur van de standaard knoppen.
• Achtergrondkleur secundaire knop: Achtergrondkleur van de secondaire knoppen.
• Tekstkleur secundaire knop: Tekstkleur van de secondaire knoppen.
• Achtergrondkleur donatiebedrag en -frequentie: Achtergrondkleur van de knoppen op het donatieformulier.
• Tekstkleur donatiebedrag en -frequentie: Tekstkleur van de knoppen op het donatieformulier.

Typografie gaat over teksten (lettertype, lettergrootte, gewicht). Je stelt dit in voor de gehele website en bepaald voor een groot deel de uitstraling van de website.

• Website lettertype: Lettertype voor alle teksten. Keuze uit een aantal lattertypen.
• Website lettergrootte: Lettergrootte van de platte tekst. Het effect is afhankelijk van het gekozen lettertype bij Website font.
• Website lettergewicht: Gewicht van de platte tekst. Meestal 'Regular' of 'Light'. Het effect is afhankelijk van het gekozen lettertype bij Website font.
• Koppen lettertype: Voor koppen kan een afwijkend lettertype worden gekozen. Meestal wel gelijk aan het gekozen lettertype bij Website font.
• Koppen gewicht: Voor koppen kan een afwijkend gewicht worden gekozen.
• Kop 1 lettertype: Voor de H1 kop kan ook aan afwijkend lettertype worden gekozen. Deze is vaak wel afwijkend van het standaard lettertype.
• Kop 1 gewicht: Voor de H1 kop kan ook aan afwijkend lettertype worden gekozen. Deze is vaak wel afwijkend van het standaard lettertype.
• Quote lettertype: Ook voor quote kan een afwijkend lettertype worden gekozen.
• Typografische schaal: Bepaal hier de onderlinge verhouding tussen alle onderdelen op de website (lettergroottes, koppen, marges binnen artikelen, marges tussen artikelen). Deze instelling heeft effect op de gehele website en stel je meestal maar n keer in bij de start.

Bij layout bepaal je de breedtes en indeling van de website.

• Maximale website breedte: Standaard breedte van het contentdeel van de website (header heeft eigen instelling). Individuele artikelen kunnen alsnog breder worden ingesteld.
• Ruimte tussen artikelen: Verticale witruimte tussen artikelen.
• Positie zijbalk: Als je de template variant met zijbalk hebt gekozen, bepaal je hiermee of je de zijbalk links (standaard) of rechts wilt tonen.
• Uitlijning uitklapbare artikelen: Deze artikelen hebben niet de volledige breedte. Je kunt daarom kiezen of je ze wilt centreren (standaard) op de pagina of links uitgelijnd.
• Uitlijning formulieren: Deze artikelen hebben niet de volledige breedte. Je kunt daarom kiezen of je ze wilt centreren op de pagina of links (standaard) uitgelijnd.
• Kruimelpad: Aan of uit. Een homepage of landingspagina met een hero banner heeft meestal geen broodkruimelpad nodig.
• Paginatitel: Aan of uit. Een homepage of landingspagina met een hero banner heeft meestal geen titel nodig.
• Vorm stijl: Wel of geen afgeronde hoeken op knoppen, afbeeldingen of elementen met een achtergrondkleur. Dat kun je hier instellen.
• Subnavigatie van hoofdmenu in zijbalk: Aan of uit. In situaties waarin de template variant met zijbalk is gekozen en er een submenu is, kun je er toch voor kiezen het submenu niet te tonen.
• Subnavigatie van meta menu in zijbalk: Aan of uit. In situaties waarin de template variant met zijbalk is gekozen en er een meta submenu is, kun je er toch voor kiezen het submenu niet te tonen.
• Subnavigatie van account menu in zijbalk: Aan of uit. In situaties waarin de template variant met zijbalk is gekozen en er een account submenu is, kun je er toch voor kiezen het submenu niet te tonen.
• Animaties: Aan of uit. Onderdelen op een pagina kunnen subtiel verplaatsen tijdens het scrollen.

De header van de website, o.a. logo en navigatie, is hier in te stellen. En ook welke onderdelen staan 'aan' of 'uit'.

• Type: Je hebt twee typen headers tot je beschikking: Basic of Extended. De extended versie heeft naast het hoofddeel een extra metadeel met een menu bovenaan de header. Dat biedt ruimte om bijvoorbeeld een zoekicoon of linkjes naar 'Contact' of 'Over ons' in te zetten.
• Logo: Hier kies je het logo van de website. Bij voorkeur indien mogelijk een .svg bestand. Dat geeft kwalitatief het beste resultaat.
• Logo op donkere achtergrond: Hier kies je een logo dat er goed uitziet op een donkere achtergrond. Meestal geeft een witte variant (diapositief) van het logo het beste resultaat.
• Logo breedte: Breedte van het logo in pixels.
• Logo link: Waar ga je heen als je op het logo klikt.
• Breedte: Breedte van de header.
• Witruimte: Dit heeft betrekking op de witruimte boven en onder tussen de headerelementen. Hiermee geef je de header meer 'lucht'.
• Vast aan de bovenkant: Blijft de header boven in beeld 'plakken' of scrollt deze mee uit beeld met de rest van de pagina.
• Hoofdmenu achtergrondkleur: Achtergrondkleur van het hoofddeel.
• Hoofdmenu tekstkleur: Tekstkleur van het hoofddeel.
• Meta menu achtergrondkleur: Achtergrondkleur van het metadeel (alleen bij extended header).
• Meta menu tekstkleur (alleen bij extended header type): Tekstkleur van het metadeel.
• Zoeken: Aan of uit. Wil je een zoekicoon tonen in de header.
• Inloggen: Aan of uit. Wil je een inloggen tonen in de header.
• Winkelwagen: Als je een webshop hebt, dan kies je hier een artikel met het 'Winkelwagen (compact)' artikel.
• Notificatie banner: Dit is bedoeld om (tijdelijk) een tekst bovenaan de pagina/website te tonen. Je maakt of kiest hiervoor een artikel van het type 'Notification banner'.
• Gebruik categorie in menu als pagina: ...

De footer van de website is hier in te stellen. En ook hier welke onderdelen staan 'aan' of 'uit'.

Je hebt twee typen footers tot je beschikking: Basic of Extended. Beide versies bieden een hoofddeel waar je menu's en contactgegevens kunt plaatsen, en een metadeel met een menu waar je links naar bijvoorbeeld copyright, voorwaarden en privacyverklaring plaatst. Ook de taalkeuze bij meertalige websites staat in het metadeel.

• Type: Je hebt twee typen footers tot je beschikking: Basic of Extended. De extended versie biedt ruimte voor een logo en een extra artikel.
• Logo: Dit logo kan afwijken van het standaard logo in de header. Bij een donkere achetrgrond wordt nog wel eens een compleet wit logo geplaatst.
• Logo breedte: Breedte van het logo in de footer.
• Tekst naast logo: Eventueel een payoff die bij naast het logo staat.
• Achtergrondkleur boven: Achtergrondkleur van het hoofddeel.
• Tekstkleur boven: Tekstkleur van het hoofddeel
• Achtergrondkleur onder: Achtergrondkleur van het metadeel.
• Tekstkleur onder: Tekstkleur van het metadeel.
• Uitgelicht artikel: Je kiest hier een bestaand artikel om in de footer te plaatsen. Dit kan bijvoorbeeld aan artikel zijn met een knop 'Inschrijven voor de nieuwsbrief'.
• Taalkeuze: Taalkeuze aan of uit. Bij meertalige websites.
• Mogelijk gemaakt door Procurios: Aan of uit. Toont of verbergt de credits onderaan de website.

Dit deel gebruik je om contactgegevens van de organisatie te tonen.

Optie om maximaal 3 logo's, bijvoorbeeld van certificaten of partnerorganisaties, te tonen in de footer.

Gebruik dit deel voor links naar de social media kanalen van de organisatie.

• Tekstkleur iconen: Kies hier de kleur van de iconen; de eigen kleuren van het betreffende platform, je eigen primaire of secundaire kleuren, of licht (wit) of donker.
  
  Beschikbare kanalen:
  • Instagram
  • Facebook
  • LinkedIn
  • X
  • YouTube

Op diverse plekken in de user interface kunnen iconen worden gebruikt, zoals een vergrootglas voor zoeken of een 'hamburger'-icoon voor het mobiele menu. Als de huisstijl een bepaalde stijl voorschrijft, dan kun je hier je eigen iconen toevoegen.

• Favicon: Een favicon is het icoontje in de tab van de browser. Dit is meestal (een deel van) het logo.
• Menu icoon: Standaard een 'hamburger'-icoon.
• Zoek icoon: Standaard een vergrootglas.
• Sluit icoon: Standaard een kruisje.

Een sectie voor gevorderden: CSS. Ben je een beetje thuis in css, dan kun je hier de stylesheets van de standaard Sapphire user interface overschrijven met je eigen css.

Dit is ook de plek waar je je eigen lettertype beschikbaar maakt. Dit wordt op deze pagina verder uitgelegd.

Advies: gebruik dit zeer beperkt. Sapphire wordt door Procurios onderhouden en voorzien van updates. We kunnen daarbij geen rekening houden met eigen css. De layout van de website zou na een update stuk kunnen gaan.