Tien handige tips over het werken met Elementor

Tien zaken die misschien in Elementor 3+ niet direct voor de hand liggen.

Elementor (Pro) is een krachtige page- en theme designer om jouw website vorm mee te geven. En ondanks het feit dat grote delen van Elementor redelijk intuïtief zijn, stelt het werken met Elementor 3+ je soms voor enkele uitdagingen. Vandaar dat ik je in deze blogpost graag op gang wil helpen met enkele belangrijke tips die het werken met Elementor eenvoudiger voor je maken.

1. Maak gebruik van de Globale Instellingen

In Elementor vind je onder de ‘Site Instellingen’ boven aan het menu de twee menu items voor de globale instellingen. Je kan namelijk voor de hele site zowel de kleuren als de lettertypen als globale waarden instellen.

Tot Elementor 3.0 was het zo, dat het mogelijk was om een viertal kleuren (Primaire kleur, Secundaire kleur, Tekst kleur en Accent kleur) in te stellen, maar sinds Elementor 3.0 kan je hier je eigen kleuren aan toevoegen. En dat is eigenlijk best een heel krachtige optie.

Werken met Elementor
Globale instellingen
Werken met Elementor
Globale Kleuren
Werken met Elementor
Globale lettertypen

Hierboven zie je de instellingen van de huidige WordXPression site. Zoals je op zal vallen, is hier heel wat meer gedefinieerd dan ‘slechts’ de vier voorgedefinieerde kleuren, zoals het voor Elementor 3.0 werd gedaan.

Het voordeel van het definiëren van deze globale instellingen is dat ik deze later ook globaal kan veranderen. Je ziet bijvoorbeeld, dat ik een lettertype ‘informeel’ heb gedefinieerd. Dat is een ‘handgeschreven’ lettertype wat ik op enkele plaatsen in het ontwerp gebruik. Zo ik in de toekomst willen besluiten dat een ander ‘handgeschreven’ type mij beter zou passen, dan zou ik het in voorgaande versies van Elementor overal met de hand aan moeten passen. Nu hoef ik het maar op één positie aan te passen.

Dit is vooral ook handig met een responsive ontwerp. Want het zou bijvoorbeeld mogelijk zijn, dat ‘Heading 1’ perfect is op desktop schermen, maar te groot is voor mobiel. Mocht ik dit later pas ontdekken, kan ik nog steeds de ‘Heading 1’ instellingen voor mobiele telefoons in één keer centraal aanpassen.

Globale instellingen ‘on the fly’ toevoegen…

Dat wil ook zeggen, dat je eigenlijk iedere toegevoegde kleur en ieder toegevoegd lettertype moet toevoegen aan deze globale instellingen. Dat kan je ook vrij makkelijk doen gelukkig.

Werken met Elementor
Typografie gebruiken
Werken met Elementor
Typografie toevoegen

In het eerste voorbeeld zie je wat er gebeurt, wanneer ik op het wereldbolletje naast de ‘Typografie’ voor de stijl van een widget klik. Ik krijg een lijst met de bestaande typografieën. Stel nu, dat ik het typografie voor ‘Quote’ zou willen gebruiken, maar dan net een slagje kleiner. Dan klik ik eerst op de typografie voor ‘Quote’. Daarmee wordt automatisch de instelling toegepast. Daarna klik ik op het potlood. Hier maak ik het lettertype kleiner door de afmeting aan te passen.

Naast ‘Afmeting’ zie je ook een icoon van een monitor staan. Klik ik daarop, dan zie ik drie plaatjes: Monitor, Tablet en Smartphone. Klik ik op de Smartphone, dan zou ik uitsluitend de instellingen voor een Smartphone aanpassen. Maar laten we even zeggen, dat we dat niet willen. We willen de afmeting voor alle devices aanpassen. Dus we geven de gewenste grootte voor het lettertype in.

Omdat we wellicht de ‘kleinere quote ‘ in de toekomst vaker willen gebruiken, klikken we op de +. Hiermee slaan we een nieuwe typografie instelling op. Er wordt ons om een nieuwe naam gevraagd ‘Quote – klein’ bijvoorbeeld, en we kunnen straks het lettertype voor kleinere quotes overal kiezen uit het lijstje met globale typen.

Met kleuren werkt het net zo.

2. De Navigator gebruiken

Onder in het palet met widgets vind je een icoon voor de ‘Navigator’. De tweede icoon van links.

