FLEXBOX CONTAINERS STARTEN IN 6 STAPPEN
Gratis voorbeeldStap 1: Activeer Flexbox Container in Elementor Experiments
Ten eerste heb JE een flexbox-containerfunctie nodig om de flexbox-container in Elementor te kunnen gebruiken. Navigeer daarvoor naar Elementor ⇒ Instellingen vanaf het WordPress-dashboard. Ga nu naar het tabblad Experimenten en scrol omlaag om de optie ‘Flexbox Container’ te vinden.

Nadat je de optie hebt gevonden, kies je Actief in het vervolgkeuzemenu om Elementor Flexbox Container te activeren.Scroll ten slotte naar beneden en klik op ‘Wijzigingen opslaan’ om de status op te slaan.
Stap 2: Maak een nieuwe pagina
Nadat je de flexcontainer hebt geactiveerd, is het tijd om een nieuwe pagina aan te maken, zodat je deze functie kunt gebruiken. Navigeer daarvoor naar Pagina’s ⇒ Alle pagina’s en klik vervolgens op Nieuwe toevoegen.Geef nu een titel op en klik op Bewerken met Elementor
Stap 3: Voeg een container toe
Nu moet je in plaats van een sectie een container toevoegen. Klik daarvoor op het +-pictogram en kies vervolgens de gewenste structuur.
Opmerking: Als je de structuur in de navigator ziet, zul je zien dat de structuur eigenlijk een container is met andere containers erin dan kolommen. Je kunt ook één container vanuit het menu aan de linkerkant slepen en neerzetten.
Je kunt veel opties voor de container aanpassen, zoals:
- Containerbreedte: Je kunt de containerbreedte kiezen als Boxed of volledige breedte.
- Breedte: Als je Boxed als containerbreedte kiest, is de breedte 928Px. Als je daarentegen Volledige breedte kiest, is de containerbreedte 100% van de viewportbreedte. Je kunt echter beide breedtewaarden wijzigen.
- Overloop: Je kunt de overloopwaarde kiezen als Standaard, verborgen of automatisch.
- HTML-tag: Je kunt ook de HTML-tag van de container wijzigen. Je krijgt opties zoals div, header, footer, main, artikel, sectie, etc. Er is een nieuwe toevoeging van een tag. Zo kun je van een hele container een link met een tag maken.
Opmerking: Je krijgt ook veel opties onder ‘Items’ (meer hierover later). Bovendien kunt u alle bovenstaande instellingen ook voor elke binnencontainer aanpassen.
Stap 4: Widgets toevoegen
Het proces voor het toevoegen van widgets is hetzelfde als voor de kolom sectie structuur. Je moet naar de widget zoeken en vervolgens het +-pictogram van elke container slepen en neerzetten. Ik ga bijvoorbeeld één kop, één video en één pictogram voor sociaal delen toevoegen.
Stap 5: Pas de inhoud van de container aan
Nu is het tijd om de containerwidgets aan te passen. Bewerk hiervoor de container. Ga vervolgens naar Lay-out in het linkerpaneel en vouw de optie Items uit.
Dit zijn de opties waaruit je kunt kiezen:
- Richtingen: De standaardrichting is rij. Je krijgt echter vier opties, zoals Rij, Kolom, Omgekeerde rij en Omgekeerde kolom. Als je de kolom of omgekeerde kolom kiest, worden alle containers binnen de hoofdcontainer weergegeven als verschillende Elementor flexbox-kolommen.
Let op: Als je een kolom kiest, moet je de breedte van de binnencontainers aanpassen. - Containers uitlijnen:
Je kunt de uitlijning instellen als Flex Start, Center, Flex-End en Scratch.
Flex Start: plaatst je container element vanaf het startpunt
Flex center: kun je de items in het midden plaatsen.
Flex End: kun je alle binnencontainers op de bodem weergeven.
Stretch: nemen de binnencontainers bij toewijzing extra ruimte in beslag.
Deze zijn allemaal van toepassing als je de richting als een rij kiest.
Als je daarentegen de richting als kolom kiest, werken de flex-start- en middenwaarden hetzelfde als de rij. Maar met het flexibele uiteinde worden de containers naar rechts verschoven en met Scratch neemt deze alle ruimte aan de linkerkant in beslag.
-
Inhoud uitvullen: Je krijgt zes opties om inhoud uit te vullen:
flex start, midden, flex einde, ruimte tussen, ruimte eromheen en gelijkmatige ruimte. Met Ruimte tussen wordt dezelfde ruimte tussen elk van de items toegevoegd. Er wordt echter geen ruimte toegevoegd aan de boven- of onderkant van de items.De optie Ruimte rondom voegt ruimte toe aan zowel de boven- als onderkant van elke container. En de optie voor gelijkmatig verdelen van de ruimte voegt dezelfde ruimte toe rond alle widgets en binnencontainers.
Tussenruimte tussen elementen: Je kunt deze optie gebruiken om ruimte toe te voegen tussen elementen (widgets en binnenste secties).
Wrap: Kies Geen Wrap om alle items op één regel te plaatsen en Wrap om de inhoud over meerdere regels te laten lopen.
Stap 6: Publiceren en bekijkenJe kunt stap 4 herhalen om al je container instellingen aan te passen. Als je klaar bent met de aanpassing, klik je op de knop Publiceren om de pagina te publiceren. Vervolgens kun je op de voorbeeldknop klikken om uw pagina met de nieuwe flexcontainer structuur te bekijken