Waneer je twee knoppen in Divi naast elkaar wilt tonen, zijn er een paar opties. Mijn favoriete oplossing is die waarbij je gebruik maakt van een beetje extra code in CSS. Je kunt elke knop module in een aparte kolom toevoegen, alleen dan staan de knop-modules vaak niet direct mooi naast elkaar. Ik laat je zien hoe je het eenvoudig en snel kan oplossen.
1. Twee Divi knoppen naast elkaar
Je start op de pagina waar je de twee knoppen (buttons) naast elkaar wilt tonen. Activeer de Visual Builder en voeg een sectie en een rij toe. Hier de vervolg stappen:
- Voeg een knop module toe en kopieer deze zodat beide onder elkaar worden getoond.
- Plaats de knoppen in dezelfde kolom. Je hebt nu 2 knoppen onder elkaar in 1 kolom.
- Open Knop-instellingen van de bovenste knop en ga naar tabblad Geavanceerd > Aangepaste CSS > tabblad Module-elementen
- Kopieer onderstaande CSS code en voeg toe onder ‘Hoofdelement’.
CSS code
display: inline-block;
margin-right: 10px;
- Herhaal dit voor de tweede knop, zonder de regel voor de marge (margin-right: 10px;)
0 reacties