Werken met Elementor

Bij het alledaagse werken met Elementor zit die navigator eigenlijk aardig in de weg. Eén van de redenen, dat ik hem zelden gebruik. Wanneer ik echter een widget of sectie ‘Sticky’ maak, een negative margin geef (waardoor hij met een andere widget of sectie kan overlappen) of absoluut positioneer, dan kan het zo zijn, dat één widget de andere widget bedekt en deze niet meer toegankelijk is om instellingen aan te passen.

Op zo’n moment is de navigator een uitkomst. Klik je namelijk op die navigator icoon, dan krijg je een pop up, waarin je de verschillende lagen, kolommen en widgets in je pagina kan zien. En heel makkelijk kan selecteren, ook als hij verstopt is onder een ander element.

Werken met Elementor
De Navigator geeft inzicht in de onderdelen waar je pagina uit opgebouwd is.

3. Eenvoudig instellingen kopiëren

In al die jaren dat ik Elementor gebruik zit de functie er al in, maar ik merk nog steeds, dat veel Elementor gebruikers niet op de hoogte zijn van een functie die het werken met Elementor een stuk makkelijker maakt.

Wanneer je een widget helemaal hebt ingesteld en je wilt een tweede -vergelijkbare- widget dezelfde instellingen geven, dan kan je eenvoudig in Elementor met de ‘kopieer functie’ de instellingen tussen de éne en de andere widget kopiëren. Wanneer je een widget hebt geselecteerd, toets dan CTRL+C, of uit het rechter muismenu ‘Kopieer’.

Selecteer nu de andere widgets en toets dan CTRL+SHIFT+V of ‘Plak Stijl’ uit het rechter muismenu.

Dit werkt alleen tussen gelijksoortige widgets. Je kan zo bijvoorbeeld niet de kleurinstellingen tussen een ‘Kop’ en een ‘Tekstbewerker’ widgets kopiëren.

4. Gebruik de nieuwe Thema Bouwer

werken met elementor

In the Thema Bouwer voor versie 3.0 was het vooral een kwestie van goede benamingen voor je Elementor Pro templates, om te weten welk template je aan moest passen. In versie 3.0 is het werken met Elementor een stuk makkelijker geworden met de nieuwe ‘Thema Bouwer’. Helaas is die niet standaard geactiveerd, en is het ook niet mogelijk dit als standaard keuze te doen. In de eerste 3.x versies was de Thema Bouwer wel de standaard keuze als ik klikte op ‘Templates->Theme Builder’, maar na enkele protesten van gebruikers die hier niet graag mee werkten, heeft Elementor de oude situatie hersteld.

Maak je nu die keuze krijgt je dus de oude situatie weer te zien, met rechts boven een roze knop ‘Try it Now’. Klik de daarop dan kan je visueel door de verschillende templates voor je thema navigeren. Iets wat het leven toch een stuk makkelijker maakt.

Ben je in Elementor zelf, dan kan je vanuit de Site Instellingen ook deze Thema Bouwer activeren. Leer deze te gebruiken. Het werken met Elementor wordt een stuk plezieriger en meer efficient wanneer je dit doet.

5. Bedenk hoe je plugins met Elementor kunt vervangen

Iedere plugin vertraagt je site en is een mogelijke bron van conflicten. Een groot aantal plugins is vooral bedoeld voor het aanpassen van de look and feel van je WordPress site. Denk hier bijvoorbeeld aan formulieren plugins, social share buttons, pop ups en talloze andere functies. Met het introduceren van Elementor heb je al deze plugins niet meer nodig, omdat je zeer veel functies met Elementor zelf kan bouwen.

In mijn blog heb ik verschillende voorbeelden gegeven. Lees deze eens door en probeer deze eens na te bouwen! Hoe meer je gaat werken met Elementor, hoe meer toepassingen je zal zien die plugins overbodig maken.

6. Gebruik je CSS met beleid!

werken met elementor

Een aantal malen kreeg ik via nieuwe klanten te maken met Elementor websites die door henzelf of een andere webbouwer waren gemaakt. En soms zagen die sites er heel fraai uit, maar waren een ramp te onderhouden. Eén van de nadelen van het werken met Elementor is namelijk, dat je vrijwel overal een property ‘custom CSS’ hebt, waaronder je CSS code kan verbergen om zaken aan te passen, die niet vanuit de properties aangepast kunnen worden. En sommige mensen zijn heel creatief in het verbergen van CSS onder iedere denkbare mogelijkheid, wat soms het werken met Elementor designs van een ander tot een ware nachtmerrie maakt. Er moet onder widgets, kolommen, secties, templates en pagina’s gezocht worden om het juiste CSS fragment te vinden.

