Priority support
Help Center > Editor V4 > Elements > Button element

Button element

Laatste update: september 3, 2025

Deze post is vertaald met behulp van automatische vertaling, waardoor er kleine onnauwkeurigheden of verschillen in formulering ten opzichte van het origineel kunnen zijn. Sorry voor eventuele foutjes of onduidelijkheden, neem gerust contact met ons op als wij iets voor je mogen verhelderen.

Wie kan deze functie gebruiken:
Dit artikel is voor Editor v4 gebruikers. Als je Editor v3 gebruikt, bekijk dan het relevante artikel hier: Button Widget

Het element toevoegen en verwijderen

Om een widget te openen en te gebruiken:

  1. Klik op + in de Elementor Editor.
    Alle beschikbare elementen worden weergegeven.

  2. Klik of sleep het element naar het canvas. Voor meer informatie, zie Elementen aan een pagina toevoegen.

Om de widget te verwijderen:

  1. Selecteer het element op het canvas door erop te klikken.
  2. Druk op de delete-toets op je toetsenbord. Voor meer informatie, zie Elementen van een pagina verwijderen.

Wat is het button element?

Buttons op een website zijn cruciaal voor het begeleiden van gebruikersacties, het bieden van duidelijke call-to-actions en het verbeteren van de algehele gebruikersbetrokkenheid. Buttons laten je interactieve en visueel aantrekkelijke knoppen aan je site toevoegen.

Veelvoorkomend gebruiksscenario

Blair bouwt een website voor een sportschool. Bovenaan de homepage willen ze een button toevoegen aan de Hero-sectie. Bezoekers die op de button klikken gaan naar een registratiepagina. een opvallende button die de aandacht van potentiële klanten zal trekken.

In plaats van sterren te gebruiken voor hun beoordelingen, besluit Jaime dollartekens te gebruiken voor de waardebeoordeling en hartjes voor hun reactiebeoordeling. Daarnaast besluiten ze dat waarde wordt beoordeeld van 1-5, terwijl reactie wordt beoordeeld van 1-10.

Aanvullende gebruikssituaties

  • Gebruik het Button element om een prachtige portfoliogalerij te maken. Elke Button kan worden gekoppeld aan een projectpagina of een gedetailleerde weergave.
  • Als je een evenement of webinar organiseert, kan het Button element je helpen visueel aantrekkelijke banners of posters te maken.
  • Gebruik Buttons om voor- en na-transformaties weer te geven voor huisrenovaties, fitnessvoortgang of elke andere transformatiereis.

Een button element toevoegen: stap-voor-stap

  1. Voeg het Button element toe aan het canvas. Voor details, zie Elementen aan een pagina toevoegen.

    De opties voor het Button element verschijnen in het linkerpaneel.

  2. In het Algemeen tabblad, voer in het Button tekstveld Aan de slag in.
    We willen dat de button linkt naar een registratiepagina.
  3. Klik op het plusteken naast Link.
  4. In het Link tekstvak, voeg de URL toe van de pagina waarnaar je wilt linken.
    De button is een beetje groot voor ons ontwerp, dus laten we hem kleiner maken.

  5. Open het Grootte veld.
  6. Stel de breedte in op 200 en hoogte op 50.

  7. Klik op het Stijl tabblad.
    Laten we de tekststijl aanpassen zodat deze past bij de rest van de site.

  8. Open het Typografie veld.
  9. Gebruik de Lettertype Familie dropdown om Sora te selecteren. Voor details, zie Stijl tabblad – Typografie.
  10. Gebruik de Lettertype Gewicht dropdown om 600 te selecteren.
  11. Gebruik het Lettergrootte veld om 16 te selecteren.
    Het ontwerp vraagt om een transparante achtergrond.

  12. Open de Achtergrond sectie.
  13. Klik op het kleurvlak om de kleurkiezer te openen. Voor details, zie De kleurkiezer gebruiken.

  14. Stel de dekking in op 0%.
    Nu gaan we de button vormgeven. In dit geval willen we een afgeronde button met een witte rand.

  15. Open de Rand sectie.
  16. Klik op het Randen Aanpassen icoon.

  17. Voer 50 in het nummerveld in voor alle hoeken.

  18. Klik op het plusteken bij Rand.

  19. Gebruik het nummerveld om de Randbreedte te verhogen naar 2.

  20. Stel de kleur in als #FFFFFF.
    Om de button te laten opvallen, kunnen we het uiterlijk veranderen wanneer gebruikers eroverheen bewegen. Hover wordt een status genoemd en elementen kunnen worden bewerkt om van uiterlijk te veranderen afhankelijk van de status. Voor details, zie Element statussen.

  21. In het Klassen tekstveld, klik op de puntjes naast het woord lokaal.
  22. Selecteer hover uit het dropdown menu.
    Merk op dat het woord hover verschijnt in het Klassen tekstvak en roze gekleurd is. Dit geeft aan dat we nu bewerken hoe de button eruit zal zien wanneer bezoekers er met de muis overheen gaan.

  23. Klik op het kleurvlak bij Kleur om de kleurkiezer te openen.
  24. Verander het Hex kleurnummer naar #FFFFFF en de dekking naar 100%.
    Wanneer gebruikers met de muis over de button gaan wordt deze wit.

    De button is klaar.

Instellingen voor het button element

Je kunt je elementen aanpassen met inhoud en stijl, wat je veel flexibiliteit biedt om ze aan te passen aan je behoeften. Klik op de tabbladen hieronder om alle beschikbare instellingen voor dit element te zien.

Algemeen tabblad

De tekst die in de button verschijnt.

Klik op het plusteken om een link in te voeren. Bezoekers die op de button klikken openen de link.

Openen in een nieuw tabblad: Als de Button een link bevat, schakel in als je wilt dat de link in een nieuw tabblad opent.

Hiermee kun je individuele elementen op een pagina taggen. Op deze manier kun je naar dit specifieke element linken.

Stijl tab

Zie de individuele artikelen over Stijlopties:

Op deze pagina

Deel dit artikel

Hosted with