Flexbox in Elementor Pro gebruiken

Flexbox in Elementor Pro – Een geslaagd experiment

Zoals ik een tijdje geleden al heb geschreven in mijn artikel over wat er nieuw is in Elementor 3.6 is één van de meest interessante vernieuwingen wel de implementatie van Flexbox. En om gelijk even duidelijk te zijn, flexbox in Elementor is niet beperkt tot de pro versie. Ook in de gratis versie van Elementor is flexbox beschikbaar.

Maar wat is nu eigenlijk flexbox? In mijn artikel over de vernieuwingen in Elementor ben ik daar even op ingegaan, maar niet al te diep. Tenslotte ging het over de vernieuwingen in Elementor, niet over hoe flexbox werkt. Maar het onderwerp is belangrijk genoeg om er eens wat dieper bij stil te staan.

Hoe werken de meeste page builders?

Alhoewel ze er verschillende namen aan geven, werken de meeste page builders min of meer op dezelfde manier. De pagina’s worde ‘opgedeeld’ in een aantal secties (of rows/rijen) en binnen die rijen kan je kolommen plaatsen. Die kolommen komen dan naast elkaar te staan. Binnen die kolommen kan je dan weer je widgets, componenten, modules of hoe het ook in jouw pagebuilder wordt genoemd kwijt.

Omdat ik het verder over Elementor heb en hoe je flexbox in Elementor gebruikt, houd ik de terminologie even beperkt tot die van Elementor.

In Elementor wordt een pagina dus opgedeeld in secties (sections), in iedere sectie kan je één of meerdere kolommen (columns) hebben en per kolom kan je -onder elkaar- een in principe onbeperkt aantal ‘widgets’ plaatsen. Het woord ‘widget’ is naar mijn idee wat ongelukkig gekozen, omdat WordPress ook al ‘widgets’ kent (die ongeveer hetzelfde doen, maar toch anders in elkaar zitten).

Of even in een afbeelding

Dit model heeft echter een aantal serieuze nadelen. Eén nadeel is aan de creatieve kant. Wanneer je kolommen moet maken om je widgets te kunnen plaatsen, dan kan je ze niet makkelijk naast elkaar zetten. Want stel nu, dat ik in plaats van één widget rechtsboven, twee widgets naast elkaar zou willen hebben? Om dat mogelijk te maken introduceerde Elementor de ‘Inner section’. Een Widget waarin je kolommen aan kon maken om weer nieuwe widgets in te kunnen plaatsen. Iets als in de afbeelding hieronder.

Deze inner section loste een aantal vormgevingsproblemen op, maar niet alle.

Een nadeel van deze benadering is echter, dat je een enorme hoeveelheid HTML genereert om tot een dergelijke layout te komen

Want op je pagina krijg je hier zichtbaar vijf rechthoeken te zien, de widgets. Maar je hebt de HTML voor tien rechthoeken nodig, om er vijf zichtbaar te maken.

Omdat HTML gecomprimeerd wordt verzonden, valt het aan bestandsgrootte best nog wel mee, maar uiteindelijk moet deze HTML ook nog ‘uitgetekend’ worden in de browser. En dat kost best wat geheugen, en daarmee tijd.

Flexbox

Flexbox is een relatief nieuwe web technologie. In 2017 is de standaard hiervoor goedgekeurd, maar daarna duurde het nog even, voordat het ook in alle browsers was geïmplementeerd. Het is dus niet zo raar, dat de meeste pagebuilders deze standaard nog niet, of pas heel recent, ondersteunen.

Flexbox is het antwoord op een tweetal problemen. Het ene probleem heb ik zojuist hierboven al beschreven: De enorme overhead aan HTML code die nodig is voor het krijgen van een fatsoenlijke layout.

Het tweede probleem een goede presentatie over meerdere devices. Om een layout presentabel te maken op meerdere devices moet een enorme hoeveelheid aan CSS code geschreven (of gegenereerd) worden. Komt ook weer de snelheid niet ten goede.

De kracht van het hele idee van de ‘flexbox’ is dat dit niet nodig is.

Nu is dit artikel geen cursus in HTML en CSS, dus hoe die code er precies uit zou moeten zien gaan we hier niet verder bekijken, maar het is wel belangrijk enkele basisbegrippen van de ‘flexbox’ layout te begrijpen.

De flex container

