Cum să adăugați o hartă interactivă în WordPress

Adăugarea unei hărți pe site-ul dvs. WordPress este importantă atunci când aveți o afacere cu o locație fizică sau creați conținut despre locuri specifice.

Poate părea complicat la început, dar am găsit câteva instrumente utile care fac procesul mult mai ușor. În acest articol, vă vom arăta două metode simple pentru a adăuga o hartă interactivă pe site-ul dvs. WordPress.

Vă vom ghida prin fiecare pas, de la alegerea instrumentului potrivit la încorporarea hărții pe pagina dvs.

Când să adăugați o hartă interactivă în WordPress

Dacă aveți o afacere fizică, cum ar fi un magazin sau o cafenea, o hartă interactivă poate ajuta potențialii vizitatori să vă găsească locația. Acest lucru vă poate aduce mai mulți clienți, vânzări și chiar programări și rezervări personale.

De asemenea, poate îmbunătăți experiența utilizatorului, deoarece vizitatorii își pot planifica călătoria fără a fi nevoiți să folosească o aplicație sau un site web separat pentru hărți.

În funcție de site-ul dvs. web, o hartă interactivă ar putea chiar să ofere conținut util. De exemplu, dacă aveți un blog de fitness, atunci ați putea arăta rute de alergare sau drumeții recomandate cititorilor dvs.

Similar, dacă aveți un blog de familie, atunci ați putea evidenția toate atracțiile potrivite pentru copii unde publicul dvs. poate duce familiile.

Acestea fiind spuse, să vedem două moduri prietenoase pentru începători de a adăuga o hartă interactivă în WordPress. Pur și simplu utilizați linkurile rapide de mai jos pentru a sări direct la metoda pe care doriți să o utilizați:

• Metoda 1. Adăugați o hartă mondială interactivă folosind un Page Builder (Pagini personalizate cu hărți)
• Metoda 2. Creați hărți interactive personalizate gratuit folosind Google My Maps

Metoda 1. Adăugați o hartă interactivă a lumii folosind un constructor de pagini (Pagini personalizate cu hărți)

Cel mai simplu mod de a adăuga o hartă interactivă simplă în WordPress este prin utilizarea Google Maps și a pluginului SeedProd.

Acest plugin avansat de constructor de pagini vă permite să creați pagini cu design profesional, fără a fi nevoie să scrieți o singură linie de cod.

De asemenea, vine cu un bloc Google Maps gata făcut pe care îl puteți pur și simplu trage și plasa pe aspectul dvs. Vizitatorii pot interacționa cu harta dvs. folosind butoanele de zoom sau pot trage pentru a explora alte zone.

SeedProd facilitează crearea de pagini independente cu un design unic, deci este o alegere excelentă și dacă doriți să adăugați o hartă interactivă la o pagină de pornire personalizată sau la o pagină de destinație.

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

La activare, trebuie să introduceți o cheie de licență.

Puteți găsi aceste informații în contul dvs. pe site-ul SeedProd. După adăugarea cheii de licență, faceți clic pe „Verificați cheia”.

După ce ați terminat, accesați SeedProd » Pagini de destinație și faceți clic pe „Adăugare pagină de destinație nouă”.

SeedProd va afișa acum toate șabloanele pe care le puteți utiliza pentru a crea pagini de destinație, pagini de vânzări și multe altele. Pentru a vă ajuta să găsiți șablonul potrivit pentru site-ul dvs., șabloanele SeedProd sunt împărțite în categorii precum modul de întreținere, în curând, webinar și multe altele.

Pentru a examina mai atent orice design, pur și simplu plasați cursorul mouse-ului peste acel șablon. Apoi, faceți clic pe pictograma lupă.

Aceasta va deschide șablonul într-o filă nouă.

Când găsiți un design pe care doriți să îl utilizați pe site-ul dumneavoastră WordPress, faceți clic pur și simplu pe „Alegeți acest șablon”.

Acum puteți introduce un nume pentru pagina dvs. de destinație în câmpul „Nume pagină”. Acesta este doar pentru referința dvs., deci puteți folosi orice doriți.

SeedProd va crea automat un „URL al paginii” folosind numele paginii, dar puteți schimba acest URL generat automat.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „Salvează și începe editarea paginii”. Aceasta va încărca interfața de construire a paginilor SeedProd.

