Doriți să faceți imaginile dvs. WordPress mai interactive și mai captivante? Hotspot-urile de imagine transformă imaginile statice în conținut dinamic, adăugând zone pe care se poate face clic și care dezvăluie informații suplimentare.
Le-am experimentat noi înșine pentru a prezenta puncte pe o hartă, a eticheta membri ai echipei într-o fotografie și a evidenția caracteristicile produsului. Din cercetările noastre, am găsit 2 modalități ușoare de a adăuga hotspot-uri de imagine în WordPress.
Gata să îmbunătățiți experiența vizuală a site-ului dvs.? Să începem.
Când să adăugați hotspot-uri imaginilor dvs. în WordPress
Hotspot-urile de imagini sunt puncte pe care se poate face clic, care pot transforma imagini simple în conținut interactiv pe care vizitatorii îl pot explora. Dar când ar trebui să te gândești să adaugi hotspot-uri la imaginile tale?
Un moment bun pentru a utiliza hotspot-uri este atunci când doriți să prezentați diferite părți ale unei imagini de produs.
Să spunem că vindeți un telefon nou. Puteți adăuga hotspot-uri pentru a indica camera, ecranul și alte caracteristici. Acest lucru ajută clienții să afle despre produs fără a citi descrieri lungi.
Multe site-uri de produse pentru casă folosesc, de asemenea, adnotări de imagine pentru a evidenția detaliile produselor articolelor afișate în fotografii aranjate.
Hotspot-urile sunt, de asemenea, excelente pentru a face infograficele și vizualizarea datelor mai captivante. În loc să înghesuiți toate informațiile într-o singură imagine, puteți ascunde detalii suplimentare în spatele hotspot-urilor. Când oamenii fac clic pe diferite părți ale infograficului, ei pot vedea mai multe fapte și cifre.
Dacă administrați un site de eLearning, atunci hotspot-urile pot îmbunătăți experiența utilizatorului și pot face lecțiile mai interactive. De exemplu, puteți adăuga hotspot-uri pe o hartă, permițând studenților să dea clic pentru a afla despre diferite țări sau puncte de reper.
Având în vedere acest lucru, să vedem cum să adăugați cu ușurință hotspot-uri de imagini pe site-ul dvs. WordPress. Am venit cu 2 metode și puteți utiliza linkurile rapide de mai jos pentru a naviga prin articol:
- Metoda 1: Adăugați hotspot-uri de imagini cu SeedProd (pentru pagini de destinație/teme personalizate)
- Metoda 2: Adăugați hotspot-uri de imagine cu pluginul Image Hotspot (gratuit, dar limitat)
- Mai multe sfaturi de design WordPress pe care ar trebui să le cunoașteți
Metoda 1: Adăugați hotspot-uri de imagini cu SeedProd (pentru pagini de destinație/teme personalizate)
Această primă metodă folosește SeedProd, un constructor de pagini drag-and-drop, pentru a adăuga hotspot-uri de imagine pe site-ul dvs. WordPress. Recomandăm această metodă dacă creați o pagină de destinație personalizată sau o temă WordPress personalizată și doriți să utilizați o platformă cu un bloc de hotspot-uri de imagine.
Am testat în trecut și alți constructori de pagini precum Divi și WPBakery, dar SeedProd iese mereu în față.
Ceea ce ne place la SeedProd este că oferă peste 350 de șabloane de pagini de destinație și kituri de teme pentru diferite categorii de industrii, de la buticuri online și servicii de curățenie la companii SaaS. Deci, există o opțiune pentru fiecare tip de site.
Un lucru pe care ar trebui să îl iei în considerare este că, dacă dorești doar o soluție gratuită pentru a crea hotspot-uri de imagini, atunci această metodă s-ar putea să nu fie potrivită pentru tine. Acest lucru se datorează faptului că blocul de hotspot-uri SeedProd este disponibil doar în versiunile plătite ale SeedProd. În acest caz, recomandăm să mergi cu metoda 2.
Pentru mai multe informații despre caracteristicile și prețurile pluginului, consultați recenzia SeedProd.
După ce ați achiziționat un plan SeedProd, puteți descărca și instala pluginul WordPress în zona dvs. de administrare. După aceea, accesați SeedProd » Setări și introduceți cheia de licență. Puteți găsi aceste informații pe pagina contului dvs. SeedProd.
Odată finalizat, faceți clic pe „Verificați cheia”.
După aceea, navighează la SeedProd » Landing Pages.
Apoi, faceți clic pe „Adăugați o pagină de destinație nouă”.
Veți vedea acum toate șabloanele pe care le oferă SeedProd. Există opțiuni pentru o pagină de destinație virală cu listă de așteptare, o pagină de destinație pentru anunțuri Google, o pagină „în curând” și multe altele.
Asigurați-vă că parcurgeți opțiunile și le previzualizați una câte una, astfel încât să o puteți alege pe cea care se potrivește cel mai bine nevoilor dumneavoastră.
Odată ce v-ați decis asupra unui șablon, pur și simplu treceți cursorul peste selecția dvs.
Apoi, faceți clic pe butonul portocaliu cu bifa.
Acum, va apărea o nouă fereastră pop-up, solicitându-vă să denumiți pagina și să inserați slug-ul URL-ului acesteia.
După ce faceți acest lucru, faceți clic pe „Salvare și începerea editării paginii”.
Aceasta va deschide editorul drag-and-drop SeedProd.
Funcționează similar cu editorul de blocuri WordPress, unde puteți trage și plasa blocuri pe pagină și faceți clic pe ele pentru a le personaliza așa cum doriți.
Pentru a crea hotspot-uri de imagini, poți găsi blocul „Hotspot” în bara laterală din stânga.
Apoi, pur și simplu trageți-l și plasați-l direct pe pagina dvs.
Apoi, trebuie să încărcați imaginea WordPress la care doriți să adăugați hotspot-uri.
Puteți face acest lucru făcând clic pe blocul „Hotspot” și alegând fie „Utilizați propria imagine”, fie „Utilizați o imagine din stoc” pentru a selecta o imagine.
Prima opțiune va deschide biblioteca media unde puteți alege o imagine existentă sau încărca una nouă. Dacă dimensiunea este destul de mare, puteți consulta ghidul nostru despre cum să încarci imagini mari în WordPress.
Odată ce ați încărcat o imagine, puteți introduce un text alternativ pentru a descrie imaginea pentru motoarele de căutare și instrumentele de citire a ecranului.
De asemenea, poți personaliza dimensiunea și alinierea imaginii.
După aceea, puteți derula în jos pentru a începe să adăugați punctele de interes.
Puteți face acest lucru făcând clic pe butonul „+ Adăugare punct de interes”.
Un punct portocaliu va apărea acum pe imaginea dvs. Puteți ajusta poziția acestuia trăgând barele de orientare orizontală și verticală.
În plus, poți insera textul care ar trebui să apară atunci când cursorul utilizatorului trece peste hotspot.
Coborând, poți schimba culoarea hotspot-ului.
Pur și simplu faceți clic pe setările „Culoare” pentru a alege o culoare care se potrivește mărcii și designului site-ului dvs. web.
Dacă continuați să derulați în jos, puteți activa comutatorul „Setări avansate”.
Aici puteți adăuga un link la textul tooltip al hotspot-ului dvs., astfel încât utilizatorii să poată fi redirecționați către pagina dorită.
Pe lângă asta, puteți alege o pictogramă personalizată pentru a înlocui forma implicită de cerc.
Pentru a face acest lucru, faceți clic pe butonul „Alegeți pictograma”.
Va apărea o fereastră pop-up unde puteți alege diverse pictograme din biblioteca SeedProd. De asemenea, puteți alege pictograme din Font Awesome dacă aveți nevoie de mai multe opțiuni.
Pentru a utiliza o pictogramă, faceți clic pe ea.
Odată ce ați ales o pictogramă, puteți trage bara „Dimensiunea pictogramei” pentru a face forma mai mică sau mai mare, în funcție de preferințele dvs.
Puteți apoi repeta pașii pentru a crea mai multe hotspot-uri interactive de imagine.
Mai jos, puteți adăuga un efect animat la hotspot-urile imaginii dvs. Există 2 opțiuni: „Soft Beat” și „Expand”.
Acum, să trecem la secțiunea „Tooltip”.
Aici, puteți schimba poziția sfatului (dreapta, stânga, deasupra sau dedesubtul punctului de interes) și puteți schimba declanșatorul.
Dacă selectați „Click”, înseamnă că tooltip-ul va apărea atunci când utilizatorul face clic pe hotspot. Pe de altă parte, „Hover” înseamnă că tooltip-ul va apărea atunci când cursorul trece peste el.
Apoi, puteți schimba durata tooltip-ului.
Aceasta se referă doar la cât timp va dura până când tooltip-ul va apărea după ce utilizatorul trece cu mouse-ul peste sau face clic pe hotspot. Dacă doriți ca textul să apară instantaneu, atunci setați-l la 0.
Puteți dezactiva, de asemenea, săgeata sfatului, în funcție de preferințele dvs.
Acum, dacă treceți la fila „Avansat”, puteți personaliza și mai mult aspectul imaginii.
De exemplu, puteți adăuga o umbră de casetă sau puteți ajusta padding-ul și marginile.
Odată ce ai terminat, pur și simplu apasă butonul „Save” (Salvează) din colțul din dreapta sus.
Apoi, faceți clic pe „Publicare” pentru a face pagina live.
Și asta e tot! Asigurați-vă că vizualizați pagina pe mobil, desktop și tabletă pentru a vedea dacă arată bine pe toate dispozitivele.
Iată cum arată hotspot-ul nostru interactiv de imagine:
Metoda 2: Adăugați hotspot-uri de imagine cu pluginul Image Hotspot (gratuit, dar limitat)
Dacă folosiți un page builder și schimbarea temei pare prea mult, atunci puteți folosi gratuit pluginul WordPress Image Hotspot în schimb. Este unul dintre cele mai bune pluginuri de hotspoturi pentru imagini pe care le-am încercat și este o alternativă excelentă la metoda 1.
Cu toate acestea, rețineți că versiunea gratuită permite adăugarea a maximum 6 hotspot-uri pe o singură imagine.
Pentru a utiliza Image Hotspot, puteți instala și activa pluginul WordPress în zona dvs. de administrare. Apoi, accesați Image Map Hotspot » All Image Map Hotspot și faceți clic pe butonul „Add New”.
Acum, continuați și dați un nume noului punct de interes al hărții imaginii. Apoi, selectați unul dintre tipurile de afișare a sfatului (tooltip). Puteți face ca sfaturile punctului de interes interactiv să apară prin glisare (hover) sau prin clic.
Odată terminat, faceți clic pe „Salvați”.
Cu asta terminat, să adăugăm imaginea.
Pentru a face acest lucru, faceți clic pe butonul „Încărcați imaginea”.
Aceasta va deschide biblioteca media, unde puteți încărca o imagine nouă sau puteți selecta una existentă.
În continuare, puteți adăuga puncte de interes (hotspots) pe harta imaginii. Pur și simplu faceți clic pe butonul „Adăugare punct” pentru a face acest lucru.
Acum va apărea o fereastră pop-up pentru a configura hotspot-ul imaginii interactive.
Mai întâi, navigați la fila „Marcator”. Aici puteți personaliza cum arată imaginea punctului de interes. Pentru a schimba pictogramele, puteți face clic pe semnul „+” de lângă câmpurile „Pictograme” și/sau „Pictograme la glisare”.
„Icons” se referă la simbolul implicit al hotspot-ului atunci când nu este apăsat sau când cursorul nu este deasupra. Între timp, „Hover Icons” este simbolul care apare atunci când utilizatorul apasă sau când cursorul este deasupra hotspot-ului.
Acum, selectați o pictogramă pentru a înlocui opțiunea implicită curentă. Pluginul are multe de ales.
Odată ce ați făcut alegerea, faceți clic pe ea și apăsați butonul „Închidere”.
Cu imaginile hotspot configurate, puteți modifica culorile pictogramelor.
Pluginul vă permite să faceți ca culoarea implicită a pictogramei hotspot să fie diferită de culoarea la hover a pictogramei. Astfel, utilizatorii pot spune cu ușurință dacă un hotspot este activ atunci când fac clic sau plutesc deasupra lui.
Pentru a schimba culoarea, faceți clic pe butonul de selecție a culorii pătrate și selectați culoarea pe care doriți să o utilizați.
Apoi puteți face clic oriunde pe pagină pentru a trece la o altă setare.
De asemenea, puteți personaliza dimensiunea pictogramei hotspot-ului pe desktop. Cu cât numărul este mai mare, cu atât pictograma va fi mai mare.
Odată ce sunteți mulțumit de aspectul pictogramei, faceți clic pe „Salvare”.
Acum, derulați în sus și comutați la fila „Conținut”. Aici puteți personaliza textul și aspectul tooltip-ului.
Pluginul vă oferă 4 șabloane din care puteți alege, astfel încât să puteți selecta cel care se potrivește cel mai bine designului site-ului dvs. web.
În afară de asta, asigurați-vă că înlocuiți conținutul titlului implicit cu propriul text.
Și, în funcție de designul site-ului dvs., s-ar putea să doriți să măriți dimensiunea fontului și să schimbați culoarea textului pentru a-i îmbunătăți lizibilitatea.
Când sunteți mulțumit de setări, pur și simplu faceți clic pe „Salvare”.
Ultima filă este „link”. Aici, aveți opțiunea de a face textul tooltipului dvs. să fie un hiperlink, astfel încât utilizatorii să poată fi redirecționați către o altă pagină.
Dacă dorești să faci acest lucru, selectează „Da” în setarea „Do you Link Title?” (Titlul linkului?).
După aceea, introduceți URL-ul linkului titlului în câmpul corespunzător și alegeți dacă doriți ca linkul să se deschidă într-o filă nouă sau nu.
În cele din urmă, faceți clic pe „Salvare”.
Acum, pe imaginea dvs. ar trebui să apară un nou hotspot, pe care îl puteți trage la poziția dorită.
Puteți repeta aceiași pași ca înainte pentru a crea mai multe hotspot-uri de imagine.
Odată ce aveți harta imaginii configurată, puteți face clic din nou pe butonul „Salvare”.
Pentru a adăuga hotspot-ul de imagine pe oricare dintre paginile, postările și/sau widget-urile dvs., puteți copia shortcode-ul de deasupra imaginii.
După aceea, pur și simplu lipiți shortcode-ul într-un bloc de shortcode pe widget-ul, pagina sau postarea dvs. în editorul de blocuri. Puteți afla mai multe despre cum să faceți acest lucru în ghidul nostru pas cu pas despre cum să adăugați și să utilizați shortcode-uri în WordPress.
Iată cum arată hotspot-ul nostru interactiv de imagine:
Mai multe sfaturi de design WordPress pe care ar trebui să le cunoașteți
Pe lângă crearea de hotspot-uri interactive de imagine, există multe alte modalități de a face designul site-ului dvs. mai captivant. Iată câteva ghiduri care vă pot ajuta:
- Elemente cheie de design pentru un site web WordPress eficient
- Cum să adăugați scroll infinit pe site-ul dvs. WordPress (Pas cu Pas)
- Cum să adăugați scroll infinit pe site-ul dvs. WordPress (Pas cu Pas)
- Cum să creați o hartă vizuală a site-ului în WordPress (Pas cu Pas)
- Cum să creați o bară de subsol plutitoare, fixă, în WordPress
- Cum să adăugați un redimensionator de fonturi în WordPress pentru accesibilitate
- Cum să adaugi un buton Click-to-Call în WordPress (Pas cu Pas)
- Cum să adăugați o bară de defilare personalizată în WordPress
- Cum să adăugați o bară de progres în postările dvs. WordPress
- Cum să creezi un separator de formă personalizat în WordPress
- Cum să adăugați un ticker de știri derulant în WordPress
Sperăm că acest articol te-a ajutat să înveți cum să adaugi cu ușurință hotspot-uri de imagini în WordPress. De asemenea, s-ar putea să vrei să consulți ghidul nostru complet despre trucuri pentru bara laterală WordPress pentru a obține rezultate maxime și selecția noastră de experți a celor mai bune constructori de teme 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.
Ai o întrebare sau o sugestie? Te rugăm să lași un comentariu pentru a începe discuția.