Cum să creați imagini interactive în WordPress

Găsirea imaginii perfecte pentru postarea dvs. WordPress este un început excelent, dar adesea este o stradă cu sens unic. Vizitatorii dvs. văd o imagine statică și ar putea rata detaliile cheie pe care doriți să le evidențiați.

Acest lucru poate fi frustrant, mai ales când încercați să prezentați caracteristicile produsului sau să ghidați utilizatorii printr-un proces. Ce-ar fi dacă imaginile dvs. ar putea face mai mult și ar putea angaja activ publicul dvs.?

Exact asta fac imaginile interactive. După ce am testat mai multe pluginuri aici la WPBeginner, am găsit o metodă simplă care permite oricui să adauge puncte de interes pe care se poate face clic pe imaginile lor, fără a avea nevoie de cod.

În acest ghid, vă vom arăta cum să transformați cu ușurință imaginile statice în experiențe captivante și interactive pentru vizitatorii dumneavoastră.

În acest ghid, te vom ghida prin întregul proces. Iată o prezentare rapidă a ceea ce vei învăța.

1. Ce este o imagine interactivă?
2. Cum să adăugați imagini interactive la conținutul dvs. WordPress
3. Cum să importați/exportați imagini interactive pe alte site-uri WordPress
4. Întrebări frecvente despre imaginile interactive

Ce este o imagine interactivă?

O imagine interactivă poate avea puncte de interes, evidențieri, linkuri, butoane pe care se poate face clic, culori, conținut audiovizual și multe altele.

Imediat, acest lucru este mult mai captivant decât o simplă imagine standard pe care o încărcați pe site-ul dvs. WordPress.

Imaginile interactive pot atrage atenția vizitatorului asupra unor caracteristici și conținut specifice, apoi pot afișa informații suplimentare.

De exemplu, ați putea afișa o fereastră pop-up atunci când vizitatorul trece cu mouse-ul peste o anumită bară dintr-un grafic.

Această interacțiune poate încuraja vizitatorii să exploreze imaginile dvs. în detaliu, ceea ce îi va menține pe pagină mai mult timp. De asemenea, poate crea o experiență mai interactivă și interesantă, care poate crește numărul de vizualizări ale paginii și reduce rata de respingere în WordPress.

Imaginile interactive pot, de asemenea, să arate vizitatorilor pașii pe care ar trebui să-i urmeze. De exemplu, poți adăuga linkuri către alte părți ale site-ului tău sau poți afișa un buton de apel la acțiune.

Acestea fiind spuse, să vedem cum puteți crea imagini interactive pentru site-ul dvs. WordPress.

Notă: Dacă doriți să adăugați imagini animate pe site-ul dvs. în schimb, urmați ghidul nostru pas cu pas despre cum să adăugați GIF-uri animate în WordPress.

Cum să adăugați imagini interactive la conținutul dvs. WordPress

Cel mai ușor mod, cel mai prietenos pentru începători, de a adăuga zone pe care se poate face clic sau puncte fierbinți interactive este prin utilizarea Draw Attention. Acest plugin vă permite fie să afișați o fereastră pop-up „mai multe informații”, fie să deschideți un nou URL atunci când utilizatorul interacționează cu o imagine.

Primul lucru pe care trebuie să-l faceți este să instalați și să activați pluginul Draw Attention. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, accesați Atrageți atenția » Editați imaginea în tabloul de bord WordPress. Aceasta vă duce la un ecran unde puteți crea diferite interacțiuni și apoi le puteți adăuga la o imagine ca zone pe care se poate face clic.

Pentru a începe, tastează un titlu pentru imaginea interactivă.

Acesta va apărea lângă imagine pe site-ul tău WordPress. De exemplu, în imaginea următoare, folosim titlul „Caracteristici OptinMonster”.

După ce ați tastat un titlu, derulați la secțiunea „Imagine” și alegeți imaginea pe care doriți să o utilizați.

Puteți selecta o imagine din biblioteca media sau puteți încărca o imagine nouă.

