Vill du ta reda på hur du skapar en interaktiv bild med Hotspots i WordPress tack vare Elementor och Essential Addons?
Bilden är ett utmärkt verktyg för att överföra information. Alla vet att information som förmedlas genom bilden - och den visuella formen som helhet - är lättare att förstå och komma ihåg.
I webbsammanhang kan du använda många bildformat. Från en infografik, ett foto, en serie, en illustration, etc….
Om du vill skapa webbinnehåll som någots anatomi, stadslandmärken, kartor eller vägbeskrivningar kan bildbyggande med Hotspots vara en bra idé.
Tanken med den här typen av innehåll är att ge en interaktiv bild som gör det enkelt för dina läsare att förstå informationen du förmedlar. Du kan lägga till Hotspots på en bild som innehåller ett verktygstips på varje Hotspot. Här är ett exempel.
Om du har en webbplats baserat på WordPress är det inte så svårt att skapa en bild med hotspots. Du kan skapa en med modulen Viktiga tillägg .
Vad är modulen Essential Addons?
Essential Addons är ett tillägg tillElementor. Detta är en av de mest populära mods med över 2 miljoner nedladdningar. Detta tillägg lägger till cirka 60 ytterligare widgets till din Elementor.
En av widgetarna som erbjuds av Essential Addons är EA Image Hotspots som du kan använda för att skapa en interaktiv bild. Essential Addons i sig är ett freemium-tillägg, men du måste använda pro-versionen för att skapa bilder med Hotspots eftersom EA Image Hotspots-widgeten endast är tillgänglig på den här versionen.
Hur man använder modulen Essential Addons för att skapa bilder med Hotspots
Först måste du installera Elementor och Essential Addons-moduler på din WordPress. Du kan få proversionen av Essential Addons på den webbplats officiell. Medan för Elementor kan du använda gratisversionen.
Se även: Hur man använder en global widget i Elementor
Den kostnadsfria versionen av Elementor är tillgänglig i katalogen för Wordpress plugin så att du kan installera det genom att skriva "elementor" i sökrutan för plugininstallationsprogrammet (Plugins – > Lägg till).
När Elementor och Essential Addons har installerats skapar du en ny sida (Sidor – > Lägg till) eller ett nytt föremål (Objekt – > Lägg till) och redigera den med Elementor. Du kommer att omdirigeras till Elementor-redigeraren efter att ha klickat på knappen Redigera med Elementor.
Innan du skapar bilderna med hotspots kan du ställa in layouten först. För att göra detta, öppna panelen med sidinställningar genom att klicka på kugghjulsikonen i det nedre vänstra hörnet av den vänstra panelen.
Läs också: Hur man använder Elementors inläggswidget
Ställ in layouten på rullgardinsmenyn Layout
Lägg till ett nytt avsnitt genom att klicka på plusikonen i redigeringsrutan och lägg till EA Image Hotspots-widgeten från den vänstra panelen.
Lägg till din bild genom att klicka på bildväljaren i den vänstra panelen.
öppet alternativ hotspots på den vänstra panelen för att lägga till åtkomstpunkterna. Som standard innehåller EA Image Hotspots-widgeten en hotspot. Du kan klicka på standardåtkomstpunkten för att redigera dess innehåll.
Som standard är åtkomstpunktstypen inställd på icon. Du kan ändra det till Texte eller lämna Vide om du önskar det.
Klicka på fliken POSITION för att ställa in åtkomstpunktens position. Ställ in X- och Y-positionerna genom att dra reglagen.
Klicka på fliken VERKTYGSTIPS för att lägga till verktygstipsinnehållet. Aktivera verktygstipset och lägg till ditt innehåll i editorn. Du kan också ställa in positionen för verktygstipset, antingen upptill, botten, vänster eller höger.
För att lägga till fler hotspots, klicka bara på knappen LÄGG TILL ETT ELEMENT i avsnittet hotspots och upprepa stegen ovan för att ställa in hotspotposition, verktygstipsinnehåll och verktygstipsposition.
Öppna avsnittet Verktygstipsinställningar för att ställa in storleken på verktygstipsen och animeringseffekten.
Gå nu till tab Stil för att styla dina hotspots samt verktygstips. Öppna först alternativet Bild för att ställa in bildstorleken.
Öppna avsnitt hotspot för att anpassa hotpots. Du kan ställa in storlek, ikonfärg (eller text beroende på vilken typ av hotspot du har valt), bakgrundsfärg, kantradie etc...
Upptäck också: Hur man lägger till relaterade artiklar i Elementor
Öppna avsnittet Verktygstips för att anpassa verktygstips. Du kan ställa in bakgrundsfärg, textfärg, typografi (teckenstorlek, teckensnittsfamilj, typsnittsstil) och bredd.
Hittills har du framgångsrikt skapat bilder med hotspots. Du kan leka med den vänstra panelen för att anpassa dina bilder med hotspots tills du är nöjd med resultatet. När du är klar kan du klicka på knappen PUBLICERA för att publicera din sida.
Lägg till bilder med hotspots i Gutenberg
Om du vill lägga till bilder med hotspots som stödmaterial för artikeln du arbetar med kan du integrera den med Gutenberg (standard WordPress-redigerare) med hjälp av plugin Elementor block för Gutenberg. Denna plugin låter dig använda en Elementor-mall som ett Gutenberg-block.
För att spara bilderna med hotspots ovan som en Elementor-sektionsmall, högerklicka på sektionshandtaget och välj Spara som mall.
Ge din modell ett namn och klicka på knappen REGISTRERARE.
Öppna artikeln där du vill lägga till bilder med hotspots. Lägg till ett nytt block, välj Elementor bibliotek och välj bildmallen med hotspots du just skapat.
Skaffa Elementor Pro nu!!!
Slutsats
Här! Det är det för den här artikeln som visar dig hur skapa en interaktiv bild med Hotspots i WordPress tack vare Elementor och Essential Addons. Om du har några frågor om hur du kommer dit, låt dem veta i commentaires.
Du kan dock också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser, genom att konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
