Het gebruik van variabelen in Elementor V4 Editor

En andere mooie zaken die zijn toegevoegd aan de V4 editor per Elementor Pro 3.31

Op dit moment is in Elementor Editor V4 als toevoeging aan de Elementor Pro 3.31beta versie een aantal interessante zaken toegevoegd. Het mooist vind ik zelf wel de mogelijkheid om variabelen te gebruiken in de kleur- en font variabelen.

‘Maar wacht eens even’ zul je misschien zeggen. ‘Elementor had toch allang de mogelijkheid om globale kleuren en fonts in te stellen?’

Ja, maar de ‘kleur en font’ variabelen gaan heel wat verder dan de globale instellingen voor kleur en typografie. In enkele voorbeelden hieronder wil ik je duidelijk maken, wat het verschil is.

Kleur en font- (typografie-) instellingen in Elementor.

Het instellen van globale kleuren en fonts is al heel lang mogelijk in Elementor en Elementor Pro. En het werkt nog heel makkelijk ook. Binnen de Elementor Editor (v3 of V4) klik je op de knop met de schuifbalkjes en je krijgt het instellingenscherm van Elementor te zien.

Kies je vervolgens voor ‘Global Colors’, dan krijg je iets als het volgende te zien:

Verschillende kleuren die je in kan stellen met een daarbij behorende naam. In de V4 editor blijft dit ook beschikbaar, maar er is ook een andere -betere- manier om kleuren in te stellen bij de ‘atomaire componenten’.

Bij het kleur-veld zie je wanneer je met de muis hierover heen ga een ‘hint’ met twee symbolen. Een bezem om het veld leeg te maken, en een symbool met drie ‘balletjes’, wat aangeeft, dat je hier een variabele in kan stellen. Een variabele is een ‘naam’ voor de waarde die je wilt gebruiken. Wanneer ik nu klik op deze balletjes krijg ik het volgende te zien:

En wanneer we nu op ‘Create variable’ klikken, dan kunnen we een kleur voor de achtergrond instellen.

Ok, maar waarschijnlijk zal je je nu afvragen ‘is dit niet hetzelfde als een globale kleur instellen? En ja, daar heb je helemaal bijna gelijk in. Er is echter een aantal belangrijke verschillen.

Het eerste verschil is onzichtbaar. maar zit hem in de onderliggende CSS code. Bij de ‘global colors’ en ‘global fonts’ zoals we ze tot nu toe kennen worden de waarden opgeslagen opgeslagen onder namen als ‘–e-global-color-123456‘, waarbij 123456 vervangen wordt door een willekeurige reeks letters en cijfers. Wanneer je deze waarden dus binnen CSS wilt gaan gebruiken, moet je vrij ver ‘duiken’ in de CSS code om de waarden ook te vinden. Wanneer je gebruik maakt van de nieuwe variabelen, dan worden de waarden opgeslagen onder de variabele naam die je hebt gegeven, met twee extra streepjes ervoor, dus wil ik de variabele ‘achtergrond-call-to-action’ ergens in de CSS gebruiken, kan ik dit als volgt doen:

.some-random-container {
  background-color: var(--achtergrond-call-to-action);
}

Dat is dus heel wat handiger te onthouden dan –e-global-color-a4782b, nietwaar?

Het tweede voordeel is met het hergebruik. Wanneer je namelijk een kit met globale kleuren importeert (bijvoorbeeld om je site design te versnellen door delen van andere sites te gebruiken), zal je wanneer je deze hebt aangepast in de CSS opnieuw aan moeten passen. Wanneer een element van site 1 naar site 2 wordt geïmporteerd is er geen enkele garantie, dat bij die tweede site de kleur dezelfde naam krijgt, dus –e-global-color-45ea09 zou in de andere site –e-global-color-1276cd kunnen worden. Gebruiken we deze codes in de CSS, dan moeten we dit aanpassen.

Maken we gebruik van de nieuwe class variabelen, dan gaat dit allemaal probleemloos, zolang we overal maar dezelfde namen gebruiken.

Op dit moment is het echter nog niet ideaal. In de huidige versie van de V4 editor is het namelijk alleen mogelijk om variabelen voor fonts en kleuren te gebruiken. Hiermee wordt geen functionaliteit toegevoegd, maar bepaalde functies worden op een andere -wat meer handige- manier uitgevoerd. Dit had men ook kunnen doen door het huidige ‘globale systeem’ intact te laten en het onder water iets handiger op te slaan. Maar zoals gezegd, dit is nog maar een voorproefje van het complete design systeem, waarbij vrijwel iedere waarde als variabele gebruikt kan worden. Denk hierbij bijvoorbeeld aan de ronding van hoeken op een knop. Stel éénmaal de ronding in onder een variabele, en wanneer je het anders wilt, hoef je slechts de variabele aan te passen.

Werken met de ‘Class Manager’

