Hier is Elementor 3.6: Gebruik Flexbox Containers om top presterende en responsieve designs te maken

In Elementor 3.6 introduceren we Flexbox Containers, een nieuwe, slanke layoutstructuur die CSS Flexbox naar de Editor brengt. Met deze structuur kun je snel pixel-perfecte responsieve designs en super geavanceerde layouts maken, met een veel slankere markup, wat de prestaties flink verbetert. Deze feature betekent een transformerende verschuiving in hoe websites worden gebouwd met Elementor’s builder en is de basis voor een heleboel extra, geavanceerde mogelijkheden.

Flexbox Containers is een nieuw bouwblok in Elementor waarmee je efficiënt items in een Container kunt layouten, uitlijnen en verdelen op een lichte en responsieve manier. Met Flexbox Containers kun je widgets direct in de Container plaatsen, en ook Containers oneindig nesten. Daarna kun je de layout en verdeling van widgets binnen de Container controleren, en je content aanpassen aan elk schermformaat, wat resulteert in betere responsiviteit, zonder in te leveren op snelheid, en zonder een regel code te schrijven.

Na een paar maanden in de Dev Edition, en na veel feedback van de community te hebben verwerkt, introduceren we Flexbox Containers als een Alpha Experiment.

Als het experiment aan staat, kun je nieuwe Containers aan een pagina toevoegen in plaats van Secties, Kolommen en Inner Secties. Je kunt ook Containers toevoegen aan een bestaande pagina die eerder was gebouwd met de Sectie-Kolom layout. Met het experiment aan kun je geen nieuwe Secties of Kolommen meer toevoegen aan je pagina’s.

Probeer het eerst uit in de Flexbox Containers Playground

Omdat Containers een nieuwe manier zijn om websitestructuren te bouwen in Elementor, komt deze release met extra educatief materiaal, waaronder de Flexbox Containers Playground. Deze playground bevat 10 lessen om je te helpen wennen aan het ontwerpen van layouts met Flexbox Containers.

Let op: Wees voorzichtig met experimenten — features worden geïntroduceerd als Experimenten wanneer ze infrastructurele veranderingen bevatten die je website op onvoorziene manieren kunnen beïnvloeden. Lees hier meer over experimenten.

Als je het experiment deactiveert, wordt elke Container die je hebt gemaakt verwijderd van je website. Je kunt ze herstellen als je het experiment opnieuw activeert en terugkeert naar een eerdere revisie.

Belangrijke opmerking over versie 3.6 van Elementor

Toen Elementor 3.6 voor het eerst werd uitgebracht op 22 maart, ondervonden sommige gebruikers technische problemen door incompatibiliteit met plugins van derden. We hebben meteen een patch uitgebracht met Elementor 3.6.1, die de meeste gevallen van dit probleem zou moeten oplossen door de foutafdwingingsregels te verminderen, en de Editor zal laden.

Wat is het verschil tussen Containers en Secties?

Als je het Container-experiment activeert, kun je Containers aan je pagina toevoegen, en ook Containers naar het Canvas slepen, of in een andere Container met behulp van de widget uit het Editor Panel. Je zult ook merken dat de randen van de Container een donkerdere tint blauw hebben dan de randen van de Sectie.

Hieronder staan nog wat extra technische verschillen tussen Containers en Secties.

	Flexbox Containers Structuur	Sectie-Kolom Structuur
Het toevoegen aan je pagina	Voeg een Container toe in de Editor met het ‘+’ symbool, of sleep het Container widget naar de Editor	Voeg een sectie toe in de editor met het ‘+’ symbool
Widget locatie	Direct in een Container	In een Kolom, binnen een Sectie
Widget Breedte	Standaard inline	Standaard volledige breedte
Nesting	Oneindig nesten	Eén Inner Sectie
Widget richting	Kolom, Rij, Kolom Omgekeerd, of Rij Omgekeerd	Kolom, of Inline Positionering
Responsief ontwerp	Aangepaste volgorde van widgets of Containers voor elk apparaat	Kolom omkeren of Secties dupliceren
Uitlijning	Flex-Start, Flex-Center, Flex-End	Links, Midden, Rechts
Hyperlinken	Wikkel de container om hem te hyperlinken	Hyperlink een widget, niet een sectie of kolom

