Buttons Blok gebruiken met de Gutenberg editor

In dit artikel gaan we je alles vertellen over het gebruik van het buttons blok in de Gutenberg editor. Wat is handig en wat niet? Ook krijg je wat tips & tricks die je het WordPress leven ietsje makkelijker kunnen maken.

Buttons of knoppen in goed Nederlands zijn belangrijke elementen op web pagina’s. Ze bepalen mede de navigatie structuur en je kunt er zogenaamde CTA’s mee maken. ‘Click-to-action’ elementen zijn blokjes met wervende tekst en afbeeldingen die gebruikers aanzetten tot actie. Uiteindelijk wil je toch dat bezoekers van jouw website iets gaan doen waar je jouw website voor hebt gemaakt?

Toevoegen Buttons blok

Type een ‘/’ in de insertor (aangegeven door de tekst ‘Typ / om een blok te kiezen’), klik op het zwarte plusje aan de rechterkant daarvan of gebruik het plusje in het blauwe blokje helemaal linksboven in de bovenbalk van pagina of bericht. Staat het knoppen blok niet direct bovenaan in het volgende uitklapje, typ daar dan ‘knoppen’ of ‘buttons’ om het Buttons blok naar voren te halen. Vervolgens klik daarop en je Knoppen blok staat er:

Instellingen en opties van het Buttons blok

Button tekst en link

Standaard staat er al één button in het blok. Klik op de button en voeg de tekst toe die je op de button wilt hebben. Wij hebben er in ons voorbeeld ‘MEER INFORMATIE’ van gemaakt:

Nu gaan we de link toevoegen van de pagina waar de knop naartoe moet linken. Daarvoor klikken we op het link icoontje in de gereedschapsbalk:

Typ een zoekwoord in het invoerveld om een pagina te zoeken om te linken. Of typ/plak direct de URL in het veld waar de button naartoe moet linken. Als je een zoekwoord intypt verschijnen daaronder alle pagina’s waarin dat zoekwoord voorkomt. Kies de gewenste pagina of maak met het zoekwoord direct een door het systeem voorgestelde URL aan die je vervolgens nog kunt aanpassen. Ten slotte kun je de optie aanzetten om de pagina in een nieuw tabblad te openen.

Gaan we nog een blokje naar rechts in de gereedschapsbalk, dan kunnen we nog wat meer opties instellen:

In de toolbar van links naar rechts de als eerste omcirkeld de knop om de button tekst vet te maken, rechts daarvan de knop om deze cursief te maken. Rechts daarvan de knop voor het hier boven getoonde uitklapje met diverse opties, zoals superscript, subscript, tekstkleur, doorhalen etc.

Uiterlijk van de button aanpassen

Klik op de knop om deze te selecteren of gebruik de lijst weergave:

Hierdoor verschijnen in de rechterbalk de blok instellingen van de button:

Daarin zijn de volgende instellingen te wijzigen:

• Stijlen : de in het thema beschikbare button stijlen
  • Vullen; een met kleur gevulde knop.
  • Omlijning; een omlijnde knop.
• Standaard stijl : instelling van de default knop stijl.
• Typografie : Instellen grootte in standaard eenheden (normaal, groot, extra groot, etc.) of zelf instellen van de grootte en eenheid van grootte.

• Rand instellingen : gebruik de slider om de ronding van de hoeken in te stellen
• Kleur : zowel de tekstkleur als de achtergrond kleur zijn te bepalen met de kleurenkiezers. Voor de achtergrond kleur kun je nog kiezen voor een verloop of doorlopende kleur.
• Breedte instellingen : de relatieve breedte in % van de button ten opzichte van het omliggende element.

Tips & tricks

Knoppen hebben voornamelijk als functie om de bezoeker van je website iets te laten doen. De volgende zaken zijn daarom van belang:

• De button moet opvallen door kleur en/of contrast. Naast een opvallende kleur moet deze ook nog voldoende contrast hebben ten opzichte van de achtergrond. Gebruik bijvoorbeeld een kleurenwiel om kleuren met voldoende contrast te vinden. In WordPress zit ook een kleurencheck ingebouwd die je waarschuwt bij niet passende kleuren.
• Naast de kleur is ook de plaats van de buttons een belangrijke factor. Bovenaan de pagina is de button direct in het zicht na het laden. Maar het kan ook strategisch zijn om deze na een bepaalde tekst te plaatsen. Als een button in de header of footer staat kan hij continu in bereik of beeld blijven. Afhankelijk van de functie en het doel van de button kan bij de keuze van plaatsing gebruik gemaakt worden van al deze factoren.
• Plaats niet teveel verschillende knoppen op een pagina. Dit brengt de bezoeker in verwarring en leidt tot minder of geen conversie.

Conclusie

Het Buttons blok is een belangrijk element bij het ontwerp van een web pagina. Het zorgt voor een grote(re) mate van interactiviteit en kan daarmee de betrokkenheid van de bezoeker verhogen. De meeste web pagina’s hebben uiteindelijk als doel om de bezoeker iets te laten doen. Buttons zijn daarbij één van de belangrijkste elementen. Het ontwerpen van een web pagina om tot een optimale gebruikservaring te komen wordt UX/UI design genoemd. UX design gaat meer over de structuur en functionaliteit, UI design gaat over het uiterlijk. Het zijn beide aparte vakgebieden maar hebben uiteindelijk wel veel met elkaar te maken. Je kunt hier heel ver in gaan, maar met wat eenvoudige vuistregels kun je al een heel eind komen.

Beoordeel dit artikel