Werken met Elementor 4 – Een schaalbare workflow

Werken met Elementor 4 – Hoe bouw je je eigen repository?

Waar waren we ook al weer gebleven?

In mijn eerdere blogpost over het werken met componenten in Elementor 4, het eerste deel van deze reeks van twee, eindigde ik met een stappenplan om componenten te ontwerpen. Een groot gevaar van het ‘zomaar starten’ met deze bouw, leidt echter tot een groot gevaar: Je moet de samenstelling van de component repository strak structureren, anders ontstaat er een chaos.

1. Denk niet in pagina’s maar in systemen

Het eerste wat je af moet leren om in ‘pagina’s’ te denken. Je gaat vanaf nu geen ‘pagina’s’ meer bouwen, maar een design systeem. Je begint niet met een homepage, over ons, contact…

Je begint met de componenten. Uit ‘atomen’ bouw je ‘moleculen’, uit ‘moleculen’ bouw je ‘organismen’. En wanneer je nu even niet weet, waar ik het over heb, dan moet je echt het voorgaande artikel eerst lezen.

In dit artikel kijken we nader hoe je het werken met Elementor 4 makkelijk en sneller kan maken, door een schaalbare workflow op te bouwen.

2. Een aanbevolen structuur voor je component repository

Voordat je ook nog maar iets begint te bouwen, is het goed om even stil te staan bij hoe je het wilt structureren. Want je gaat straks meer componenten bouwen, dan dat je nu widgets tot je beschikking hebt. Een tweede punt -tenminste wanneer je meerdere sites te bouwen of onderhouden hebt- van verschillende componenten ook verschillende versies wilt hebben.

Naast bijvoorbeeld een ‘Hero’ gebaseerd op tekst en een afbeelding, wil je misschien ook een ‘Video Hero’ of een ‘Marketing Hero’ hebben.

Denk bijvoorbeeld aan een structuur als onderstaand

components
   atoms
      button
      heading
      text
      icon
   molecules
      cards
         ctas
         testimonials
      media-objects
         sliders
         video-players
   organisms
      hero
         videohero
         sliderhero
         marketinghero
      header
      footer
         fat-footer
      pricing-table

In eerste instantie lijkt een dergelijke structuur misschien overkill lijken, maar zodra je met meerdere projecten werkt, wordt dit goud waard.

3. Naming conventions : What’s in a name?… (nou, een heleboel)

Voor een vlotte Elementor workflow is het van het grootst belang, dat je je componenten snel terug kunt vinden. Per slot van rekening, wanneer je iedere keer door de lijst moet wandelen, dan kost je dat behoorlijk wat tijd. Daarom is een gestructureerde, logische naamgevingsstructuur onmisbaar.

Een naamgevingsconventie die eigenlijk goed werkt is :
Let hierbij overigens op, dat de vierkante haken betekenen, dat het weggelaten mag worden.

<Type> - <Naam> - [Variant] 

Enkele voorbeelden volgens die conventie:

• Button – Button – Primary
• Button – CTA Button – Warning
• Button – CTA Button – OK
• Card – Blog Item – Compact
• Card – Blog Item – Featured
• Hero – Video hero

Het idee is hier natuurlijk, dat je snel het juiste component op kan zoeken via de zoekdialog van het componenten palet.

4. Design tokens (variabelen), het geheime ingredient

Elementor 4 biedt je twee mogelijkheden aan om je styling centraal te kunnen beheren, dit zijn de variabelen en classes. Deze twee werken nauw samen met elkaar, en wanneer je het vanaf het begin goed gebruikt, zal je al snel heel wat tijd gaan besparen.

Wanneer je met Elementor 3 werkt, dan ben je toch nog heel wat tijd bezig met het ‘instellen’ van afzonderlijke widgets. Dat kun je natuurlijk enigszins versnellen: Je kan de instellingen van een widget als ‘default’ opslaan, zodat die widget dan iedere keer met die instellingen wordt ingevoegd, je kan ‘global widgets’ gebruiken, je kan met Kopieër / Plak stijl een stijl van de éne naar de andere widget kopiëren, maar het is en blijft een hoop extra werk wanneer er ineens besloten wordt, dat er iets moet veranderen. Alleen de typografie kan je in Elementor 2 en 3 vanuit globale settings aanpassen.

