Hoe Elementor Flexbox Container te gebruiken [Beginnersgids]

by Passy Guy | Elementor

Bent u nieuw bij Elementor Flexbox-containers? De nieuwe lay-outstructuur van de paginabuilder kan dus een beetje verwarrend zijn. Maar wij hebben wat je nodig hebt.

Elementor Flexbox is het nieuwe lay-outframework dat het ontwerpen van websites eenvoudiger en gebruiksvriendelijker maakt. Flexbox-containers markeren een stapsgewijze update van de oude sectie-kolomindeling die we allemaal kennen.

Hoewel de sectie-kolomindeling het website-ontwerp praktisch maakte door het gebruik van secties, subsecties en kolommen, was er nog steeds een gebrek aan flexibiliteit op het gebied van ontwerp.

Een sectie in Elementor kan alleen kolommen en een subsectie bevatten. Hoe meer u aan een pagina toevoegt, hoe langzamer uw website laadt.

Om nog maar te zwijgen over hoe moeilijk het is om mobielvriendelijke ontwerpen te maken met dit oude raamwerk.

Hoewel de sectie- en kolomindeling ontwerpers goed heeft gediend, is het tijd om over te stappen op een betere, efficiëntere en flexibelere manier om websites te ontwerpen met behulp van de Elementor-paginabuilder.

Dus als je Flexbox-containers onder de knie wilt krijgen, maak dan een bladwijzer voor deze blog. In deze Elementor Flexbox-handleiding leiden we u door alle details van deze nieuwe lay-outstructuur.

We zullen ook begrijpen hoe het beter is dan de oude sectie-kolomindeling.

Probeer ELEMENTOR NU !

inhoud

Wat is een Elementor Flexbox-container?

Elementor Flexbox-containers zijn Elementor's implementatie van de Flexbox CSS-sjabloon in hun paginabuilder. CSS Flexbox of Flexibele Box Layout is een nieuwe weblay-out mogelijk gemaakt door CSS 3.

Het is geoptimaliseerd voor prestaties en reactievermogen en biedt lay-outs die zich aanpassen aan verschillende apparaten en schermformaten.

Met Elementor Flexbox Containers, uitgebracht met de Elementor 3.6-update, kunt u apparaatvriendelijke webpagina's ontwerpen met behulp van containers zoals Flexbox CSS.

Deze Elementor-containers bevatten alle elementen van uw pagina, zoals tekst, afbeeldingen, widgets, enz. Maar het beste is: je kunt containers in containers plaatsen.

Als u de standaard lay-out secties-kolommen heeft gebruikt, weet u al hoe moeilijk het is om met meerdere lay-outs te werken.

Hoewel we allerlei soorten lay-outs krijgen, zoals blokken, tabellen, inlines, enz., is het werken ermee een gedoe en is het moeilijk om hun reactievermogen te garanderen.

Maar met Flexbox kunt u oneindig veel containers in containers plaatsen. Dit kan eindeloze mogelijkheden creëren als het gaat om unieke lay-outs en ontwerpen.

Simpel gezegd zijn containers uw nieuwe secties, maar ze zijn flexibel op zowel individueel als mondiaal niveau. Flexibiliteit is te vinden in bijna elk aspect van een container, of het nu gaat om uitlijning, opvulling of in-line positionering.

Veelvoorkomende gebruiksscenario's voor Flexbox-containers

Hier zijn enkele populaire gebruiksscenario's voor Flexbox-containers:

1. Reguliere secties

Een website is hoofdzakelijk onderverdeeld in secties zoals introductie, held, call-to-action, etc. Containers bieden veel meer flexibiliteit bij het ontwerpen van deze secties. Je kunt afbeeldingen toevoegen, tekst plaatsen en klikbare knoppen. Tegelijkertijd kunt u de richting, uitlijning en spatiëring van uw inhoud bepalen.

2. Kaartlay-outs