De basis voor de hele flexbox layout is de flex container. Voor degenen die HTML spreken: In principe is een ‘flex container’ een doodgewone div. Maar wanneer je het ‘display’ property instelt op ‘flex’ is hij ineens een ‘flex container’ geworden kunnen alle elementen binnen deze container als ‘flex’ elementen worden behandeld.

En dat is verder het enige wat ik over CSS en flex properties wil zeggen, want deze post is over flexbox in Elementor, en één van de leuke dingen van Elementor is dat we ons geen zorgen over CSS en HTML hoeven te maken.

Flexbox in Elementor

Op het moment dat ik dit schrijf is de flexbox in Elementor nog steeds een ‘alpha experiment’. Dat wil ongeveer zeggen, dat ze niet instaan voor de gevolgen, wanneer je dit gebruikt op een bestaande website die met een versie eerder dan 3.6 is gebouwd.

Maar omdat ik natuurlijk heel nieuwsgierig ben, heb ik op een tweetal websites dit experiment ingeschakeld. Op een site die ik nu nog aan het bouwen ben, en die later live moet gaan… en op de WordXPression site zelf. Nou ja, een kopie daarvan!

Want op dit moment is het absoluut nog niet verstandig om ‘flexbox’ direct op een livesite die in een oudere versie is gebouwd te gebruiken. Alhoewel ik eerlijk moet zeggen, dat de impact mij enorm meeviel.

Een ander belangrijk punt om te realiseren is dat er ‘no way back’ is. Zodra je jouw eerste ‘flex containers’ hebt gemaakt, kan je het experiment niet meer uitzetten, omdat Elementor zonder dit experiment actief, absoluut niet begrijpt wat je hebt gedaan.

Een belangrijke reden dus om een staging site aan te maken, of je WordPress site lokaal te installeren. Als je een beperkt aantal Elementor Pro licenties hebt, dan is het wellicht een goed idee om ook even het artikel over staging en Elementor Pro te lezen.

Wil je weten hoe en waar je experimenten in Elementor kan activeren, dan moet je ook mijn artikel over Elementor en experimenten eens lezen.

Zodra je het experiment geactiveerd hebt, is de optie voor het toevoegen van secties verdwenen. Het enige wat je nog kan toevoegen zijn ‘containers’. Bestaande secties en kolommen kan je nog steeds aanpassen, je kan zelfs nog kolommen aan secties toevoegen, maar dat is het dan ook. Nieuwe secties kan je niet meer maken.

Het Elementor Tools Palet

Zodra je flexbox in Elementor hebt geactiveerd, is er het één en ander veranderd in het Tools Palet. Het eerste merk je als je kijkt naar de beschikbare widgets.

Het eerste wat je op zal vallen -wanneer je Elementor een beetje kent- is dat bij de basis widgets ‘Inner Section’ ontbreekt en er een nieuwe widget bij is gekomen. ‘Container’.

Wanneer we uitgaan van een bestaande pagina is er nog steeds niets verandert. Hieronder zie je een kopie van een sectie van een kopie van de homepage van WordXPression.

Je ziet, er is niet veel veranderd. De ‘plus’ in de tab om nieuwe secties toe te voegen staat er nog steeds.

Klik ik echter op die plus, dan voeg ik geen ‘section’ meer toe, maar een container… zoals je kan zien in het tools palet in de afbeelding hieronder. En wanneer je kijkt naar de toegevoegde sectie, zal je zien, dat er standaard layouts mogelijk zijn, die eerder met sections niet mogelijk waren.

Kortom, er is niet alleen een optie ‘Container’ bijgekomen, maar de optie ‘Section’ en daarbinnen de ‘Column’ is voorgoed verdwenen.

Een goede reden dus om eens nader kennis te maken met die ‘Containers’.

Containers voor Flexbox in Elementor

Wanneer je met Elementor werkt of wilt gaan werken, zijn binnenkort containers je beste vrienden. Het is dus goed om eens kennis met elkaar te maken.

Met wat fantasie -nou ja, behoorlijk meer dan ‘wat’- zou je kunnen zeggen dat een flexbox container een safe place is, waarbinnen elementen het beste uit zichzelf kunnen halen.

De meeste elementen in Elementor en andere page builders waren tot nu toe gedwongen zich aan te passen aan onze menselijke hokjesgeest. Maar in een flexbox container krijgen ze alle vrijheid. Maar net zoals in het werkelijke leven, is die vrijheid aan regels gebonden. En jij -als dirigent voor vrije improvisatie- zal eerst deze regels moeten leren.

