Een complete handleiding Classes met Elementor Editor 4

Eindelijk, je kan met de nieuwe V4 editor aan de slag in Elementor 3.29 beta!

Zoals onlangs aangegeven, Elementor 3.29 beta is uit. En wanneer ik zo kijk in de nieuwe zaken in Elementor 3.29, valt het eigenlijk best wel tegen, met dan echter één gigantische uitzondering. Elementor 3.29 biedt een ‘Alpha preview’ van de V4 editor, samen met een aantal V4 widgets.

Zoals met elke alpha of beta versie van software, is het niet de bedoeling, dat je dit in een productieomgeving installeert. Je kan dit bijvoorbeeld in een staging omgeving of een lokale omgeving doen.

Om de beta van Elementor 3.29 te installeren, zal je eerst een recente versie van Elementor en eventueel Elementor Pro moeten installeren. Vervolgens kan je onder ‘Elementor->Tools->Version Control’ aangeven, dat je beta tester wilt worden met die site. Heb je dat gedaan, en op ‘Save Changes’ geklikt, dan laadt de pagina opnieuw met de optie om de Elementor plugin voor developers te downloaden.

Wanneer je dat gedaan hebt, staat de weg open om via ‘Elementor->Developer Edition’ de laatste development versies voor Elementor (en als je Elementor Pro ook geactiveerd hebt, Elementor Pro) te activeren.

Na de installatie

Wanneer je Elementor 3.29 beta geïnstalleerd hebt, kan je de V4 editor activeren vanuit de instellingen pagina van Elementor.

Via Elementor->Settings->Editor V4 (de laatste tab) krijg je onderstaande pagina te zien:

En je begrijpt het natuurlijk al, door op ‘Activate the New Experience’ te klikken, wordt de nieuwe V4 Editor geactiveerd. Maar niet voordat je voor de derde keer de waarschuwing krijgt, dat je dit toch beslist niet in een live omgeving moet installeren.

Heb ik je trouwens al verteld, dat je de V4 Editor nog niet live moet gebruiken?

De tekst van de knop wordt nu ‘Try Out the New Experience’.

Een rondleiding door de editor

Wanneer je naar het introductie webinar voor Editor V4 hebt gekeken, zal het je zijn opgevallen dat er een aantal kleine verschillen is met de editor zoals deze tijdens dit webinar werd getoond. De ‘V4 Elements’ heten nu ‘Atomic Elements’. En dit ‘Atomic Elements’ hebben allemaal een icoontje met -als je goed kijkt- een atoom met twee electronen.

Verder lijkt er niet zoveel aan de editor veranderd te zijn. Hij ziet er vrijwel hetzelfde uit als de ‘oude’ V3 editor. Het werkelijke verschil tussen beide editors wordt echter zichtbaar tijdens het werken ermee.

Elementor goes nucleair

Eindelijk gaat Elementor werkelijk zijn naam eer aan doen. Die ‘Atomic Elements’ zijn te vergelijken met de Elementen binnen het periodiek systeem (weet je nog, die grote poster voor in het scheikunde lokaal?), ieder ‘Element’ is een bouwsteen voor al het denkbare.

Met de zeven ‘Atomic Elements’ van Elementor is het natuurlijk (nog) een heel beperkt aantal bouwstenen, maar bij de makers van Elementor staan er meer in de planning.

Om een beter begrip te krijgen van een ‘Atomic Element’ werpen we eens een blik op de ‘standaard CTA (Call To Action) van Elementor.

Met enkele muiskliks heb je een Call-to-Action gemaakt. En dat is leuk. Maar eerlijk gezegd, naar mate er meer Elementor websites komen, die allemaal diezelfde call-to-action hebben, begint het er allemaal wel heel standaard uit te zien. Natuurlijk, door enkele instellingen aan te passen, kunnen we er nog wat mee variëren.

Maar de mogelijkheden zijn en blijven beperkt.

Een alternatief is natuurlijk Elementor Add-ons te installeren. En er zijn tientallen, zo niet honderden add-on bibliotheken voor Elementor. Het nadeel hiervan is echter, dat het aanvankelijke voordeel van Elementor -je hebt minder plugins nodig- teniet gedaan wordt door de vele plugins die je nodig hebt voor je add-ons.