Wil je het werken met Elementor voor zowel jezelf als eventuele andere mensen die ermee moeten werken plezierig houden, houdt dan rekening met de volgende regels:

werken met elementor
  • Plaats CSS het liefst op het hoogste niveau. Wanneer je in Elementor klikt op ‘Site Instellingen’, dan krijg je in het derde blok de optie ‘Aangepaste CSS’, Maak daar gebruik van.
  • Alleen wanneer je een template hebt, wat je op meerdere sites gebruikt, neem dan de CSS op in de ‘Aangepaste CSS’ van het template. Op deze manier hoef je het niet iedere keer opnieuw in te geven.
  • Uitsluitend wanneer je JavaScript code invoegt (zie volgende tip), waar ook CSS code bij hoort, voeg dan de CSS in onder de ‘Geavanceerde’ settings onder de sectie ‘Custom CSS’.

Zo houd je de verschillende CSS fragmenten daar, waar je ze ook kan verwachten te moeten onderhouden.

7. Hoe voeg je JavaScript in in Elementor?

Werken met Elementor

Ik krijg deze vraag regelmatig. En om gelijk maar duidelijk te zijn, er is geen ‘beste’ manier, er is alleen een aantal goede manieren. Voornamelijk afhankelijk van het doel van de JavaScript. In deze tip behandel ik de ‘klassieke’ manier en in de volgende tip een manier die sinds Elementor 3.1 beschikbaar is gekomen.

Om te weten wat de beste methode is, is het goed om te begrijpen wat JavaScript is, en hoe dit ongeveer werkt. JavaScript is een programmeertaal die gebruikt wordt om datgene wat jij in de browser ziet te manipuleren. Er zijn nog want andere zaken mee mogelijk maar laten we daar even niet naar kijken.

Sommige JavaScript moet aan het begin van het laden van een pagina worden opgestart. Bijvoorbeeld een stukje JavaScript wat wil meten, hoe snel een pagina wordt geladen. Andere JavaScript mag pas actief worden, op het moment dat de hele pagina is geladen, omdat het script de HTML van de pagina nodig heeft om te manipuleren.

En andere JavaScript fragmenten die toen iets specifieks op een specifieke plaats in het document.

Een aardig voorbeeld van deze laatste fragmenten is de code die gebruikt wordt om een ‘Opt-In’ formulier van een Marketing Mailer als MailChimp of ActiveCampaign op je pagina in te voegen of bijvoorbeeld de ‘badge’ van een beroepsorganisatie. Het formulier komt exact daar te staan, waar je de HTML code invoegt.

Voor deze toepassing kan je prima de ‘HTML Widget’ van Elementor gebruiken. Bedenk dat JavaScript binnen HTML altijd tussen de tags

<script> ... </script> 

moet komen te staan. De drie puntjes vervang je met je JavaScript fragment.

Hoort bij deze JavaScript code ook nog een stukje HTML? Dan kan je die mooi onder de ‘Advanced’ tab van de HTML widget plaatsen. Zie hiervoor ook de vorige tip.

Voor alle andere vormen van JavaScript, zie de volgende tip.

8. Gebruik de nieuwe ‘Custom Code’ functie in Elementor 3.1

Werken met Elementor

Moet je andere JavaScript, of wat voor andere code dan ook toevoegen, gebruik hiervoor dan de ‘Custom Code’ functie die sinds Elementor 3.1 voorkomt. Deze functie maakt ook header- en footer script plugins overbodig en is een stuk makkelijker in het gebruik.

Je vindt de nieuwe functie onder ‘Elementor->Custom Code’.

Wat kan je hier zoal mee toevoegen?

Soms kunnen diensten je vragen om te bewijzen dat een site de jouwe is, door in de headers van je site een specifieke ‘meta tag’ toe te voegen. Dit is bijvoorbeeld één van de manieren waarop je voor Google Search Console kan bewijzen, dat jouw site ook de jouwe is.

Een ander soort code wat je toe kan willen voegen is de eerder genoemde ‘JavaScript’ code.

