Elementor 4: Van Widgets naar Componenten

Elementor 4: Een strategische keuze!

Met de komst van Elementor versie 4 verandert er iets fundamenteels in de manier waarop je je websites bouwt. Jarenlang heeft Elementor gedraaid op een widget-gebaseerde aanpak, maar met versie 4 introduceert Elementor het ‘Atomic Design System, met componenten, states en variabelen.

En dat is meer dan een aantal buzz-words. Ook meer dan een technische innovatie. De échte impact zit in hoe je als bouwer moet gaan denken.

In dit artikel wil ik niet alleen kijken naar wat er verandert, maar vooral naar wanneer je welke aanpak kiest. Want niet iedere gebruiker heeft dezelfde behoefte.

De kern van Elementor 4 – Denken in componenten

Het ‘denken in componenten’ is geen uitvinding van de makers van Elementor. Sterker nog, het allereerste component based design system dat populair werd viert dit jaar zijn vijftiende verjaardag. ‘Bootstrap‘ werd in 2011 voor het eerst aan de wereld getoond en is op dit moment toe aan versie 5.

Hoewel Bootstrap als systeem helemaal ‘code based’ is, dus geen mooie drag en drop editor als Elementor heeft, heeft Bootstrap het ontwerpen van visueel aantrekkelijke websites enorm versneld. Ook veel WordPress thema’s hebben ‘Bootstrap’ als onderliggend ontwerpsysteem.

Wanneer jij als webdesigner met Bootstrap werkt of hebt gewerkt, zal de nieuwe ‘denkwijze’ van Elementor 4 je waarschijnlijk absoluut niet verrassen.

Oud en nieuw… maar dan zonder vuurwerk

In het ‘oude’ Elementor Universum bouwde je pagina’s met widgets.

• Een knop – De button widget
• Een CTA – Een widget bestaande uit een afbeelding, koptekst, tekst en knop… de knop had geen relatie met de ‘button widget’
• Een hero – Een combinatie van meerdere widgets in een container.

En dat werkte prima, tot je 10 websites of meer moest onderhouden…

In Elementor 4 verschuift de focus naar:

• Atomic Elements – De kleinste bouwstenen van je website
• Componenten – Herbruikbare combinaties van Atomic Elements
• Varianten – De verschillende ‘states’ van één component.

Je gebruikt niet meer ‘een knop’, maar je ontwerpt een ‘knop component’ in verschillende varianten, bijvoorbeeld:

• Primary
• Secondary
• Disabled
• Hover States

en die gebruik je overal.

De best of two worlds – en dat is bewust!

Gelukkig heeft Elementor ervoor gekozen om de ‘oude’ legacy widgets gewoon te handhaven, waardoor je nu twee werkwijzen hebt. Om het taalgebruik duidelijk te houden, zal ik regelmatig naar ‘Elementor Widget stijl’ refereren als ‘Legacy Elementor’. Hiermee wordt dus niet alleen Elementor voor versie 4 bedoeld, maar ook de ‘oude’ ontwerpwijze met widgets die nog steeds mogelijk is in het nieuwe Elementor.

1. De klassieke ‘Widget aanpak’ (legacy)

Wanneer je Elementor aanschaft voor het zelf-bouwen van je ZZP of club website dan heb je al dat ‘gedoe’ met atomaire elementen, componenten en meer helemaal niet nodig. Je wilt gewoon lekker aan de slag om je website te bouwen. En een goed uitgangspunt hierbij kan het ‘Hello Biz‘ thema van Elementor zijn.

Het is zoiets als de bekende Deense kunststof bouwblokjes: Snel resultaat, lage leercurve en veel kant-en-klare blokken. Nadeel is echter, dat er slechts een beperkt aantal variaties mogelijk is. Je bent afhankelijk van de aangeleverde blokken.

2. Atomic design met componenten (Elementor 4)

Ben je een webdesign bureau of freelancer en bouw- en onderhoud je meerdere websites, dan is design consistency van allergrootst belang. En deze consistentie was met Elementor -en overigens ook de overige page builders op de markt- toch een grote uitdaging.