Dus laten we eerst eens naar de kenmerken (properties) van die flexbox container kijken.

De flexbox in Elementor is compleet in te stellen naar je eigen wensen en behoeften. Maar in deze sectie van de Lay-out tab zie je de werkelijke kracht nog niet. Toch wil ik even de aandacht vestigen op de property ‘HTML-tag’. Dit is geen nieuwe property, maar wellicht zou het je niet opvallen, dat één van de opties ‘a’ is. Als je daarvoor kiest krijg je een container die in zijn geheel klikbaar is.

Deze optie was niet eerder in Elementor en er zijn verschillende plugins om kolommen en secties klikbaar te maken. Als je de ‘a’ optie gebruikt voor een klikbare container, kan je weer een plugin deactiveren. Mooi meegenomen.

De werkelijke magie vind je echter in de ‘Items’ sectie.

Flexbox Items

Helaas is voor flexbox in Elementor de hele terminologie nogal krom vertaald. Enige creativiteit in linguïstiek is dus vereist. Of je kan natuurlijk gewoon een bookmark naar dit blogartikel plaatsen.

Laten we even naar ieder property afzonderlijk kijken. De eerste is niet echt moeilijk te begrijpen.

Richting / direction

De richting/direction is letterlijk wat de term suggereert.

Je moet je voorstellen, dat je een lege doos hebt. Een container. En daar wil je dingen aan toevoegen. Je hebt een paar opties.

De eerste optie -het pijltje naar rechts- is dat je begint in de linker bovenhoek de doos te vullen. En van links naar rechts leg je nieuwe objecten daarnaast. Past iets er niet meer naast, dan ga je verder onder het eerste object. En zo ga je door. Ongeveer hetzelfde als de woorden in je tekstverwerker zich organiseren.

De tweede optie -het pijltje naar beneden- is wat moeilijker voorstelbaar. Het is alsof je een doos vult van boven naar beneden. Maar aangezien de zwaartekracht hier de grote spelbreker is, moeten we dit wat minder letterlijk nemen.

Maar je begint bovenaan in de container, en ieder nieuw item komt daaronder te staan. Eigenlijk het standaard gedrag van widgets in een kolom in de ‘oude’ situatie.

De derde optie -pijltje naar rechts, is eigenlijk hetzelfde als het pijltje naar links in omgekeerde richting.

En de laatste optie is heel eenvoudig voor te stellen. Het pijltje naar boven geeft aan, dat je in de container je items opstapelt.

Met de vriendelijke toestemming van de makers van CSS tricks, laat ik dit ook graag in een aantal afbeeldingen zien :

Artikelen uitlijnen

Vergeef deze tenenkrommende vertaling. ‘Artikelen’ is hier compleet verkeerd vertaald vanuit de oorspronkelijke term ‘items’. In dit property geef je aan, wat de onderlinge positionering ten opzichte van de container moet moet zijn. Laten we eerst eens met het bijbehorende plaatje beginnen.

Op dit moment kent Elementor slechts 4 van de vijf mogelijke opties. ‘Baseline’ zit er als optie (nog?) niet bij. De icoontjes op de knoppen laten duidelijk zien welke verticale uitlijning bedoeld wordt.

Inhoud uitlijnen

Met ‘inhoud uitlijnen’ wordt de uitlijning bedoeld ten opzichte van de andere elementen. Ook hier laat een plaatje het het beste zien.

Maak niet de vergissing -wat ik in het begin dus wel deed- te denken, dat we het hier hebben over horizontale en verticale uitlijning. Want de richting wordt uiteindelijk bepaald door de ‘flex direction’ (zie het eerste plaatje). align-items en align-content hebben betrekking op de positionering van de elementen, niet op de richting.

Elementen ruimte

De optie ‘elementen ruimte’ geeft aan welke ruimte er tussen de afzonderlijke elementen moet zitten. Hoe groter het getal, hoe groter de tussenruimte. Helaas is het met de huidige implementatie van flexbox in Elementor nog niet zo, dat je de horizontale en de verticale tussenruimte apart in kan stellen. Hopelijk komt dit er in te toekomst wel in.

Terugloop

En tenslotte kan je aangeven hoe de terugloop moet zijn. Of in het Engels, de ‘wrap’.