Acest constructor simplu de tip drag-and-drop afișează o previzualizare live a paginii în dreapta. În stânga se află un meniu care arată diferitele blocuri și secțiuni pe care le puteți adăuga la blogul dvs. WordPress sau site-ul web.

SeedProd vine cu peste 90 de blocuri gata făcute care vă pot ajuta să creați rapid un design de pagină frumos. Aceasta include blocuri avansate precum cronometre și încorporări precum un player audio de pe SoundCloud sau videoclipuri de pe TikTok.

De asemenea, puteți utiliza blocuri SeedProd precum spațiatoare, coloane și separatoare pentru a structura pagina. Acest lucru poate ajuta vizitatorii să navigheze pe pagină și să găsească informațiile pe care le doresc.

Când găsiți un bloc pe care doriți să îl adăugați la aspectul paginii, pur și simplu trageți-l și plasați-l pe șablon. Pe măsură ce construiți pagina de destinație, puteți muta aceste blocuri în aspectul dvs. trăgându-le și plasându-le.

Pentru a adăuga o hartă interactivă, pur și simplu găsiți blocul Google Maps în meniul din stânga și trageți-l pe aspectul dvs.

Blocul Google Maps va afișa o locație implicită, dar, de obicei, veți dori să o modificați.

Pur și simplu faceți clic pentru a selecta blocul Google Maps și apoi faceți clic pe pictograma mică a rotiței dințate care apare în bara de instrumente.

Aceasta deschide setările blocului în meniul din stânga.

Aici, tastați o adresă diferită în câmpul „Location”.

Blocul se va actualiza acum pentru a afișa această adresă.

Vizitatorii pot mări și micșora această locație manual folosind butoanele de nivel de zoom „+” și „-” din colțul din dreapta al hărții. Cu toate acestea, puteți modifica zoom-ul implicit trăgând glisorul „Zoom” sau tastând un număr exact în caseta de text.

După aceea, este posibil să doriți să redimensionați blocul folosind glisoarele „Lățime” și „Înălțime”. „Înălțimea” este afișată în pixeli, dar „Lățimea” este procentul total disponibil. De exemplu, „100” înseamnă că blocul Google Maps ocupă 100% din lățimea disponibilă.

Pentru a modifica oricare dintre aceste valori, pur și simplu glisați glisoarele sau introduceți un număr în caseta de text. Pe măsură ce faceți modificări, blocul Google Maps se va actualiza automat, astfel încât să puteți încerca diferite setări pentru a vedea ce arată cel mai bine.

Dacă setați lățimea la mai puțin de 100, este posibil să doriți să schimbați alinierea blocului. De exemplu, ați putea afișa harta interactivă în centrul paginii.

Pentru a face această modificare, pur și simplu faceți clic pe butoanele diferite din secțiunea „Aliniere”.

Acum puteți continua să lucrați la design trăgând blocuri noi pe aspectul paginii și apoi făcând modificări în meniul din stânga. Pentru mai multe informații, vă rugăm să consultați ghidul nostru despre cum să creați o pagină de destinație în WordPress.

Când sunteți mulțumit de modul în care este configurată pagina, faceți clic pe săgeata de lângă butonul „Salvare” și apoi selectați „Publicare”.

Acum, dacă vizitați site-ul dvs. web, veți vedea harta interactivă în acțiune.

Metoda 2. Creați hărți interactive personalizate gratuit folosind Google My Maps

Dacă doriți să adăugați o hartă Google cu interacțiuni de bază, atunci SeedProd este o alegere excelentă.

Totuși, dacă trebuie să oferiți interacțiuni mai avansate, atunci vă recomandăm să folosiți în schimb Google My Maps.

Acest serviciu online gratuit vă permite să personalizați o hartă Google cu markere unice, puncte de interes, indicații de condus și multe altele. Apoi o puteți adăuga pe site-ul dvs. folosind cod, astfel încât nu va trebui să instalați un plugin WordPress separat.

Pasul 1: Creați o hartă interactivă folosind Google My Maps

Mai întâi, trebuie să vizitați site-ul web Google My Maps și să faceți clic pe „Create a new map”.

Acum veți vedea editorul de hărți.

Aici, puteți selecta o hartă de bază și puteți adăuga puncte de interes, straturi și multe altele.

Pentru a vă ajuta să vă păstrați munca organizată, este o idee bună să dați un nume stratului.

