WordPress & Elementor kennisbank

Buttons naast elkaar zetten in Elementor: 2 methodes

Inhoud van dit artikel:

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

Sanne IJspeerd

Sanne IJspeerd

Eigenaar SIJ Web | WordPress & Elementor Specialist
Website Strateeg | Marketing Manager in de IT

Ook bloggen op
SIJ Web?
Vergroot je zichtbaarheid en meld je aan als partner!

Populaire plugins

4/5
5/5
4.5/5
Meer doen met Elementor?
Schrijf je in voor de nieuwsbrief
No worries. Ik ga je niet spammen. Je ontvangt max. 2 keer per maand een nieuwsbrief.

Ook interessant voor jou

Scroll to top in WordPress maken met Elementor: 2 methodes

Lees meer knop toevoegen met Elementor op 4 manieren

4 reacties

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

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

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

Mis geen updates

Blijf op de hoogte van de laatste
Elementor Trends & Ontwikkelingen!

No worries, je ontvangt max. 2 keer per maand een mailing.