Wat is het verschil tussen Containers en Sections in Elementor?

Sections bevatten kolommen die je breed instelt in percentages. Dit systeem is eenvoudig maar beperkt in mogelijkheden.

Containers gebruiken CSS Flexbox. Je kunt items horizontaal of verticaal stapelen, wrappen, en nauwkeuriger positioneren.

Elementor heeft een migratie-tool om bestaande sections naar containers te converteren. Controleer na conversie altijd je pagina op fouten.

Twijfel je tussen sections en containers bij een bestaande pagina, verander dan niet halverwege van systeem op dezelfde pagina. Dit kan tot onverwachte spacing en uitlijning leiden. Kies één systeem per pagina en blijf daarbij.

Start je een nieuwe website of pagina, kies dan altijd voor Containers: dit is de actieve standaard van Elementor en biedt meer controle over uitlijning, richting en volgorde van elementen. Sections blijven werken op bestaande pagina's, maar krijgen geen nieuwe functies meer.

Een groot voordeel van Containers is dat je ze in elkaar kunt nesten: een container binnen een container, zonder de beperkingen van het oude kolommensysteem. Dat maakt complexere layouts mogelijk, zoals een afbeelding met tekst ernaast die op mobiel automatisch onder elkaar valt zonder extra instellingen.

Reken bij het migreren van sections naar containers op een controleronde per pagina: layout, spacing en mobiele weergave kunnen na de conversie net anders uitvallen dan verwacht. Test daarom altijd voordat je de pagina publiceert.

Met Containers kun je de volgorde van elementen op mobiel apart instellen, los van de volgorde op desktop. Zo kun je bijvoorbeeld een afbeelding die op desktop rechts staat, op mobiel bovenaan tonen zonder de HTML-structuur aan te passen.

Bouw je een compleet nieuwe pagina, kies dan altijd voor Containers, ook als de rest van de website nog met Sections is opgebouwd. Zo profiteer je meteen van de flexibelere opties, zonder dat je bestaande pagina's meteen hoeft te migreren.

De meest gemaakte fout is een container vullen met vaste hoogtes in pixels. Op een breed scherm ziet dat er nog goed uit, maar zodra de tekst langer wordt of het scherm smaller is, loopt de inhoud buiten het vlak. Werk in plaats daarvan met een minimale hoogte en laat de container meegroeien met de inhoud. Een tweede valkuil is padding op elk niveau tegelijk instellen: op de container, op de geneste container en op de widget. Je krijgt dan onbedoeld dubbele witruimte die je later moeilijk terugvindt. Houd het bij één niveau en gebruik de gap-instelling van de container voor de ruimte tussen elementen.

Bij een website die wij bouwen zetten we de paginastructuur vanaf het begin in Containers op, met vaste afspraken over spacing en maximale contentbreedte. Daardoor kun je later zelf een blok bijzetten zonder dat de rest van de pagina verschuift. Wil je zelf niet in de bouwer werken, dan passen we pagina's aan binnen managed WordPress hosting van €35 of €65 per maand. Je hebt daarbij één vast aanspreekpunt en krijgt binnen één werkdag antwoord.