Omdat Flexbox-containers meerdere containers in rijen en kolommen kunnen hosten, worden ze vaak gebruikt om kaartlay-outs te maken. U heeft volledige controle over uitlijning, bereik en aankleden. Bovendien kunt u met geneste Elementor-containers verschillende inhoudswidgets in elke kaart plaatsen.

3. Heldenafbeeldingengalerij

De mogelijkheid om onderliggende containers voor onbepaalde tijd binnen een bovenliggende container te nesten, maakt Flexbox ideaal voor het maken van afbeeldingsgalerijen. U kunt galerijen maken met een horizontale of verticale stroom afbeeldingen. Bovendien kunt u de witruimte tussen afbeeldingen bepalen, de grootte van elke afbeelding bepalen en zelfs elementen toevoegen zoals tekst, knoppen, enz.

4. Themabouwer-sjablonen

Containers zijn ideaal voor het maken van sjablonen voor elementen zoals een koptekst, voettekst of enkele pagina. Met containers kunt u voor deze elementen een basislay-out maken en deze opslaan. Vervolgens kunt u het gebruiken als u meer pagina's maakt. Bovendien is de inhoud in een container mobielvriendelijk, dus pagina's die met deze sjablonen zijn gemaakt, passen zich aan verschillende schermformaten aan.

5. Gecentreerde elementen

In een sectie-kolomstructuur was het verticaal centreren van elementen in een sectie een beetje moeilijk. Containers maken deze taak echter eenvoudiger. U kunt de uitlijnings- en uitvullingseigenschappen instellen op centreren om een ​​element in het midden van de container te plaatsen.

Verschil tussen oude secties en nieuwe Elementor Flex-containers

Laten we eens kijken naar de belangrijkste verschillen tussen de Elementor-container en het gedeelte over verschillende instellingen.

1. Technisch verschil

Elementorsecties bieden een structureel raamwerk voor het organiseren van elementen zoals widgets, afbeeldingen, tekst, enz. U kunt een sectie in kolommen verdelen en daarin webpagina-elementen plaatsen.

Integendeel, Elementor Flexbox-containers bieden een flexibelere en adaptievere manier om webpagina-elementen te organiseren. Een container lijkt op een sectie, maar zonder een vooraf gedefinieerd raster.

In plaats daarvan heeft u de mogelijkheid om containers in een container te plaatsen.

Bovendien hebben widgets in secties de volledige breedte, terwijl ze in containers standaard inline zijn. Daarom kunt u zoveel elementen in een bovenliggende container plaatsen als u wilt.

En naarmate u meer elementen toevoegt, worden de uitlijning, positionering en grootte van de container automatisch aangepast.

2. Visueel verschil

De volgende stap over het verschil tussen Elementor-container en sectie zijn de visuele veranderingen.

Elementor-paginabuilder met Flexbox-containers behoudt de klassieke gebruikersinterface voor paginabuilder. Maar er zijn enkele opmerkelijke veranderingen.

Je hebt nog steeds het dashboard aan de linkerkant, waar je toegang hebt tot al je widgets, elementen en instellingen. Maar de browser toont nu containers en elementen eronder in plaats van splitsingen en secties.

Je kunt altijd op het icoontje klikken + of sleep elementen om ze aan uw webpagina toe te voegen. Het enige verschil is dat je een container en richting moet kiezen in plaats van secties en aantal kolommen.

Bovendien krijg je ook nieuwe containergerichte opties zoals richting, uitlijning, uitlijning, elementafstand, kromtrekken, enz...

Visueel verschil bij het gebruik van Elementor Flexbox Container [Beginnersgids]

3. Prestatieverschil

Het prestatieverschil tussen Flexbox-containers en sectie-kolomindeling is enorm, vooral als uw website-ontwerp vol complexe lay-outs en subsecties zit.

Het is je vast opgevallen dat traditionele Elementor-secties een weergave-eigenschap hebben die is ingesteld als “ blok ". Wanneer u een nieuwe sectie of widget toevoegt, worden deze dus op elkaar gestapeld.

