Elementor Pop ups op ‘non clickable places’

Hoe je Elementor Pop up menu’s kan gebruiken op ‘onmogelijke plaatsen’

Elementor is cool. En Elementor Pro maakt Elementor nog veel cooler. Eén van de mooie dingen aan Elementor Pro vind ik zelf de mogelijkheid om zelf pop ups te maken.

Natuurlijk er zijn talloze plugins voor pop ups, maar het verschil tussen die plugins en Elementor Pro pop ups is dat je in een Elementor Pop up letterlijk ieder content element kan gebruiken, zoals ik je ook regelmatig in blogposts in het verleden heb laten zien.

Het kost bijvoorbeeld weinig moeite om zelf een ‘abandoned cart‘ pop up te maken voor je webshop.

En dank zij de ‘magische actie knoppen‘ in Elementor kan je pop ups laten verschijnen als gevolg van vrijwel iedere klik actie.

Vrijwel iedere klik actie? Ja. Want helaas lukt het niet, wanneer een element op je pagina geen Elementor widget is. En zelfs als het wel zo is, zijn niet alle onderdelen van Elementor widgets ‘klikbaar’.

Maar in deze blogpost laat ik je zien, hoe je dit op kan lossen. Hierbij is wel een waarschuwing op zijn plaats, we gaan hier en daar wat HTML en JavaScript code gebruiken. So fasten your seatbelts and enjoy the ride.

Een waarschuwing vooraf

Om dit alles mogelijk te maken heb je Elementor Pro nodig. Aan alleen de gratis versie van Elementor heb je niet genoeg.

Ook zullen de beschreven methodes uitsluitend werken, wanneer je in de ‘Display options’ van een pop up deze pop up voor de specifieke pagina waarop je deze wilt gebruiken hebt geactiveerd.

Een login-link in het menu

Bij het opzetten van de T-Shirt Academy wilde ik het inloggen op de Academy mogelijk maken vanuit een pop up. Dat was natuurlijk met Elementor geen enkel probleem. Wat wel een probleem was, was het kunnen koppelen van een menu item met een pop up. Dan kon namelijk niet zomaar.

Maar dan maar op een andere manier. Omwille van de tijd besloot ik geen apart login menu item te maken, maar gewoon een login knop.

Maar ja, je kan natuurlijk voor jezelf de ‘makkelijkste weg’ kiezen, maar klanten hebben soms behoorlijk duidelijk gedefinieerde eisen. En toen ik voor een klant toch echt een ‘login pop up’ gekoppeld aan een menu item moest maken, moest ik toch even wat dieper graven.

Ik verwachte te moeten gaan coderen, maar gelukkig bleek er een plugin te zijn, die mij precies helpt, met wat ik nodig had. ‘Pop Up Trigger URL for Elementor Pro‘.

Wanneer je deze plugin opzoekt in de WordPress repository, dan zie je op het moment, dat ik dit artikel schrijf een waarschuwing staan, dat deze plugin niet getest is met recente versies van WordPress. Maak je hierover geen zorgen. Het is een eenvoudig gecodeerde plugin, die waarschijnlijk lang compatible met WordPress en Elementor Pro zal blijven, aangezien de functie van deze plugin wel heel ‘basic’ is.

Wat doet deze plugin?

Nu is het activeren van een Elementor Pro Pop Up eigenlijk heel eenvoudig. Je roept een vrij ingewikkelde URL aan, die op zijn beurt aan het Elementor subsysteem doorgeeft, dat een pop up geactiveerd moet worden. Zodra je weet, wat die URL is, dan kan je in principe vanuit iedere positie en iedere actie zelf een pop up openen.

De kunst is natuurlijk te ontdekken, wat die URL dan is, want deze wordt nergens zomaar zichtbaar gemaakt.

En dat is precies wat deze plugin doet. Na het installeren van de plugin worden er geen nieuwe menu opties zichtbaar, gebeuren er geen spectaculaire dingen, maar wanneer je naar je overzicht van Elementor Pop Ups gaat (Templates->Popups in het Dashboard menu), dan is er een extra knop in het overzicht met pop ups gekomen.

Wanneer je klikt op de knop ‘Show URLs’, dan wordt de volgende dialoog geopend

In dit scherm zie je een drietal URL’s staan. Eén op een pop up te openen, één om een pop up te sluiten en één om ‘het omgekeerde’ te doen, open pop ups worden gesloten, gesloten pop ups worden geopend.

In de meeste gevallen zal je de ‘Open’ functie willen gebruiken. Dus die URL kopieren we.

URL toevoegen aan het menu

Ik ga ervan uit, dat je in zijn algemeenheid weet, hoe de WordPress menu editor werkt. Je gaat nu dus naar de menu editor. Dat kan je doen door op ‘Weergave->Menu’s’ te klikken. Je kiest het menu waaraan je de pop up wilt toevoegen en gaat nu in de menu editor naar ‘Aangepaste links’.

In het veld ‘URL’ plak je de gekopieerde URL en in het veld ‘Link tekst’ geef je de gewenste omschrijving in. Bijvoorbeeld ‘Inloggen’. Vervolgens plaats je het menu item op de juiste plaats in het menu.