Een derde mogelijkheid is voor een plugin te kiezen als Unlimited Elements. Behalve een groot aantal widgets, heeft deze plugin ook een ‘macro taaltje’ waarmee je relatief snel zelf Elementor widgets kan bouwen. En dat is heel leuk voor mensen als ikzelf, die kunnen programmeren, maar je raakt wel het grootste voordeel van Elementor -codevrij websites ontwerpen- kwijt.

Met het idee van atomic elements kan je echter zelf je meer uitgebreide widgets opbouwen.

Nogmaals een Call-to-Action

Nu is een call-to-action natuurlijk best eenvoudig, het is een tekst, toelichting, afbeelding en knop. De content is behoorlijk standaard, de vormgeving kan van site tot site behoorlijk verschillen. Laten we nu eens ‘atomic’ kijken naar wat we nodig hebben voor een CTA.

Om te beginnen hebben we een container nodig. Een ‘doos’ waarin we de elementen willen plaatsen. Op dit moment biedt de alfa versie van de Editor V4 twee mogelijke containers, een Flexbox en een Div Block. En om eerlijk te zijn, tot op heden is mij nog niet duidelijk wanneer je beter een Flexbox of een Div Block kunt gebruiken in Elementor, want als ik kijk naar de mogelijkheden zijn ze vrijwel hetzelfde. Het zijn allebij containers die ik kan gebruiken om andere elementen te plaatsen. Wanneer de documentatie duidelijker wordt -en ik heb een aantal vragen geplaatst- over wat precies de verschillen zijn, laat ik het je zeker weten.

In onderstaande afbeelding heb ik een flexbox en een divblock naast elkaar geplaatst.

Er is geen duidelijk aanwijsbaar verschil.

Laten we beginnen de boxen een achtergrond te geven. Hiervoor klik ik op de linker container, de Flexbox. En binnen de instellingen voor de Flexbox klik ik op ‘Style’.

En hier zie ik het eerste grote verschil tussen de V3 en de V4 editor. Laten we ons concentreren op de linker kolom met de verschillende instellingen van de elementen.

Laten we ons even concentreren op het icoontje binnen de rode cirkel. Dit is de ‘Class Manager’. En de class manager is een geweldige nieuwe tool, waarmee je ‘classes’ kan definiëren voor de vormgeving van je website.

Wat zien we, wanneer we daarop klikken? Helemaal niets! Want we moeten eerst classes definieren. Ik begin dus met het definiëren van een nieuwe (global) class ‘cta-background’. Ik tik de naam in, om deze aan te maken.

Vervolgens stel ik de achtergrondkleur op ‘Rood’ in. Ik weet het, het is in het ontwerp niet mooi, maar wel heel duidelijk.

Om dat te doen, moet ik er eerst voor zorgen, dat de class ‘cta-background’ is geselecteerd. Die is dan groen. En vervolgens kan ik onder ‘Background’ de kleur instellen. En voila, zoals verwacht is de achtergrondkleur nu rood geworden.

Maar laat ik nog iets meer doen. Ik wil ronde hoeken en een dunne zwarte lijn om de box heen. Ik zorg dat ‘cta-background’ aangeklikt blijft, klik op ‘border’ en stel de border-radius in op 25 pixels. Onder ‘Border radius zie ik nu ook een tekst ‘Border’ met een + er achter. Klik ik daarop, zie ik nog meer instellingen. Ik kan hier een rand instellen, en dat doe ik op 5 pixels, niet omdat het mooi is, maar omdat het heel duidelijk is voor ons voorbeeld.

Maar zullen we nu iets geks doen? Ik wil de tweede container eigenlijk precies hetzelfde hebben, maar met een groene achtergrond. Ik klik dus op de container rechts en geef hier ook de class cta-background aan. Zodra ik in het vak klik, krijg ik alle bestaande classes te zien. Dat is tot nu toe alleen ‘cta-background’. Ik krijg dus nu het volgende resultaat

Eigenschappen ‘overrulen’ (override)

Nu willen we misschien beide CTA’s de meeste eigenschappen laten delen, maar ook enkele eigenschappen anders instellen. Dat is ook mogelijk. In ons voorbeeld willen we de achtergrond van de tweede CTA liever groen hebben.

Wanneer we nu in de class cta-background de achtergrond groen maken, krijgen we niet wat we willen, nu worden beide containers groen.

De manier om dit wel te doen, is door op de class ‘local’ te klikken, en dan je instellingen aan te passen.