Met behulp van de ‘Custom Code’ functie, heb je de mogelijkheid jouw code op een aantal plaatsen toe te voegen.

Laten we eens naar de pagina kijken.

Werken met Elementor

Het eerste wat ik in kan vullen is een titel. Dat is om makkelijk te onthouden, waar die code ook al weer voor bedoeld was.

Daarna moet ik een keuze maken, waar de code moet worden ingevoegd.

Dat kan op drie plaatsen zijn.

<head>

De code wordt toegevoegd in de header. Normaliter staat er bij zo’n codefragment aangegeven, dat het daadwerkelijk in de header moet worden ingegeven. We hebben het hier over de HTML header, het onderdeel van de HTML met ‘meta informatie’ over je pagina, niet over een heading, het deel van je layout aan de bovenkant van je pagina.

<body> – Start

Hier zet je de code neer die direct na de <body> tag in de HTML moet worden geplaatst. Ook dit vind je meestal in de instructies terug.

<body> – End

Hier zet je dus de code neer die net voor de </body> tag, de ‘sluit tag’ voor de body moet worden geplaatst.

Indien niet duidelijk wordt aangegeven waar de code geplaatst moet worden, probeer dan altijd eerst ‘<body> -End’. Om de eenvoudige reden, dat code die in de header wordt geladen het verdere laden van de pagina blokkeert, tot het moment dat het bestand helemaal is geladen. In veel gevallen zou de code ook prima helemaal aan het einde van het proces geladen kunnen worden, omdat de meeste JavaScript code die in de header wordt geladen betrekking heeft op het complete document. En die kan net zo goed wat later geladen worden.

Probeer dit overigens altijd uit in een staging kopie van je website, niet in de live site zelf. En wanneer je toch een staging kopie maakt, bedenk dan dat je bij het werken met Elementor niet altijd een licentie voor Elementor Pro nodig hebt, wanneer de naam van jouw staging kopie aan bepaalde eisten voldoet.

Priority

Vervolgens geef je een prioriteit aan het laden. Wanneer je meerdere custom code in hetzelfde onderdeel van de pagina laadt, dan bepaalt dit de laadvolgorde. Het kan nodig zijn hier wat mee te experimenteren. Doe ook dit weer op een staging kopie van je site.

En dan komt in het grote vlak de daadwerkelijke code die je in wilt voegen. Daar voeg je dan ook de code in.

Waar in te voegen?

Wanneer je de code opslaat, krijg je een ‘bekende dialoog’ van Elementor te zien. Die zie je namelijk ook, wanneer je aan wilt geven voor welke pagina’s een pop up of een template gebruikt moet worden. Je kan hier kiezen voor specifieke pagina’s of voor specifieke soorten pagina’s. Of gewoon op de hele website.

9. Gebruik Global Widgets en Template Widgets

Op een website heb je elementen die herhaaldelijk terug zullen komen. En één van de fijne dingen aan het werken met Elementor is dat er op allerlei manieren voorzieningen zijn, die het makkelijk maken deze terugkerende elementen te gebruiken. Het mooiste onderdeel is natuurlijk de ‘Theme Builder’ van Elementor Pro, maar er is meer wat het werken met Elementor makkelijk maakt.

Het eerste is natuurlijk de mogelijkheid om templates te maken en in te voegen in je pagina. Zo’n template kan je daarna naar hartenlust aanpassen. Dat is in sommige situaties handig, maar in andere situaties is het absoluut niet wat je wilt: Je wilt dat een bepaald onderdeel er altijd hetzelfde uit zal zien. En als je het veranderd, het ook overal verandert moet worden.

Voorbeeld : De ‘koop nu knop’

Eén van de mooie dingen van het werken met Elementor 3.0 en hoger zijn de globale instellingen. Stel je voor. Ik heb een prachtige ‘koop nu knop’ gemaakt. En na enig A/B testen ontdek ik, dat de gekozen kleur toch niet tot de beste conversie leidt. Gelukkig hoef ik niet alle knoppen aan te passen. Met één centrale aanpassing hebben alle ‘Koop nu’ knoppen de kleur die wel tot goede conversie zal leiden.

Maar wat nu, wanneer je ontdekt dat een andere tekst tot betere conversie zal leiden? Dan moet je nog steeds alle knoppen langs. Of toch niet?

