Naast het kleurschema kun je ook de kleuren van knoppen apart instellen. Zorg ook hier voor voldoende contrast tussen tekst en achtergrond.

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

Met typografie bepaal je het lettertype, de lettergrootte en het gewicht van teksten op je website. Dit heeft veel invloed op de uitstraling.

• Website lettertype: het lettertype voor alle teksten. Je kiest uit een aantal beschikbare lettertypen.
• Website lettergrootte: de grootte van de platte tekst. Het effect hangt af van het gekozen lettertype.
• Website lettergewicht: het gewicht van de platte tekst. Meestal 'Regular' of 'Light'.
• Koppen lettertype: het lettertype voor alle koppen. Je kiest uit een aantal beschikbare lettertypen.
• Koppen gewicht: het gewicht van de koppen.
• Kop 1 lettertype: voor de H1-kop (de hoofdkop) kun je een apart lettertype kiezen. Je kiest uit een aantal beschikbare lettertypen.
• Kop 1 gewicht: het gewicht van de H1-kop.
• Quote lettertype: het lettertype voor alle citaten. Je kiest uit een aantal beschikbare lettertypen.
• Typografische schaal: hiermee bepaal je de verhouding tussen lettergroottes, wat zorgt voor visuele samenhang en een duidelijke hiërarchie op de website.

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

• Maximale website breedte: de standaardbreedte van het inhoudsdeel van de website. De header heeft een eigen breedte-instelling. Artikelen kun je apart breder instellen.
• Ruimte tussen artikelen: de verticale witruimte tussen artikelen op een pagina.
• Positie zijbalk: als je een template met zijbalk gebruikt, kies je hier of de zijbalk links (standaard) of rechts staat.
• Uitlijning uitklapbare artikelen: deze artikelen zijn niet zo breed als de pagina. Kies of je ze wilt centreren (standaard) of links uitlijnen.
• Uitlijning formulieren: kies of formulieren gecentreerd of links uitgelijnd (standaard) worden weergegeven.
• Kruimelpad: zet het kruimelpad aan of uit.
• Paginatitel: zet de paginatitel aan of uit.
• Vorm stijl: kies of knoppen, afbeeldingen en gekleurde elementen afgeronde hoeken krijgen of niet.
• Subnavigatie van hoofdmenu in zijbalk: zet het submenu in de zijbalk aan of uit. Alleen te gebruiken bij een template met zijbalk.
• Subnavigatie van meta menu in zijbalk: zet het meta-submenu in de zijbalk aan of uit. Alleen te gebruiken bij een template met zijbalk.
• Subnavigatie van account menu in zijbalk: zet het account-submenu in de zijbalk aan of uit. Alleen te gebruiken bij een template met zijbalk.
• Animaties: zet animaties aan of uit. Onderdelen op een pagina bewegen dan subtiel mee tijdens het scrollen.

De header is het bovenste deel van je website, met onder andere het logo en de navigatie. Hier stel je in hoe de header eruitziet en welke onderdelen zichtbaar zijn.

• Type: kies uit:
  • Basic: logo en hoofdmenu naast elkaar
  • Extended: metamenu bovenaan, logo en hoofdmenu eronder
  • Advanced: logo en metamenu bovenaan, hoofdmenu eronder
• Favicon: het kleine icoontje in de browsertab. Dit is meestal (een deel van) het logo.
• Logo: kies het logo van je website. Gebruik bij voorkeur een .svg-bestand, want dat geeft de beste kwaliteit.
• Logo op donkere achtergrond: kies een logo dat goed zichtbaar is op een donkere achtergrond. Meestal werkt een witte versie van het logo het beste.
• Logo breedte: de breedte van het logo in pixels.
• Logo link: de pagina waar je naartoe gaat als je op het logo klikt.
• Breedte: de breedte van de header.
• Witruimte: de ruimte boven en onder de onderdelen in de header. Hiermee geef je de header meer 'lucht'.
• Vast aan de bovenkant: kies of de header bovenaan blijft staan als je scrollt, of dat de header meescrollt met de rest van de pagina.
• Hoofdmenu achtergrondkleur: de achtergrondkleur van het hoofdmenu in de header.
• Hoofdmenu tekstkleur: de tekstkleur van het hoofdmenu in de header.
• Meta menu achtergrondkleur: de achtergrondkleur van het metamenu in de header. Alleen zichtbaar bij het type 'Extended'.
• Meta menu tekstkleur: de tekstkleur van het metamenu in de header. Alleen zichtbaar bij het type 'Extended'.
• Zoeken: zet het zoekicoon in de header aan of uit.
• Inloggen: zet de inlogknop in de header aan of uit.
• Winkelwagen: kies of maak een artikel met 'Winkelwagen (compact)' zodat er een winkelwagen icoon in de header staat wanneer de bezoeker een product in de winkelwagen doet.
• Notificatie banner: kies of maak een artikel met 'Notification banner' om een tijdelijk artikel bovenaan de pagina of website te tonen.
• Gebruik categorie in menu als pagina: kies of een categorie in het menu als klikbare pagina werkt.

