Aangepaste stijl gebruiken voor knop

De opmaak van de knoppen is aan de achterkant van je website al ingesteld. Soms wil je dat een knop een andere opmaak krijgt zodat deze meer opvalt. In dit artikel leer ik je hoe je dat kunt doen. 

1. De opmaak van knoppen verander je door het 'Ontwerp' van de knop te wijzigen. Open de instellingen van de module en klik vervolgens op 'Ontwerp' (LET OP: Dit hoeft niet in de header te zijn, zoals het voorbeeld hierboven. Maar kan elke knop op je website zijn)

2. Bij de 'Header' zie je dat er twee knoppen zijn. Je kunt het ontwerp voor elke knop apart aanpassen. In dit geval klappen we 'Knop Twee' open.

   

3. Om de opmaak aan te passen klik je bij 'Aangepaste stijlen gebruiken voor Knop Twee' op 'Nee' zodat dit veranderd in 'Ja'. 
4. Je kunt nu de 'Tekstkleur' van de knop aanpassen.
5. Hier kun je de 'Achtergrond Kleur' aanpassen van de knop. Je ziet hieronder dat nadat je dit hebt gedaan je ook de rand een andere kleur moet geven.
6. Bij de 'Kleur Rand' kies je voor dezelfde kleur als je achtergrond. Dit ziet er namelijk veel netter uit. 
7. Wanneer je met je muis over de 'titel' > 'Knop Twee Background' beweegt, verschijnen er icoontjes. Klik op het 'muis' icoontje. 
8. Je ziet daaronder dan 'Desktop' en 'Dekking' tevoorschijn komen. 'Desktop' is de instelling die je net hebt gedaan voor de achtergrond en rand. Nu moet je dus nog de 'Dekking' weergave aanpassen (dit is hoe de knop eruit ziet wanneer je met je muis erop staat) 
9. Klik op 'Dekking' en stel een 'Achtergrondkleur' in die iets lichter is dan de knop op de 'Desktop' versie.
10. Dit doe je ook weer bij 'Rand'! (kies dus dezelfde kleur die je hebt ingesteld bij de 'Achtergrondkleur dekking')
11. Ook kun je een pictogram toevoegen aan de knop, die dan zichtbaar wordt als je met je muis eroverheen gaat (op 'Dekking' dus).
12. Bij de instelling 'Border Radius' kun je de hoeken van de knop ronder maken. Let hier er ook op dat je 'Desktop' en 'Dekking' apart in moet stellen! 
13. En je kunt nog een 'Box Shadow' rand toevoegen waardoor je een schaduw om de knop krijgt.
14. Verder kun je nog de tekst grootte, de lettertype en de tekststijl (vet/cursief) aanpassen van de knop maar ik raad aan hier niet teveel mee te doen omdat dit snel rommelig wordt. 
15. Klik op het groene vinkje om de wijzigingen op te slaan.

16. Vergeet niet om de pagina op te slaan als je klaar bent. 

    (LET OP: Test hoe de knop eruit ziet wanneer je de 'Visual Builder' volledig hebt verlaten. Anders komt het niet overeen met je instellingen!)