Buttons naast elkaar zetten in Elementor kun je op twee manieren doen. In veel webdesigns zie je vaak dat er twee buttons naast elkaar worden geplaatst. Maar hoe doe je dit met Elementor? In dit artikel leg ik je uit op welke manier je dit het (beste) kunt doen.
Methode 1: buttons naast elkaar zetten met inline positioning
Dit vind ik zelf de fijnste manier: de buttons naast elkaar zetten met inline positioning. Overigens kun je deze methode ook gebruiken om andere widgets dan buttons naast elkaar te zetten. In dit artikel laten we dus zien hoe je dit doet met buttons.
1) Plaats beide buttons in een kolom met de ‘Knop’ widget
2) Ga naar het tabblad ‘Geavanceerd’ -> ‘Aangepaste positionering’
3) Selecteer vervolgens ‘Inline (auto)’
Doe dit voor beide plugins. Je ziet nu dat ze naast elkaar staan. Om een ruimte tussen de twee buttons te creëren, kun je marges gebruiken. Zie voorbeeld hieronder.
Gebruik je de Navigator? Dan kun je in de navigator zien voor elke elementen je inline positioning gebruikt.
Buttons uitlijnen
Als je deze methode gebruikt, zie je dat de buttons automatisch links zijn uitgelijnd. Om de buttons gecentreerd te krijgen binnen de kolom, moet je de horizontale uitlijning van de kolom aanpassen. Dit doe je door de kolom te bewerken en in het tabblad ‘Layout’ de horizontale uitlijning op ‘Gecentreerd’ te zetten:
Methode 2) Buttons naast elkaar zetten met Inner section widget
Een andere manier om twee buttons naast elkaar te zetten is door gebruik te maken van de ‘Inner section’ widget. Dit werkt als volgt:
- Voeg de ‘Inner section’ widget toe aan de kolom
Let op: je kunt maar één keer een inner section binnen een sectie plaatsen. Een inner section binnen een inner section kan dus niet. Je moet dan de eerste methode gebruiken.
- Maak twee kolommen in de inner section
- Plaats een button in de ene kolom en de andere in de andere kolom
- Lijn de button in de linkerkolom rechts uit om de buttons naast elkaar te zetten
Het resultaat ziet er dan zo uit. Uiteraard kun je de buttons naar wens stijlen via het tabblad ‘Stijl’.
4 Responses
Ik probeer knoppen naast elkaar te zetten met Elementor. Maar in mijn overzicht bij “Knop” ontbreekt ‘Geavanceerd’ -> ‘Aangepaste positionering’.
Doe ik iets verkeerd?
Mijn website is nog met Dreamweaver gebouwd. Ik wil overstappen naar WP.
Hoi Toon,
Dat is wel vreemd inderdaad. Maak je gebruik van de Pro of de gratis versie van Elementor?
Hallo Sanne,
Heb jij advies om de buttons even groot te maken wanneer de woorden in de button dit niet zijn? Ik hoor graag van je!
Hoi Lianne,
Daar is geen standaard manier voor, maar je zou een beetje kunnen spelen met de paddings (via tabje ‘Stijl’) van de buttons.
Groetjes,
Sanne