4.8 op basis van 86 reviews
4.8/5

Inhoud

Introductie van Elementor Flexbox containers

Elemetor Flexbox Container

Inhoud

Elementor Flexbox Containers wordt de nieuwe manier van het ontwerpen van je layout in Elementor in plaats van Sections, Columns en Inner Sections. 

Je kunt hiermee nog beter responsive ontwerpen en zeer geavanceerde lay-outs realiseren, snel en met een veel slimmere opmaak, waardoor de DOM-uitvoer wordt gereduceerd en de prestaties van je website aanzienlijk worden verbeterd!

Klinkt technisch maar eigelijk komt het er op neer dat je website veel minder code aanmaakt waardoor je website sneller laad.

Met Elementor Flexbox Containers kun je widgets direct in een container plaatsen, maar ook containers tussenvoegen.

Bovendien kun je de gebruikerservaring verbeteren door de hele container of een kolom klikbaar te maken door er een link aan toe te voegen. Vervolgens kun je de lay-out en de verdeling van elementen binnen de container regelen en je inhoud aanpassen aan elke schermgrootte. Dit resulteert in een betere responsiviteit, zonder afbreuk te doen aan de snelheid.

Na enkele maanden in de ontwikkel modus en het implementeren van veel feedback uit de Elementor community, worden de Flexbox Containers geïntroduceerd als een alpha experiment. Elementor geeft aan dat het met voorzichtigheid kan worden gebruikt, maar beter nog niet op een live website. 

Wanneer je het experiment hebt ingeschakeld, zul je in staat zijn om nieuwe Containers toe te voegen aan een pagina, in plaats van Sections, Columns en Inner Sections. Je kunt ook Containers toevoegen aan een bestaande pagina die eerder is opgebouwd met de sectie-kolom lay-out.

Let op: Als je het experiment deactiveert, wordt elke container die je hebt gemaakt verwijderd van je website, je kunt ze terugplaatsen als je het experiment heractiveert en een eerdere revisie terugzet.

Bekijk de video

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 60%!

Dagen
Uur
Min
Sec

Hieronder vindt je de mogelijkheden die de layout van de container kunnen aanpassen, en hun gedrag:

Container

  • Content width – worden de elementen in de container omkaderd, of nemen ze de volledige breedte van de container in beslag.
  • Width – wat wordt de breedte van de container in PX / % / VW
  • Min Height – wat is de minimum hoogte van de container in PX / VH
  • Overflow – als de inhoud van een container niet binnen de viewport past, moet de overflowde inhoud dan verborgen worden, of zichtbaar zijn, waardoor horizontaal scrollen wordt veroorzaakt.
  • HTML tag – de mogelijkheid om een hele container in te pakken en er een HTML tag aan toe te voegen, inclusief de mogelijkheid om een hele container te hyperlinken.

Items

  • Direction – welke richting moeten widgets in de container aannemen – rij, rij omgekeerd (waarbij de hoofdas horizontaal is en de kruisas verticaal), kolom, of kolom omgekeerd (waarbij de hoofdas verticaal is en de kruisas horizontaal).
  • Items uitlijnen – hoe zullen widgets zichzelf rangschikken langs de dwarsas – flex-start, centreren, flex-end, of uitrekken.
  • Justify Content – hoe rangschikken widgets zich langs de hoofdas – flex-start, centreren, flex-einde, ruimte tussen, ruimte rondom, of gelijkmatig uitlijnen.
  • Elements Gap – wat is de ruimte tussen een element en een ander element (widget of een andere container).
  • Wrap – zullen widgets gedwongen worden om in één rij te blijven of over te lopen naar de volgende. Wrap zal de lijn breken waar widgets niet meer op het scherm passen, terwijl no-wrap alle widgets in één rij zal houden.
  • Inhoud uitlijnen – als wrap is geselecteerd, wordt een extra controle toegevoegd om te bepalen hoe widgets zich binnen de container verdelen – standaard, centreren, flex-start, flex-eind, ruimte tussen, ruimte rondom, of ruimte gelijkmatig.

