Verander knopvormen, kleuren en tekststijlen zodat ze bij je merk passen.

Gebruik sitestijlen om het uiterlijk van knoppen op je site te bewerken en calls to action (CTA's) af te stemmen op het visuele ontwerp van je site. Om een consistente look te creëren, hebben stijlwijzigingen die je aanbrengt invloed op de meeste knoppen op je site.

Deze knopstijlen zijn beschikbaar op versie 7.1-sites. Versie 7.0-sites hebben andere opties voor het stylen van knoppen.

Video over knopstijlen

Bekijk deze video voor een overzicht van het opmaken van knoppen op je site.

Kies een knoppenpakket

In sitestijlen kun je een knopstijlpakket selecteren om automatisch consistente stijlinstellingen toe te passen op knoppen op je site. Elk pakket verdeelt knopstijlen in drie typen.

Knoppenpakketten zijn ideaal als je niet handmatig gedetailleerdere instellingen wilt wijzigen, maar je kunt ze ook als uitgangspunt gebruiken voordat je ze verder aanpast.

Je knoppenpakket instellen:

1. Open het sitestijlenpaneel.
2. Klik op knoppen.
3. Bekijk de aanbevolen knoppenpakketten. Als je over een pakket zweeft, wordt een voorbeeld van de primaire, secundaire en tertiaire stijlen weergegeven.
4. Kies uit de aanbevolen knoppenpakketten, of klik op Aanpassen en klik vervolgens op Alle knoppenpakketten om meer opties te bekijken.
5. Als je een knoppenpakket vindt dat je bevalt, klik er dan op.

Pas je knopvormen en lettertypen aan

Nadat je een knoppenpakket hebt gekozen, kun je specifiekere wijzigingen aanbrengen in de stijlopties van je knoppen. Hoewel je specifieke afmetingen en vormen kunt instellen, kunnen knoppen groter worden en van vorm veranderen om tekst te accommoderen. Voor optimale controle raden we aan de tekst op knoppen onder de 25 tekens te houden.

Sommige aanpassingen hebben geen invloed op knoppen op je site als dit het ontwerp van je site kan verstoren. Om bijvoorbeeld de lay-out van het nieuwsbriefblok te behouden, hebben aanpassingen aan de opvulling geen invloed op de knoppen van het nieuwsbriefblok.

Om je knoppen te stylen:

1. Open het sitestijlenpaneel.
2. Klik op > naast Knoppen.
3. Klik op Primair, Secundair of Tertiair. Terwijl je wijzigingen aanbrengt, zie je in een voorbeeld hoe knoppen van dit type op je site worden weergegeven. Houd er rekening mee dat je wijzigingen verliest als je wijzigingen aanbrengt in een knoptype en vervolgens een nieuw knoppenpakket kiest.
4. Klik op Lettertype om de tekststijlen aan te passen.
5. Klik op Vorm om de vorm van de knop in te stellen.
6. Gebruik de schuifregelaar Omlijning om de omlijningsdikte in te stellen.
7. Stel de opvulling in op S, M of L, of klik op … om de opvulling voor Boven & onder en Links & rechts afzonderlijk in te stellen. Deze optie heeft geen invloed op knoppenblokken die zijn ingesteld op Vullen in Fluid Engine-gedeelten. Verander de grootte van de blokken om in plaats daarvan opvulling toe te voegen.
8. Optioneel: om deze stijlinstellingen toe te passen op alle knoptypes op je site, klik je op Toepassen op alle knoptypes.
9. Optioneel: om de stijlen van het knoptype dat je bewerkt terug te zetten naar de standaardinstellingen, klik je op Knopstijlen resetten.
10. Klik op opslaan.

Pas je knopkleuren aan

Knoppen volgen de sitebrede kleuren van je site, dus ze passen over het algemeen bij het merk van je site. Je kunt een grotere verscheidenheid aan knopkleuren gebruiken door verschillende kleurenthema's te gebruiken in verschillende gedeelten.

Wijzig als volgt de kleuren van je knoppen:

1. Open het sitestijlenpaneel.
2. Klik op ＞ naast Kleuren.
3. Klik op het kleurenthema waarin je de kleuren van je knoppen wilt wijzigen.
4. Klik onder Knop op de aanpassingen om de tekstkleur en achtergrondkleur van de knop voor alle drie de knoptypen te wijzigen. Voor knoppen die zijn ingesteld op Invullen, vult de achtergrondkleur de knop. Voor knoppen die zijn ingesteld op Niet gevuld of knoppen die de vorm onderstrepen gebruiken, wordt de achtergrondkleur van de knop toegepast op de omlijning en de tekst.
5. Optioneel: als een blok een knop heeft, kun je soms de kleur van de knop apart wijzigen. Controleer in het paneel Kleurenthema bewerken onder blokgedeeltes voor blokspecifieke aanpassingen van de knopkleur.
6. Klik op opslaan.

Wat zijn knoptypen?

Sitestijlen verdeelt knoppen in drie typen: Primair, Secundair en Tertiair. De meeste knoppen volgen primaire stijlen en kunnen niet van type veranderen.

Je kunt het type van knoppenblokken, headerblokken en verzendknoppen voor formulierblokken wijzigen. Dit is een uitstekende manier om de belangrijkste calls-to-action (CTA's) voor je bezoekers te benadrukken of om onderscheid te maken tussen verschillende typen links.

Welke knoppen gebruiken primaire stijlen?

Knoppen die primaire stijlen gebruiken, zijn onder andere:

• 'Toevoegen aan winkelwagentje'-knoppen
• Knoppen voor Automatische lay-out
• Headerknoppen, knoppenblokken en formulierblokknoppen ingesteld op primair
• Kassaknoppen
• Knop 'Alles accepteren' op de cookiebanner
• Knoppen voor doneerblokken
• Knoppen voor prijsplanblokken
• Nieuwsbriefblok knoppen

Welke knoppen gebruiken secundaire stijlen?

Knoppen die secundaire stijlen gebruiken, zijn onder andere:

• Headerknoppen, knoppenblokken en knoppen voor formulierblokken ingesteld op Secundair
• Knoppen Doorgaan met winkelen
• De knop Alles weigeren op de cookiebanner

Welke knoppen gebruiken tertiaire stijlen?

• Headerknoppen, knoppenblokken en knoppen voor formulierblokken ingesteld op Tertiair
• Knop Cookies beheren op de Cookiebanner