Elementor 3.26 BETA – Nu met een leuke conversion booster

Opnieuw iets in Elementor Pro 3.26 waar ik lang op heb gewacht

Gistermiddag zijn Elementor 3.26 en Elementor Pro 3.26 officieel in publieke beta gegaan. En hoewel het aantal nieuwe features niet zo groot is, is er wel één feature wat mij enorm aansprak, en dat is de mogelijkheid om vanuit een archief pagina ‘off canvas’ een pop-up te tonen. Ok, officieel heet het geen ‘pop up’, maar een ‘off-canvas’ paar het visuele effect is precies hetzelfde.

Op dit moment is het nog niet duidelijk wanneer Elementor Pro 3.26 beschikbaar komt, maar ik wilde je toch deze nieuwe feature laten zien, zodat je alvast na kan denken, hoe je dit in jouw eigen site zou kunnen verwerken.

De off-canvas pop-up

Tot Elementor Pro 3.25 was er een probleem wanneer je in een webshop een mogelijkheid zou willen hebben om ‘snel toegang’ tot een product te krijgen via een pop-up. Wanneer je een overzicht pagina had, zoals een archiefpagina of een loopgrid en je wilde gegevens in een pop-up tonen, dan werden -ongeacht waar je klikte – de gegevens van het eerste item in je overzicht getoond.

Met name met variabele producten, maar ook met andere producten, kan het conversie verhogend werken, wanneer mensen vanuit een overzicht direct kunnen bestellen en niet voor iedere bestelling naar de detail pagina hoeven te gaan.

Maar ook in andere situaties kan het handig zijn om gegevens vanuit een loopgrid in een pop-up te kunnen tonen. Denk hierbij bijvoorbeeld aan een fotogallerij, een pagina met team profielen of een pagina met testimonials.

Met Elementor 3.26 werkt dit wel. In plaats van de pop-up is hier gekozen voor de ‘off-canvas’ widget om het te implementeren.

De set-up voor de test

Voor de test gebruik ik een lokale WordPress site die draait onder LocalWP. Ik heb hierop Elementor 3.26 beta en Elementor Pro 3.26 beta geïnstalleerd. Als enig andere plugin heb ik ook FakerPress geïnstalleerd om blogposts te genereren. Mocht je zelf wat met FakerPress willen spelen, kan dat op de TasteWP site. Door in het Admin menu onder ‘FakerPress’ op de optie ‘Posts’ te klikken kan je automatisch gegevens aan laten maken.

De ‘off-canvas’ pop-up in de praktijk.

Het draait hierbij allemaal om de loopgrid. Je kan hiervoor een archiefpagina gebruiken, of een loopgrid op een gewone pagina plaatsen. Waar je dit doet maakt niet zozeer uit. In mijn voorbeeld maken we een loopgrid aan. We kiezen voor Templates -> Theme Builder en klikken op de plus op ‘Archive’.

In de themabouwer voegen we een loopgrid toe aan de container.

Omdat we in ons voorbeeld ‘Posts’ gebruiken, laten we dit zo staan. Wanneer je producten uit je WooCommerce webshop had willen gebruiken, had je hier voor ‘Products’ gekozen.

We klikken op de knop ‘Create Template’ en maken een eenvoudig template aan.

Het idee is om via de knop ‘Snel bekijken’ een pop-up te tonen, en bij lees alles naar de complete blogpagina te gaan.

Wanneer we de archief template nu bekijken ziet het er als volgt uit.

Om er een goede archiefpagina van te maken, gaan we ook de Query instellingen invullen.

We willen de ‘Current Query’ gebruiken, dus de achterliggende gegevens voor de archiefpagina.

In de volgende stap voegen we de ‘Off Canvas’ widget toe aan het template. Dus we gaan met de muis over de grid en klikken op ‘Edit Template’ om het template aan te passen.

We zoeken naar de ‘Off-Canvas’ widget en laten deze op de loop item template vallen. De positie is niet belangrijk.