Pentru a face acest lucru, faceți clic pe cele trei puncte de lângă „Strat fără titlu” și apoi selectați „Redenumiți acest strat”.

Acum puteți introduce numele pe care doriți să îl utilizați. Acesta este doar pentru referința dumneavoastră, deci puteți folosi orice doriți.

După ce ați terminat, faceți clic pe „Salvează”.

Apoi, puteți schimba aspectul hărții alegând unul dintre stilurile gata făcute. Pentru a vedea opțiunile disponibile, faceți clic pe săgeata de lângă „Hartă de bază”.

Apoi puteți face clic pe oricare dintre miniaturi pentru a aplica acel stil hărții.

Pasul 2: Adăugați puncte de interes pe harta interactivă

Dacă doriți doar să creați o hartă simplă, puteți sări la pasul 4. Cu toate acestea, s-ar putea să doriți să personalizați harta adăugând puncte de interes.

Când un vizitator face clic pe oricare dintre aceste puncte, se va deschide o casetă de text care va afișa numele locației, plus o descriere, fotografii și videoclipuri, acolo unde sunt disponibile.

Există câteva moduri diferite de a adăuga puncte de interes pe care se poate face clic, dar cel mai ușor este să introduceți adresa în bara de căutare și apoi să faceți clic pe pictograma „Căutare”.

Google My Maps se va apropia acum de zonă.

Uneori, locația poate fi deja adăugată ca punct de interes, mai ales dacă locul este o atracție turistică mare sau o clădire faimoasă. În acest caz, puteți pur și simplu să faceți clic pe locație și apoi să selectați „Adăugați pe hartă”.

Dacă punctul de interes există deja, Google My Maps va afișa automat informații despre această locație într-o fereastră pop-up. Cu toate acestea, este posibil să doriți să personalizați aceste informații implicite sau să adăugați propriile fotografii și videoclipuri.

Pentru a face acest lucru, faceți clic pe pictograma „Editare”, care arată ca un mic creion.

Acum puteți introduce titlul și descrierea pe care doriți să le afișați oricui face clic pe acest punct de interes.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „Salvare”.

O altă opțiune este să adăugați propriile imagini și videoclipuri în popup.

De exemplu, dacă creați o hartă interactivă pentru site-ul web al restaurantului dvs., atunci ați putea adăuga fotografii ale exteriorului locației pentru a ajuta clienții să o găsească.

Ați putea chiar să folosiți acest pop-up pentru a atrage mai mulți clienți. De exemplu, dacă adăugați studioul dvs. de fotografie ca punct de interes, atunci ați putea încărca portofoliul dvs. de fotografie.

Pentru a adăuga media, faceți clic pur și simplu pe mica pictogramă a camerei.

Acum puteți alege o imagine sau un videoclip în fereastra pop-up care apare.

După ce ați făcut selecția, faceți clic pe „Inserare”.

Când ați terminat, nu uitați să faceți clic pe „Salvare” pentru a vă stoca modificările.

Uneori, este posibil să doriți să afișați o locație care nu a fost adăugată pe Google Maps. Acesta ar putea fi propriul dvs. birou, un localizator de magazine, o atracție turistică nou-nouță sau punctul de întâlnire pentru evenimentul sau conferința dvs.

Pentru a adăuga un marcator, faceți clic pe pictograma „Adăugați un marcator” de sub bara de căutare.

Acum puteți face clic pe locul exact unde doriți să creați un marcator.

Aceasta va deschide un popup gol unde puteți introduce un titlu și o descriere. De asemenea, puteți adăuga imagini și videoclipuri făcând clic pe mica pictogramă a camerei.

Când sunteți mulțumit de modul în care este configurată fereastra pop-up, faceți clic pe butonul „Salvare”.

Pentru a crea mai multe puncte de interes, urmați pur și simplu același proces descris mai sus.

Pasul 3: Adăugați direcții de călătorie pe o hartă interactivă

Este posibil să doriți să adăugați și câteva indicații, care vor fi afișate ca o linie albastră pe hartă.

Această funcție de hartă poate fi utilă dacă doriți să ajutați participanții să vă găsească evenimentul sau un loc precum barul sau pub-ul dumneavoastră. Dacă aveți un blog de călătorii, ați putea chiar recomanda cititorilor dumneavoastră rute turistice.