Uit de manier waarop de vraag gesteld wordt, begrijp je natuurlijk al dat het ‘of niet’ zal zijn. Je kan namelijk iedere widget van Elementor met een rechtermuisklik bevorderen tot een ‘Globale Widget’. Dan wordt in je Widget Panel onder de tab ‘Global Widgets’ een nieuwe widgets opgenomen met exact alle instellingen die die ene widget heeft. Wil je die instellingen op alle plaatsen aanpassen? Pas één van de instanties van de Globale Widget aan, en het is overal op de site aangepast?

Is er één situatie waar je het toch anders wilt hebben? Ook geen probleem. Want je kan iedere instantie van zo’n globale widget weer ‘loskoppelen’. Vanaf dat moment zullen alle veranderingen die op die widget plaatsvinden exclusief voor die widget zijn.

Werken met de template widget

Bij het werken met Elementor heb je niet alleen de ‘globale widget’ als middel om terugkomende onderdelen makkelijk te beheren, maar je kan ook werken met de zogenaamde ‘template widget’.

Want een ‘globale widget’ heeft alleen betrekking op een enkele widget. Maar stel nu dat je een andere situatie bij de hand hebt. Je hebt een site met een prijstabel met drie kolommen. En die prijstabel wil je op een aantal verschillende plaatsen tonen. Bijvoorbeeld op je homepage, je ‘pricing page’ en op verschillende landingspagina’s. Maar in alle gevallen, wil je dezelfde tabellen tonen. Ook wanneer je bijvoorbeeld de prijzen aanpast.

In Elementor is is een prijstabel één enkele kolom en één enkele widget. Je hebt dus drie widgets nodig om een complete prijstabel met drie opties te maken. Daar zou ik dus drie ‘global widgets’ voor kunnen gebruiken. Maar het kan nog handiger.

Wanneer ik namelijk een ‘sectie template’ maak met drie prijskolommen en deze netjes opmaak zoals ik deze wil hebben, dan kan ik deze sectie template hergebruiken door een ‘Template Widget’ in te voegen. Overigens, de ‘Template Widget’ komt alleen voor bij Elementor Pro, heb je de onbetaalde versie, dan zal je er vergeefs naar zoeken.

Door nu de juiste ‘sectie template’ te kiezen in de dropdown van deze ‘Template Widget’ maak je de template actief.

10. Templates en Global Widgets in niet-Elementor pagina’s gebruiken

En wanneer je nu geen Elementor Pro hebt? Moet je dan toch alle pagina’s na gaan lopen om zaken aan te passen?

Nee hoor, want dan heb je nog steeds de shortcode widget. En daar kan je iets minder gebruikersvriendelijk exact hetzelfde mee doen.

Ga je namelijk naar ‘Templates->Opgeslagen Templates’, dan zie je dat achter iedere template en iedere global widget een shortcode staat. Door de shortcode op te nemen in bijvoorbeeld jouw Gutenberg pagina, zal dat specifieke Elementor onderdeel netjes ingevoegd worden op de plaats waar je shortcode gebruikt.

Specifiek voor Gutenberg is er overigens ook de Elementor Blocks for Gutenberg plugin, waarmee je het template uit een lijst kan kiezen. Persoonlijk geef ik er de voorkeur aan deze plugin niet te gebruiken, omdat ik slechts heel sporadisch Elementor elementen invoeg in Gutenberg en het toch weer scheelt in het aantal geïnstalleerde plugins door deze niet te gebruiken.

Zelf je Elementor Website bouwen?

Met de cursus ‘Basiscursus bouw zelf je WordPress website met Elementor Pro‘ leer jij hoe je zelf jouw website kan bouwen. Wil je leren werken met Elementor Pro, dan is dit een goed punt om bij te beginnen.

Laat je het werken met Elementor Pro liever aan een ander over? Maar wil je wel, dat je website makkelijk aanpasbaar is? Weet dan dat WordXPression bij het bouwen van websites bij voorkeur Elementor Pro gebruikt. Of dit nu een Basix Website, een WordPress XPress site, een WooCommerce webshop of een Online Leeromgeving betreft.

Wees eens aardig en deel dit met je vrienden
Enkele trefwoorden om vergelijkbare posts te vinden:

Word je website de baas. Neem vandaag nog contact op!

Contact Information

WordXPression 
Imkersdreef 525
7328DG Apeldoorn
06-10449807 (van 9:00 tot 17:00 van ma-vr)

KVK : 75580152 

Social media
Stuur een bericht

Flinke kortingen op cursussen van WordXPression.