Zeven pro-tips voor Elementor Pro

Zeven pro-tips voor Elementor Pro – van een Pro, voor de Pro

Ik werk nu al weer zeven jaar met Elementor Pro. Tenminste, bijna. In September 2017 ben ik met Elementor Pro begonnen en ik moet zeggen, dat dit de eerste page builder was die indruk op mij maakte. En hoewel we nu ook heel wat theme-builders hebben, was Elementor Pro de eerste theme-builder waarmee het ook prettig was te werken. Door de jaren heen heb ik heel wat gebruikers tips gegeven over Elementor, dus het leek mij ook eens een goed idee, kijkend naar mijn eigen ervaring met Elementor, om mij ook te richten tot de WordPress professional, en enkele pro-tips voor Elementor aan hen te geven. Dus beste concullega’s, lees, en leer. En wellicht heb jij ook nog leuke pro-tips voor Elementor die je hier in de commentaren met de lezers van deze blog wilt delen!

Elementor Pro tip 1. Gebruik de ‘Top Balk’editor

Wanneer je een WordPress pro bent, dan ga ik ervan uit, dat je inmiddels bekend bent met de Elementor ‘Experimenten‘, die later ‘Functies’ zijn gaan heten. Zo niet, dan kan je deze wat oudere blogpost hierover lezen.

Eén van deze functies is de ‘Top Balk editor’. De aanvankelijke editor van Elementor was eigenlijk best onhandig, je moest behoorlijk wat klikken om je zaken voor elkaar te krijgen. Ook kon je vanuit de editor zelf niet even snel een andere pagina of template laden. Deze ‘onhandige’ editor is inmiddels vervangen door de ’top balk editor’ en op nieuwe sites wordt de ’top balk editor’ automatisch geladen, maar heb je een wat oudere site te onderhouden, is het handig deze editor te activeren onder de ‘Functies’ in de Elementor instellingen. Je zal merken, dat je heel wat sneller kan gaan werken.

Elementor Pro tip 2. Verover de wereld! Denk globaal! En denk aan je globale instellingen!

Eigenlijk zou je dit niet onder pro-tips voor Elementor moeten rekenen, maar gewoon als een basis handeling om met Elementor aan de slag te gaan. Toch zie ik als ik een site in onderhoud krijg nog maal al te vaak, dat de vorige designer toch wel heel slecht gebruik gemaakt heeft van de mogelijkheden die de ‘globale instellingen’ van Elementor je bieden.

Voor zowel de kleuren als de typografie kan je op een centraal niveau aangeven welke kleuren en welke lettertypen je wilt gebruiken. En dat is niet alleen verdraaide makkelijk omdat je zo direct de juiste kleur of het juiste font in kan stellen, maar ook wanneer je klant later aangeeft, dat hij toch liever een andere kleur zou hebben gehad voor bijvoorbeeld alle tekst, dan hoef je dit maar op één plaats aan te passen, en overal op de site wordt deze aanpassing doorgevoerd.

Dan moet je echter wel rekening houden met een aantal belangrijke voorwaarden:

1. Geef je globale kleur- en font instellingen functionele namen, geen namen op basis van de kleur.
   Ik kreeg pas een webshop van iemand in onderhoud, die zijn bestaande webwinkel in WordPress wat meer ‘eigentijds’ wilde maken. De namen voor gebruikte kleuren waren namen als ‘Donkerrood’, ‘Lichtrood’ en ‘Paars’.
   Op het moment dat de klant de kleuren anders wil, dus bijvoorbeeld, het donkerrood moet groen worden, dan worden de namen van de kleuren ineens een stuk minder logisch. Er staat ‘donkerrood’, maar je ziet ‘groen’.
   Geef daarom namen die passen bij de functie van de kleur. Bijvoorbeeld ‘achtergrond donker’ en ‘achtergrond licht’ voor achtergrondkleuren die je gebruikt, ‘licht op donker’ voor een licht font, of een lichte icon op een donkere achtergrond. Hetzelfde doe je met fonts : ‘Grote titel’, ’titel productoverzicht’, ‘subtitel productoverzicht’, ‘body blog’ en ‘body productomschrijving’.
2. Heb je tijdens het ontwerpproces een extra kleur of tekst instelling nodig, die gebaseerd is op een al bestaande instelling, dan kan je deze uit de lijst kiezen, aanpassen en met de ‘+’ icoon deze instelling aan je globale instellingen toevoegen. Denk bij de naamgeving aan het eerste punt.
3. Probeer je CSS niet te zeer te fragmentariseren. Iedere widget en iedere container heeft de mogelijkheid er CSS aan toe te voegen, maar hoe meer je CSS gefragmentariseerd is, hoe moeilijker straks het veranderen van de stijl van je site is. Wil je het echt goed doen? Neem de moeite de door Elementor gegenereerde CSS te inspecteren.
   In de CSS zal je een stuk CSS code tegenkomen wat er ongeveer zo uit kan zien:

