Heb je ooit geprobeerd om een aantal blokken onder je header te maken, bijvoorbeeld met drie diensten naast elkaar met een afbeelding, titel, tekstje en knop.
Maar krijg je die knoppen maar niet netjes op één lijn…
Je bent niet de enige.
Dit is een van de meest gestelde vragen die ik krijg van mensen die met Elementor werken. Want op het oog lijkt het simpel, maar zodra de teksten per blok nét iets verschillen, schieten de knoppen alle kanten op.
Resultaat: een rommelig geheel en veel frustratie.
In dit artikel (en bijbehorende video 👇) laat ik je stap voor stap zien hoe je dit probleem oplost. Zonder geklooi met spacers, padding of margin. Zonder extra plugins. Gewoon strak en professioneel.
Bekijk de video hieronder voor de complete uitleg:
Waarom verspringen die knoppen steeds in Elementor?
Het probleem zit ’m in ongelijke hoogtes. Zodra één tekst iets langer is dan de andere, verschuift de hele inhoud van dat blok. En als je werkt met traditionele kolommen, dan reageren die niet flexibel genoeg om dit netjes op te lossen.
Elementor was daar vroeger wat beperkt in. Je moest allerlei creatieve (lees: omslachtige) trucjes gebruiken, zoals spacers toevoegen of margins tweaken. Of je moest een aparte plugin gebruiken die dan wéér een andere styling introduceerde.
Maar dat hoeft nu niet meer.
Veelgebruikte ‘oplossingen’ die jij moet vermijden
Laten we ze even op een rij zetten, de dingen die je beter niet meer kunt doen:
❌ Spacers of invisible widgets gebruiken om de knoppen naar beneden te dwingen
❌ Handmatig alles even hoog proberen te maken
❌ Random CSS-hacks gebruiken of add-ons installeren die het nóg ingewikkelder maken.
Ze werken soms een beetje… totdat je mobiel gaat testen. Of tot je later iets wijzigt.
Kortom: niet schaalbaar, niet betrouwbaar.
Elementor, Mijn beste investering ooit!
Ik gebruik deze tool voor al mijn klanten inclusief mijzelf en bespaart me honderden uren per jaar!
Check BLACK FRIDAY DEAL 🎉 10 tot 50% korting!
Wees er snel bij voor het te laat is!
Profiteer tijdelijk van de Elementor verjaardag sale! 🎉
korting tot maar liefst 53%!
De juiste oplossing: Flexbox Containers in Elementor
Gelukkig is er een veel betere manier. Sinds de introductie van Flexbox Containers in Elementor kun je elementen veel nauwkeuriger positioneren.
De truc: je zet elk blok als container op en gebruik de “Grow” of “Groeien” functie op bijvoorbeeld het tekst element.
Wat dat doet? Simpel gezegd: de inhoud (zoals titel, afbeelding en tekst) wordt naar boven gedrukt, en de knop naar onder. Het vult de ruimte die over is onder de tekst als het ware op.
En dat werkt óók als de ene tekst net iets langer is dan de andere. Precies wat je wilt dus!
Zo bouw je het op – stap voor stap
In de video laat ik je dit live zien, maar hier ook de korte versie:
- Zet een Flexbox Container op die je blokken bevat (bijv. 3 kolommen).
- Maak per kolom een aparte sub-container.
- Voeg je afbeelding, titel, tekst en knop toe aan elke container.
- Stel in:
Selecteer het tekstvak en klik in het tabje “Geavanceerd” Achter Afmeting op “Groeien” - Voilà: alle knoppen staan automatisch netjes onderaan.
Zelf je website bouwen met Elementor?
Wil je dit soort dingen leren vanaf de basis, zonder frustratie? In mijn online WordPress cursus neem ik je stap voor stap mee. Geen saaie theorie, maar gewoon doen – zodat je zelf de controle hebt over je website.
Bekijk de cursus hier:
https://matthijsonline.nl/online-cursus-wordpress-vkp
Laat me weten in de reacties of deze oplossing voor jou heeft gewerkt. En als je nog steeds ergens tegenaan loopt, drop je vraag hieronder of stuur me een DM!
Wil je serieus met je website aan de slag?
Volg dan mijn stap voor stap WordPress videocursus!
Start vandaag nog met mijn unieke WordPress videocursus met ondersteuning!
“Maak snel en gemakkelijk je eigen droom website met WordPress”
Al meer dan 1600+ cursisten gingen je voor!
