Handige tips voor het werken met Elementor

Werken met Elementor leuk gemaakt

Enkele maanden geleden heb ik een artikel geschreven over het werken met Elementor. Nu blijft Elementor in beweging en het verbaasde mij eigenlijk niets, dat enkele maanden later er weer een aantal nieuwe functies zijn toegevoegd. En omdat je mogelijk niet iedere dag op zoek bent naar wat er ‘nieuw in Elementor’ is, is het denk ik een goe idee om regelmatig te schrijven over de mogelijkheden van deze toch wel heel mooie pagebuilder.

De hotspot widget

Eén van de dingen waar ik zelf eigenlijk het meest over te spreken ben is de ‘hotspot widget’. Het is een ‘Pro’ widget, dus je hebt er alleen beschikking over, indien je ook de ‘Pro’ versie van Elementor hebt. Nu zijn er natuurlijk talloze plugins die je kan gebruiken om ‘hot spots’ in je pagina’s toe te voegen, maar het is toch altijd wel prettig, wanneer je hier geen extra plugins voor nodig hebt.

Wat is een ‘hot spot’?

Of eigenlijk, ‘wat is een hot spot image’. Het kan niet anders dan dat je dit al vaker gezien moet hebben, maar wellicht kende je de term niet.

Een ‘hot spot’ is een ‘plaats’ op een afbeelding waar je op kan klikken om daarna iets anders te laten gebeuren. Bijvoorbeeld een pop up tonen, navigeren naar een andere pagina of wat dan ook. Alleen jouw fantasie is de beperkende factor.

En ‘hotspots’ kan je op verschillende manieren creatief inzetten. Laten we eens een paar mogelijkheden bekijken.

Een hotspot als creatief ‘navigatiemiddel’

Je kan -bijvoorbeeld op een homepage- een hotspot gebruiken als ‘navigatiemiddel’, als een mogelijkheid om naar andere pagina’s te gaan. Je kan hierbij bijvoorbeeld denken aan een homepage voor je webshop, waarin je in één foto verschillende mensen in kleding hebt staan die je verkoopt. Bij iedere kledingstuk staat een hotspot… klik je bijvoorbeeld op de hotspot van een t-shirt wat iemand aan heeft, wordt je naar de productcategorie ’t-shirts’ gestuurd.

Of je hebt een plattegrond van een museum… klik je op een hotspot, krijg je de collectie in die locatie te zien.

Wanneer je een hotspot als creatief navigatiemiddel gebruikt, denk er dan vooral aan, dat het een secundair navigatiemiddel moet zijn. Navigeren met hotspots op een telefoon kan behoorlijk lastig zijn en een ‘gewoon’ menu met menukeuzes mag eigenlijk niet aan je site ontbreken. Zelfs niet wanneer je hotspots gebruikt.

Een hotspot als ‘legenda van kenmerken’

Een ander gebruik van hotspots is als ‘legenda van kernmerken’ in een productbeschrijving. In plaats van een wat saaie lijst met de voordelen van je product, kan je ook een foto van het product plaatsen, met op de foto ‘hotspots’ die aangeven hoe en waarom een bepaald kenmerk toch wel heel gunstig is. Plaats hotspots op de foto met een korte beschrijving van het voordeel. Klikt iemand erop, dan komt er een meer uitgebreide beschrijving.

Een hotspot als educatief hulpmiddel

Visueel leren is makkelijker leren. En spelenderwijs leren ook. Het is niet voor niets dat we onze kinderen al van jongs af aan speelgoed geven om dingen te ontdekken. Eén van de dingen die tegenwoordig ieder kind wel lijkt te hebben is zo’n ‘bord’ met een aantal dieren erop. Klik je op zo’n dier, krijg je het geluid van dat dier te horen.

Je kent het vast wel.

Maar ook voor ‘grote kinderen’ als jij en ik kan een afbeelding met interactieve elementen een goed hulpmiddel zijn om je kennis te testen, of nieuwe kennis op te doen. Een klant van mij heeft zo bijvoorbeeld een online leeromgeving over ‘veiligheid in huis’, bedoeld voor nieuwe ouders.

