Wie Elementor een paar jaar geleden heeft geleerd, denkt in sections en columns: een gedeelte over de volle breedte, daarin kolommen, in de kolommen de widgets. Wie vandaag begint, ziet in plaats daarvan containers. Beide systemen bestaan naast elkaar, en dat zorgt voor verwarring. Hier de plaatsbepaling.
Het verschil in één zin
Het oude systeem had drie vaste niveaus — section, column, widget. De container is één niveau dat zich willekeurig laat nesten en intern met flexbox werkt, het layoutmodel waarmee tegenwoordig vrijwel elke moderne website wordt gebouwd.
Wat daardoor beter wordt
Minder nesting, minder markup. Een gedeelte met één kolom had vroeger een section en een column nodig, dus twee niveaus voor één inhoudsblok. Met containers is het er één. Over een hele pagina telt dat op tot merkbaar minder HTML — wat de laadtijd ten goede komt en de structuur leesbaarder maakt.
Uitlijning die werkelijk werkt. Drie vakken met verschillende teksthoogte onderaan gelijk uitlijnen was met columns knutselwerk met gelijke minimumhoogtes en handwerk. Met flexbox zijn dat twee klikken: richting, uitlijning, klaar.
Gedrag in plaats van cijfers gokken. U legt vast of elementen op één rij of onder elkaar liggen, hoe ze zich verdelen, of ze afbreken als de ruimte krap wordt. De opmaak reageert op de beschikbare ruimte in plaats van aan vaste procentwaarden gebonden te zijn — wat juist op tablets het verschil maakt.
Volgorde vrij te wijzigen. Op de desktop moet de afbeelding links staan, op de telefoon echter boven de tekst? Met flexbox is dat één instelling, geen dubbele opbouw.
De vier instellingen die u werkelijk nodig hebt
De container heeft veel opties. In de praktijk werkt u vrijwel uitsluitend met vier:
Richting — naast elkaar (rij) of onder elkaar (kolom). De belangrijkste schakelaar überhaupt.
Uitlijning — hoe de elementen dwars op de richting zitten. Bij een rij: boven, midden, onder.
Verdeling — hoe de ruimte langs de richting wordt verdeeld. „Ruimte ertussen“ is de waarde die u nodig hebt voor koptekstregels met het logo links en het menu rechts.
Tussenruimte — de afstand tussen de elementen. Vervangt de vroeger gebruikelijke binnenmarges op elke afzonderlijke kolom, en wel betrouwbaarder.
Als u die vier hebt begrepen, bouwt u negentig procent van alle opmaak. De rest is fijnslijpwerk.
Een opbouw die zich bewezen heeft
Voor een normaal inhoudsgedeelte neem ik een buitenste container, richting kolom, over de volle breedte met achtergrond. Daarin een binnenste container, in de breedte begrensd en gecentreerd — dat is uw tekstgebied. En daarin, waar nodig, een container met richting rij voor naast elkaar liggende elementen.
Dat patroon — buiten het kader, binnen de breedtebegrenzing, daarin de inhoud — draagt zeer ver en blijft ook na maanden begrijpelijk.
Moet u bestaande pagina's ombouwen?
Nee. In elk geval niet zonder aanleiding.
Elementor biedt een omzetting van secties naar containers aan. Die werkt vaak goed, maar niet altijd zonder verlies — vooral bij pagina's met veel individuele marges, negatieve randen of eigen CSS. Een pagina die er goed uitziet en werkt ombouwen levert u geen enkele bezoeker extra op en kan een halve dag nawerk kosten.
Mijn aanpak: nieuw wordt met containers gebouwd, bestaand blijft. Als een oude pagina toch inhoudelijk wordt herzien, bouwt u die bij die gelegenheid opnieuw op. Zo migreert de website geleidelijk, zonder dat u er een verbouwingsproject van maakt.
Als u toch omzet: vooraf een back-up, en daarna elke pagina op telefoon en tablet controleren. Wat er daarbij verder mis kan gaan, leest u in Elementor-update zonder layoutbreuk.
Het neveneffect dat ik het meest waardeer
Minder nesting betekent minder HTML per pagina. Dat is geen performancewonder — de laadtijd hangt veel sterker aan afbeeldingen en scripts. Maar het is een stap in de goede richting, en hij kost niets, omdat u toch al bouwt. De grotere hefbomen voor de laadtijd staan in Elementor en Core Web Vitals.
Elementor Pro: Containers zijn er in beide versies. Pro wordt pas relevant als u die structuur ook voor het koptekstgedeelte, de footer en berichtopmaak wilt inzetten. Bekijk Elementor Pro
Als u nieuw instapt
Leer het oude systeem helemaal niet. Sections en columns komt u in oudere handleidingen en video's nog lang tegen — u kunt ze lezen zonder ze te gebruiken. Begin direct met containers; dat bespaart u het leren en later weer afleren van een model.
Precies zo ga ik ook te werk in mijn Elementor-training: flexbox vanaf het begin, omdat dat de stand is waarop u de komende jaren werkt.
Tags