Er is een bepaalde hiërarchie in de instellingen. De classes die je toevoegt zijn zogenaamde ‘global classes’, en de class aangemerkt met een roze achtergrond en de naam ‘local’ is een local class. De instellingen in de verschillende classes zijn van links naar rechts het meest belangrijk, of -zoals het eigenlijk werkt- de meest ‘rechtse’ class is de standaard instelling en bij iedere class die je naar links gaat, wordt een gelijksoortige instelling overschreven. In onze local class hebben we aangegeven, dat we een groene achtergrond willen, verder alle andere eigenschappen. Dat is dus ook, wat je hier ziet gebeuren.

Overerving (inheritance)

We gaan nu verder met de invulling van onze container. Want een lege container is natuurlijk nog steeds geen CTA. En het eerste wat we doen, is puur gericht om je een tweede principe van het ‘class’ systeem van Editor V4 te demonstreren. In eerste instantie lijkt het nogal nutteloos, maar het zal je snel duidelijk worden.

Ik heb hier voor een container zonder tekst ingesteld, wat de typografie moet worden. Dit heb ik gedaan, terwijl ik de cta-background class geselecteerd heb, het wordt dus een globale instelling. Omdat er geen tekst voorkomt in de container is dit niet zichtbaar.

Maar wat gebeurt er, wanneer we er een heading en een paragraph inslepen?

Beide elementen krijgen automatisch de typografie die we in hebben gesteld. Daardoor hoeven we het niet tweemaal in te stellen. Maar dat is niet het allerbelangrijkst. Het allerbelangrijkst is, dat we hierdoor ook de instelling in één keer kunnnen wijzigen. Laten we eerst de CTA afmaken met een knop en een afbeelding.

Ik weet het. Dit is oprecht lelijk. Spuuglelijk. Niet om aan te zien! Maar het was dan ook niet de bedoeling om je iets moois te tonen, maar om te laten zien hoe Editor V4 gaat werken.

Laat ik eerst de knop leesbaar maken. Ik voeg een class cta-button toe, waarin ik de kleuren en de vorm instel. daartoe klik ik op de knop, en links verandert het tool-palette in ‘Edit Button’. Ik begin de classname in te tikken en bevestig dat ik deze wil creëren. Ik pas de voor- en achtergrond kleuren aan. Voorgrondkleur onder typografie en achtergrondkleur onder ‘background’. Niet zichtbaar op de afbeelding hieronder, maar de ‘border-radius’, ofwel de ronding van de knoppen is ingesteld op 15 pixels. Dit zijn dus allemaal eigenschappen van de cta-button class.

We hadden natuurlijk de knopinstellingen ook in de ‘local’ instellingen kunnen instellen, maar door er een aparte class van gemaakt te hebben, kunnen we deze instellingen direct toekennen aan andere knoppen.

Stel je nu voor, dat je dit ontwerp zo aan je opdrachtgever laat zien, en deze vertelt je, dat hij toch liever een ander font wil hebben voor de CTA. Wanneer ik dit niet ingesteld zou hebben op het niveau van de CTA container, maar op het niveau van de afzonderlijke elementen, dan zou ik op drie plaatsen aanpassingen met betrekking tot het font moeten maken. Pas ik dit aan op het container niveau hoeft het maar éénmaal.

Maar veel belangrijker nog, stel je voor, dat ik deze CTA op een marketing intensive website zou gebruiken en het dan aan zou moeten passen. Dan zou ik dit op veel meer plaatsen moeten doen.

Om de verandering in het font wel heel duidelijk te maken, heb ik een ‘script’ font gebruikt.

Om de CTA helemaal af te maken, ga ik ook de afbeelding nog van ronde hoeken en een schaduwrand voorzien. Aangezien ik deze class in zijn algemeenheid wil gebruiken voor deze site, niet alleen voor de CTA’s noem ik de class glb-image, glb, van ‘global’.

Pseudo classes

Misschien is het je opgevallen, dat in de style interface met de verschillende classes de opties voor ‘hover’ en ‘active’, die je bij een aantal instellingen met Elementor widgets aantreft, niet meer voorkomen bij de atomic elements. En dat is met opzet. Want op ieder property kan sinds de Editor V4 worden bepaald wat er onder hover, of active moet gebeuren.