In de afbeelding hieronder zie je de gebruikte instellingen.

Vervolgens maken we de ‘off canvas’ op. Ik heb zelf gekozen voor de titel, afbeelding, meta-data en samenvatting.

Vervolgens gaan we terug naar de template voor het loop item door ‘edit mode’ uit te zetten en koppelen de knoppen met de gewenste acties

Bij ‘Snel bekijken’ klikken we op de ‘stapel pannenkoeken’ rechts in het ‘Link’ veld en kiezen uit de lijst ‘Off-Canvas’.

Vervolgens klikken we op de moersleutel en kiezen de naam voor de Off Canvas widget die we op de pagina hebben toegevoegd. Standaard is dat ‘Off Canvas’.

En dat is alles om de ‘pop up’ zichtbaar te kunnen maken, maar voor de volledigheid gaan we ook de andere knop configureren, om naar de hele post te gaan.

We klikken dus ook op de stapel pannenkoeken van ‘Lees alles’

En hier kiezen we voor ‘Post URL’.

Vervolgens bekijken we de pagina in de browser en klikken op een ‘Snel Bekijken’ knop.

En voila, de gegevens van het geklikte item worden getoond.

Ik geef toe, het ‘design’ kan sterk verbeterd worden. Maar als voorbeeld ‘hoe het werkt’ is het denk ik wel duidelijk.

Ad Blocker trigger voor pop-ups

En nu we het toch hebben over dingen die ‘opspringen’, Elementor heeft aan de pop-up triggers een extra trigger toegevoegd. Een trigger waardoor een pop-up geactiveerd wordt door AdBlockers. Dat kan handig zijn, wanneer je bijvoorbeeld vensters opent vanuit je website.

Bij het opslaan van je pop-up kan je een trigger voorwaarde geven. Aan deze voorwaarden is ‘AdBlock Detection’ toegevoegd. Als extra kan je opgeven hoeveel seconden na het laden van de pagina de pop-up getoond moet worden.

Je site zo bouwen dat je bezoeker geen ‘AdBlock Detection’ nodig heeft is natuurlijk altijd een beter idee.

Andere aanpassingen

‘Unify Style’ voor Product afbeeldingen

Wanneer Elementor een nieuwe beta aankondigt, wordt meestal ook aangegeven hoe mensen dit kunnen testen. Met ‘Unify Style’ voor product afbeeldingen ontbreekt iedere vorm van ‘handleiding’ om dit te proberen, dus ik kan niets uit eigen ervaring delen.

Maar volgens de release note voor de eerste beta van Elementor 3.26 zo je via AI de afbeeldingen op een product pagina of op een product overzicht ‘in eenzelfde stijl’ kunnen brengen.

Je hoort hier meer over zodra ik weet hoe het te testen.

Renderen van Gutenberg Block Widgets

In de WordPress widgets is één van de voorkomende widgets een Gutenberg Block widget. De HTML code van Gutenberg blocks heeft behalve ‘echte’ HTML ook verschillende instructies binnen de code, die tot en met 3.25 niet goed gerenderd (‘getekend’) werd. Vanaf 3.26 zal dat dus wel zo zijn.

Voor de duidelijkheid, het is niet mogelijk om deze widgets visueel te editen binnen Elementor, het is gewoon een ‘cut and paste’ van de block code, die nu goed gerenderd wordt.

Een nieuwe serie optimalisaties aan de HTML

Er is een nieuwe functie in de ‘Alfa’ status toegevoegd aan Elementor 3.26 waarbij in veel gevallen de ‘inner div’ van een widget is verwijderd, om de code nog ‘slanker’ te maken. Je kan deze functie onder Elementor -> Instellingen -> Functies activeren, maar doe dit voorlopig niet in een productieomgeving.

Wil je op de hoogte blijven?

Wil je op de hoogte blijven met betrekking tot de veranderingen in Elementor, schrijf je dan in op de WordXPression nieuwsbrief door het formulier onder aan de pagina in te vullen.