In een vorig artikel over de V4 Editor heb ik in het kort de ‘class manager’ genoemd, een handige tool om een overzicht te krijgen van de classes die je gebruikt. Wat je daar echter nog niet kon zien, was waar je onder meer die classes gebruikt.

De class manager is eenvoudig op te roepen. Wanneer je op een atomair element klikt, zie je een tab style.

Je ziet hier de gebruikte classes (cta-title en local) en rechts daarvan iets wat op een kleurwaaier lijkt. Klik je daar op dan opent de class manager zich.

Ga je in de class manager over een class heen dan zal je in de V4 editor een ‘doelzoeker’ cirkel zien. Door hierop te klikken, krijg je te zien waar deze class gebruikt.

Je krijgt hier dus te zien op welke pagina’s (fantasieloos ‘Elementor #77 genoemd) deze class gebruikt wordt en hoe vaak. Klik je op de pagina, wordt deze automatisch geopend in een nieuwe tab. Behoorlijk handig dus.

Iets over de naamgeving van de variabelen

Wanneer je straks begint met de nieuwe V4 Editor kun je het maar beter gelijk goed doen. Ik geef sinds 2018 cursussen in het werken met Elementor (Pro) en ik zie dat veel mensen die op dat moment Elementor al gebruikten vaak dezelfde fout maken: Kiezen voor een de naam van een kleur.

Dus bijvoorbeeld bij de globale kleurinstellingen zaken als :

• Lichtblauw
• Donkerblauw
• Oranje
• Oranje hover

als kleurnamen gebruiken. Daar is in eerste instantie niets mis mee, tenzij je besluit dat je toch een andere kleur wilt gebruiken.

Stel je voor, je hebt blauw ingesteld als kleur voor de knoppen. En je hebt dit allemaal netjes ‘Knop blauw’ genoemd, omdat het nu eenmaal de kleur voor de knoppen is. Na een nachtje slapen vind je de kleur toch eigenlijk maar niets, en maakt hier paars van.

Nu heb je een serie knoppen die als ‘kleurnaam’ ‘Knop paars’ hebben. Om de een of andere reden, klinkt dat niet echt goed, toch?

Probeer zoveel mogelijk namen voor kleuren te vermijden, maar beschrijf liever de functies:

• Default knop
• Default knop hover
• Extra knop
• Extra knop hover

etc.

Ik maak een uitzondering voor wit en zwart, die ik gewoon ‘White’ en ‘Black’ noem. Maar let hierbij op: Wit bij mij meestal heel licht grijs en zwart heel donker grijs. Dus ook hier beschrijf ik meer een ‘functie’ (het moet er als zwart uitzien’, dan de daadwerkelijke kleur. ‘Echt zwart’ (#000000) doet meestal heel ‘zwaar’ aan, en ik gebruik dan ook liever een iets lichtere kleur (#222222). En ‘wit’ (#FFFFFF) komt ook iets vriendelijker over wanneer je een wat ‘donkerder’ wit gebruikt (#FEFEFE).

Werken met gelaagde filters (layered filters)

Iets wat ook prachtig nieuw is met de V4 Editor, is de mogelijkheid om gelaagde filters te gebruiken. Nu is het gebruik van filters niet helemaal nieuw, dat kan al een tijdje, maar de mogelijkheden waren tot nu toe beperkt. Je kon maar één filter instellen en de manier om een filter in te kunnen stellen was ook redelijk abstract.

Bij traditionele Elementor Widgets vind je onder ‘Style’ of ‘Stijl’ de optie CSS filters. Wanneer je hiervoor kiest krijg je de volgende velden te zien:

Dat is natuurlijk leuk, wanneer je begrijpt wat je hier doet, maar voor veel mensen is het abstractieniveau hier behoorlijk hoog. Ik kan hier de vervaging (blur) helderheid (brightness), het contrast, de kleurverzadiging (saturation) en kleurtint (hue) instellen. En daar kan ik overigens heel veel mee… maar wanneer ik iets heel eenvoudigs wil, is het toch wel heel lastig om het gewenste effect te realiseren. Helemaal wanneer ik gecombineerde effecten zou willen.

Om het allemaal wat makkelijker te maken, biedt de V4 editor zogenaamde ‘Layered filters’ aan op de ‘Atomic Elements’. In plaats van een voor de meeste mensen niets-zeggende set instelbare waarden, biedt de editor een negental populaire ‘filters’ aan. Dit zijn voorinstellingen om een bepaald effect te bereiken.

De volgende filters zijn er mogelijk:

• Blur : vervaging
• Brightness : helderheid
• Contrast : contrast
• Hue rotate: De instelling voor de kleurtint weergegeven als het aantal graden rotatie op het kleurwiel
• Saturate: De kleurverzadiging.

Dit zijn dus dezelfde vijf die je ook kan gebruiken in de ‘traditionele’ Elementor widgets, maar er is één groot verschil. Op de ‘oude’ manier worden de verschillende instellingen in een vaste volgorde toegepast. Wanneer je echter -bijvoorbeeld- de saturation en de hue aanpast, dan kan het een groot verschil maken in welke volgorde deze instructies worden uitgevoerd. Omdat je in de nieuwe V4 Editor de filters voor elementen ook van volgorde aan kan passen, heb je meer controle over het eindresultaat.

Bovendien zijn er op dit moment -de makers van Elementor hebben beloofd dat er meer komen- nog een viertal filters toegevoegd.

• Grayscale: Maak er een zwartwit afbeelding van
• Invert: Vervang kleuren met kleuren ‘aan de overkant’ van het kleurenwiel.
• Sepia: Geef een sepia (rood/bruine ‘oude foto stijl’ tint)
• Drop shadow: In tegenstelling tot de andere filters, wordt hier niets aangepast in een afbeelding, maar aan de rand van de afbeelding, hier wordt een slagschaduw aan toegevoegd.

De instellingen

Het instellen van een filter is eenvoudig. Onder het tabblad ‘Stijl’ van een atomisch element klik je op ‘Effects’. Dit zal dit dan uitvouwen om de volgende effecten te tonen:

Klik je vervolgens op de plus, dan wordt er een filter toegevoegd. In de dialoog die wordt geopend, kan je het filtertype en de waarde voor het filter invullen. In ons voorbeeld kiezen we voor een ‘greyscale’ filter en zetten dit op een percentage van 50%.

Wat hier wel belangrijk is, is dat je die instellingen uitvoert voor de juiste class. Wanneer ik het effect uitsluitend op één element uitgevoerd wil hebben, kies ik voor de ‘local’ class, wil ik het uitvoeren op alle elementen met eenzelfde class, kies ik voor een specifieke class.

In het onderstaande voorbeeld zie je twee foto’s. Op de linker foto is er geen filter toegepast, op de rechter foto 50% greyscale.

Je zit, de linkerfoto is ‘normaal’ gekleurd, de kleuren in de tweede foto lopen naar ‘zwartwit’ toe, er is nog wel enige kleur te zien, maar de kleuren zijn gedempt. Zouden we het naar 100% brengen, dan zou het een zwartwit foto worden. Zou ik inplaats van ‘local’ de ‘glb-image’ class geselecteerd hebben links-boven, dan zou het filter op beide foto’s zijn toegepast.

De volgorde van de filters

Zoals eerder aangegeven, je kunt filters ook combineren. Bij gecombineerde filters worden deze achter elkaar toegepast. En hierbij maakt de volgorde waarin je de filters hebt staan veel uit. In het voorbeeld hieronder is links eerst een greyscale filter voor 100% toegepast, daarna een sepia filter voor 100%. In de rechter afbeelding is dit precies andersom gedaan. En je ziet, dat dit een groot verschil maakt.

Voetangels en klemmen

Filters kunnen niet alleen op afbeeldingen, maar in principe op alle atomaire elementen worden toegepast. ‘Atomaire elementen‘ zijn nieuwe ‘widgets’ die bedoeld zijn om als basis te dienen voor je eigen, complexere, widgets. In mijn eerdere blogartikel over de V4 editor kun je hier meer informatie over vinden.

Een makkelijk te maken fout is -ik heb hem een aantal malen gemaakt- om een filter op een te hoog niveau in de pagina hiërarchie te plaatsen. Dus bijvoorbeeld een filter te plaatsen op een container, in plaats van op de foto. Doe je dit op een lokale class van de container, dan valt de schade best mee, en na dit één of twee keer gedaan te hebben, heb je wel door waar je moet kijken.

Doe je dit op een globale class dan is er een redelijke kans, dat je jezelf blind zoekt naar de oorzaak. Stel je voor, je hebt een container waarop je een ‘greyscale’ filter hebt toegepast. Deze container wordt echter ook gebruikt voor teksten, en ineens zijn niet alleen foto’s zwart-wit, maar ook je teksten. Het (goed) werken met classes vergt enige discipline en ervaring.

Werken met Elementor Pro als een expert

Ben jij een (web)designer en je wilt Elementor Pro in alle details leren kennen? Tijdens de cursus ‘Elementor Pro voor Designers leer je hoe je stap voor stap een complete website voor een restaurant maakt, inclusief het gebruik van Dynamic Templates.

Ook zal de nodige tijd besteed worden aan de V4 editor en het werken met het nieuwe class-systeem voor design.

Behalve deze real live training ontvang je ook toegang tot een online platform met tientallen korte ‘how to’ video’s (in het Nederlands), die je op weg helpen om jouw designs nog meer uit te laten blinken. Deze videos zijn bovendien downloadbaar voor eigen gebruik.

Ook ontvang je een exclusieve design kit. Deze kit bestaat uit een losbladig systeem van gelamineerde sheets met voorbeeld designs. Deze visuele hulpmiddelen maken het gemakkelijker om tijdens gesprekken met klanten je ideeën en ontwerpen te presenteren. Gebruik deze sheets om je klanten te overtuigen en je concepten duidelijk uit te leggen.

Schrijf je vandaag nog in!