Als je ze naast elkaar wilt weergeven, moet je meerdere splitsingen en DOM's maken, wat je uiteindelijke website vertraagt.

Aan de andere kant gebruiken Flexbox-containers een weergave-eigenschap genaamd " buigen", zoals in flexibel. Wanneer u dus nieuwe componenten aan een container toevoegt, kunt u deze verticaal stapelen of horizontaal naast elkaar plaatsen.

Het is daarom niet nodig om extra divisies te creëren. Op deze manier blijft de webpaginacode eenvoudig uit te voeren, waardoor de laadtijden aanzienlijk worden verkort.

Prestatieverschil bij het gebruik van Elementor Flexbox-container
Prestatieverschil bij het gebruik van Elementor Flexbox-container
Probeer ELEMENTOR NU !

Voordelen van het gebruik van Elementor Flexbox-containers

Er zijn verschillende voordelen aan het gebruik van Flexbox-containers ten opzichte van traditionele blokken voor website-ontwerp. Enkele van de belangrijkste voordelen zijn:

1. Gedetailleerde lay-outcontrole

Flexbox-containers bieden een hoge mate van controle over de positionering en lay-out van de inhoud. U kunt eenvoudig horizontale of verticale lay-outs maken. Bovendien kunt u de inhoudsrichting, uitlijning, opvulling, breedte, enz. instellen op individueel elementniveau en op globaal niveau.

2. Apparaatresponsieve lay-outs

De nieuwe flexibele secties zijn ontworpen voor kleine apparaten. U kunt de lay-out op elke gewenste manier wijzigen voor verschillende schermformaten, inclusief desktop, tablet en mobiel. Daarom is alle inhoud op uw webpagina’s geschikt voor verschillende apparaten en gemakkelijk toegankelijk voor de eindgebruiker.

3. Maak de markeringen schoon

Zoals eerder uitgelegd, zorgt het maken van meerdere horizontale secties of divisies met de eigenschap blokweergave voor DOM-zwelling en wordt de markup onoverzichtelijk. Flex-containers maken echter horizontale plaatsing van inhoud mogelijk zonder dat er kolommen en secties nodig zijn. Hierdoor is de websitecode eenvoudig uit te voeren en laadt deze sneller op verschillende apparaten.

4. Oneindige geneste secties

De grootste beperking van de traditionele blokkenbouwer was dat er slechts één subsectie binnen een sectie kon worden ondergebracht. Met een Flexbox kunt u echter oneindig een container in een container toevoegen. U kunt dus zonder problemen complexere lay-outs maken of de opmaak vervuilen met overmatige DOM.

5. Klikbare secties

Voorheen kon je widgets alleen in een sectie klikbaar maken, en niet in de hele sectie. Maar met Flex Containers kunt u met Elementor hyperlinken naar een hele sectie. Dit is een essentiële functie vanuit het oogpunt van de eindgebruiker, omdat deze niet langer hoeft te zoeken naar specifieke klikbare elementen om naar een andere pagina te gaan, maar in plaats daarvan op de sectie hoeft te klikken.

Elementor Flexbox-containers gebruiken (stap voor stap)

De Elementor Flexbox-paginabouwerervaring is vergelijkbaar met de standaard Elementor-blokbouwer. Dus of je nu helemaal nieuw bent bij Elementor of overstapt van de oude builder, je zult er zonder problemen aan wennen.

Het kan zijn dat u met diverse vragen zit, zoals: “Hoe container in Elementor aan/uitzetten?” Hoe containers gebruiken in Elementor? Hoe voeg ik een container toe in Elementor? » Deze sectie helpt u deze te beantwoorden.

Om u op weg te helpen, volgen hier de stappen om Flexbox-containers te gebruiken om een ​​website te ontwerpen:

Stap 1. Schakel Flexbox in in Elementor-instellingen