Om het even bij Elementor te houden: Het is in Legacy Elementor mogelijk een ‘globale stijl’ te definiëren, maar deze stijl beperkt zich tot definities van kleuren en typografie. Er zijn geen mogelijkheden om bijvoorbeeld de dikte van randen, vaste onderlinge afstanden tussen elementen, de ronding van hoeken en andere belangrijke factoren die toch de ‘look-and-feel’ van de site bepalen, te definiëren.

O ja, je kan natuurlijk een opgemaakte knop als ‘default knop’ instellen, en dan heb je iedere keer exact de gewenste knop, maar heb je het wel eens meegemaakt, dat een klant eerst ‘geen rondingen’ in de knoppen wil, en na overleg met een (zaken of privé) partner ineens besluit toch maar wel een ronding te willen. Dan moet je toch nog al die knoppen op al die pagina’s langs.

Legacy Elementor bespaart je behoorlijk wat tijd, maar Elementor 4 gaat met het component based design daar nog veel verder in.

De voordelen die Elementor 4 je biedt ten opzichte van Legacy Elementor zijn onder meer:

• Herbruikbaarheid
• Consistente styling
• Grotere flexabiliteit
• Sneller aanpassen op schaal
• Minder ‘technische schuld’

Tegenover al deze voordelen, staat slechts een tweetal nadelen. Je moet op een andere manier leren denken, en het kost je als initiële investering behoorlijk wat meer tijd, om eerst een basis component-repository op te bouwen.

Kies bewust je strategie

Ik schrijf dit artikel gericht op de professionele (web)designer. Wanneer je alleen je eigen site wilt bouwen of onderhouden met behulp van Elementor, gebruik dan alsjeblieft die ‘Atomic Editor’ niet. Het maakt alles een stuk complexer, en je hebt er geen enkele winst van. Alleen een hoop frustraties.

Heb je je site door een derde partij laten bouwen, maar ben jij zelf ook actief met Elementor, en heeft die derde partij ervoor gekozen om wel met die Atomic Editor te gaan werken, dan kan je mogelijk iets hebben aan de training van WordXPression ‘Van Widgets naar Componenten‘, waarin wordt uitgelegd hoe het ‘nieuwe Elementor’ werkt, en -niet onbelangrijk- hoe jij er ook mee kan werken.

Ga je echter helemaal zelf aan de slag met het werken met Elementor 4, dan is het goed, wanneer je verder leest om je strategie te bepalen met betrekking tot het werken met Elementor.

Atomic First

Wanneer je meerdere websites beheert, is er eigenlijk maar één verstandig uitgangspunt: ‘Atomic First’.

En nee, dit is geen pleidooi om kerncentrales te (her)openen. Wat dat betreft, zie ik meer heil in zon, wind en water.

Bouw alles wat je kunt als component en gebruik widgets alleen als tijdelijke oplossing wanneer iets nog niet beschikbaar is als component. Anders blijf je vastzitten in de situatie van constant verschillende stijlen binnen één site, en veel werk door het herhaaldelijk doen van dezelfde aanpassingen in dezelfde widgets.

Met een goed-opgebouwde component repository wordt één wijziging altijd direct doorgevoerd op meerdere pagina’s.

Maar wat is een ‘component repository’ nu eigenlijk?

Een ‘repository’ is simpelweg een centrale opslagplek, waar je dingen bewaart en terugvindt. In de context van Elementor is die ‘component repository’ de plek waar je herbruikbare onderdelen opslaat, zodat je ze steeds opnieuw kan gebruiken.

Maar dat is nu allemaal leuk gezegd, maar waar begin je in vredesnaam met zoiets? Gelukkig voor jou heb ik daar zelf al bijna een jaar -zo lang heeft het van de eerste beta van de Atomaire Editor tot het daadwerkelijk uitkomen van Elementor 4 geduurd- over nagedacht, en nog fijner voor jou: Die informatie deel ik graag met je.

Hoe begin je jouw eigen Elementor component repository?

Misschien krijg je door mijn geschrijf over ‘veel voorwerk’ het idee, dat je dagen achter elkaar aan het ontwerpen zal zijn, voor je uiteindelijk iets kan bouwen. Dat valt best mee. Het belangrijkste deel van het hele proces vindt in je hoofd plaats. Je gaat voor jezelf op een rijtje zetten wat nu eigenlijk jouw stijl van webdesign typeert.

