Knop onder een kolom plaatsen op gelijke hoogte

Gewijzigd op Di, 17 Okt, 2023 om 12:23 PM

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
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.
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
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!