Elementor is een populaire page builder voor WordPress waarmee je eenvoudig websites kunt ontwerpen met behulp van een visuele drag-and-drop-interface. Het toevoegen en aanpassen van knoppen in Elementor is vrij eenvoudig. Hier is een stapsgewijze handleiding voor het gebruik van knoppen in Elementor:
Stap 1: De Elementor Editor openen
Inloggen op je WordPress-dashboard
- Ga naar de inlogpagina van je WordPress-website (meestal
jouwwebsite.nl/wp-admin). - Voer je gebruikersnaam en wachtwoord in om in te loggen.
Pagina of bericht selecteren om te bewerken
- In het linker zijmenu, ga naar “Pagina’s” of “Berichten”, afhankelijk van waar je de video wilt toevoegen.
- Klik op de pagina of het bericht dat je wilt bewerken.
- Klik op de knop “Bewerken met Elementor” om de Elementor-editor te openen.
Stap 2: Voeg een knop-widget toe
Sleep de knop-widget van het linker zijpaneel naar de gewenste plaats op de pagina.
- Als je het niet direct kunt vinden, typ dan “Button” in de zoekbalk van het zijpaneel.
Stap 3: Pas de knop aan
Content Tab:
- Tekst: Voer de tekst in die op de knop moet worden weergegeven.
- Link: Voeg de URL toe waar de knop naar moet verwijzen. Je kunt ook kiezen om de link in een nieuw venster te openen.
- Grootte: Selecteer de gewenste grootte van de knop (extra klein, klein, medium, groot, extra groot).
- Uitlijning: Stel de uitlijning van de knop in (links, midden, rechts, of uitgevuld).
Stijl Tab:
- Typografie: Pas het lettertype, de grootte, het gewicht, de letterafstand, enz. aan.
- Kleur van de knop: Stel de kleur van de knop en de tekstkleur in. Dit kan zowel voor de normale als de hover-status worden gedaan.
- Rand en Schaduw: Voeg een rand toe en pas de hoeken van de knop aan. Voeg schaduwen toe om de knop meer diepte te geven.
Geavanceerde Tab:
- Marges en Padding: Pas de marges (ruimte buiten de knop) en de padding (ruimte binnen de knop) aan.
- Animatie: Voeg een ingangsanimering toe om de knop op een interessante manier te laten verschijnen.
- Aangepaste CSS: Voeg, indien nodig, aangepaste CSS toe voor meer geavanceerde aanpassingen.
Stap 4: Bekijk en publiceer
- Voorvertoning: Gebruik de voorvertoning om te zien hoe de knop eruitziet en werkt op verschillende apparaten (desktop, tablet, mobiel).
- Publiceer: Als je tevreden bent met de aanpassingen, klik op de “Bijwerken” knop om de wijzigingen op je live site te publiceren.
By Davy