.elementor-kit-17 {   
    --e-global-color-primary: #FF6D24;
    --e-global-color-secondary: #2C2C2C;
    --e-global-color-text: #6B6B6B;
    --e-global-color-accent: #FFEEDD;
    --e-global-color-d3ae19d: #F9F7F5;
    --e-global-color-785b64d: #DEDEDE;
    --e-global-color-b41e63e: #FFA076;
    --e-global-color-4ade329: #EDEDED;
    --e-global-color-ec25634: #FFFFFF;
    --e-global-typography-primary-font-family: "Poppins";
    --e-global-typography-primary-font-size: 16px;
    --e-global-typography-primary-font-weight: 300;
    --e-global-typography-primary-text-transform: none;
    --e-global-typography-primary-line-height: 1.5em;
    --e-global-typography-secondary-font-size: 11px;
    --e-global-typography-secondary-font-weight: 700;
    --e-global-typography-secondary-text-transform: uppercase;
    --e-global-typography-secondary-line-height: 1.5em;
    --e-global-typography-secondary-letter-spacing: 3px;
    --e-global-typography-text-font-size: 12px;
    --e-global-typography-text-font-weight: 600;
    --e-global-typography-text-text-transform: uppercase;
    --e-global-typography-text-line-height: 1.5em;
    --e-global-typography-text-letter-spacing: 3px;
    --e-global-typography-accent-font-size: 21px;
    --e-global-typography-accent-font-weight: 100;
    --e-global-typography-accent-font-style: normal;
    --e-global-typography-accent-line-height: 1.4em;
    --e-global-typography-47eb6c6-font-size: 16px;
    --e-global-typography-47eb6c6-font-weight: 700;
    --e-global-typography-47eb6c6-line-height: 1.5em;
}

Dit zijn de definities van de instellingen zoals deze door Elementor zijn gegenereerd. Door in jouw eigen CSS geen ‘vaste waarden’ te gebruiken, maar de hierboven gebruikte definities (in jouw situatie zijn deze natuurlijk anders van naam), hoef je de waarden maar op één plaats aan te passen. In de global settings.

Je kan vervolgens deze waarden in CSS gebruiken op de volgende manier

.some-box {
   background-color: var(--e-global-color-ec25634:);
}

4. Vergeet niet dat je veel gebruikte widgets ook ‘vooraf in kan stellen’. Wanneer je regelmatig bijvoorbeeld een knop in een bepaalde stijl gebruikt hoef je niet iedere keer alle instellingen opnieuw te doen, of via ‘Kopieër stijl’ de stijl van een andere knop te kopiëren. Wanneer je met de rechter muisknop op een widget klikt krijg je een menu met twee interessante opties. ‘Opslaan als globaal’ en ‘opslaan als standaard’. Wanneer je kiest voor ‘opslaan als globaal’ dan wordt er een globale widget gemaakt. Iedere keer dat je een globale widget toont, zal deze dezelfde instellingen hebben als alle andere globale widgets van die naam. Verander je de instellingen veranderen deze overal. Dat is bijvoorbeeld handig voor een contactformulier, waarbij iedere keer het formulier geacht wordt dezelfde acties uit te voeren.
   ‘Opslaan als standaard’ is handig bij bijvoorbeeld een knop die er over de hele site hetzelfde uit moet zien, maar wel iedere keer een andere tekst en een andere link moet hebben.
   

Elementor Pro tip 3. Bouw een template bibliotheek op

Wanneer je vaker sites bouwt, dan kom je er achter, dat je toch wel heel vaak dezelfde handelingen verricht. Neem nu bijvoorbeeld een ‘Single Page Template’ In grote lijnen voer je toch vaak hetzelfde kunstje uit in een aantal verschillende varianten.

Het scheelt je enorm in werk en communicatie wanneer je een template bibliotheek opbouwt, waar de klant kan kiezen uit verschillende al voorbereide templates. Denk hierbij onder andere aan standaard templates voor:

• Single pages
• Blogposts individueel
• Blogpost archief
• Product individueel
• Product archief
• Diverse header- en menu stijlen
• Diverse footer stijlen
• Contactformulieren : Denk hierbij aan wel/geen bedrijfsnaam, wel/geen telefoon, voor- en achternaam wel of niet gescheiden etc.

Houd de voorbeelden minimalistisch. De kleur- en fontkeuze komt later, houd de stijl van je basis templates zoveel mogelijk in neutrale tinten. Het gaat in eerste instantie om de layout.

‘Kleur’ je de templates alvast, zal je klant deze meer op kleur dan op layout beoordelen.

Elementor Pro tip 4. Maak gebruik van alle moderne technische opties van Elementor

Zoals je wellicht weet, geef ik ook white label ondersteuning aan andere WordPress professionals. En zo nu en dan zie ik, dat er vandaag de dag nog steeds professionele designers zijn die geen gebruik maken van de flexbox en grid opties van Elementor. Ik moet toegeven, flexbox is even wennen. Het is niet alleen een ander design systeem dan werken met secties en kolommen, maar het vereist ook een andere manier van denken. Maar als je het systeem in de vingers krijgt, dan heb je er op zoveel manieren zoveel baat bij.