După ce ați ales o imagine, puteți adăuga culori și linkuri, crea zone pe care se poate face clic și multe altele, derulând în jos la secțiunea „Zone de puncte fierbinți”.

Pluginul creează o Zonă Clicabilă 1 în mod implicit, așa că faceți clic pentru a extinde această secțiune.

Pentru a începe, va trebui să evidențiați zona pe care doriți să o faceți interactivă.

Draw Attention are câteva forme diferite pe care le puteți folosi pentru evidențiere, așa că pur și simplu faceți clic pe forma pe care doriți să o utilizați. În imaginea următoare, am selectat un dreptunghi.

Acum, pur și simplu faceți clic și trageți pentru a evidenția zona pe care doriți să o utilizați ca punct de interes al imaginii.

Atrageți atenția va afișa acum câteva setări noi pentru această zonă pe care se poate face clic. Pentru a începe, introduceți un nume în câmpul „Titlu”.

Acesta va apărea ca un tooltip atunci când vizitatorul își plasează mouse-ul peste hotspot, deci este o idee bună să folosiți ceva descriptiv.

În imaginea următoare, am transformat zona de numărătoare inversă într-un hotspot și am adăugat titlul imaginii „Countdown Timer”.

După ce ați făcut acest lucru, deschideți meniul derulant „Acțiune” și alegeți ce se va întâmpla atunci când un vizitator face clic pe această zonă. Desenează atenția poate fie să deschidă un link, fie să afișeze o casetă „mai multe informații”.

Veți vedea setări diferite în funcție de opțiunile pe care le selectați. De exemplu, dacă alegeți „Go to URL”, atunci va trebui să adăugați un link și să specificați dacă acesta ar trebui să se deschidă într-o filă nouă.

Dacă selectați „Afișați mai multe informații”, atunci va trebui să introduceți informațiile care vor apărea atunci când vizitatorul face clic pe hotspot.

Poți adăuga, de asemenea, o imagine sau un URL opțional cu detalii, care va fi inclus în caseta de informații.

În imaginea următoare, am adăugat text în caseta cu informații suplimentare.

Am adăugat, de asemenea, logo-ul OptinMonster ca imagine de detaliu.

Când sunteți mulțumit de cum arată hotspot-ul, faceți clic pe butonul „Adăugați o altă zonă”.

Acum puteți configura zona clicabilă urmând același proces descris mai sus.

Pur și simplu repetă acești pași pentru a adăuga toate zonele pe care se poate face clic pe imagine.

Cu aceasta făcută, s-ar putea să doriți să personalizați cum arată secțiunea de evidențiere și caseta cu mai multe informații. De exemplu, puteți schimba culoarea pe care Draw Attention o afișează atunci când vizitatorii trec cu mouse-ul peste o zonă pe care se poate face clic, folosind setările „Culoare de evidențiere”.

Poți, de asemenea, să modifici opacitatea evidențierii și lățimea chenarului, să adaugi un chenar și multe altele, folosind setările din secțiunea „Stilizare evidențiere”.

După aceea, puteți derula la „Mai multe stiluri pentru caseta de informații” și puteți ajusta aspectul casetei. De exemplu, puteți schimba culoarea de fundal, culoarea textului și multe altele.

Draw Attention vine, de asemenea, cu teme diferite pe care le puteți aplica imaginii dvs. interactive.

Pentru a vizualiza aceste teme, derulați pur și simplu la caseta „Aplicați schema de culori” și deschideți meniul derulant. Puteți alege între Luminos, Întunecat și Atrageți atenția.

Toate aceste opțiuni sunt destul de simple, așa că merită să încercați diferite setări pentru a vedea ce arată cel mai bine pe site-ul dvs.

Pe măsură ce încercați diversele opțiuni, puteți previzualiza cum vor arăta pe site-ul dvs. WordPress făcând clic pe „Previzualizare modificări”.

Când sunteți mulțumit de modul în care arată și funcționează imaginea interactivă, asigurați-vă că faceți clic pe „Actualizare” pentru a salva modificările.

Acum puteți adăuga imaginea interactivă pe orice pagină, postare sau zonă pregătită pentru widget folosind shortcode-ul din blocul „Copiere Shortcode”.