De eerste stap om Flexbox in Elementor te gebruiken is het activeren van Flexbox. Ga dus naar Elementor-instellingen vanuit het WordPress-dashboard. Klik vervolgens op het tabblad Ervaring, scroll naar beneden, zoek de Flexbox-container en selecteer de optie Actief in het vervolgkeuzemenu. Sla ten slotte de wijzigingen op en ga verder met de volgende stap.

Let op: Op nieuwe websites is de Flexbox container standaard actief.

Schakel Flexbox in Elementor-instellingen in – Elementor Flexbox Container gebruiken

Stap 2. Maak een nieuwe webpagina

Nu moeten we een nieuwe pagina maken zoals we gewoonlijk doen. Ga naar het gedeelte Pagina's, selecteer Alle pagina's en klik Voeg een pagina toe.

Stap 3. Open Elementor

U ziet nu het WordPress-paginabuilder-venster op uw scherm. Geef een titel aan deze nieuwe pagina en klik op Bewerken met Elementor om toegang te krijgen tot Flexbox-containers.

Open Elementor: Elementor Flexbox Container gebruiken [Beginnersgids]

Stap 4. Voeg een nieuwe container toe

Er verschijnt een vertrouwde Elementor-paginabuilder-gebruikersinterface op uw scherm. Bovendien kunt u een container vanuit de zijbalk slepen en neerzetten om een ​​nieuwe container toe te voegen, of op het pictogram klikken + en kies de gewenste structuur.

Een nieuwe container toevoegen hoe u de Elementor Flexbox-container gebruikt [beginnersgids]

Stap 5. Style de container

Nadat u een container heeft toegevoegd, heeft u toegang tot vele aanpassingsopties. U kunt opties wijzigen zoals containertype, breedte, hoogte, richting, uitlijning, enz.

Stylingcontainer Elementor Flexbox Container gebruiken [Beginnersgids]

Stap 6. Sleep widgets naar containers

Het toevoegen van widgets aan containers is ook eenvoudig. Kies eenvoudigweg de gewenste widget op het tabblad Elementen en sleep deze vervolgens naar het pictogram + in de container.

Widgets slepen en neerzetten in containers Elementor Flexbox-container gebruiken [beginnersgids]

Stap 7. Widgets aanpassen

Net als algemene containerinstellingen kunt u ook de inhoud van een container aanpassen. U kunt opties aanpassen zoals richting, uitlijning, uitvulling, opening, omloop, enz.

Pas widgets aan voor het gebruik van de Elementor Flexbox-container

Stap 8. Publiceer uw eerste Flexbox-webpagina

U kunt veel containers maken, dupliceren en hun locaties verwisselen. Herhaal de stappen terwijl u meer items toevoegt, en als u klaar bent, klikt u op de knop publiceren om uw webpagina online te zetten. U kunt ook op de knop Voorbeeld klikken om te communiceren met uw nieuwe Flexbox-webpagina.

Hoe converteer ik een sectiegebaseerde Elementor-pagina naar een Flexbox-container?

Een sectie-kolomstructuur kunt u eenvoudig omzetten in een Flexbox-container. Volg gewoon deze eenvoudige stappen:

Stap 1. Selecteer de sectie

Selecteer de sectie die u naar een container wilt converteren door op de zes stippen bovenaan de sectie te klikken. Als alternatief kunt u ook de sectie in de Elementor Navigator-pop-up kiezen.

Selecteer de sectie waarin wordt uitgelegd hoe u de Elementor Flexbox-container gebruikt

Stap 2. Converteer sectie naar container

Nadat u een sectie heeft geselecteerd, ziet u de knop CONVERTEREN op het tabblad Lay-out. Klik erop om de sectie om te zetten in een container.

Stap 3. Update de lay-out

Zodra de conversie is voltooid, ziet u twee afzonderlijke versies van de geselecteerde sectie. Het bovenste gedeelte is het originele, terwijl het onderste de nieuwe container is. Verwijder de originele sectie en klik op Bijwerken om de lay-out op te slaan.

Update de lay-out voor het gebruik van de Elementor Flexbox-container

Herhaal de stappen voor elke sectie die u naar een container wilt converteren.