Există câteva moduri diferite de a adăuga indicații, dar cea mai ușoară metodă este să faceți clic pe pictograma „Adăugați indicații” de sub bara de căutare.

Aceasta adaugă o nouă secțiune în stânga ecranului, unde puteți introduce adresele de pornire și de destinație pe care doriți să le utilizați.

Implicit, Google Maps va afișa indicații de condus, dar puteți comuta la indicații de mers pe jos sau de ciclism în schimb. Pur și simplu faceți clic pe textul care afișează implicit „Driving” și apoi selectați pictograma Ciclism sau Mers pe jos.

O altă opțiune este să desenați o linie pe hartă. Acest lucru este util dacă doriți să arătați un traseu foarte specific între două sau mai multe locații, mai degrabă decât cel mai rapid traseu.

Pentru a face acest lucru, faceți clic pe pictograma „Desenați o linie” de sub bara de căutare. Acum puteți alege dacă doriți să adăugați o rută de condus, de mers pe jos sau de ciclism.

După aceea, faceți clic pe punctul de pornire și desenați o linie mișcând mouse-ul de-a lungul traseului pe care doriți să îl urmați.

Când ajungeți la destinație, pur și simplu faceți clic pentru a plasa un marcator în acel loc. În acest moment, puteți opri desenarea sau puteți continua să mișcați mouse-ul pentru a adăuga mai mulți marcatori pe traseu.

Pasul 4: Publicați harta interactivă în WordPress

Când sunteți mulțumit de modul în care este configurată harta, o puteți adăuga pe site-ul dvs. web folosind un cod de încorporare iFrame.

Pentru a începe, va trebui să faceți harta publică făcând clic pe butonul „Partajare”. Aceasta deschide o fereastră pop-up unde puteți introduce un titlu pentru hartă și o descriere opțională.

Când sunteți mulțumit de informațiile introduse, faceți clic pe „OK”.

Apoi, veți dori să activați comutatorul „Oricine cu acest link poate vizualiza”. Celelalte setări sunt opționale, deci puteți decide dacă permiteți oamenilor să caute harta sau să vă afișeze numele și fotografia de profil.

Când sunteți mulțumit de configurare, faceți clic pe „Partajați pe Drive”.

În următorul popup, deschideți meniul derulant de sub „Acces general” și selectați „Oricine cu link-ul”.

Deoarece nu dorim ca alte persoane să editeze harta, faceți clic pe meniul derulant „Viewer/Editor” și selectați „Viewer”. În final, faceți clic pe „Done”.

După aceea, faceți clic pe pictograma cu trei puncte din meniul din stânga.

Apoi, alegeți „Încorporați pe site-ul meu”.

Google Maps va afișa acum un cod de încorporare care vă permite să adăugați harta în magazinul online, blogul sau site-ul dvs. web.

Puteți copia acest cod iframe.

Acum sunteți gata să lipiți codul pe site-ul dumneavoastră. În tabloul de bord WordPress, accesați postarea sau pagina unde doriți să adăugați o hartă interactivă și deschideți editorul Gutenberg.

Apoi, faceți clic pe butonul „+” și începeți să tastați „HTML” pentru a găsi blocul HTML personalizat. Când apare blocul corect, faceți clic pentru a-l adăuga la postare sau pagină.

Acum puteți lipi codul Google Maps în blocul HTML personalizat.

Când sunteți gata să publicați, faceți clic pe butonul Actualizare sau Publicare.

Acum, dacă vizitați site-ul dvs. web, veți vedea harta interactivă live.

Doriți să aflați mai multe despre adăugarea hărților în WordPress? Consultați articolele de mai jos:

• Cum să adăugați Google Maps în WordPress (Metoda CORECTĂ)
• Cele mai bune pluginuri Google Maps pentru WordPress (majoritatea sunt gratuite)
• Cum să încorporați o hartă Google în formulare de contact (cu pin pe hartă)
• Cum să adăugați un localizator de magazine Google Maps în WordPress
• Cum să încorporați hărți Bing în WordPress (pas cu pas)

Sperăm că acest tutorial v-a ajutat să învățați cum să adăugați o hartă interactivă în WordPress. De asemenea, ați putea dori să învățați cum să adăugați Google Web Stories pe site-ul dvs. WordPress sau să citiți ghidul nostru complet despre încorporarea fișierelor PDF, foilor de calcul și altele în 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.