Tekniska bloggspel, Android-app-apk, tips och tricks

Hur man skapar interaktiva bilder i WordPress

Obs: I nästa ämne du kommer att läsa kommer du att lära dig om: Hur man skapar interaktiva bilder i WordPress

Vill du skapa en interaktiv bild för din WordPress-blogg? En interaktiv bild låter dig markera, länka och animera vissa delar av din bild. I den här artikeln kommer vi att visa dig hur du skapar interaktiva bilder i WordPress.

Skapa interaktiva bilder i WordPress

Vad är en interaktiv bild?

En interaktiv bild med områden med åtkomstpunkter, reflektioner, justering, färger och mer. Det skiljer sig från en enkel bild som laddas i WordPress. De interaktiva bilderna är mycket iögonfallande och lockar användaren att se detaljerna i bilden. Du kan lägga till beskrivningar till olika delar av bilden, lägga till länkar till sidor, höjdpunkter och mer.

Demobeskrivning för interaktiva bilder

På den här bilden kan du se beskrivningen av frukterna när du svävar över de olika barrorna. Du kan använda dessa interaktiva bilder för att öka användarens engagemang och tid på webbplatsen.

Låt oss se hur du kan fånga dina besökares uppmärksamhet med interaktiva bilder.

Skapa interaktiva bilder i WordPress

Det första du bör göra är att installera och aktivera insticksprogrammet Draw Attention. För mer information, se vår steg-för-steg-guide om hur du installerar ett WordPress-plugin.

Vid aktivering kommer du att se en ny anpassad inläggstyp i ditt WordPress-administratörsområde. Du måste gå till Det väcker uppmärksamhet »Lägg till nytt sida för att skapa en interaktiv bild.

Lägg till nya bilder

Börja med att lägga till en titel för den här nya interaktiva bilden, så att du enkelt kan komma ihåg den. På den här sidan kan du skapa interaktiva mönster på nya eller tidigare laddade bilder. Du kan lägga till en ny bild genom att klicka på ladda upp bildikonen, eller så kan du välja en bild från ditt WordPress-mediebibliotek.

Ladda upp eller välj en bild

Då måste du trycka Posta knapp.

När plugin-programmet har publicerats kan du redigera bilder och markera specifika områden, lägga till färger, länkar, rita hotspot-områden och mer. Du kan scrolla ner Accesspunktsområde och expandera det klickbara området för att förhandsgranska bilden.

Flytta bara musen och rita klickbara delar av bilden. Du kan enkelt välja hotspot-områden och utöka dem för att skapa urval.

Rita åtkomstpunktsområden

När du har ritat åtkomstpunktsområdet måste du rulla nedåt Arbete rullgardinsmenyn och välj en åtgärd för det valda området i bilden. Om du väljer Visa mer information kan du helt enkelt lägga till en beskrivning för att förklara hotspot-området i bilden. Du kan också lägga till en länk i det valda området med alternativet “Besök URL”.

Mer action

Du kan också hantera allmänna inställningar och markering för åtgärdslänkar, åtgärdstext, infobakgrund och mer. Dessa inställningar kan hjälpa till att göra dina bilder mer interaktiva.

Allmän konfiguration

Då måste du klicka på Uppdatering och kopiera kortkoden för att lägga till den i ditt WordPress-inlägg eller din sida.

Kopiera kortkod

Insticksprogrammet låter dig skapa så många interaktiva bilder som du behöver med hjälp av tidigare laddade nya bilder.

Interaktiva bilder klickbara

Importera och exportera interaktiva bilder

Om du arbetar på flera webbplatser och vill importera/exportera interaktiva bilder behöver du samma Draw Att-plugin uppmärksamhet på båda webbplatserna.

På den första webbplatsen måste du besöka Få uppmärksamhet »Importera/exportera sida och markera bilderna du vill exportera. Klicka sedan Skapa exportkod knappen och kopiera koden.

Exportera kod från interaktiva bilder

Sedan måste du besöka följande webbplats och se till att du har Draw Att-pluginen aktiverad. Då måste du gå till Få uppmärksamhet »Importera/exportera WordPress adminsida och klistra in koden i inmatningsfältet.

Klistra in den interaktiva kodbilden

Gå vidare och klicka importera Knappen och dess bild kommer att importeras med alla interaktiva detaljer som du lagt till tidigare.

Dessa interaktiva bilder är bra för WordPress SEO och lockar fler besökare till din webbplats. Det rekommenderas dock att komprimera bilder före uppladdning för att förbättra webbplatsens prestanda.

Vi hoppas att den här artikeln hjälpte dig att lära dig hur du skapar interaktiva WordPress-bilder. Du kan också kolla in vår guide om hur du laddar upp fördröjda bilder i WordPress.

Om du gillade den här artikeln, prenumerera på vår YouTube-kanal för WordPress-videohandledning. Du hittar oss även på Twitter och Facebook.