Wil je weten hoe je dankzij Hotspots een interactieve afbeelding maakt in WordPress Elementor en essentiële add-ons?
De afbeelding is een uitstekend hulpmiddel voor het overbrengen van informatie. Iedereen weet dat informatie die via het beeld wordt overgebracht — en de visuele vorm als geheel — gemakkelijker te begrijpen en te onthouden is.
In de context van internet kunt u veel afbeeldingsindelingen gebruiken. Van een infographic, een foto, een stripverhaal, een illustratie, enz….
Als u webinhoud wilt maken, zoals de anatomie van iets, stadsoriëntatiepunten, kaarten of routebeschrijvingen, kan het opbouwen van afbeeldingen met Hotspots een geweldig idee zijn.
Het idee van dit soort inhoud is om een ​​interactief beeld te bieden dat het voor uw lezers gemakkelijk maakt om de informatie die u overbrengt te begrijpen. U kunt hotspots toevoegen aan een afbeelding die een tooltip bevat voor elke hotspot. Hier is een voorbeeld.
Als u een website gebaseerd op WordPress is het maken van een afbeelding met hotspots niet zo moeilijk. U kunt er een maken met behulp van de module Essentiële add-ons .
Wat is de Essential Addons-module?
Essential Addons is een add-on voorElementor. Dit is een van de meest populaire mods met meer dan 2 miljoen downloads. Deze add-on voegt ongeveer 60 extra widgets toe aan uw Elementor.
Een van de widgets die wordt aangeboden door Essential Addons is EA Image-hotspots waarmee u een interactieve afbeelding kunt maken. Essential Addons zelf is een freemium-add-on, maar je moet de pro-versie gebruiken om afbeeldingen met Hotspots te maken, omdat de EA Image Hotspots-widget alleen beschikbaar is in deze versie.
Hoe de Essential Addons-module te gebruiken om afbeeldingen met Hotspots te maken
Eerst moet u Elementor- en Essential Addons-modules op uw WordPress installeren. Je kunt de pro-versie van Essential Addons erop krijgen website officieel. Terwijl je voor Elementor de gratis versie kunt gebruiken.
Zie ook: Hoe een globale widget in Elementor te gebruiken
De gratis versie van Elementor is beschikbaar in de directory van de WordPress Plugin dus je kunt het installeren door "elementor" te typen in het zoekvak van het installatieprogramma van de plug-in (Plug-ins -> Toevoegen).
Nadat Elementor en Essential Addons zijn geïnstalleerd, maakt u een nieuwe pagina (Pagina's -> Toevoegen) of een nieuw artikel (Artikelen – > Toevoegen) en bewerk het met Elementor. U wordt doorgestuurd naar de Elementor-editor nadat u op de knop hebt geklikt Bewerken met Elementor.
Voordat u de afbeeldingen met hotspots maakt, kunt u eerst de lay-out instellen. Open hiervoor het pagina-instellingenpaneel door op het tandwielpictogram in de linkerbenedenhoek van het linkerpaneel te klikken.
Lees ook: Hoe de berichtenwidget van Elementor te gebruiken
Stel de lay-out in het vervolgkeuzemenu in lay-out
Voeg een nieuwe sectie toe door op het pluspictogram in het bewerkingsvak te klikken en voeg de EA Image Hotspots-widget toe vanuit het linkerdeelvenster.
Voeg uw afbeelding toe door op de afbeeldingskiezer in het linkerdeelvenster te klikken.
optie openen hotspots in het linkerpaneel om de toegangspunten toe te voegen. De EA Image Hotspots-widget bevat standaard een hotspot. U kunt op het standaardtoegangspunt klikken om de inhoud ervan te bewerken.
Het type toegangspunt is standaard ingesteld op icon. Je kunt het wijzigen in Teksten of vertrekken Vide als je wilt.
Klik op het tabblad POSITIE om de positie van het toegangspunt in te stellen. Stel de X- en Y-posities in door de schuifregelaars te verslepen.
Klik op het tabblad TOOLTIP om de tooltip-inhoud toe te voegen. Activeer de tooltip en voeg uw inhoud toe in de editor. U kunt ook de positie van de tooltip instellen: boven, onder, links of rechts.
Klik op de knop om meer Hotspots toe te voegen VOEG EEN ELEMENT TOE in de sectie hotspots en herhaal de bovenstaande stappen om de hotspotpositie, tooltip-inhoud en tooltip-positie in te stellen.
Open de sectie Tooltip-instellingen om de grootte van de tooltips en het animatie-effect in te stellen.
Ga nu naar het tabblad Style om je hotspots en tooltips te stylen. Open eerst de optie Beeld om de afbeeldingsgrootte in te stellen.
Open sectie hotspot om hotpots aan te passen. U kunt de grootte, pictogramkleur (of tekst afhankelijk van het type hotspot dat u hebt geselecteerd), achtergrondkleur, randradius enz.
Ontdek ook: Gerelateerde items toevoegen in Elementor
Open de sectie Tooltip knopinfo aanpassen. U kunt de achtergrondkleur, tekstkleur, typografie (lettergrootte, letterfamilie, letterstijl) en breedte instellen.
Tot nu toe heb je met succes afbeeldingen met hotspots gemaakt. Je kunt spelen met het linkerpaneel om je afbeeldingen aan te passen met hotspots totdat je tevreden bent met het resultaat. Als u klaar bent, kunt u op de knop klikken pUBLICEREN om uw pagina te publiceren.
Voeg afbeeldingen met hotspots toe aan Gutenberg
Als u afbeeldingen met hotspots wilt toevoegen als ondersteuningsmateriaal voor het artikel waaraan u werkt, kunt u dit integreren met Gutenberg (de standaard WordPress-editor) met behulp van de plug-in Elementorblokken voor Gutenberg. Met deze plug-in kunt u een Elementor-sjabloon gebruiken als een Gutenberg-blok.
Om de afbeeldingen met bovenstaande hotspots op te slaan als een Elementor-sectiesjabloon, klikt u met de rechtermuisknop op de sectiehandgreep en selecteert u Opslaan als sjabloon.
Geef je model een naam en klik op de knop OPNEMEN.
Open het artikel waar je afbeeldingen met hotspots wilt toevoegen. Voeg een nieuw blok toe, selecteer Elementor-bibliotheek en selecteer de afbeeldingssjabloon met hotspots die u zojuist hebt gemaakt.
Koop Elementor Pro nu!!!
Conclusie
Alstublieft ! Dat is het voor dit artikel dat je laat zien hoe maak een interactieve afbeelding met Hotspots in WordPress dankzij Elementor en Essential Addons. Als u zich zorgen maakt over hoe u daar kunt komen, laat het hen dan weten in de commentaires.
U kunt echter ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren, raadpleeg onze gids op de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
