Met deze tips voor Elementor wordt het nog leuker!
Nog meer tips voor Elementor…
In het verleden heb ik een tweetal blogartikelen geschreven over het werken met Elementor, namelijk
en
Er worden echter steeds nieuwe zaken aan Elementor toegevoegd die meer dan de moeite waard zijn en het is daarom niet verwonderlijk dat ik opnieuw behoorlijk wat kan vertellen over Elementor en die zaken die het werken met Elementor nog leuker maken.
Dus opnieuw in dit blogartikel enkele tips voor Elementor.
Ik ga er hierbij van uit, dat je minimaal de op dit moment meest recente versie van Elementor gebruikt (versie 3.4) en dat ook de eventuele versie van Elementor Pro die je gebruikt ook helemaal up to date is.
Elementor experiments
Niet alle opties zullen mogelijk direct zichtbaar voor je zijn. Dat heeft onder andere te maken met het feit dat een aantal van de functies die ik bespreek op dit moment nog ‘experiments’ zijn. Afhankelijk van of je met een ‘schone’ Elementor installatie begint (de meeste ‘experiments’ staan dan al aan) of een bestaande installatie hebt geupdate (een aantal experiments zal ‘uit’ staan).
Hoe Elementor ‘experiments’ werkt lees je in deze blogpost.
Tip 1 : Pop ups tonen via alle klikbare elementen
Zo’n anderhalf jaar geleden heb ik een artikel geschreven over Elementor pop ups op ‘non clickable places’. Toen had je daar nog een extra plugin voor nodig. Inmiddels hoeft dat niet meer. Want Elementor heeft hier zelf voorzieningen voor getroffen.
Nog even het probleem heel in het kort: Al vanaf het allereerste begin was het mogelijk om pop ups de activeren door het gebruik van de ‘Dynamic Action’ velden van Elementor Pro. Hier heb ik in het verleden ook over geschreven. Maar helaas: Niet alle widgets voor Elementor hebben dit soort dynamische velden en het activeren van een pop up op zo’n manier is dus slechts voor een beperkt aantal widgets mogelijk.
De plugin ‘Pop Up Trigger URL for Elementor Pro‘ maakt het mogelijk om voor ieder veld met een klikbare URL een link in te voegen die een pop up activeert… maar wel enigszins omslachtig.
Sinds enige tijd heeft Elementor Pro (Pop ups komen alleen voor in Elementor Pro) een eigen functie, waarmee je zelf kan bepalen wat er ‘geklikt’ moet worden om een pop up te activeren.
En het aardige is, dat het niet eens een element met een URL hoeft te zijn.
Hoe werkt dit? Wanneer je in de Elementor template bouwer een nieuwe popup aanmaakt, of een bestaande popup opent en je op het tandwiel linksonder in het scherm klikt, ga je naar het scherm met de instellingen van de pop up.
Ga je vervolgens naar het tabblad ‘Geavanceerd’, dan zie je onder meer het veld ‘Open By Selector’. Nu geef ik de popup een naam, die alleen uit cijfers, letters ‘dashes’ (-) en ‘underscores’ (_) mag bestaan. Ook zonder spaties. Die naam vul ik in bij ‘Open by Selector’, maar zet hier een punt voor. Dus als ik hem bijvoorbeeld ‘mijn-eerste-popup’ zou willen noemen, vul ik de naam ‘.mijn-eerste-popup’ in.
Wat er nu zal gebeuren is dat ieder element wat via CSS diezelfde naam heeft gekregen als ‘activator’ voor die pop up zal werken, wanneer er op geklikt wordt.
Zonder ook maar iets van CSS te weten, kan je nu makkelijk de koppeling maken tussen een Elementor Widget op een pagina of post of in een template en die specifieke pop up.
Iedere widget heeft namelijk onder ‘Geavanceerde instellingen’ een mogelijkheid om hier een ‘Selector’ aan toe te voegen, een stukje ‘code’ wat het element via CSS identificeert.
Bij CSS-classes vul ik nu de naam zonder punt in. Dus in ons voorbeeld ‘mijn-eerste-popup’.
Hierbij moet ik enkele kanttekeningen maken :
- De popup zal geactiveerd worden, wanneer er op de widget zal worden geklikt. Bevat de widget zelf ook links, dan zijn daarmee de links in de widget zelf niet meer ‘bereikbaar’.
- Dit is geen cursus CSS. Ik ga er dus niet dieper op in hoe je specifieke elementen binnen een widget zelf ‘pop up klikbaar’ kan maken. Ben je ervaren met CSS, dan kan je door in plaats van een enkelvoudige selector als ‘.mijn-eerste-popup’ natuurlijk ook samengestelde selectors gebruiken om bepaalde elementen in een widget zelf klikbaar te maken.
- Wanneer je een popup op een bepaalde pagina wilt gaan gebruiken, is het belangrijk om in de ‘Display conditions’ van de pop up de pagina waarop deze getoond moet worden op te nemen.
Tip 2: Meerdere ‘breakpoints’ gebruiken voor een betere responsive weergave
Dit is één van die eigenschappen die je waarschijnlijk eerst zal moeten activeren via de ‘Experiments’. Zie boven de lijst met tips voor Elementor voor meer informatie.
Zoals je hopelijk weet, is Elementor zeer geschikt om responsive websites mee te bouwen. Je kan zo bijvoorbeeld bepaalde widgets of secties uitsluitend tonen, indien de site bekeken wordt met een specifiek apparaat.
Elementor ‘beslist’ welk apparaat het is op basis van het aantal pixels in de breedte van je beeldscherm. Standaard heeft Elementor hier een tweetal ‘breakpoints’ voor ingesteld, die je in de site settings voor Elementor kan veranderen.
Je hebt standaard dus 3 ‘ontwerp mogelijkheden’. Voor mobiele telefoon, voor tablet of voor desktop.
In veel gevallen volstaat dat prima. In een beperkt aantal gevallen zal dit echter niet genoeg zijn. Een aardig voorbeeld is een kleinere laptop. Het beeld is ’te groot voor een tablet’ en ’te klein voor een desktop’.
Ook staan de huidige Elementor breakpoints je niet toe om optimaal gebruik te maken van een ‘Wide Screen’.
In Elementor 3.4 zijn er dus extra breakpoints toegevoegd.
- Mobile Extra
- Tablet Extra
- Laptop
- WideScreen
Heb je een geheel verse Elementor installatie, dan zullen deze extra breakpoints gelijk beschikbaar zijn. Bij een bestaande installatie, zal je dit onder ‘Experiments’ eerst moeten activeren.
Nadat je dat gedaan hebt, zal je ook nog een keer onder the ‘Site Settings’ in the Elementor editor moeten doen. Daar geef je aan welke breakpoints je wilt gebruiken voor je site.
Op de site van Elementor vind je een duidelijke video die je dit stap voor stap laat zien. Voor het gemak heb ik hem ook in deze post opgenomen.
Tip 3: Inline ‘Font Awesome’ gebruiken
‘Font Awesome’ is een iconen bibliotheek, opgeslagen als een font bestand. Dit betekent eigenlijk, dat je in één download actie een groot aantal ‘iconen’ kan downloaden, die je op de site gebruikt. En dat kan de download tijd sterk bekorten, als je de fonts intensief gebruikt.
In Elementor zijn de iconen die ‘meegeleverd’ worden Font Awesome iconen. En dat is geweldig, wanneer je veel iconen op je site gebruikt.
Gebruik je er echter maar een paar, dan is dat grote ‘Font Awesome’ bestand letterlijk ‘overload. Sinds Elementor 3.4 (in 3.4 nog steeds een experiment, dus je zal eerst ‘Font-Awesome inline’ moeten activeren) heb je ook de keuze om Font Awesome ‘inline’ te laden. Dat wil zeggen, dat de code -als SVG- in je HTML wordt opgenomen. Dat is gewoonlijk een kleine uitbreiding van je HTML code, maar geen extra bestanden om te downloaden.
Op een site met een beperkt gebruik van iconen, kan dit de site enorm versnellen.
Wanneer je deze optie aan hebt staan, zal Elementor zelf besluiten of een SVG bestand zal worden opgenomen in de pagina, of het font bestand zal worden gebruikt. Je hoeft hier zelf dus niet bij na te denken.
Tip 4: Meer sites? Gebruik een ‘Template Kit’
Een ’template kit’ is een set van templates die je kan gebruiken om een nieuwe site op te zetten. En als zodanig kan een template kit je heel wat werk besparen. Nu biedt ‘Envato’ een groot aantal template kits aan die je kan gebruiken om te starten met een Elementor (Pro) website,
Maar wat nu, wanneer je een eigen ontwerp hebt, wat je wilt kopiëren naar een andere site. En om het nog wat uitdagender te maken, je wilt hetzelfde ontwerp, maar andere kleurstellingen gebruiken?
Je kan natuurlijk Elementor gebruiken om de templates te exporteren en opnieuw te importeren. Helaas gaat er dan toch het één en ander verloren aan informatie over het design.
Een andere optie is gebruik te maken van de Envato plugin ‘Template Kit Export‘ om jouw ontwerp te exporteren van de ene site en ‘Template Kit Import‘ om je ontwerp op de andere site te importeren.
Meer tips voor Elementor?
Elementor is nog steeds in ontwikkeling en biedt steeds nieuwe mogelijkheden. Zolang Elementor blijft groeien, zal ik tips over Elementor blijven geven? Wil je deze waardevolle informatie niet missen, dan kan je twee dingen doen.
Je kan je inschrijven voor de browser push berichten. Wanneer je klikt op de rode bel linksonder de pagina, dan krijg je instructies wat je moet doen om regelmatig niet alleen tips voor elementor, maar ook andere waardevolle informatie in je ‘push berichten’ voor je browser te ontvangen.
Iets anders wat je kan doen om je op de nieuwsbrief aan te melden. Onder deze pagina zie je een formulier om je aan melden voor de WordXPression nieuwsbrief.
Maar wat je ook doet, en wat je ook wilt bereiken met je blog. Hier op de site van WordXPression vind je alle informatie die je nodig hebt.
Zelf aan de slag?
Plannen om zelf je website te bouwen met behulp van Elementor? Deze cursus helpt je stap voor stap dit waar te maken!
Nog niet uitgelezen?
Vind je dit artikel interessant? Mooi! Want ik heb nog veel meer te bieden. Op deze site vind je letterlijke honderden artikelen over WordPress, marketing, e-commers, e-learning en nog veel meer onderwerpen. Op zoek naar meer informatie? Kies één van de trefwoorden hieronder of tik een zoekopdracht in.