Kan ik Elementor-add-ons combineren met de nieuwe flexbox-container?

Ja, je kunt Elementor-add-ons combineren met Flexbox-containers. Er is geen oplossing nodig, aangezien Flexbox-containers naadloos integreren met add-ons en plug-ins van derden.

Add-ons zijn zelfs nodig om geavanceerde functies en aanpassingsopties in de Elementor-paginabuilder mogelijk te maken. Je kunt installeren

Gerelateerde bronnen

Conclusie

De Flexbox-container van Elementor is een krachtige tool die de manier waarop u uw webpagina's ontwerpt en structureert, radicaal verandert. Dankzij de flexibele functies kunt u de uitlijning, distributie en organisatie van uw elementen met uitzonderlijke precisie beheren. Of u nu complexe lay-outs wilt maken of gewoon de responsiviteit van uw ontwerpen wilt verbeteren, Flexbox biedt een elegante en intuïtieve oplossing.

Met behulp van de Flexbox-container heeft u toegang tot een reeks bedieningselementen die het gemakkelijker maken om spaties en uitlijningen te beheren, terwijl u de aanpassingen vereenvoudigt die nodig zijn voor een naadloze presentatie op alle apparaten. Dit aanpassingsniveau verbetert niet alleen de gebruikerservaring, maar optimaliseert ook het ontwerpproces door uw pagina's dynamischer en aanpasbaarder te maken.

Ontdek gerust de verschillende mogelijkheden van Flexbox en ontdek hoe ze uw Elementor-projecten kunnen verrijken. Met het juiste gebruik van deze tools kunt u vloeiende en professionele lay-outs creëren die uw bezoekers boeien en betrekken. Blijf experimenteren en profiteer van de mogelijkheden die Elementor biedt om het maximale uit uw webontwerpen te halen.

Dus ! We hebben u zojuist laten zien hoe u de Elementor Flexbox-container gebruikt. Als u zich zorgen maakt over hoe u daar kunt komen, laat het ons dan weten binnen commentaires.

U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.

Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.

Veel Gestelde Vragen

Wat is het verschil tussen Flexbox Container en Section in Elementor?

Elementor-secties hosten widgets over de volledige breedte op een pagina, maar bij Flexbox-containers staan ​​de widgets inline binnen een container. Bovendien zijn secties stijf en kunnen ze slechts één binnensectie hebben, terwijl Flex-containers voor onbepaalde tijd kunnen worden genest.

Kan ik Elementor Flexbox Containers gebruiken met elk WordPress-thema?

Ja, u kunt Elementor Flexbox-containers gebruiken met elk WordPress-thema. Het enige dat u hoeft te doen, is Flexbox-containers inschakelen in de Elementor-instellingen, zodat ze beschikbaar zullen zijn de volgende keer dat u de paginabuilder opent.

Hoe kan ik mijn Elementor Flexbox-containers responsief maken op verschillende schermformaten?

Met de Flexbox Elementor-container heeft u meerdere opties om ervoor te zorgen dat de inhoud van uw webpagina responsief is op verschillende schermformaten. U kunt bijvoorbeeld de richting van de containerinhoud selecteren om inhoud in rijen of kolommen weer te geven. U kunt de inhoud ook horizontaal en verticaal uitlijnen en beslissen wanneer u de inhoud binnen elk element wilt plaatsen. Bovendien kunt u ook een widget in-/uitschakelen op basis van het apparaat.

Zijn Elementor Flexbox-containers compatibel met alle grote webbrowsers?

Ja, Elementor Flexbox-containers zijn compatibel met alle populaire webbrowsers, waaronder Chrome, Edge, Safari en Firefox.

Probeer ELEMENTOR NU !

Plaats de reactie

Uw e-mailadres wordt niet gepubliceerd. Verplichte velden zijn gemarkeerd *

Deze site gebruikt Akismet om ongewenst te verminderen. Lees meer over hoe uw feedbackgegevens worden verwerkt.