De footer is het onderste deel van je website. Hier stel je in hoe de footer eruitziet en welke onderdelen zichtbaar zijn.

• Type: kies uit 'Basic' of 'Extended'. Beide versies hebben een hoofddeel voor menu's en contactgegevens, en een metadeel voor links naar bijvoorbeeld copyright, voorwaarden en de privacyverklaring. De extended-versie biedt extra ruimte voor een logo en een uitgelicht artikel. Bij meertalige websites staat de taalkeuze in het metadeel.
• Logo: het logo in de footer. Dit mag een ander logo zijn dan in de header. Bij een donkere achtergrond werkt een wit logo vaak het beste.
• Logo breedte: de breedte van het logo in de footer.
• Tekst naast logo: een korte tekst of payoff die naast het logo staat.
• Achtergrondkleur boven: de achtergrondkleur van het hoofddeel van de footer.
• Tekstkleur boven: de tekstkleur van het hoofddeel van de footer.
• Achtergrondkleur onder: de achtergrondkleur van het metadeel van de footer.
• Tekstkleur onder: de tekstkleur van het metadeel van de footer.
• Uitgelicht artikel: kies of maak een artikel om in de footer te tonen. Bijvoorbeeld een artikel met een knop 'Inschrijven voor de nieuwsbrief'.
• Taalkeuze: zet de taalkeuze aan of uit. Alleen bij meertalige websites.

Gebruik dit deel om de contactgegevens van je organisatie te tonen in de footer.

Onderaan je website kun je laten zien dat de website is gemaakt door Procurios. Dit is de 'Mogelijk gemaakt door Procurios'-vermelding. Daarnaast kun je ook een partnerlogo toevoegen. Zo kan de partij die heeft bijgedragen aan de website zichtbaar zijn in de footer.

• Mogelijk gemaakt door Procurios: zet de Procurios-vermelding aan of uit.
• Layout: kies of de vermelding wordt weergegeven met logo of tekst.
• Partner logo: upload het logo van de partner die heeft bijgedragen aan de website. Gebruik bij voorkeur een .svg- of .png-bestand met transparante achtergrond.
• Partner naam: vul de naam van de partner in.
• Partner URL: vul de website-URL van de partner in.

In de footer kun je maximaal drie logo's tonen. Denk aan logo's van certificaten of partnerorganisaties.

Gebruik dit deel om links naar de social media-kanalen van je organisatie te tonen.

• Tekstkleur iconen: kies de kleur van de iconen.
• Instagram URL: vul de URL van Instagram in.
• Facebook URL: vul de URL van Facebook in.
• LinkedIn URL: vul de URL van LinkedIn in.
• X URL: vul de URL van X in.
• YouTube URL: vul de URL van YouTube in.

Op verschillende plekken op je website worden iconen gebruikt. Denk aan een vergrootglas voor zoeken of een 'hamburger'-icoon voor het mobiele menu. Als je huisstijl een bepaalde stijl voorschrijft, kun je hier je eigen iconen uploaden.

• Menu icoon: standaard een 'hamburger'-icoon met drie streepjes.
• Zoek icoon: standaard een vergrootglas.
• Sluit icoon: standaard een kruisje.

Als je kennis hebt van CSS, kun je hier de standaard stijlen van het Sapphire-template aanpassen met je eigen CSS-code. Dit is ook de plek waar je een eigen lettertype beschikbaar maakt. Meer hierover lees je in het artikel 'Afwijkend lettertype gebruiken'.

Gebruik deze optie zo min mogelijk. Procurios onderhoudt het Sapphire-template en voert regelmatig updates uit. Eigen CSS kan na een update onverwacht niet meer goed werken.