Het eerste voordeel is, dat wanneer je flexbox eenmaal ‘in de vingers hebt’, het ontwerpen voor mobiel een stuk makkelijker wordt.

Bovendien heb je minder HTML, dus minder code, en een betere performance.

Wat echter nog veel belangrijker is, is dat de makers van Elementor niet doorontwikkelen voor het Section/Column design model. Met andere woorden, alle performance verbeteringen aan Elementor, alle nieuwe widgets en technologieën zijn allemaal exclusief voor het Flexbox systeem beschikbaar. En daarmee mis jij als ontwerper toch wel een groot aantal opties die juist het werken met Elementor zo efficiënt maken.

Elementor Pro tip 5. Maak zoveel mogelijk gebruik van dynamische gegevens

Er zijn letterlijk honderden plugins die het mogelijk maken allerlei soorten gegevens op een WordPress site te tonen. Restaurant menu’s, evenementen, portfolio’s, testimonials en nog veel meer. Maar iedere plugin heeft zijn eigen overhead en vaak ook een eigen output om die gegevens zichtbaar te maken. En die output is niet altijd even mooi.

Eén van de grote voordelen van Elementor als een themebuilder is, dat je deze gegevens makkelijk in een Loopgrid van Elementor kan gebruiken, dank zij de dynamische datakoppelingen. Enkele jaren terug heb ik hier al een artikel over geschreven, waarbij ik als één van de mogelijke oplossingen ACL noemde voor het definiëren van de data. Destijds had ACL nog als groot nadeel, dat je er wel custom fields mee kon maken, maar voor de post types en taxonomieën zelf nog CPT-UI nodig had. Inmiddels beschikt ACL alle middelen die nodig zijn om zonder een regel te programmeren eigen post types te definiëren. En Elementor Pro heeft alles om ze zichtbaar te maken. Voor informatie, lees mijn diverse blogposts met betrekking tot ACL.

Elementor Pro tip 6. Denk globaal, maar werk lokaal!

Van oorsprong ontwikkelde ik voor bedrijven en als zodanig zat ik vrijwel altijd direct op een server te werken. Toen ik eenmaal met WordXPression begon deed ik dat ook. Twee jaar geleden ben ik echter begonnen met het lokaal te werken. Dan kwam eigenlijk omdat ik ook met Laravel ging werken, en voor Laravel er werkelijk prachtige ontwikkelomgevingen bestaan, waarmee je makkelijk en efficient lokaal kunt werken, zonder eerst een hele omgeving op te moeten zetten.

Bij Laravel is dat Herd, en voor WordPress is er iets vergelijkbaars wat LocalWP heet. Ik heb het vrij recent nog opnieuw besproken. Na het installeren van de applicatie, kan je met één druk op de knop een complete WordPress website installeren. En wat nog veel mooier is, in overeenstemming met tip 3, kan je ook ‘Blueprints’ gebruiken, een soort ‘ruwe versie’ voor het type website wat je wilt gaan bouwen.

Je hoeft dus niet alle plugins te installeren, standaard pagina’s aan te maken etc. Dat doe je in een basis-blueprint. En die ‘kopieer’ je om snel van start te kunnen gaan.

Maar wat als je de klant iets wilt laten zien? Geen enkel probleem, want via de website van LocalWP kan je een ‘forwarding’ aanmaken, waardoor jouw klant -wanneer jij dat toestaat- mee kan kijken en kan testen op de site die jij aan het bouwen bent voor hem.

Elementor Pro tip 7. Gebruik het Notes systeem van Elementor

Een zwaar onderbelicht voordeel van Elementor is het Notes systeem. Soms kan de communicatie met een klant moeizaam zijn.

• ‘Ja op die ene pagina doet de knop het niet’

Ok, welke pagina? Welke knop? Met behulp van het Elementor Pro Notes systeem kan je klant direct klikken op de plaats waar er een probleem is, daar wordt een marker geplaatst kan de klant beschrijven wat er mis is. Jij krijgt hiervan bericht en kan vervolgens reageren, of natuurlijk het probleem direct oplossen. Meer informatie vind je in een wat oudere blogpost van mij.

Bonus Elementor Pro tip: Volg de cursus Elementor Pro voor Designers

Elementor Pro is op dit moment de meeste gebruikte visuele editor voor WordPress. Wist jij dat 8% van alle WordPress sites met behulp van Elementor zijn gebouwd? Gedegen kennis van Elementor Pro is dan ook onontbeerlijk om als WordPress designer ‘in de race’ te blijven.

Zelf werk ik met en schrijf ik over Elementor Pro sinds September 2017 en heb inmiddels een diepgaande kennis opgedaan over Elementor zelf, maar ook ervaring met de workflows die jou veel tijd kunnen besparen. Met het volgen van de cursus Elementor Pro voor Designers koop je dus niet alleen kennis, maar ook tijd. Wanneer je werkt volgens de methoden die ik je tijdens de cursus leer, dan merk je dat je iedere week een paar uur overhoudt. Het is aan jou, of je die uren aan meer werk wilt besteden, of liever met jouw vrienden en familie doorbrengt.

Twijfel niet langer en schrijf je nu in.