Knop onder een kolom plaatsen op gelijke hoogte

In dit artikel laat ik je zien hoe je een knop onder een kolom plaatst. Je moet dit op de juiste manier doen, anders staat de knop op 'mobiele' of 'tablet' weergave niet onder de juiste kolom! Ik laat eerst de basis regel zien, en daarna laat ik zien hoe je ervoor kunt zorgen dat de knoppen zoals de screenshot hierboven, op dezelfde lijn blijven, ook al is de tekst in een andere kolom langer.

Schakel de 'Visual Builder' in waar je de knoppen wilt toevoegen
Om onder deze kolommen een knop te plaatsen, moeten ze wel in dezelfde 'rij' staan
Wanneer je namelijk een nieuwe rij (groen) toevoegt en daarin knoppen plaatst, worden deze niet juist weergegeven op tablet en mobiel
(LET OP: Dit is dus hoe het niet moet!)
Dit ziet er nu namelijk zo uit op mobiel/tablet weergave :
Plaats de knoppen dus in dezelfde 'rij' direct onder de module. Dan komen ze er netjes onder op mobiel/tablet.
(LET OP: Nu staan ze niet op gelijke hoogte wanneer je verschillende lengtes tekst hebt, maar dit gaan we zo instellen. Je kunt hier dus wel stoppen wanneer je ongeveer dezelfde lengtes aan tekst hebt!)
Zoals je ziet komen ze nu op mobiele weergave er wel netjes onder:
Wil je de knoppen op gelijke hoogte? Volg onderstaande stappen!
Om de knoppen op gelijke hoogte te krijgen op de 'desktop' versie, open je de instellingen van een knop
Onder 'Geavanceerd' bij 'Zichtbaarheid' zet je een vinkje bij 'Desktop' om de knop uit te schakelen op desktop
Doe dit voor alle knoppen die nu in dezelfde rij staan!
De knoppen zijn nu 'onzichtbaar' op desktop, maar wel zichtbaar op tablet en mobiel
Nu moeten we alleen nog een rij toevoegen met 3 knoppen, die alleen voor 'Desktop' zichtbaar zijn
Klik op het groene '+' icoon om een nieuwe rij toe te voegen
Kies het zelfde aantal kolommen, in mijn voorbeeld zijn dit er 3
Voeg de knop toe en style deze zoals je wilt
'Dupliceer' de knop en plaats er een in elke kolom in de nieuwe rij
Open nu de instellingen van de rij in het groene menu
(We hebben deze rij toegevoegd voor de desktop weergave, dus we schakelen de hele rij nu uit op tablet en mobiel, anders moet je dit voor elke knop apart doen)
Onder 'Geavanceerd' bij 'Zichtbaarheid' zet je nu een vinkje bij 'Telefoon' en 'Tablet'
Klik op het groene vinkje om de wijzigingen op te slaan
Wanneer je de 'Visual Builder' nog aan hebt, ziet het er dus ongeveer zo uit:
Op mobiele weergave:
Sla de pagina op en verlaat je de 'Visual Builder', dan zie je hoe het eruit ziet voor een bezoeker
De toegevoegde rij met knoppen is op mobiel niet meer zichtbaar
Check dus even de mobiele/tablet weergave wanneer je klaar bent!

Mocht je nog meer vragen hebben of het is nog niet helemaal duidelijk? Neem dan contact op door hieronder op "Neem contact op" te klikken. Klopt deze informatie niet meer? Laat het ons dan ook weten!