Elementor 4.0 editor – Componenten als basis voor je design

Met Elementor 4.0 kun je eindelijk je eigen widgets maken…

Het duurt niet lang meer tot de Elementor Editor 4.0 beschikbaar komt. Op dit moment is Elementor 3.35 in beta-test, en wanneer deze -en dat is naar verwachting in enkele weken- productierijp wordt verklaard, komt ook de Elementor 4.0 editor beschikbaar.

Deze 4.0 editor zal voorlopig optioneel zijn. Wanneer je al een site in Elementor hebt, zal je 4.0 apart moeten activeren, en wanneer je Elementor 3.35 of hoger in een nieuwe site gebruikt, krijg je ook nog steeds de ‘oude’ editor te zin. Wanneer Elementor 4.0 zelf beschikbaar komt, zal echter de nieuwe editor default zijn voor nieuwe websites.

Elementor 3.x en 4.x – Ze kunnen naast elkaar bestaan…

Hoewel Elementor 3.x en Elementor 4.x conceptueel sterk van elkaar verschillen, is er geen directe reden voor paniek. Wanneer je Elementor 3.x met containers gebruikt, dan kunnen de Elementor 3.x en Elementor 4.x gegenereerde elementen gewoon naast elkaar bestaan. Hier geldt echter wel één belangrijke waarschuwing. Gebruik je het oude layout systeem, met secties en kolommen, vanaf versie 4.x van Elementor zal er geen automatische conversie naar een container layout meer zijn. Bovendien bestaat er een kans, dat -door een diepere CSS structuur- bepaalde onderdelen rond de layout met de nieuwe componenten niet meer goed zal werken. Het is dus verstandig om voor de overstap naar Elementor 4.x de conversie naar containers door te voeren.

Atomaire elementen en Elementor 4.0 componenten.

De standaard bouwstenen Elementor 4.0 zijn Elementor componenten en atomaire elementen. In een eerdere blogpost heb ik het al over de atomaire elementen gehad. Het zijn in principe de basisblokjes waaruit je jouw eigen widgets op kan bouwen.

Over componenten heb ik het nog niet concreet gehad. Maar een component is als het ware een container, waarin je jouw atomaire elementen kan plaatsen. En zo’n component kan je dan opnieuw hergebruiken in andere pagina’s.

Maar wacht eens even, zul je zeggen, dat kon ik toch al met ‘templates’? Wat voegt een component dan eigenlijk toe?

Een aantal zaken. Allereerst is de workflow rond componenten een stuk eenvoudiger dan rond templates, omdat de componenten, net zoals je widgets, links in je scherm komen te staan. Je kunt ze dus direct door ze te slepen toevoegen aan je pagina.

Linksboven zie je de widgets in het nieuwe palet, rechts zie je de compleet nieuwe tab met de componenten. ‘Een Demo Component’ heb ik zelf toegevoegd.

Properties publiceren

In het vergelijk tussen Elementor componenten en Elementor templates is er nog een belangrijk verschil. Je kunt templates in Elementor Pro namelijk op twee manieren gebruiken. Ik kan een template direct in een pagina invoegen. Op het moment dat ik een template invoeg, houdt het template op een template te zijn, maar is het gewoon een aantal widgets in de pagina, die ik naar behoefte aan kan passen. Ik kan dus letterlijk alles veranderen.

Ik kan ook een ‘template’ widget op de pagina plaatsen, en in die widget aangeven, dat ik een bepaalde template als template in wil voegen. En in dat geval kan ik helemaal niets aanpassen. Tenminste, niet zonder het template zelf aan te passen, waardoor die aanpassingen direct in alle pagina’s waar die template gebruikt wordt ook wordt aangepast.

Het is dus een beetje een alles of niets situatie. Voeg ik het template direct in, en wil ik later bijvoorbeeld op het template de grootte van een knop wijzigen, dan moet ik dit doen in alle pagina’s waar ik de template direct heb ingevoegd.

