Pas de knoppen van je site aan zodat ze bij je merk passen.

Gebruik sitestijlen om het uiterlijk van knoppen op je site te bewerken. Je kunt de kleur, Masker en tekststijl veranderen, wat een geweldige manier is om calls to action (CTA's) af te stemmen op het visuele ontwerp van je site. Om je te helpen een consistente look te creëren, hebben stijlwijzigingen die je aanbrengt invloed op de meeste knoppen op je site.

Kijk een video

Deze handleiding richt zich op de opties voor het stylen van knoppen in versie 7.1.. Voor knoppenstijl in versie 7.0, bekijk knoppen stylen in versie 7.0.

Knop Masker en lettertypes

Bij het stylen van knoppen raden we aan een pagina te openen met een knop erop, zodat je de wijzigingen kunt bekijken in de site-preview terwijl je ze aanbrengt. Om knoppen op je hele site te stylen:

1. Open het paneel voor sitestijlen en klik vervolgens op > naast Knoppen.
2. Klik op het type knop dat je wilt stylen: Primair, Secundair of Tertiair. Voor meer informatie, bekijk knoptypen.

Je kunt de volgende aanpassingen instellen voor elk type:

• Tekst - Het lettertype en de letterstijlen voor knoppen in dat niveau.
• Masker - Het masker en of de knop een kleurvulling heeft (vulling) of alleen een omlijning (geen vulling).
• Omlijning - De dikte van de omlijning van de knop voor knoppen geen vulling . Bij knoppen vulling verandert het aanpassen van de omlijningsschuifregelaar de opvulling buiten de knop.
• Horizontale opvulling – De opvulling links en rechts van de knoptekst.
• Verticale opvulling – De opvulling boven en onder de knoptekst. Deze aanpassing heeft geen invloed op knoppenblokken die zijn ingesteld op Vullen in Fluid Engine-gedeelten. Verander de grootte van de blokken om verticale opvulling toe te voegen.

Wijzigingen worden automatisch opgeslagen. Om de instellingen van het ene type toe te passen op de andere types, klik je op Toepassen op alle knoptypes. Om de stijlen van een bepaald type terug te zetten naar de standaardinstellingen, klik op Reset knopstijlen.

Houd er rekening mee dat, hoewel je algemene Masker- en groottestijlen kunt instellen, alle knoppen in grootte toenemen en van Masker veranderen om tekst te kunnen weergeven. Als je veel tekst op een knop plaatst, kan deze er anders uitzien dan verwacht. Om zoveel mogelijk controle te hebben over het uiterlijk van je knoppen, raden we aan de tekst op de knoppen onder de 25 tekens te houden.

Knopkleuren

Om ervoor te zorgen dat je knoppen overeenkomen met het ontwerp van je site, volgen knoppen de globale kleurenvan je site.

• Stel de achtergrondkleur van de knop en de tekstkleuren van de knoppen in het paneel Kleuren in door op het potloodpictogram van je thema te klikken.
• Elk knoptype heeft zijn eigen aanpassingen voor achtergrond- en tekstkleuren in elk kleurenschema, en blokken hebben hun eigen aanpassingen voor knopkleuren.
• Wanneer de knop is ingesteld op Invullen, vult de achtergrondkleur van de knop de knop. Wanneer knoppen zijn ingesteld op Niet gevuld, wordt de achtergrondkleur van de knop toegepast op de omlijning en de tekst, en wordt de knop gevuld bij zweven.
• Wanneer je het masker onderstrepen gebruikt, stel je de tekstkleur van de knop in met de aanpassing voor de achtergrond van de knop. Stel de achtergrondkleur van de knop in met de aanpassing voor de tekstkleur van de knop.
• Je kunt verschillende knopkleuren gebruiken in andere gedeelten door het kleurenschema te wijzigen voor gedeelten met knoppen.

Voor meer informatie, bezoek Kleuren wijzigen.

Soorten knoppen

Het paneel Knoppen verdeelt knopstijlen in drie typen: Primair, Secundair en Tertiair. Afgezien van headerknoppen, knoppenblokken en verzendknoppen voor formulierblokken, kun je het type van een knop niet wijzigen. De meeste knoppen volgen primaire stijlinstellingen, maar je kunt de stijlen van knoppenblokken op je site variëren met secundaire en tertiaire instellingen.  

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. Gebruik de onderstaande tabel om te ontdekken welke typen op welke knoppen van toepassing zijn.

In sommige gevallen hebben bepaalde aanpassingen geen invloed op bepaalde knoppen op je site, terwijl ze anders het ontwerp van je site zouden kunnen verstoren. Om bijvoorbeeld de lay-out van het nieuwsbriefblok te behouden, hebben aanpassingen aan de opvulling geen invloed op de knoppen van het nieuwsbriefblok.

Zie knoppenblokken voor meer informatie over het instellen van het bloktype van een knop.

Stijlknoppen in versie 7.0

Als je site versie 7.0 gebruikt, kun je deze sitebrede tweaks gebruiken om het uiterlijk van de meeste knoppen op je site aan te passen:

1. Ga naar een pagina die knoppen gebruikt.
2. Ga terug naar het paneel Website, klik op Ontwerp en vervolgens op Sitestijlen.
3. Scrol omlaag naar Knoppen. Voor knoppenblokken heet het gedeelte Knoppenblok (klein), (middelgroot) of (groot).

Gebruik de volgende aanpassingen:

• Knopstijl: kies effen, omlijnd of verhoogd. Voor omlijnd wordt de tekst automatisch in zwart of wit weergegeven bij zweven, afhankelijk van de knopkleur.
• Masker van de knop - Kies vierkant, rond of pilvormig.
• Knopkleur – wijzig de achtergrondkleur van de knop.
• Tekstkleur van de knop – Verander de kleur van de tekst.
• Lettertype van de knop – wijzig het lettertype. De aanpassing van de tekstgrootte is alleen van invloed op de tekst in het knoppenblok.
• Alternatief of (Overlay) – Beschikbaar in sommige sjablonen, stel alternatieve kleuren in om knoppen op achtergrondafbeeldingen of kleuren beter te laten opvallen.

Sitebrede aanpassingen beïnvloeden de volgende knoppen:

• 'Toevoegen aan winkelwagentje'-knoppen
• Knoppenblokken
• Knoppen voor doneerblokken
• Verzendknoppen formulierblok
• Nieuwsbriefblok knoppen
• Knop voor digitaal productblok

Er zijn verschillende soorten knoppen met uiteenlopende stijlopties:

• Winkelwagentjeknoppen hebben aparte opties in bepaalde sjablonen.
• Knoppen op de voorpagina hebben verschillende knopopties.
• Afbeeldingsblokken hebben aparte knopopties.
• Bedford-familiebanner knoppen zijn gestyled in het banner gedeelte.
• De Bedford-header-navigatieknop is vormgegeven in de site-navigatie.
• De navigatieknoppen van de Brine-familieheader zijn vormgegeven in Header: primaire navigatie en Header: secundaire navigatie.