Klikbaar maken van een tekst link

Het klikbaar maken van een tekst link gaat niet veel anders. Markeer de tekst die ‘klikbaar’ moet worden, plak de gekopieerde URL in het link veld en sla het geheel op.

Het klikbaar maken van ‘niet klikbare’ Elementor Widgets

Er is veel klikbaar in Elementor, maar helaas kan je niet zomaar overal op klikken. Wil je bijvoorbeeld dat een pop up zichtbaar wordt, wanneer er op een Section (Sectie) of Column (Kolom) wordt geklikt, dan moet je helaas wat extra doen. Maar ook zo’n situatie kunnen we oplossen.

Het voorbeeld wat ik hier geef is geldig voor alle Elementor Widgets. In het voorbeeld zelf ga ik uit van een ‘Section’ die ik klikbaar wil maken.

Ook ga ik ervan uit, dat je in zijn algemeenheid goed thuis bent met Elementor.

De widget een ID geven

Het eerste wat je moet doen is ervoor zorgen, dat je widget een ID heeft. Je zal straks namelijk vanuit JavaScript deze widget moeten benaderen en de makkelijkste manier is, indien jouw widget een unieke naam krijgt.

Een ID is uniek. Dit ‘unieke’ dat geldt voor de pagina niet voor de hele site. Dus een ID als ‘clickable-section’ mag best op andere pagina’s op de site voorkomen, maar beslist niet op dezelfde pagina.

HTML/JavaScript toevoegen

Het volgende wat we moeten doen is een Elementor HTML widget plaatsen op de pagina. Waar je dit precies op de pagina zal zetten maakt eigenlijk niet zoveel uit, want de inhoud hiervan wordt toch niet zichtbaar, maar om het geheel overzichtelijk te houden is het een goede gewoonte deze widget in de buurt te plaatsen van de widget die ‘klikbaar’ gemaakt moet worden. Moet een sectie of kolom klikbaar worden, zet deze widget dan in die sectie of kolom. Wil je een andere widget klikbaar maken, zet hem onder deze ‘klikbaar te maken’ widget.

In deze widget plaats je de volgende code. Deze code zal je enigszins aan moeten passen aan jouw specifieke situatie

<script>
document.getElementById("clickable_section").onclick = function() {myClickFunction()};


function myClickFunction() {
  var popUpURL = 'VOEG HIER DE URL TOE';
  window.open(popUpURL);
}
</script>

Natuurlijk moet de waarde ‘clickable_section’ overeenkomen met de waarde die je in de widget van het klikbare element hebt ingegeven. Heb je meerdere klikbare elementen op één pagina, moet ieder element zijn eigen naampje en een unieke code krijgen.

Hetzelfde geldt voor de functie ‘myClickFunction’. Voor de duidelijkheid zou ik de functie ook geen ‘myClickFunction’ noemen, maar in de functie beschrijven wat hij doet. Dus bijvoorbeeld ‘openLoginPopUp’. Denk er hier ook aan, dat in dit codefragment deze naam 2x voorkomt. Pas je de naam aan, pas hem op beide plaatsen aan.

En “VOEG HIER DE URL TOE” vervang je natuurlijk met de daadwerkelijke pop up URL zoals je deze dankzij de genoemde plugin gekregen hebt.

De Z-Index

Wanneer je nu je pagina opslaat en gaat testen zal het allemaal prima werken… tenzij je binnen de sectie of de kolom andere widgets hebt staan die op de één of andere manier interactie met de gebruiker verwachten. Zoals knoppen of formulieren. Klik je daarop, dan wordt je geconfronteerd met de pop up die je zojuist aan je sectie hebt ‘verbonden’. Behoorlijk irritant.

Dit komt, omdat de ‘klikbaarheid’ van de sectie de andere elementen eigenlijk min of meer ‘bedekt’. Alle elementen in de sectie zijn ook ‘pop up klikbaar’ geworden. Dat kun je voorkomen door de Z-Index van de elementen in te stellen die niet de popup moeten tonen als er op geklikt wordt.

Deze ‘Z-Index’ vind je op het ‘Advanced/Geavancerd’ tabblad van je widget.

Wanneer je deze waarde op 99 of zo instelt, zou je probleem verholpen moeten zijn.

Ben jij klaar voor een meer interactieve website?

Met tools als Elementor Pro kan er tegenwoordig heel wat meer met websites dan alleen een paar mooie pagina’s tonen. Wanneer je rondkijkt en zoekt op het sleutelwoord Elementor op deze site heb ik een groot aantal toepassingsgebieden beschreven.

Wanneer zelfbouw allemaal toch wat te ingewikkeld voor je is, kan je natuurlijk ook samen met mij jouw site bouwen. Daarvoor heb ik speciaal het WordPress XPress programma ontwikkeld. Een succesformule die ik sinds 2012 gebruik en waar inmiddels honderden ondernemers je in zijn voorgegaan.

De WordPress XPress formule kan ook worden gebruikt voor webshops of online leeromgevingen. Neem eens contact op voor meer informatie.