Individueel element (widgets en binnencontainers):

Op de individuele widget binnen de container, kunnen gebruikers het volgende bepalen op het tabblad Geavanceerd op de individuele widget

  • Zelf uitlijnen – hoe moet deze widget zichzelf uitlijnen langs de kruis-as – flex-start, centreren, flex-einde, of uitrekken.
  • Grootte – hoe zal deze widget zich gedragen als het ruimte heeft om te groeien of moet krimpen om in het scherm te passen.
  • Volgorde – waar in de volgorde van widgets moet deze verschijnen – begin, einde, of aangepast.

Verder zijn de breedte- en positiecontroles toegankelijker gemaakt, en bevinden zich in de lay-outsectie in het geavanceerde tabblad van een widget, als gevolg daarvan is de positioneringssectie verwijderd en zal de inline-positie niet functioneren binnen containers.

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 60%!

Dagen
Uur
Min
Sec

Converteer bestaande kolommen naar container Elementor

Om de overgang van de sectie-kolom naar de Flexbox container layout in bestaande pagina's te vergemakkelijken, kun je de Elementor container converter gebruiken. Hiermee kun je flink wat kostbare tijd besparen, en de overbodige taak van het slepen van al uw widgets en inhoud te vermijden.

De converter kan gevonden worden onder de layout tab wanneer je op een sectie klikt, of in de pagina instellingen (tandwiel icoon) om een hele pagina te converteren. Door op ‘Toepassen' te klikken, wordt een nieuwe gedupliceerde container aangemaakt onder de gekozen sectie, met alle originele inhoud erin op de juiste plaats.

Het converteren gaat niet altijd helemaal goed. Ik raad je aan om de resulterende Container goed te controleren, en te onderzoeken hoe de layout verder verbeterd kan worden. Zodra je tevreden bent nadat alle inhoud optimaal is omgezet van de sectie naar de nieuwe container, verwijder je de oude de sectie.

Hoe je het Elementor container experiment nu al kunt testen:

  1. Ga naar Elementor > Instellingen > Experimenten en activeer het “Container” experiment
  2. Maak een nieuwe pagina en begin met het bouwen van je ontwerp.
  3. Voeg een nieuwe Container toe met de plus knop in de Editor en kies de gewenste structuur, of sleep de Container widget naar de Editor.
  4. Sleep een paar widgets en pas hun indeling en richting binnen de container aan met de regelaars op het tabblad lay-out van de container.
  5. Pas de volgorde van de widgets binnen de container aan en pas hem aan elk apparaat aan.
  6. Maak een container aan met drie kolommen.
  7. Probeer de HTML-tag: a te gebruiken om een container als een link in te pakken
  8. Probeer de Overflow: auto optie om scrollen toe te voegen wanneer expliciete breedte is ingesteld op een container (horizontaal scrollen)
  9. Probeer de verschillende order opties van items uit.
  10. Probeer een enkele widget te positioneren, door op de widget te klikken en in het geavanceerde tabblad, zichzelf uit te lijnen.
  11. Zorg ervoor dat je ontwerp consistent is, zowel op de voorkant als in de preview
  12. Zorg ervoor dat je ontwerp responsive is en eruit ziet zoals je zou verwachten op verschillende apparaten

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 60%!

Dagen
Uur
Min
Sec

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.

50%

Je bent er bijna!! 🎉

Waar mag ik het stappenplan naartoe sturen?

Basis stappenplan snel website maken WordPress download

Je gegevens zijn 100% veilig en versleuteld.
Bekijk ook mijn privacy pagina.

Wacht nog heel even! 🎁

Ik bied TIJDELIJK mijn complete WordPress basis stappenplan .PDF om Razendsnel je Eigen Website te bouwen! 
Download het alleen vanaf hier HELEMAAL GRATIS!

Basis stappenplan snel website maken WordPress download

Mijn beste methode om snel en gemakkelijk je droomwebsite te bouwen onthuld!

Download gratis dit stappenplan