Eén van de onderdelen van de cursus is een afbeelding met hotspots (zij heeft die afbeelding opgebouwd met behulp van H5P, niet met behulp van Elementor, omdat Elementor die functie toen nog niet had) van een huiskamer. Op de foto staan verschillende hotspots en wanneer je op zo’n hotspot klikt, dan lees je iets over het risico voor kleine kinderen rond die hotspot en krijg je een popup met een video te zien om dat te vermijden.

Een indruk

Om je een indruk te geven van de mogelijkheden van de Elementor Hotspot Widget laat ik je graag de onderstaande video van Elementor zien.

De video playlist

Een tweede widget nieuw in Elementor is de video playlist. Met behulp hiervan kan je vrij eenvoudig een ‘playlist’ van verschillende video’s laten zien. Opnieuw, dit is iets wat je al met veel verschillende plugins kan implementeren, het aardige van deze widget in Elementor is echter, dat je hier geen extra plugin voor nodig hebt.

De video playlist laat op ongeveer 3/4 van het scherm een video zien, met daarnaast een lijst met een opsomming van de video’s die aan deze playlist zijn toegevoegd. Je kan hier overigens enorm veel zelf instellen, waardoor je toch wel een uniek presenterende lijst kan maken.

Enkele tips om een videoplaylist te gebruiken

Een ‘catalogus’ van je videos op YouTube

Wil je je bezoekers laten zien, wat je allemaal op YouTube hebt gepost? Een video playlist op een pagina van je site is een compacte en overzichtelijke weergave daarvan.

Online minicursus

Hoewel een video playlist absoluut nooit een ‘vervanger’ kan zijn voor een online leeromgeving, kan zo’n playlist je wel een extra dimensie aan je LMS toevoegen. Je kan bijvoorbeeld relatief snel een ‘minicursus’ samenstellen voor het verzamelen van email adressen.

Of je kan de eerst x videolessen in je cursus via de salespage van je cursus beschikbaar stellen, zodat de cursist een idee krijgt wat je aanbiedt in de cursus.

Een ander krachtig gebruik van de video playlist is binnen de cursus zelf.

Instructievideos

Wanneer ik zelf online cursussen volg, dan zijn dat meestal cursussen waarbij ik geacht wordt zelf ook iets te doen. Het vervelende van zo’n cursus is echter, dat de instructeur maar door blijft praten, waardoor ik regelmatig op de pauzeknop moet klikken.

Hoeveel makkelijker zou het zijn, wanneer er automatisch gepauzeerd zou worden, wanneer ik aan de gang zou moeten met een bepaalde taak?

Door een les op te splitsen in losse videofragmenten en ieder fragment op te nemen in de speellijst, kan je exact dat voor elkaar krijgen.

Je gebruikt de video playlist dus niet als hulpmiddel om alles direct af te spelen (je zou dan ook de mogelijkheid missen om de voortgang bij te houden), maar om één les op te splitsen in een aantal hapklare videobrokken.

Een ‘demo’ van je muziek, kunst, video of welk product dan ook wat je aanbiedt

En natuurlijk kan je een video playlist ook gebruiken om je muziek te laten horen, je kunstwerken te laten zien, of als een soort gecombineerde ‘demoreel’ te gebruiken voor jouw video werk.

Een impressie

Wie kan je beter laten zien wat je allemaal kan doen met die playlist, dan de maker van Elementor zelf?

Laat conditioneel bepaalde widgets of sections zien

Elementor beschikt over functies om bepaalde onderdelen al dan niet te tonen op specifieke apparaten. Zo kan je bijvoorbeeld bepaalde widgets verbergen op mobiele telefoons. Dit vind je in de optie ‘Responsive’ onder de ‘Advanced’ tab van bijna iedere widget, kolommen en secties.