Voeg ik het template via een template-widget in in de pagina en wil ik de grootte van een knop wijzigen hoef ik dit maar één keer te doen. Wil ik echter -bijvoorbeeld- dat de koptekst boven het template op iedere pagina anders is, is dat niet mogelijk.

Een component komt hieraan tegemoet, doordat je binnen een component properties kunt ‘publiceren’. Laten we hier in de praktijk eens nader naar kijken, door stap voor stap een CTA -call to action- component op te bouwen.

We maken een component

Binnen Elementor is de basis voor je component een div block of een flexbox. Die vind je binnen de ‘Atomic Elements’ sectie. Voor ons voorbeeld kiezen we een div block. Dit blok hebben we in de eerste kolom van een container met twee kolommen geplaatst. Vervolgens klikken we met de rechter muisknop op het icoon van het div block.

Eén van de keuzen is ‘Create component‘. En je raadt het al, dat we daar voor kiezen.

Eerst moet je een naam aan het component geven. Laten we het CTA Box noemen.

Op dat moment krijgt het ‘Div block’ wat nu een component geworden is de focus. Een groen kader wordt zichtbaar en alle handelingen worden nu uitgevoerd op het nieuw-gemaakte component.

Gefeliciteerd, je hebt nu je eerste Elementor 4.0 component gemaakt. Maar daar kan je nog niet veel mee. Je Elementor component is tot nu toe een lege doos. Dus laten we deze doos vullen. Voor een CTA hebben we minimaal 4 dingen nodig. Een titel, een tekst, een afbeelding en een knop.

Daarnaast staat er in de linker kolom een voorlopig nog cryptische tekst.

Edit the component to add properties, manage them or update the design across all instances.

Daar gaan we later op in, want eerst moet het component inhoud krijgen. Laten we daar dus voor zorgen.

Na het toevoegen van de verschillende elementen klikken we buiten het component om terug te keren naar de pagina waarin het component is opgenomen.

Zoals je ongetwijdeld opvalt, is de tekst binnen het component niet echt veelzeggend. En dat is hier met opzet gedaan, want dit component gaan we niet op deze manier gebruiken. Het is een CTA en je wilt natuurlijk dat je CTA op veel manieren inzetbaar is, iedere keer met andere tekst en andere afbeeldingen.

En dat is nu de kracht van properties. We gaan nu terug naar de ‘edit’ modus van het component. Dat doen we door op het component te klikken. Vervolgens klikken we op de tekst ‘Dit is een CTA’, de Heading tekst. Laten we nu eens kijken naar het property panel van dit Heading element onder de tab ‘general’.

Bij een aantal properties van deze koptekst zie je een ruit-icoon. Ga je met de muis hier overheen, dan zie je een tekst ‘Override property’. Dat wil zeggen, dat dit property overschreven kan worden, zonder dat de tekst overal waar het component gebruikt wordt veranderd.

Klik je hierop, dan krijg je een pop-up waar je de naam voor het property in kan vullen. Ook zie je een keuzelijst voor een ‘groep’, waar op dit moment alleen de keuze ‘Default’ zichtbaar is.

Je kan namelijk voor je componenten properties groeperen. Dat voor een component als de CTA hier niet nodig, maar bouw je wat grotere componenten met meer onderdelen, dan is het wel handig, dat je de properties logisch kan structureren.

Laten we eens naar de kop van het property palet van de CTA Box kijken.

Ik heb twee onderdelen rood gemarkeerd. Links zie je de naam van het component waarbinnen je werkt. Met de pijl naar links ga je terug naar de pagina waarbinnen het component zich bevindt. Rechts zie je een icoon om het property palet van het component op te roepen.

Daaronder -niet rood gemarkeerd- staat de naam van het element binnen het component wat je aan het bewerken bent.

Laten we eens klikken op de knop voor het property palet.

Wanneer je op 1 klikt, het mapje met de plus, dan voeg je groepen toe, waaronder je jouw properties later terug ziet komen. Het is zeer aan te bevelen, dat je voor je zelfs maar begint je nadenkt over de structuur, en de labels die je wilt geven voor de verschillende groepen.