Stap 1 : Definieer je eigen design fundamentals

Welke onderdelen van webdesign zijn nu typerend voor jouw ontwerpen? Omdat dit voor iedereen anders is, zal je dit voor jezelf moeten definiëren. Denk hier bijvoorbeeld aan:

Kleurgebruik:
Het gaat hierbij niet om de specifieke kleuren, maar de functie van een kleur. Denk hierbij bijvoorbeeld aan ‘hoofdkleur’ en ‘steunkleur’, de kleuren die je gebruikt voor de body tekst, kleuren die je gebruikt voor notificaties. Als je daar geen idee van hebt, is het goed om eerst eens te kijken naar de indeling die het eerder genoemde ‘Bootstrap’ hanteert:

• primair
• secundair
• succes
• waarschuwing
• gevaar
• licht
• donker

Bij deze kleuren kan je je misschien ook een aantal varianten voorstellen. Stel, dat je voor jouw sites notificaties gebruikt. Dan zal je mogelijk een ‘succes’ notificatie, een ‘waarschuwing’ notificatie en een ‘gevaar’ notificatie hebben. Zo’n notificatie heeft een voorgrond (meestal tekst) en een achtergrond. En een achtergrond kan effen of een kleurverloop zijn. En een kleurverloop heeft een begin-kleur en een eind-kleur. Benoem dit allemaal voor jezelf.

En nogmaals, je hoeft hier geen waarden aan te geven. Het gaat er alleen om, hoe jij kleuren gebruikt.

Typografie:
Eigenlijk eenzelfde oefening als met kleuren. Wanneer je slechts twee font-families per website gebruikt, één voor de koppen, één voor de body tekst, maar wel in verschillende grootten, dan hoef je geen aparte font-families te definiëren voor bijvoorbeeld accent tekst.
Waar je wel rekening mee moet houden, is dat typografie verschillende functies kan hebben: Tekst op een knop is doorgaans iets kleiner dan de tekst van een blogpost en tekst van meta-data doorgaans iets minder opvallend, dan body tekst. Voor de verschillende functies zal je verschillende wel verschillende groottes en gewichten gebruiken.

En nu we het over tekstgrootte hebben, die kan van device tot device verschillen. Denk dus niet aan getallen, maar aan functies. Ook hier biedt Bootstrap weer een goed voorbeeld, door hier een ‘schaal’ voor te gebruiken:

XS: Extra kleine tekst.
SM: kleine tekst.
MD: ‘medium’ tekst
LG: ‘grote’ tekst
XL: extra grote tekst.

Spacing system:
De horizontale en verticale ruimten. Ook hier opnieuw geen absolute getallen, maar ‘aanduidingen’. Hierbij wordt ook opnieuw de schaal gebruikt die onder typografie ook genoemd is.

Border radius en schaduwen

Stap 2: Begin met de kleinste bouwstenen

Maak herbruikbare componenten voor onder meer

• Buttons
• Headings
• Paragraphs
• Images
• Notifications

Wat ik hier precies mee bedoel, hoop ik in twee voorbeelden uit te leggen. En voor ik deze voorbeelden uitleg, wil ik graag eerst even een manier voorstellen, die je kan gebruiken, wanneer je gebruik maakt van de variabelen in Elementor. Gebruik voor de naamgeving een zogenaamde ‘camel-case’ gebruik van hoofd en kleine letters.

Laten we eens kijken naar een tekst in een rechthoek kijken. Bijvoorbeeld een licht-groene tekst op een donker-groene achtergrond. Wanneer je hier een component van wil maken, die je ook los kan denken van een specifieke kleurinvulling, gebruik dan geen naam als ‘lichtGroen’ voor de variabele, maar denk meer aan de functie. ‘Groen’ is de kleur die met succes geassocieerd wordt, en de lichtgroene tekst, is niet alleen lichtgroen, maar staat ook op de voorgrond. En de achtergrond is niet alleen donkergroen, maar staat ook op de achtergrond. Wanneer ik ditzelfde component op een site zou plaatsen waar rood gebruikt moet worden als kleuren, dan kan ik met namen gebaseerd op kleuren niet uit de voeten.

