Misschien is ie je al opgevallen: de container widget Elementor. Wat kun je precies met deze flexbox containers? En waarom moet je deze wel of niet gebruiken?
Deze website is gebouwd met Flexbox containers. En daar heb ik een beetje spijt van. In dit artikel leg ik uit wanneer en waarom Flexbox containers wel degelijk interessant zijn, maar je (nog) voorzichtig moet zijn met het gebruik ervan.
Wat is de container widget Elementor?
De container widget van Elementor bied je een nieuwe manier van bouwen. Als je al langer met Elementor werkt, dan weet je dat de pagina’s gebaseerd zijn op secties en kolommen. De flexbox container vervangt de secties en kolommen; je gaat dus op een andere manier bouwen.
De voordelen van container widget Elementor
Werken met de flexboxcontainers bied je verschillende voordelen:
- Je kunt widgets beter positioneren (vanaf één plek), zowel op desktop als op mobiel
- Ongelimiteerd innersecties gebruiken (maar niet per se aan te raden)
- Volgorde van widget omkeren op mobiele apparaten
- Betere website performance (minder DOM elementen)
- Meer vrijheid in de vormgeving van je website
Je kunt dus zeker dingen met de containters die je niet kunt met secties en/of kolommen. Dat maakt het een interessante toevoeging voor als je websites bouwt met Elementor. De truc is om met zo min mogelijk containers / elementen je pagina lay-out vorm te geven.
Hoe gebruik je de container widget?
Om te werken met de flexboxcontainer doorloop je de onderstaande stappen:
1. Creëer een testomgeving om op te oefenen
Als je net start met de flexbox containers is dit zeker aan te bevelen! Een testomgeving maak je aan op een subdomein van je domeinnaam of op een aparte domeinnaam die je nog ter beschikking hebt. Sommige hostingpartijen bieden ook de mogelijkheid om een testomgeving aan te maken.
2. Activeer de flexboxcontainers
De flexboxcontainers staan standaard uit in Elementor, je moet deze dus eerst aanzetten. Ga hiervoor naar Elementor –> Instellingen –> Experimenten. Scroll naar ‘Lopende Experimenten’ en activeer de flexbox containers:
3. Bewerk een pagina met Elementor
Nu je de flexbox container hebt geactiveerd, kun je deze gaan gebruiken voor al je webpagina’s. Ook als je deze als hebt gebouwd met secties en kolommen. Je kunt twee dingen doen:
- Maak een nieuwe lay-out met de container widget
- Converteer bestaande secties naar containers (let op: je kunt niet meer terug!)
Klik op de sectie om deze te bewerken. In het Elementor panel zie je vervolgens de optie om de sectie te converteren naar een flexbox container.
4. Maak een nieuw design met de flexbox container
In principe werkt de basis hetzelfde als een sectie; je sleept de widget die je wilt gebruiken naar de container. Hoe je deze precies positioneert binnen de container, kun je zelf bepalen aan de hand van onderstaande opties:
Zoals je ziet biedt de flexbox container wat meer opties dan de sectie. De breedte en hoogte van de container laat je meestal staan (tenzij je al gevorderd bent in het gebruik van secties / containers). De meest belangrijke opties vind je onder ‘Items’. De items staan voor alle widgets die je in de container hebt gestopt. Dit kunnen ook weer nieuwe containers zijn.
Richting:
Met de optie ‘Richting’ bepaal je in welke richting je de elementen wilt positioneren. Van onder naar boven, van links naar rechts of juist omgekeerd.
Inhoud uitlijnen:
Hiermee lijn je de complete inhoud uit. Heb je bijvoorbeeld een titel, tekstblok en een button onder elkaar, dan kun je ervoor kiezen om deze bij elkaar te ‘duwen’ of juist evenredig uit elkaar te krijgen.
Artikelen uitlijnen
Daarnaast kun je ook bepalen of je de elementen links, gecentreerd, rechts of uitgevuld wilt plaatsen in de container.
Afstand tussen Elementen
Bepaal tot slot hoeveel afstand je tussen de elementen wilt gebruiken. Deze staat standaard op ’20’ (dat was met secties ook al zo). Door deze optie te gebruiken hoef je niet op een andere manier witruimte toe te voegen.
Terugloop
Bepaal of je alle items op één lijn wilt weergeven of dat ze ook op meerdere regels geplaatst mogen worden.
Waarom kun je de container beter nog even niet gebruiken?
Zoals ik al aangaf; ik gebruik de flexcontainers ook op deze site. Maar ik gebruikte de secties al op een soortgelijke manier zoals de flexboxcontainers werken. Zo probeerde ik kolommen altijd al zoveel mogelijk te vermijden en ook innersecties gebruikte ik nauwelijks. Deze twee factoren dragen namelijk bij aan een tragere laadtijd van je website.
Doordat ik al op die manier werkte, was het makkelijker om te starten met de flexbox containers. Maar, als je echt een innersectie junkie bent, nog kolommen gebruikt om witruimte te maken of widgets te positioneren; dan ben je er simpelweg nog niet klaar voor.
Het is een nog lopend experiment
Daarnaast is het nog steeds een lopend experiment. Ook op mijn eigen site ervaar ik nog regelmatig problemen met de containers, met name in combinatie met add-ons die ik gebruik. Maar ook komt de vormgeving aan de achterkant en voorkant niet altijd overeen. De containers staan op de verkeerde breedte, en dan krijg je dit met geen mogelijkheid hersteld. Tenzij je de container opnieuw bouwt… en daar zit je natuurlijk niet op te wachten.
Grootste nadeel container widget Elementor
Het grootste nadeel: je kunt niet meer terug. Ben je al begonnen met de container widget Elementor dan kun je niet meer terug naar de gewone secties. Zodra je de containers uitschakelt, zijn al je secties ook verdwenen. Ze converteren dus niet terug naar secties.
Wil je leren om hiermee te werken? Doe dit dan vooral op een testomgeving.
Flexbox container Playground
Wil je een beter beeld krijgen van de flexbox container of ermee leren werken, zonder dat je dit op je eigen site hoeft te doen? Ga dan oefenen op de playground. Dit geeft je ook een beter beeld bij de voordelen van het werken met de flexbox containers. Succes!