CSS kent zogenaamde ‘Pseudo classes’. Door een dubbele punt (:) toe te voegen aan een class en daarachter een bepaalde sleutelwaarde, kun je aangeven hoe de vormgeving onder bepaalde omstandigheden moet gebeuren. De makers van Elementor hebben beloofd, dat er meer sleutelwaarden zullen volgen, maar op dit moment worden de sleutelwaarden ‘Normal’, ‘Hover’, ‘Focus’ en ‘Active’ ondersteund.

Hoewel het een absoluut slecht voorbeeld van vormgeving is, stel je voor, dat we bij een hover van een titel, de typografie zouden willen veranderen.

Bij alle classes in het ‘classes’ property zie je drie verticale punten achter een class staan. Eén van de onderdelen in het menu is om te kiezen voor een bepaalde ‘state’.

Om een pseudo class te definiëren moet je eerst een class hebben. Dus ik klik de titel aan, en voeg hier een class ‘cta-title’ aan toe. Met die titel zelf wil ik niets doen, maar ik klik op cta-title, vervolgens op de drie puntjes er achter en daarna op ‘hover’.

Onder hover heb ik een ander font voor de titel ingesteld. En bij het ‘hoveren’ over de titel, krijg ik het nieuwe font te zien.

Op deze manier is het letterlijk mogelijk aan ieder element een eigen stijl toe te kennen bij ‘hover’, ‘active’, ‘focus’ of de standaard situatie.

Maar… hoe zit het met responsive?

Ik heb je nu al behoorlijk wat laten zien van de nieuwe Elementor V4 Editor. En wanneer je regelmatig met Elementor werkt, zal je je wellicht afvragen waar die icoontjes voor de verschillende device typen zijn gebleven. Ook hier maakt Elementor het je makkelijker in. Op twee manieren.

De device types bij invoervelden zijn 100% verdwenen, omdat ieder invoerveld responsive is. Het grote verschil is, dat je iedere site ontwerpt vanuit een device point-of-view.

Wanneer je vertrouwd bent met de editor topbar van V3, dan kies je voor een specifieke device layout het device in de topbar. Laten we eens zien hoe ons ontwerp er op een mobiel uitziet.

En nu wordt het interessant. Want in de oude Elementor editor was het niet mogelijk iets te doen als een achtergrondkleur in te stellen voor een specifiek device. Maar wat nu, wanneer we deze rode achtergrond wit zouden willen hebben?

Klik ik nu een ander device in de bovenbalk, krijg ik nog steeds de rode achtergrond te zien.

Het opslaan van je ontwerpen

Tot en met Elementor V3 moesten we het doen met het exporteren van een specifieke container of pagina, om een ontwerp binnen dezelfde of op andere sites te kunnen gebruiken. Elementor 3 kende drie mogelijkheden om een container of pagina als template te kunnen gebruiken.

Allereerst kon je een contrainer of pagina opslaan als template en op een andere plaats in je site importeren. Daarna kon je de nodige wijzigingen aanbrengen aan je template.

De tweede optie was dezelfde template via de ‘template’ widget te plaatsen binnen een pagina. Het voordeel was hier, dat wanneer je jouw template aan zou passen, de aanpassingen op vele plaatsen gelijk doorgevoerd zouden worden.

De derde optie was om een template te exporteren, en importeren op een andere site.

Met Editor V4 komt hier een mogelijkheid bij, wanneer je Elementor Pro gebruikt. Het is mogelijk om jouw containers direct naar de cloud te exporteren. Hiermee bouw je een bibliotheek op van ‘herbruikbare componenten’. Wat het allemaal nog leuker maakt, is dat deze geëxporteerde componenten zich aanpassen aan de gedefinieerde classes binnen de specifieke site.

Wanneer je bijvoorbeeld jouw CTA zoals hierboven gedefinieerd in de V4 Editor zou importeren in een nieuwe site, waar je de classes cta-background, cta-button en andere classes al gedefinieerd zou hebben, zou de CTA container direct binnen de nieuwe stijl passen.

Voor jou als WordPress professional is het dus een goede manier om reeds ontwikkelde elementen in eerdere projecten probleemloos te hergebruiken.

Hoe te exporteren?

Zoals je mocht verwachten, is het exporteren vrij eenvoudig. In de V4 Editor hoef je bij een Atomic container slechts met de rechter muisknop te klikken op ‘Save as template’.

Klik je hierop, dan krijg je de mogelijkheid om jouw container voor de site aan te bieden voor hergebruik, of jouw container op te slaan in de Elementor cloud, zodat je deze met een druk op de knop in andere sites kan importeren. En wanneer je consistent in je naamgeving bent van de classes, kost het je weinig moeite de elementen in de huisstijl van de nieuwe klant aan te bieden.