Kies je voor geen terugloop en je plaatst vijf elementen naast elkaar terwijl er maar ruimte is voor vier en een half, zal het vijfde element ‘afgekapt’ worden aan de rand van de container. Is er wel terugloop, dan zal het vijfde element op de ‘regel’ eronder geplaatst worden.

Als laatste komt nog een keer de optie ‘inhoud uitlijnen’ voor. Waarschijnlijk een foutje van de programmeur wat hopelijk in een toekomstige versie zal zijn verdwenen, want het doet ook verder helemaal niets.

Het leven van een item in een flexbox

Nu hebben we containers waarin we onze elementen kunnen plaatsen, maar ook met betrekking tot de elementen in deze containers kunnen we behoorlijk wat instellen. Voor de implementatie van flexbox in Elementor vind je deze instellingen onder de ‘geavanceerde’ settings van de desbetreffende widget. Laten we er eens wat nader naar kijken.

De eerste properties die je tegenkomt zouden eigenlijk bekend moeten zijn, want die waren er ‘pre flex’ ook al, maar laten we vanaf ‘Zelf uitlijnen’ de opties eens bekijken.

Zelf uitlijnen

Je kan elementen uitlijnen in een container, maar je kan ook een element zichzelf uit laten lijnen. Klik ik één van de opties aan, dan zal dat ene element zich uitlijnen volgens die regel. Heb ik bijvoorbeeld 3 elementen netjes op een rij omdat de ‘item align’ ‘center’ was en ik geef één element de ‘opdracht’ om bij ‘flex start’ uit te lijnen, dan zal die naar boven in de container gaan.

Volgorde

Volgorde is eigenlijk hetzelfde verhaal, maar hier kan je nog een paar leuke dingen mee doen. Als ik op de pijl links of pijl rechts druk, dan zal de widget naar links of rechts worden verplaatst. Niet erg interessant, omdat je ditzelfde effect natuurlijk ook kan bereiken door de elementen direct in de gewenste volgorde neer te zetten.

Je kan er echter nog meer mee doen. Waarschijnlijk weet je, dat je wanneer je op de kleine monitor achter het woord ‘volgorde’ klikt, je een icoontje voor een tablet of een mobiele telefoon te zien krijgt. Klik je op één van de twee stel je de instellingen specifiek voor dat device in.

Stel nu dat ik drie kolommen naast elkaar presenteer, bijvoorbeeld een prijstabel. En in het midden staat de ‘meest gekozen optie’. Met drie kolommen naast elkaar krijgt deze alle aandacht. Maar op een telefoon, wanneer hij in het midden komt te staan, is het niet ondenkbaar, dat je bezoeker niet doorscrolt naar die prijstabel die je juist extra aandacht wilde geven. Door alleen de volgorde aan te passen voor een specifiek device zorg je ervoor, dat de tabel als tweede -middelste- wordt getoond op een desktop, maar als eerste op een telefoon.

Volgorde en -wat ik hierna zal bespreken- ‘grootte’ zijn twee belangrijke properties om voor de verschillende devices meer controle over de presentatie van je site te hebben.

Grootte

Grootte is wel een heel interessante optie. In eerste instantie mag deze property want geheimzinnig lijken, want wanneer je denkt aan ‘grootte’ denk je mogelijk aan ‘afmetingen’. Maar daar praten we hier niet over. We praten over de relatieve grootte van een element. En vooral, wat dat element moet doen, wanneer de breedte van het scherm minder, of juist meer wordt.

Dat is de reden, dat ik op de knop ‘Aangepast’ heb geklikt, omdat daar eigenlijk de enige zinnige opties te vinden zijn. Namelijk ‘Flex groei’ en ‘Flex krimp’.

Laten we eerst eens naar ‘Flex Grow’ kijken.

Flex Grow geeft de onderlinge verhouding in grootte aan van de elementen in je container.

Kijk eens naar onderstaand voorbeeld

• Een
• Twee
• Drie
• Vier

Hierboven zie je een container met vier elementen. Alle elementen hebben een ‘flex grow’ van 1. Wat gebeurt er nu wanneer we element drie een flex grow van 2 zouden geven?

• Een
• Twee
• Drie
• Vier

Ok, dat is duidelijk element drie krijgt 2 maal zoveel breedte dan de andere die allemaal nog een breedte van 1 hebben. Geven we nu element één een breedte van 3 dan laat het resultaat zich raden :

• Een
• Twee
• Drie
• Vier

Op deze manier kunnen we dus heel makkelijk een relatieve breedte ten opzichte van de hele container bepalen.

