Hoe voeg ik een knop toe?

Wat heb je nodig?

• Een kolom waarin de knop moet komen, bijvoorbeeld onder een tekst.
• De pagina waar de knop naartoe moet. Die moet al bestaan, anders kun je hem niet kiezen.

Stap 1: Voeg het blok Knoppen toe

Klik in de kolom op de + (Blok toevoegen), typ ‘knop’ en kies Knoppen. Het bewerkvenster gaat open. Zet het blok direct onder de tekst waar de knop bij hoort.

Stap 2: Kies de uitlijning

Bij Uitlijning kies je Links, Midden of Rechts. Staat je tekst gecentreerd, kies dan ook Midden voor de knop. De uitlijning geldt voor alle knoppen in het blok.

Stap 3: Voeg een knop toe en vul de link in

Onder Buttons staat een lijst waarin elke regel een knop is. Klik op Nieuwe button toevoegen voor een nieuwe knop. Klik daarna bij Button op Link selecteren. In het linkvenster:

1. Typ een deel van de paginanaam en kies de pagina, of plak een volledig webadres.
2. Vul bij de linktekst de tekst van de knop in, bijvoorbeeld ‘Plan een gesprek’.
3. Klik op Link toevoegen.

In een nieuw tabblad openen

In het linkvenster staat een vinkje om de link in een nieuw tabblad te openen. Gebruik dat alleen voor links naar een andere website. Links naar je eigen pagina’s open je gewoon in hetzelfde tabblad.

Stap 4: Kies het type

Bij Type button bepaal je de grootte:

• Button – Klein: voor een knop die niet de aandacht mag trekken.
• Button – Medium: de standaard. Gebruik deze voor de meeste knoppen.
• Button – Volledige breedte: de knop vult de hele kolom. Handig op een smalle kolom of in een card.

Stap 5: Kies een kleur

Bij Kleur zie je de kleuren uit je huisstijl, met een gekleurd vierkantje ervoor. Kies je niets, dan krijgt de knop je hoofdkleur (Primary). Gebruik voor je belangrijkste knop altijd dezelfde kleur, zodat bezoekers hem herkennen. Een tweede knop ernaast krijgt een rustigere kleur.

Een knop met alleen een rand: Transparant

Kies de kleur Transparant voor een knop zonder vulling, met alleen een rand. Hoe de tekst van zo’n knop eruitziet, hangt af van je huisstijl. Controleer na het opslaan of de tekst goed leesbaar is op de achtergrond van je sectie.

Stap 6: Een icoon voor of na de tekst

Bij Icon kies je een icoon, bijvoorbeeld een pijltje of een telefoon. Typ in de keuzelijst een Engelse naam, zoals ‘arrow’ of ‘phone’. Bij Icon positie kies je Voor tekst of Na tekst. Een pijltje na de tekst nodigt uit om door te klikken.

Meerdere knoppen naast elkaar

Klik nog een keer op Nieuwe button toevoegen voor een tweede knop in hetzelfde blok. De knoppen komen naast elkaar te staan; is er te weinig ruimte, dan schuiven ze onder elkaar. De volgorde verander je door een rij te verslepen. Houd het bij twee knoppen: één opvallende en één rustige.

Een knop die een pop-up opent of naar een sectie springt

• Naar een sectie op dezelfde pagina: geef de sectie een ID en zet als link een # met die ID, bijvoorbeeld #contact. Zie linken naar een plek verderop op de pagina.
• Een pop-up openen: zet als link #lef-popup- met het nummer van de pop-up erachter. Zie een pop-up maken.
• Bellen of mailen: zet als link tel: of mailto: met je nummer of adres erachter.

Een knop in het menu bovenaan je site stel je ergens anders in. Zie een knop of icoon in het menu.

Lukt het niet?

• De knop staat niet op de website. Een knop zonder link wordt niet getoond. Vul bij Button een link in.
• Je kunt de pagina niet vinden in het linkvenster. De pagina is nog niet gepubliceerd, of je zoekt op een andere naam. Plak anders het volledige webadres.
• De tekst op de knop is slecht leesbaar. Kies een andere kleur, of zet de knop in een sectie met een andere achtergrond.
• De knop springt niet naar de sectie. Controleer of de ID bij de sectie precies gelijk is aan wat na de # staat.
• De knoppen staan niet naast elkaar. Staan ze in twee aparte blokken? Zet ze als twee rijen in één blok Knoppen.
• Lukt het nog steeds niet? Neem contact met ons op.

Meer blokken vind je in alle blokken op een rij. Over links in lopende tekst lees je in een link toevoegen.

Veelgestelde vragen