Hier scheiden onze wegen…

Hoe jammer ik het ook vind voor de meer dan 300 mensen die Elementor basis cursussen bij mij hebben gevolgd, Elementor heeft een pad gekozen, waarbij ze een duidelijk onderscheid maken tussen twee soorten gebruikers. De mensen die visueel hun eigen site willen bouwen, en de professionele webdesigners. Voor wat de eerste groep betreft, de ‘eigen site gebruikers’, Het gebruik van Elementor wordt alleen maar eenvoudiger door de toevoeging van nieuwe widgets die in principe complete delen van je website opbouwen. Omdat Elementor heeft aangekondigd, dat binnenkort nieuwe widgets via Hello Biz beschikbaar zullen komen, hoef je niet bang te zijn ‘achter te worden gelaten’.

Maar Elementor met de ‘Pro’ versies heeft duidelijk gekozen voor een publiek van professionele designers. Het bouwen van je eerste site met Elementor kan je vanaf versie 4 meer tijd kosten, maar iedere volgende site wordt vele malen eenvoudiger, omdat je elementen uit vorige sites met een paar muiskliks opnieuw kunt gebruiken.

Bouw zelf je website in één dag

Voor degenen die toch voor eigen gebruik een website met Elementor willen bouwen, heb ik een cursus van één dag –bouw zelf je website in één dag. Tijdens deze training leer je hoe je zelf voordelig je eigen website kan bouwen… en dat doe je ook ter plekke! We maken hierbij gebruik van Elementor (de gratis versie) en het HelloBiz thema en stap voor stap leer je hoe jij snel en eenvoudig je eigen website bouwt. Vooral handig voor startende ondernemers, die niet direct honderden euro’s voor een nieuwe website uit willen geven. De cursus is inclusief hosting voor het eerste jaar.

Elementor Pro voor Designers

Ik heb nu al een aantal driedaagse cursussen met betrekking tot Elementor Pro voor designers gegeven -zoals de naam suggereert- bedoeld voor (Web)designers. De eerstvolgende cursus is inmiddels 100% aangepast voor Elementor 4.0, aangezien deze versie ergens in de zomervakantie live zal gaan volgens de planning. In September 2025 wordt van Elementor Pro voor Designers gegeven waarbij Elementor Editor V4 en alle zaken hieromheen uitgebreid besproken zullen worden.

Bij de ‘oude’ cursus zat een ‘resource kit’ met 400 V3 container templates. Inmiddels heb ik meer dan 100 templates omgezet naar containers opgebouwd uit ‘Atomic Elements’. En ik ga door. Hoewel ik geen garanties wil geven over het aantal V4 resources wat beschikbaar zal zijn tijdens de cursus, kan je zelfs met 100 resources en 400 Elementor V3 resources aardig uit de voeten.

Daarnaast krijg je een ‘Design kit’ die het makkelijker maakt te communiceren met je klanten. Deze design kit bestaat uit een map met 100 dubbelzijdige gelamineerde pagina’s met designvoorbeelden en een Word Document wat je van je eigen branding kunt voorzien, met dezelfde inhoud. Op deze manier kun je online en offline duidelijke communiceren met betrekking tot de verwachtingen die jouw klant stelt aan je website.

Deze resources besparen je al meer in tijd, dan wat de cursus je zal kosten.

Een woord van dank

Sinds ik de ScreenGlow plugin heb geïnstalleerd is het een stuk gemakkelijker geworden om ‘instructie afbeeldingen’ te maken. Afbeeldingen met pijlen, markeringen en andere zaken, die het duidelijk maken, wat er in een afbeelding gebeurt. Dit blogartikel heeft mij -samen met het onderzoek- meer dan 8 uur gekost. Dat had makkelijk 10-12 uur kunnen zijn, wanneer ik niet de ScreenGlow plugin tot mijn beschikking had gehad, waardoor ik eenvoudig afbeeldingen vanuit WordPress kon annoteren, zonder ze eerst te downloaden, laden in Photoshop, annoteren, converteren voor het Internet en weer uploaden.

Ik was eerder al positief over deze ScreenGlow plugin, maar ik wil hem nogmaals van harte aanbevelen.

(En nee, niemand betaalt mij voor deze referenties)