Doriți să aflați cum să creați o imagine interactivă cu Hotspot-uri în WordPress datorită Elementor și suplimente esențiale?
Imaginea este un instrument excelent pentru transmiterea informațiilor. Toată lumea știe că informațiile transmise prin imagine – și forma vizuală în ansamblu – sunt mai ușor de înțeles și de reținut.
În contextul webului, puteți utiliza multe formate de imagine. Dintr-o infografică, o fotografie, o bandă desenată, o ilustrație etc...
Dacă doriți să creați conținut web, cum ar fi anatomia a ceva, repere ale orașului, hărți sau direcții, construirea de imagini cu Hotspot-uri poate fi o idee grozavă.
Ideea acestui tip de conținut este de a oferi o imagine interactivă care să le faciliteze cititorilor tăi să înțeleagă informațiile pe care le transmiteți. Puteți adăuga Hotspot-uri pe o imagine care conține un sfat explicativ pentru fiecare Hotspot. Iată un exemplu.
Dacă aveți a site-ul web pe baza WordPress, crearea unei imagini cu hotspot-uri nu este prea greu de făcut. Puteți crea unul folosind modulul Addons esențiale .
Ce este modulul Essential Addons?
Essential Addons este un supliment pentruElementor. Acesta este unul dintre cele mai populare moduri cu peste 2 milioane de descărcări. Acest supliment adaugă aproximativ 60 de widget-uri suplimentare la dvs Elementor.
Unul dintre widget-urile oferite de Essential Addons este Hotspot-uri de imagine EA pe care îl puteți folosi pentru a crea o imagine interactivă. Essential Addons în sine este un supliment freemium, dar trebuie să utilizați versiunea pro pentru a crea imagini cu Hotspot-uri, deoarece widgetul EA Image Hotspots este disponibil numai pentru această versiune.
Cum să utilizați modulul Essential Addons pentru a crea imagini cu Hotspot-uri
În primul rând, trebuie să instalați modulele Elementor și Essential Addons pe WordPress. Puteți obține versiunea pro a Essential Addons pe acesta site-ul web oficial. În timp ce pentru Elementor, puteți folosi versiunea gratuită.
Vezi și: Cum să utilizați un widget global în Elementor
Versiunea gratuită a Elementor este disponibilă în directorul WordPress plug-in astfel încât să îl puteți instala tastând „elementor” în caseta de căutare a programului de instalare a pluginurilor (Pluginuri – > Adăugați).
Odată ce Elementor și Essential Addons sunt instalate, creați o pagină nouă (Pagini – > Adăugați) sau un articol nou (Elemente – > Adăugați) și editați-l cu Elementor. Veți fi redirecționat către editorul Elementor după ce faceți clic pe butonul Editați cu Elementor.
Înainte de a crea imagini cu hotspot-uri, puteți seta mai întâi aspectul. Pentru a face acest lucru, deschideți panoul de setări ale paginii făcând clic pe pictograma roată din colțul din stânga jos al panoului din stânga.
Citiți și: Cum să utilizați widgetul Postări al Elementor
Setați aspectul în meniul drop-down schemă
Adăugați o nouă secțiune făcând clic pe pictograma plus din caseta de editare și adăugați widgetul EA Image Hotspots din panoul din stânga.
Adăugați imaginea dvs. făcând clic pe selectorul de imagini din panoul din stânga.
opțiunea deschisă hotspoturi pe panoul din stânga pentru a adăuga punctele de acces. În mod implicit, widgetul EA Image Hotspots conține un hotspot. Puteți face clic pe punctul de acces implicit pentru a-i edita conținutul.
În mod implicit, tipul punctului de acces este setat la icoană. Îl poți schimba în Text sau pleci Vide dacă vrei.
Faceți clic pe filă POZIȚIA pentru a seta poziția punctului de acces. Setați pozițiile X și Y trăgând glisoarele.
Faceți clic pe filă TOOLFIS pentru a adăuga conținutul descrierii. Activați explicația și adăugați conținutul dvs. în editor. De asemenea, puteți seta poziția indicatorului, sus, jos, stânga sau dreapta.
Pentru a adăuga mai multe hotspot-uri, faceți clic pe butonul ADĂUGAȚI UN ELEMENT în secțiune hotspoturi și repetați pașii de mai sus pentru a seta poziția hotspot-ului, conținutul descrierii și poziția descrierii.
Deschideți secțiunea Setări pentru indicații pentru a seta dimensiunea indicatoarelor și efectul de animație.
Acum accesați fila Stil pentru a vă stila punctele fierbinți, precum și sfaturile instrumente. Mai întâi, deschideți opțiunea Imagine pentru a seta dimensiunea imaginii.
Deschideți secțiunea Hotspot pentru a personaliza hotpot-urile. Puteți seta dimensiunea, culoarea pictogramei (sau textul în funcție de tipul de hotspot pe care l-ați selectat), culoarea de fundal, raza marginii etc.
Descoperiți și: Cum să adăugați elemente înrudite în Elementor
Deschideți secțiunea Tooltip pentru a personaliza sfaturi cu instrumente. Puteți seta culoarea de fundal, culoarea textului, tipografia (dimensiunea fontului, familia de fonturi, stilul fontului) și lățimea.
Până acum ați creat cu succes imagini cu hotspot-uri. Vă puteți juca cu panoul din stânga pentru a vă personaliza imaginile cu hotspot-uri până când sunteți mulțumit de rezultat. După ce ați terminat, puteți face clic pe butonul publier pentru a vă publica pagina.
Adăugați imagini cu hotspot-uri la Gutenberg
Dacă doriți să adăugați imagini cu hotspot-uri ca material suport pentru articolul la care lucrați, îl puteți integra cu Gutenberg (editorul WordPress implicit) folosind plugin-ul Elementor Blocks pentru Gutenberg. Acest plugin vă permite să utilizați un șablon Elementor ca bloc Gutenberg.
Pentru a salva imaginile cu hotspot-uri de mai sus ca șablon de secțiune Elementor, faceți clic dreapta pe mânerul secțiunii și selectați Salvați ca șablon.
Dă-i modelului un nume și dă clic pe buton ÎNREGISTRATOR.
Deschideți articolul în care doriți să adăugați imagini cu hotspot-uri. Adăugați un bloc nou, selectați Biblioteca Elementor și selectați șablonul de imagine cu hotspot-urile pe care tocmai le-ați creat.
Obțineți Elementor Pro acum!!!
Concluzie
Aici ! Gata pentru acest articol care vă arată cum creați o imagine interactivă cu Hotspot-uri în WordPress datorită Elementor și Essential Addons. Dacă aveți nelămuriri cu privire la cum să ajungeți acolo, anunțați-le în comentarii.
Cu toate acestea, puteți consulta și resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
