Inleiding
Knoppen zijn een belangrijk onderdeel van je website. Ze sturen bezoekers naar de juiste pagina’s, zoals de contactpagina, dienstenpagina of webshop. Met Elementor kun je knoppen eenvoudig aanpassen: tekst, link, stijl en grootte.
Stap 1. Open de pagina in Elementor
- Log in via www.jouwdomeinnaam.nl/wp-admin
- Ga naar Pagina’s → Alle pagina’s
- Zoek de pagina die je wilt aanpassen
- Klik op “Bewerken met Elementor”
De Elementor-editor opent.
Stap 2. Klik op de knop die je wilt aanpassen
Beweeg met je muis over de knop.
Je ziet een blauwe omlijning verschijnen.
Klik op de knop om het linkerpaneel te openen.
Stap 3. Tekst van de knop aanpassen
In het linkerpaneel zie je het veld “Tekst”.
Hier kun je de tekst van de knop wijzigen, bijvoorbeeld naar:
- Neem contact op
- Lees meer
- Bekijk onze diensten
- Bestelling plaatsen
De wijziging zie je direct op de pagina.
Stap 4. Een link toevoegen aan de knop
Onder het veld “Link” kun je bepalen waar de knop naartoe gaat.
Je hebt meerdere opties:
- Linken naar een interne pagina
Begin met typen, bijvoorbeeld “Contact”.
Elementor toont automatisch de pagina’s binnen je website. - Linken naar een externe pagina
Plak de volledige URL, bijvoorbeeld: https://instagram.com/jouwbedrijf - Scrollen naar een sectie op dezelfde pagina
Gebruik een anker, bijvoorbeeld: #offerte
Voorwaarde: er staat op de pagina een Anker-widget met dezelfde naam. - Linken naar een e-mailadres
Typ: mailto:info@jouwdomeinnaam.nl - Linken naar een telefoonnummer
Typ: tel:0620123456
Stap 5. De stijl van de knop aanpassen
Klik op het tabblad “Stijl”.
Hier kun je aanpassen:
- Kleur van de knop
- Kleur van de tekst
- Achtergrondkleur bij hover
- Rand, afronding en schaduwen
- Lettergrootte
- Uitlijning
Let op: SjopSjop gebruikt vaste ontwerprichtlijnen zodat het geheel consistent blijft. Pas styling alleen aan als dit gewenst is voor jouw website.
Stap 6. Knopgrootte en vorm aanpassen
Ga naar het tabblad “Geavanceerd” of “Inhoud” (afhankelijk van het widgettype).
Hier kun je aanpassen:
- Grootte van de knop
- Padding (ruimte binnen de knop)
- Marges (ruimte rondom de knop)
Meer padding geeft de knop vaak een mooiere en modernere uitstraling.
Stap 7. Controleren op mobiel
Klik linksonder op de apparaatknoppen (desktop, tablet, mobiel).
Let op:
- Is de tekst goed leesbaar op mobiel?
- Is de knop breed genoeg?
- Past de knop binnen het scherm?
Elementor laat toe dat je per apparaat instellingen wijzigt.
Stap 8. Pagina opslaan
Klik linksonder op de groene knop “Bijwerken” om je aanpassingen te bewaren.
Veelvoorkomende vragen
- Mijn knop werkt niet
Controleer of de link correct is ingevoerd.
Bij interne pagina’s: selecteer altijd uit de lijst, niet handmatig typen. - De knop ziet er anders uit dan op andere pagina’s
Controleer of de knop in een andere sectie of sjabloon staat.
Of kijk of er custom CSS is toegepast. - De knop verschuift op mobiel
Pas de marges of breedte aan in de mobiele weergave.
Kort samengevat
- Klik op de knop om het linkerpaneel te openen
- Pas de tekst en link aan
- Wijzig waar nodig stijl of grootte
- Controleer desktop, tablet en mobiel
- Klik op “Bijwerken” om te bewaren
Hulp nodig?
We reageren meestal binnen 24–48 uur. Je antwoord is maar één berichtje van je vandaan.
Met een onderhoudspakket regelen wij updates, back-ups en kleine aanpassingen voor u. Of loopt u ergens op vast? Dan helpen we u direct verder.