Het zou dus beter passen, om namen te bedenken die aangeven wat de functie is van de variabele. Ik zou in dit voorbeeld dus graag ‘successText’, of ‘successForeground’ en ‘successBackground’ willen gebruiken. Wil ik later geel op paars, of omgekeerd, is het op deze manier nog steeds mogelijk.

Voorbeeld – De Knop

Wanneer je verschillende knop-stijlen in je ontwerpen gebruikt, dan kan je heel wat tijd besparen door te beginnen met 3 verschillende ‘knop components’. In een gemiddelde website komen drie soorten knoppen voor:

‘Algemene’ knoppen, ‘Ja / Doorgaan’ en ‘Nee, Afbreken’ knoppen.

Idealiter hebben alle knoppen dezelfde kenmerken met uitzondering van de kleuren. In de algemene kleurenpsychologie is groen ‘doorgaan’ en rood ‘stoppen’. Er is geen enkele design technische reden waarom doorgaan geen ‘rood’ zou kunnen zijn en stoppen ‘groen’, anders dan een enorm omzetverlies, wanneer je geld verdient met je website.

Groen en Rood zijn de extremen aan het ‘Good/Bad’ spectrum. Het zijn ook sterk contrasterende kleuren en bovendien ook nog eens een verwarrende situatie voor mensen met een specifieke vorm van kleurenblindheid.

Maar niet op iedere site zijn zulke contrasten passend. Wanneer een site in pastelkleuren is opgebouwd, dan zijn een ‘groene’ en ‘rode’ knoppen een duidelijke verstoring van het beeld.

Een andere oplossing zou kunnen zijn om de knoppen in ‘positive’ en ‘negative’ te laten zien.

Je kan hierbij een naamgeving gebruiken, zoals ook in Bootstrap wordt gedaan, of -functionele namen- als btnOK, en btnCancel gebruiken.

Denk er ook aan, dat een button ook een ‘staat’ heeft. Hover je over de knop, dan verandert de kleur. Een mogelijk naamgevingspatroon in zo’n situatie zou ‘btnOkhover’ kunnen zijn. Is de knop gefocust krijgt hij mogelijk ook een andere kleur (inderdaad, btnOkFocus is een goed idee) en klik je erop -je activeert hem- is btnOkActive een prima naam.

Enkele andere voorbeelden:

Ik zal ze verder niet in zoveel detail uitwerken, als de knop, maar vanuit een heading kan je prima notificaties maken, geef de heading een rand, achtergrond en tekstkleur, eventueel afgeronde hoeken en je hebt een prima ‘notification’ tekst, die je direct op het scherm kan zetten, wanneer er een foutmelding of waarschuwing nodig is.

En met betrekking tot afbeeldingen: Maak een component met scherpe hoeken, één met afgeronde hoeken, een geheel ronde afbeelding en van ieder component ook nog eens één met een schaduweffect.

Kortom, je kan op deze manier al een bibliotheek van enkelvoudige atomaire componenten opbouwen, die je naar behoefte op kunt nemen in een pagina.

Stap 3. Bouw ‘molecules’

Nadat je jouw atomaire elementen hebt gebouwd, kun je een aantal componenten die uit meer enkelvoudige componenten zijn opgebouwd samenstellen.

Hierbij kan je bijvoorbeeld denken aan een ‘Testimonial box’, die is opgebouwd uit bijvoorbeeld een titel, foto, functie, een testimonial en mogelijk een score (op bijvoorbeeld een schaal 1-5).

Of een call-to-action, opnieuw titel, opnieuw een afbeelding, mogelijk een afbeelding en zeer zeker een knop.