Een speciale betekenis heeft de waarde 0, omdat dit aangeeft, dat het element niet mee doet in het hele ‘groeiproces’. Ongeacht hoeveel ruimte er vrij komt, hij zal niet breder worden.

Laten we nu eens naar de ‘Flex Krimpen’ kijken. Je snapt al, dat is precies het omgekeerde. Dit getal geeft aan hoe snel een element zal krimpen, wanneer er minder ruimte beschikbaar komt.

Nu heeft in beide gevallen de waarde 0 een speciale betekenis. Dit geeft namelijk aan, dat het element niet mag groeien of krimpen, maar op de ingestelde grootte moet blijven. We kijken nog eens naar de drie voorbeelden hierboven, maar hier heeft element één een breedte van 10 pixels, en een flex-grow met de waarde 0. Hoe zien de drie voorbeelden er dan uit?

• Een
• Twee
• Drie
• Vier

• Een
• Twee
• Drie
• Vier

• Een
• Twee
• Drie
• Vier

Je snapt, dat door het gebruik van flexbox in Elementor de mogelijkheden voor flexibele layouts behoorlijk wat groter zijn geworden. Het is even wennen, omdat je met een compleet andere mindset aan het werk moet gaan, maar als je er eenmaal aan gewend bent, zal je behoorlijk wat tijd besparen en is het responsive maken van je site een stuk makkelijker geworden.

Maar nu de oude sites!

Maar, zal je zeggen, dat is leuk voor nieuwe websites, maar mijn oude website staat nog helemaal in het hele ‘Section / column’ model. Dat kan ik niet zomaar om zetten!

Gelukkig hebben de makers van Elementor daar aan gedacht. Je kan een Elementor pagina of template sectiegewijs omzetten naar containers. Je moet mogelijk wel het één en ander ‘bijstellen’, omdat er lichte verschuivingen van elementen plaats kunnen vinden. Mijn persoonlijke ervaring is dat het hoofdzakelijk de padding en de ingestelde hoogte van secties zijn die even gefinetuned moeten worden.

Laten we ook eens kijken hoe we dat doen.

Wanneer je de blauwe ’tab’ van je sectie aanklikt, dan staat hier een knop ‘Converteren’. Klik je op die knop, dan wordt een kopie van dezelfde sectie gemaakt, maar dan ‘uitgevoerd’ als een flex container. Zoals eerder opgemerkt, dit gaat over het algemeen vrij goed, en ik heb bij het aanpassen van de templates op mijn kopie WordXPression site slechts heel af en toe kleine bijstellingen moeten doen.

Samenvatting

Zelf ben ik bijzonder te spreken over de mogelijkheden om met Flexbox te werken in Elementor. Tot nu toe ziet het er bijzonder stabiel uit. Ik ga nog een aantal kleinere sites van mijzelf omzetten en daarna de werkelijke WordXPression site onder handen nemen.

Of het voor jou ook aan te raden is? Dat ligt er aan. Omdat Flexbox toch een ander concept is, zal je dat concept eerst ‘in de vingers’ moeten krijgen en dat kost tijd. Heb je slechts één website te onderhouden in Elementor, dan kan je je serieus afvragen, of je ‘iets nieuws’ moet leren alleen voor die éne website, of gewoon het bij je huidige website moet houden.

Heb je meerdere websites te onderhouden, dan is het een heel ander verhaal. Ik zou je zeker adviseren om in ieder geval één site (of eigenlijk een staging kopie hiervan) te proberen. Heb je het idee, dat je het ‘in de vingers hebt’, dan volgen er vanzelf meer.

Mocht je nog specifieke vragen hebben over werken met Flexbox in Elementor, kan je ze in de commentaren hieronder stellen.

Wil je meer leren over Flexbox in Elementor, op dit moment is mijn nieuwe online cursus ‘Bouw vijf kickass websites’ in ontwikkeling en komt binnenkort online. In het eerste deel van deze cursus wordt het Flexbox systeem in detail uitgelegd.

Wil jij bericht ontvangen, wanneer deze cursus beschikbaar komt, schrijf je dan in op mijn nieuwsbrief via het formulier ander aan deze pagina.

Je kan nu alvast een aantal lessen bekijken in deze preview

De Flexbox illustraties in dit artikel zijn dank zijn de vriendelijke toestemming van de makers van de css-tricks.com website in dit artikel opgenomen.