Flexbox Containers Gaan Veranderen Hoe Je Websites Bouwt

Met Flexbox Containers kun je snel eenvoudige en geavanceerde layouts maken, en de gebruikerservaring en prestaties verbeteren. Hieronder staan een paar voorbeelden van hoe:

Maak Pixel-Perfecte Layouts Met een Slank Markup, Snel

Vroeger, als je een website layout wilde maken met een aantal widgets in een rij, moest je of de breedte van elke widget op inline zetten, wat een overbodige workflow creëert, of een sectie maken met een aantal kolommen erin, wat de prestaties schaadt. Als je bijvoorbeeld een logosectie wilde maken met 4 logo’s in een rij, zou je met secties en kolommen ofwel de breedte van elk logo op inline moeten zetten, of een sectie moeten maken met 4 kolommen en in elk een logo plaatsen.

Met Flexbox Containers kun je een enkele container gebruiken, alle logo’s toevoegen die je wilt, en de richting van de Container veranderen van kolom naar rij, om al je logo’s in één rij te zien, met één klik. Je kunt ook gebruik maken van de Justify Content bediening om de logo’s naar wens binnen de Container te verdelen.

Pas Je Ontwerp Volledig Aan Voor Elk Breekpunt

Bij het ontwerpen van je website is het belangrijk om te bedenken hoe deze eruit ziet op verschillende apparaten. Een ontwerp dat werkt op desktop biedt mogelijk niet dezelfde gebruikerservaring op een kleiner scherm, zoals mobiel. Door gebruik te maken van de kracht van CSS Flexbox, kun je het ontwerp van je website aanpassen aan elk apparaat. Je kunt de richting, volgorde, uitlijning en verdeling van items binnen je Container voor elk apparaat veranderen, zonder duplicate Containers te hoeven maken. Dit resulteert in een verbeterde gebruikerservaring, zonder de prestaties van je website te beïnvloeden.

Faciliteer Intuïtieve Gebruikerservaringen Met Klikbare Containers

Sommige ontwerpen laten bezoekers denken dat het hele inhoudsgebied klikbaar zal zijn – zoals een kaart. Maar als ze proberen erop te klikken, hebben ze moeite om het gebied van de kaart te vinden dat daadwerkelijk klikbaar is. Met Containers kun je de hele Container omwikkelen en er een link aan toevoegen, waardoor de hele Container klikbaar wordt, wat een zeer intuïtieve ervaring voor je bezoekers creëert.

Nest Containers Oneindig Om Geavanceerde Layouts Te Maken

Flexbox Containers stellen je in staat om sneller geavanceerde layouts te maken. Terwijl je met de Sectie-kolom layout maar één inner-Sectie binnen een Kolom zou kunnen plaatsen, kun je met Flexbox Containers Containers oneindig nesten. Het nesten van Containers stelt je in staat om verschillende richtingen en uitlijningen voor elk van hen in te stellen, om snel zeer geavanceerde layouts te maken.

Benut de Kracht van CSS Flexbox in Elementor’s Editor

Flexbox Containers, geïntroduceerd als een experiment, vertegenwoordigen een kwantumsprong in ontwerpflexibiliteit. Met het experiment geactiveerd, kun je alle voordelen van CSS Flexbox in Elementor’s Editor benutten, waardoor je veel sneller geavanceerde ontwerpen kunt maken, met veel minder DOM-output. Afgezien van de directe voordelen voor ontwerpflexibiliteit, zijn Containers ook de basis voor een aantal spannende functies die eraan komen. Dus blijf op de hoogte en probeer het eerst uit in de Playground.