En wanneer je werkelijk creatief bent, dan kan je natuurlijk ook vanuit een container een knop bouwen (met reacties op ‘klik effecten’ door de states (hover, active, focus) mee te nemen in de instellingen. Doe je dat, dan mag ik je gelijk feliciteren, want je hebt hier de eerste ‘nestable button’ gebouwd. In de ‘eigen’ atomaire button kan je weinig doen met de inhoud van de knop (tekst en icon zijn de enige mogelijkheden), maar in jouw nestable button kan ieder denkbaar component opnemen.

Nog enkele andere mogelijkheden:

• Price Item
• Card component
• Icon box

Het belangrijkst is om niet uit het oog te verliezen dat niets wat mogelijk anders op een andere site zou moeten zijn. De variabele gegevens als kleur, margins, padding, typografie etc. moeten altijd via variabelen of local classes ingesteld worden.

Stap 4. Maak organismen

Een ‘organisme’ is eigenlijk het best te vergelijken met een veel-voorkomende sectie. Hierbij kan je denken aan een ‘Hero’ sectie, complete headers en footers, specifieke content blokken en meer. Met de huidige stand van Elementor 4 kom je nog heel wat atomaire elementen te kort om daadwerkelijk complexe organismen te kunnen bouwen, maar de hierboven genoemde hero, header en footer zijn in ieder geval al mogelijk binnen de huidige aanpak. Als de makers van Elementor zich aan hun beloften houden komen binnenkort nieuwe atomic elementen die de huidige mogelijkheden sterk uit zullen breiden.

Stap 5. Beveilig je componenten

Met atomaire elementen gebouwde componenten kan je specifieke instellingen publiceren. Hierdoor kan een klant of medewerker die geen ‘admin’ rechten heeft geen instellingen van een component aanpassen, wanneer het niet gepubliceerd is. Hiermee voorkom je, dat de klant zelf gaat experimenteren.

Stel je bijvoorbeeld een Hero beschikbaar, dan sta je de klant toe om de header, de tekst en een afbeelding aan te passen, maar niet de kleuren, spacing en andere zaken. Wanneer je klanten hebt, die ook ‘zelf beheren’ kan dat qua beveiliging een issue worden. In de nabije toekomst zal ik een artikel publiceren, waarin ik beschrijf hoe je een klant wel de toegang kan blijven laten houden die hij gewend is, maar niet de toegang krijgt om problemen in Elementor te veroorzaken.

Stap 6. Documenteer je componenten

Leg vast, liefst in een online document, waarvoor welke componenten gebruikt dienen te worden. Vergeet vooral niet te beschrijven welke variant van een element waarvoor gebruikt dient te worden.

Stap 7. Bouw nieuwe projecten alleen nog met componenten

Uitsluitend wanneer je functionaliteiten nodig hebt die nog niet gebouwd kunnen worden, omdat hiervoor atomic elements ontbreken zet je nog widgets in. Documenteer waar je widgets in hebt gezet, waarom (vanwege het ontbreken van atomic element xyz) en vervang je widget zodra het mogelijk is je atomic element te bouwen. Denk er aan, dat het ook mogelijk is om je eigen atomic elements te (laten) ontwikkelen.

Word vervolgd

Het artikel is al met al heel wat langer geworden dan verwacht en ik heb nog maar de helft verteld wat ik wilde vertellen. Binnen een aantal dagen zal het vervolg van dit artikel worden gepubliceerd.

We gaan dan vooral in op een praktische setup van je repository.

Meer leren?

In September begint voor de eerste maal de compleet herziene cursus ‘Elementor Pro voor Designers’. Tijdens deze cursus leer je hoe je optimaal met Elementor Pro kan werken. Gedurende de cursus werken we aan een de hand van een case (een website voor een restaurant, inclusief een eenvoudig reserveringsformulier, een menukaart die gevuld wordt vanuit een database en de mogelijkheid om ook online te bestellen). Het opbouwen van je eigen repository komt hier aan bod.

Bovendien krijg je een tweetal letterlijke unieke plugins, ze zijn speciaal voor de cursus ontwikkeld. De eerste plugin voegt een vijftal nieuwe atomaire elementen toe aan Elementor. Het gaat hierbij om een aantal elementen, die naar mijn idee nog ontbreken, maar wel heel belangrijk zijn.

De tweede plugin voegt ruim 200 componenten toe, en geeft je een mogelijkheid je componenten te beheren.

Zowel de kennis als de plugins geven je een grote voorsprong op je competitie.