Wat zijn ‘Design tokens’?
Design tokens zijn gestandaardiseerde ontwerpwaarden die worden vastgelegd in code en fungeren als de kleinste bouwstenen van een design system. Ze koppelen een naam aan een waarde, waarbij de naam beschrijft wat het token vertegenwoordigt (bijvoorbeeld color-primary of spacing-medium) en de waarde aangeeft hoe dit eruitziet in code, zoals #FF5733 of 16px.

Door tokens centraal op te slaan, kunnen ontwerp- en developmentteams consistent dezelfde stijlelementen gebruiken over verschillende platforms en applicaties.

Voorbeelden van Design Tokens
Design tokens kunnen allerlei herhaalbare visuele eigenschappen bevatten, zoals:
Kleuren: primaire, secundaire of achtergrondkleuren (color-primary: #0066CC)
Typografie: lettertypes, lettergroottes, regelhoogtes (font-size-large: 18px)
Spacing: marges en padding (spacing-4: 16px)
Schaduwen en hoekafrondingen: voor componenten zoals buttons of cards (border-radius-small: 4px)

Elementor gebruikt zelf de naam ‘design tokens’ niet maar de variabelen van Elementor 4 fungeren als zodanig.

Enkele mogelijke definities van design-tokens. Ik gebruik hier twee verschillende conventies voor gebruik: kebabcase (met streepjes verbonden) en camelCase. Houd je bij één van deze twee conventies:

Kleuren

• color-primary /colorPrimary
• color-secondary / colorSecondary
• color-accent / colorAccent
• color-neutral-100 / colorNeutral100… color-neutral-900 / colorNeutral-900

Typografie

• font-heading / fontHeading
• font-body / fontBody
• font-small / fontSmall
• font-accent / fontAccent

Spacing

• space-xs
• space-sm
• space-md
• space-lg

Enkele voorbeelden hoe je deze variabelen als design tokens kan gebruiken, vind je in de volgende sectie:

5. Klassewerk met classes

Een ‘class’ -om het even heel eenvoudig te zeggen- is binnen Elementor een groep stijl instellingen, die toegekend worden aan een component. Hierbij is een drietal zaken van belang te realiseren.

1. Het gaat hier om stijl instellingen, dus niet om teksten, afbeeldingen, gebruikte iconen etc.
2. Wanneer je classes toevoegt aan een component is de volgorde binnen de class-manager van belang, niet de volgorde waarop je de classes toevoegt.
3. Je kan aan classes directe waarden geven. Ik kan dus bijvoorbeeld aangeven, dat de achtergrondkleur rood is. Het is echter aan te raden om dit niet te doen, maar hiervoor in de plaats een variabele te koppelen. Die variabele heeft dan de waarde van de gewenste kleur. ‘background-color: color-primary-background’ in plaats van ‘background-color: #FF0000’. Mocht je later de achtergrondkleur aan willen passen kan je dat in één keer centraal doen.

Het is een goede manier van werken om de instellingen die gerelateerd zijn binnen één klas op te nemen. Op deze manier krijg je bijvoorbeeld ‘color’ classes, ‘background’ classes, ‘typography’ classes enzovoort.

Tussenspel – Een knop, stap voor stap

Laten we weer eens beginnen met een knop component. Daarvoor kunnen we direct het atomaire button element gebruiken.

Aan deze knop voegen we een class voor de vormgeving van de knop toe. Dit bestaat bijvoorbeeld uit de volgende onderdelen

• Rand dikte
• Rand type (stippellijn, doorgetrokken etc)
• Padding (opvulling)
• Margin (ruimte aan de buitenkant van de knop)

De instellingen sla je op onder bijvoorbeeld de naam ‘button-type-default’.

Zoals je ziet, we hebben hier nog niets gezegd over de daadwerkelijke dikte van de lijnen, de daadwerkelijke opvulling etc.

We definieren ook een class voor de kleurstelling van de knop.

• Rand kleur
• Rand kleur hover
• Achtergrondkleur
• Achtergrondkleur hover
• Tekstkleur
• Tekstkleur hover

En die noemen we bijvoorbeeld ‘button-colors-default’.

We maken nu de variabelen aan. Bijvoorbeeld:

• border-thin
• border-default
• border-fat
• color-background-primary
• color-background-secondary
• color-foreground-primary

Bij het ingeven van de variabelen moeten we ook een waarde voor de variabele ingeven, laat dit de waarde zijn, die je ook in gedachten had. Werk de instellingen verder uit.

Wat je nu bijvoorbeeld over de knop hebt beschreven is dat

• De knop door de class ‘button-type-default’ onder meer een rand heeft met een dikte van ‘border-thin’ en
• door de class ‘button-colors-default’ onder meer een color-background-primary tekst op een color-foreground achtergrond.

Wat de waarde van deze variabelen is, kan je instellen via de variabelen zelf.

6. In alle staten – over de states ‘hover’, ‘active’ en ‘focus’

Eén van de zaken waarmee een webdesigner met Elementor 3 vaak de fout in gaat, is een inconsequentie bij het implementeren van de verschillende ‘states’ van een knop, een formulier veld of een menu-element. Dat komt voornamelijk omdat je bij ieder element apart de ‘staat’ in moet stellen van dat element ingeval van de in de titel genoemde dynamische handelingen. En in alle drukte vergeet je wel eens wat, waardoor -bijvoorbeeld- een knop op de éne pagina bij een ‘hover’ (een ‘mouse-over’ gebeurtenis) op een andere manier, of zelfs geheel niet kan reageren dan op een andere pagina.

Het is altijd goed om het ‘actieve’ element -soms heet het ‘active’ (menu-element), soms ‘focus’ (formulier veld)- er speciaal uit te lichten. Bijvoorbeeld door altijd een lichte rand om een actieve knop te zetten, of door altijd de achtergrondkleur van een formulierveld een net iets andere tint te geven.

Door in de classes het ‘gedrag’ van elementen te definiëren, zoals je vanaf Elementor 4 kunt doen, krijg je een meer consistente gebruikersinterface.

7. Properties en Dynamische Content

De grootste gedachten-switch hier is, dat je om moet schakelen naar het idee, dat de componenten op een pagina idealiter gevoed worden door twee ‘bronnen van waarheid’ (truth sources). De gecentraliseerde properties (eigenschappen) beheer(s) je door deze centraal te bepalen via de nieuwe atomaire editor van Elementor 4. De content die zichtbaar gemaakt wordt, komt via de dynamische velden, die hun input krijgen vanuit de database – (custom) post types, (custom) taxonomies en systeembronnen.

Heb je andere informatie nodig uit de database, of het systeem, bedenk dan, dat alle informatie die met een shortcode getoond kan worden, ook altijd bruikbaar is.

Met betrekking tot ‘shortcodes’ echter één waarschuwing. De eerste generatie pagebuilders -zoals bijvoorbeeld WP Bakery en Divi – hebben de enorme overhead te danken aan het feit, dat deze helemaal rond shortcodes geïmplementeerd zijn. Iedere shortcode is een aantal functieaanroepen richting database. Gebruik van shortcodes voor het verkrijgen van informatie kunnen het best beperkt blijven.

De volgende stap…

In de komende tijd ga ik zeker heel wat meer over Elementor 4 en het atomaire ontwerp van componenten schrijven. Heb je specifieke vragen over wat nieuw is in Elementor 4, en hoe je hiermee om kunt gaan, voel je vrij de vraag in het commentaar hieronder te stellen.

Wil je snel aan de slag met Elementor 4, mede om je concullega’s voor te blijven? Dan is de cursus Elementor 4 Pro voor Designers mogelijk een goede cursus voor je. Bij de cursus krijg je nog diverse extra’s die je een gigantische voorsprong geven.

En natuurlijk is het altijd goed om de nieuwsbrief van WordXPression te blijven lezen. Wil je deze ontvangen, dan kun je je onderaan de pagina hiervoor opgeven.

Meer over Elementor 4

Wil je weten wat ik nog meer over Elementor 4 te vertellen heb, dan kan je hier meer lezen over Elementor 4.

Je kan natuurlijk ook op de site van Elementor verder lezen over de nieuwe versie