Wil je onderdelen op basis van andere criteria verbergen, dan zijn er talloze plugins die dit soort functies bieden als onderdeel van een ‘widget bundle’. Maar wat nu, wanneer je al die extra widgets niet hoeft te hebben, maar wel graag de mogelijkheid wilt hebben om bepaalde onderdelen van de pagina te verbergen of zichtbaar te maken. Bijvoorbeeld voor een specifieke gebruikersgroep, op basis van datum tijd (een aanbieding’ automatisch verbergen, wanneer de periode is afgelopen bijvoorbeeld) of op andere gronden?

Met de plugin ‘Visibility Logic for Elementor‘, een gratis plugin, doe je dat in een handomdraai.

Gegevens aanpassen aan de front-end

Alweer een aardig tijdje geleden heb ik een blogpost geschreven over ‘Rapid Application Development‘ met Elementor en plugins als Advanced Custom Fields, PODS en Toolset. Wat in mijn voorbeelden uit die blogpost niet mogelijk is, is formulieren toe te voegen die door jouw bezoekers / gebruikers aangepast kunnen worden vanaf de frontend. Toolset en PODS hebben hiervoor ingebouwde functies, maar Advanced Custom Fields (ACF) biedt dit niet.

Met de plugin ACF Frontend is dat allemaal wel mogelijk geworden. Met ACF frontend kan je formulieren bouwen die gekoppeld zijn aan bepaalde (custom) post types en aan deze post types gekoppelde velden die je hebt aangemaakt in ACF. Het is een heel handige plugin, wanneer je wilt, dat mensen zelf content aan je site toe kunnen voegen.

Waar moet ik hierbij aan denken?

Stel, je hebt een site met recepten. Je wilt dat je bezoekers hier zelf recepten aan toe kunnen voegen. Je kan dan vrij makkelijk met bijvoorbeeld de CPT-UI plugin (besproken in het eerder genoemde artikel) een custom post type aanmaken, met ACF hier velden aan toevoegen en met de ACF Frontend een invulformulier aanmaken.

Hoe verschilt dit van Elementor Forms?

In hoeverre is dit anders dan de formulieren widget van Elementor?

Hier is maar één antwoord op mogelijk. Het is TOTAAL anders. Laten we beginnen met de functionele kant. Elementor Forms biedt invulformulieren aan om gegevens door te geven. Het is een éénmalige actie. Je bezoeker vult een formulier in, het wordt verwerkt. ACF Frontend biedt de mogelijkheid om content toe te voegen aan je website. Derden worden dus in staat gesteld om content toe te voegen (waarbij je overigens altijd de mogelijkheid hebt om het eerst goed te keuren voor het zichtbaar wordt).

Een tweede verschil is een visueel verschil. De Elementor formulieren kan je mooi opmaken. Met ACF frontend maak je als het ware de pagina die je normaal gebruikt om content toe te voegen zichtbaar aan je front-end. Niet fraai opgemaakt dus, maar wel heel functioneel.

Waarin verschilt dit van Gravity Forms?

Gravity Forms (in de duurdere opties) biedt ook de mogelijkheid om content toe te voegen via de front-end. Het verschil tussen Gravity Forms en ACF Frontend is dat Gravity Forms ‘eigen’ velden biedt voor het toevoegen van de content, en je dit op kan maken zoals je wilt.

ACF Frontend biedt -opnieuw- een ‘gestripte’ pagina aan voor het toevoegen van content. Je hebt dus geen controle over de presentatie (nadeel), maar wel volledige beschikking over krachtige zaken als de block editor (voordeel).

Even zelf zien?

Zelf zien hoe dit werkt? Bekijk dan deze video!

Blijf bij!

Of het nu gaat over Elementor, e-Commerce, e-Learning of welk ander WordPress gerelateerd onderwerp dan ook, de beste manier om bij te blijven is regelmatig de blog van WordXPression te lezen. Mis daarom geen blogpost en abonneer je op de browser push berichten door op de rode bel links onder op de pagina te klikken en de aanwijzingen te volgen.

Heb je nog geen WordPress website, of is je site toe aan vervanging? WordXPression bouwt websites met gebruik van Elementor Pro. Voor informatie, kijk naar de WordPress XPress of de WordXPression Basix aanbiedingen.