Pentru mai multe informații despre cum să plasați shortcode-ul, vă rugăm să consultați ghidul nostru despre cum să adăugați un shortcode în WordPress.

Cum să importați/exportați imagini interactive pe alte site-uri WordPress

Uneori, este posibil să doriți să reutilizați aceeași imagine interactivă pe mai multe site-uri web.

De exemplu, dacă sunteți un afiliat de marketing, atunci ați putea crea o imagine interactivă care promovează unul dintre produsele dvs. Puteți apoi să utilizați aceeași imagine interactivă pe toate magazinele dvs. de afiliere Amazon și alte site-uri de marketing afiliat.

Încărcarea aceleiași imagini și apoi recrearea manuală a tuturor interacțiunilor poate dura mult timp și efort.

În schimb, recomandăm crearea imaginii interactive o singură dată și apoi utilizarea funcției de import/export a Draw Attention. Acest lucru îți permite să refolosești aceeași imagine pe nenumărate site-uri web sau magazine online.

Pentru a face acest lucru, va trebui să instalați pluginul Draw Attention pe site-ul original care are imaginea interactivă și pe toate celelalte site-uri web unde doriți să utilizați acea imagine.

Pe site-ul dvs. original, accesați Atrageți atenția » Import / Export și bifați caseta de lângă fiecare imagine pe care doriți să o exportați.

Apoi, apasă pe butonul „Generează cod de export”. După câteva momente, Draw Attention va genera un cod.

Într-o filă diferită, conectați-vă la celălalt blog WordPress sau site web și accesați Draw Attention » Import / Export.

Aici, copiați codul de export în caseta „Import” și faceți clic pe butonul „Import”.

Draw Attention va importa acum imaginea și toate interacțiunile acesteia, gata pentru a fi utilizate.

Pur și simplu repetați acești pași pe toate site-urile web unde doriți să utilizați imaginea interactivă.

Întrebări frecvente despre imaginile interactive

Iată răspunsurile la unele dintre cele mai frecvente întrebări pe care le primim despre adăugarea de imagini interactive în WordPress.

Care este cel mai bun plugin pentru crearea de imagini interactive în WordPress?

Pentru începători, recomandăm pluginul Draw Attention, deoarece este ușor de utilizat și are o interfață simplă. Versiunea gratuită oferă toate funcționalitățile de bază de care aveți nevoie, în timp ce versiunea pro deblochează opțiuni mai avansate, cum ar fi hărți de imagini multiple și stiluri suplimentare pentru tooltip-uri.

Imaginile interactive sunt prietenoase cu dispozitivele mobile?

Da, pluginul Draw Attention este complet responsiv. Aceasta înseamnă că punctele tale interactive și casetele de informații se vor ajusta automat pentru a se potrivi oricărui ecran, oferind o experiență excelentă pentru utilizatori pe dispozitive mobile.

Pot adăuga videoclipuri sau animații la punctele fierbinți interactive?

Puteți utiliza acțiunea „Mergi la URL” pentru a lega un punct de interes de un videoclip pe o platformă precum YouTube sau Vimeo. Deși încorporarea directă a videoclipurilor în fereastra pop-up ar putea necesita versiunea pro, legarea este o soluție simplă. Pentru imagini animate, recomandăm să urmați ghidul nostru despre adăugarea GIF-urilor animate în WordPress.

Adăugarea de imagini interactive va încetini site-ul meu web?

Ca orice media, imaginile interactive adaugă la greutatea paginii dvs. Cu toate acestea, pluginul Draw Attention este ușor și bine codat. Cel mai mare factor este dimensiunea fișierului imaginii originale, așa că recomandăm întotdeauna optimizarea imaginilor dvs. pentru web înainte de a le încărca.

Sperăm că acest articol v-a ajutat să învățați cum să creați imagini interactive în WordPress. De asemenea, ați putea dori să consultați ghidul nostru despre cum să creați suprapuneri și hover-uri de tip flipbox în WordPress și selecțiile noastre experte de cele mai bune plugin-uri de slider pentru WordPress.

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.