Share on email
Share on whatsapp
Share on twitter
Share on linkedin
Share on facebook

Buttons naast elkaar zetten in Elementor: 2 methodes

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

Button toevoegen elementor

2) Ga naar het tabblad ‘Geavanceerd’  -> ‘Aangepaste positionering’

3) Selecteer vervolgens ‘Inline (auto)’

buttons naast elkaar zetten inline positioning

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.

buttons naast elkaar zetten

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:

Kolom horizontaal uitlijnen

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

Button uitlijnen binnen sectie

Het resultaat ziet er dan zo uit. Uiteraard kun je de buttons naar wens stijlen via het tabblad ‘Stijl’.

Buttons naast elkaar zetten

Share on email
Share on whatsapp
Share on linkedin
Share on twitter
Share on facebook
Sanne IJspeerd

Sanne IJspeerd

Sanne is eigenaar van SIJ Web. Ze ontwikkelt WordPress websites met Elementor. Daarnaast ondersteunt ze bedrijven bij de inzet van marketing- en communicatieactiviteiten.

Geef een reactie

Hulp nodig?

We helpen je graag! Stel hieronder je vraag:

Elementor Expert gezocht

tips ontvangen?

Schrijf je in voor onze nieuwsbrief!

We respecteren je privacy.
Je ontvangt max. 1 keer per maand een mail.