Kies knopstijlen die bezoekers sturen.

DXPR Builder lerenPagina’s bouwenElementen stylenOntwerpgidsen

Je beslist hoe luid elke knop is. Een effen knop markeert de ene actie die je het meest wilt, en een omlijnde knop ernaast biedt het alternatief zonder te concurreren. Deze pagina toont hoe je zo'n paar stijlt en welke instelling wat wijzigt. Om een knop toe te voegen en zijn link in te stellen, zie Een knop toevoegen.

De video volgt de stappen hieronder: hij maakt Apply now de hoofdknop en voegt een omlijnde tweede knop toe.

Een hoofd- en een tweede knop stijlen

Begin met een knop op de pagina, zoals Apply now.

  1. Wijs de knop aan en open More > Settings.
  2. Zet Type op Primary.
  3. Zet Size op Large en klik op Save.
  4. Wijs de knop opnieuw aan en open More > Clone. De kopie verschijnt direct onder het origineel.
  5. Open More > Settings op de kopie. Wijzig zijn Title, bijvoorbeeld in Download brochure, en zijn Link.
  6. Schakel Outline style in en klik op Save.
  7. Klik op Save.

Kies een stijl voor elke actie

Actie Stijl Voorbeeld
De ene actie die je het meest wilt Effen Primary Apply now
Een alternatief Outline style in dezelfde Type Download brochure
Een kleine actie Link, die eruitziet als een tekstlink Read the terms
Een waarschuwing of een laatste stap Danger of Warning Cancel my booking

Gebruik één effen knop per sectie, zodat bezoekers meteen zien waar ze klikken. Schrijf labels die zeggen wat er gebeurt: "Get started" in plaats van "Click here", "Send message" in plaats van "Submit".

Wat je ziet

Twee grote knoppen stapelen in de kolom: een effen met de primaire kleur van je thema en een omlijnde met een rand en tekst in dezelfde kleur. De effen trekt als eerste de aandacht. Links openen niet terwijl je bewerkt. Om ze te testen, sla je de pagina op, open je het weergavemenu (het oogpictogram) en kies je Preview.

Het paneel General van een Knop met Outline style ingeschakeld, Type Primary en Size Large, naast een effen knop Apply now en de omlijnde knop Download brochure eronder

Instellingen

Instelling Wat het doet Standaard
Type De kleurstijl: Primary, Secondary, Success, Info, Warning, Danger, Link, Light of Dark. De kleuren komen uit je thema. Primary
Outline style Een gekleurde rand en tekst zonder vulling Uit
Size Normal, Large of Small Normal
Block button Rekt de knop uit over de volle breedte van zijn kolom Uit
Link target Same window of New window. Het toont zodra Link een waarde heeft. Same window

Voor themers: elke Type voegt de Bootstrap-klasse btn-<type> toe, zoals btn-primary. Met Outline style aan wordt het btn-outline-<type>, behalve voor Link, die altijd btn-link blijft. Large voegt btn-lg toe, Small voegt btn-sm toe en Block button voegt btn-block toe.

Als je de stijl niet ziet

  • De omlijnde knop toont geen rand. Type staat op Link, die er altijd uitziet als een tekstlink, dus Outline style heeft geen effect. Kies een andere Type voor een omlijnde knop.
  • De knop verdwijnt bijna. Light lijkt op wit, dus hij vervaagt in een witte sectie. Kies een donkerdere Type, of geef de sectie een achtergrondkleur.
  • De link opent in hetzelfde tabblad. Link target staat op Same window, en het toont alleen zodra Link een waarde heeft. Vul eerst Link in en kies daarna New window.

Wat nu?