Voor de titel hebben we nu een aantal properties gepubliceerd. Deze hebben we allemaal aan een groep ‘Titel’ gehangen. Wat je nu ziet in het property palet van de heading is een ruitje met een check-mark erin voor iedere gepubliceerde property. Bovendien zie je door middel van een getal in een cirkel, hoeveel properties je hebt om in te stellen.

Wat je ook op zal vallen, is dat niet alle properties ‘publiceerbaar’ zijn. Dat is niet omdat men het vergeten zou zijn, maar het is heel bewust gedaan. Alleen de zaken die ‘content’ betreffen zijn publiceerbaar, andere zaken niet. Hiermee maak je het makkelijk en overzichtelijk om de verschillende componenten in te stellen. Bovendien wordt het zo mogelijk gemaakt om dezelfde stijl te houden, omdat stijl gerelateerde properties niet publiceerbaar zijn.

Ik maak het nu even af voor de rest van de elementen binnen het component, zodat we ook het eindresultaat kunnen bekijken.

Kijken we nu in het ‘property palet’ van het component, dan zien we het volgende:

De properties zijn gegroepeerd. Wil je de volgorde binnen een groep veranderen, kan je ‘slepen’ met de properties binnen die groep. Wil je de groepen in volgorde veranderen, kun je met de groepen slepen. En wil je een property aan een andere groep hangen, kan dit ook eenvoudig, door op de property te klikken en de juiste groep in een keuzelijst te klikken.

Componenten in het gebruik

De volgende vraag is natuurlijk hoe we componenten daadwerkelijk kunnen gebruiken. Ik had al gewezen op de extra tab, waarmee we componenten kunnen uitkiezen en van daar uit is het net zoals met widgets en elementen: Je sleept ze naar de pagina. Laten we nu eens kijken naar het property palet van een component wat we zo net op de pagina geplaatst hebben.

Ik heb bewust de secties ‘Tekst’ en ‘Knop’ dichtgeklapt, omdat het anders wel een heel lange lijst zou worden, maar je ziet hier dus alle velden, waarmee je jouw properties in kan stellen voor je component.

Bovendien is het mogelijk om Elementor ‘Dynamic tags’ te gebruiken om de content bijvoorbeeld op te halen uit een winkel product of een ander post type.

Wanneer je met meerdere mensen content toevoegt aan een Elementor site bieden componenten ook een goede manier om een uniforme stijl van de site te bewaken: Alleen een Admin kan componenten maken en aanpassen, een Editor kan uitsluitend via de gepubliceerde properties de instellingen van een component aanpassen. Op deze manier garandeer je dat de look en feel van je site constant blijft.

Meer features die Elementor Pro Editor 4.0 geweldig maken

De 4.0 editor introduceert veel meer nieuwe features die het makkelijker maken om met Elementor te werken. Een aantal hiervan heb ik in het verleden al besproken:

• Een eerste blik op Elementor 4.
• Handleiding ‘Classes’ met Elementor 4
• Gebruik van variabelen in Elementor 4

En nu tijd om jouw site geweldig te maken!

Ben jij een webdesigner en wil je met Elementor Pro Editor 4 aan de slag, dan heb ik voor jou een geweldige cursus. In een drietal cursusdagen leer je Elementor Pro met alle ins- en outs kennen. En natuurlijk gaan we aan de slag met de nieuwe Elementor V4 editor, waarmee alles wat hierboven genoemd is mogelijk is. Tijdens de cursus gaan we uit van een use case, waarbij je een complete website voor een restaurant gaat bouwen. Tussen de lessen is er iedere keer een tijd van ongeveer vier weken. Het is de bedoeling dat je in de tussenliggende weken aan de slag gaat met het geleerde in praktijk te brengen. Reken er op, dat je -afhankelijk van je eigen snelheid en vaardigheden ca. 6-12 uur per maand nodig hebt voor het ‘huiswerk’ tussen de lessen.