Modulul Divi Fullwidth Map
Cum să adăugați, să configurați și să personalizați Modulul Divi Fullwidth Map.
Modulele de hărți facilitează încorporarea Hărților Google personalizate oriunde pe pagina dvs. Puteți chiar să adăugați indicații nelimitate pe hartă și să definiți o locație de pornire personalizată. Modulele de hărți sunt, de asemenea, într-un format de lățime normală, așa că asigurați-vă că verificați și asta!
Cheia API Google Maps
Este necesară o cheie API pentru a utiliza Modulul Hărți. Pentru a obține o cheie API, conectați-vă la Google Developers Console, care vă va ghida prin proces și activați automat API-ul JavaScript Google Maps și orice servicii conexe. Primul lucru care vi se va cere este să creați un nou proiect.
În continuare, vi se va cere să vă denumiți proiectul. Puteți denumi proiectul orice doriți. În acest exemplu, l-am numit pur și simplu „Hărți”. De asemenea, puteți introduce numele domeniului site-ului dvs. (adăugați un * în fața acestuia dacă permiteți accesul atât de la www.domain.com, cât și de la domain.com) pentru a vă asigura că alte site-uri web au permisiunea de a accesa cheia dvs. API.
După ce ați creat un proiect, vi se va prezenta o cheie API pe care o puteți utiliza.
După ce ați obținut o cheie API, trebuie să o copiați/lipiți în panoul de opțiuni ale temei navigând la: Divi>>Opțiuni temă>>Setări generale>>Cheie API Google Maps
Cum să Adăugați Modulul Divi Fullwidth Map la Pagina dvs.
Înainte de a putea adăuga Modulul Divi Fullwidth Map la pagina dvs., va trebui mai întâi să accesați Divi Builder. Odată ce Tema Divi a fost instalată pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postări de fiecare dată când construiți o pagină nouă. Făcând clic pe acest buton, se va activa Divi Builder, oferindu-vă acces la toate modulele Divi Builder. Apoi, faceți clic pe butonul Utilizați generatorul vizual pentru a lansa generatorul în modul vizual. Puteți, de asemenea, să faceți clic pe butonul Activați Visual Builder atunci când navigați pe site-ul dvs. pe front-end dacă sunteți conectat la tabloul de bord WordPress.
După ce ați intrat în Visual Builder, puteți face clic pe butonul gri plus pentru a adăuga un nou modul la pagina dvs. Noile module cu lățime completă pot fi adăugate numai în interiorul secțiunilor cu lățime completă. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi o secțiune cu lățime completă la pagina dvs. Avem un tutorial despre cum să folosiți elementele secțiunii Divi.
Localizați Modulul Divi Fullwidth Map în lista de module și faceți clic pe el pentru a-l adăuga pe pagina dvs. Lista de module poate fi căutată, ceea ce înseamnă că puteți introduce și cuvântul „fullwidth map” și apoi faceți clic pe Enter pentru a găsi și adăuga automat modulul hărții cu lățime completă! Odată ce modulul a fost adăugat, veți fi întâmpinat cu lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut, Design și Avansat.
Exemplu de Caz de Utilizare: Adăugați Modulul Divi Fullwidth Map la o Pagină de Contact
Un modul de hartă cu lățime completă este o modalitate excelentă de a vă prezenta locația companiei pe pagina de contact. Iar capacitatea de a adăuga mai multe indicatoare pe hartă pentru a prezenta diferite locații și informații ale companiei este o funcție utilă și captivantă.
Pentru acest exemplu, voi adăuga un Modulul Divi Fullwidth Map pentru a prezenta locația companiei și informațiile prin adăugarea unui indicator personalizat pe hartă.
Asigurați-vă că a fost introdusă o cheie API Google validă în panoul Opțiuni pentru tema Divi. Modulul Hartă nu va funcționa fără el.
Folosind Visual Builder, adăugați o secțiune cu lățime completă în partea de jos a paginii de contact. Apoi inserați Modulul Divi Fullwidth Map în noua secțiune. În fila Conținut din Setările hărții cu lățime completă, introduceți adresa companiei dvs. sub opțiunea Adresa centrului hărții. Adresa centrului hărții este pentru punctul central al hărții.
Apoi faceți clic pe + Adăugați un articol nou pentru a crea primul indicator. Actualizați următoarele:
- Titlu: [introduceți titlul locației dvs.]
- Conținut: [introduceți conținutul pentru PIN-ul dvs. (de ex. adresa și numărul de telefon)]
- Adresa PIN Hartă: [introduceți adresa pentru această locație specifică]
Salvează setările
Asta e. Acum aveți un modul dinamic de hartă cu lățime completă în partea de jos a paginii de contact, cu un indicator pe care se poate face clic care afișează informații despre companie.
Opțiuni Conținut Pentru Modulul Divi Fullwidth Map
În fila de Conținut veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Orice lucru care controlează ceea ce apare în modulul tău va fi întotdeauna găsit în această filă.
Cheia API Google
Modulul Hărți utilizează API-ul Google Maps și necesită o cheie API Google validă pentru a funcționa. Înainte de a utiliza modulul de hartă, asigurați-vă că ați adăugat cheia API în panoul Opțiuni Teme Divi. Aflați mai multe despre cum să vă creați cheia API Google aici.
Adresa Centrală în Hartă
Introduceți o adresă pentru punctul central al hărții, iar adresa va fi geocodata și afișată pe harta de mai jos. Acest lucru este util dacă aveți mai multe indicatoare și doriți să măriți harta într-o locație specifică, mai concentrată. Puteți introduce pur și simplu o adresă într-un format standard, cum ar fi „5 B-dul Victoriei, Brașov, România, 500125”.
Eticheta de Administrator
Acest lucru va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete vor apărea în blocul modulului din interfața Divi Builder.
Opțiuni de Design Pentru Modulul Divi Fullwidth Map
În fila de Design veți găsi toate opțiunile de stil ale modulului, cum ar fi fonturi, culori, dimensiune și spațiere. Aceasta este fila pe care o veți folosi pentru a schimba modul în care arată modulul. Fiecare modul Divi are o listă lungă de setări de design pe care le puteți folosi pentru a schimba aproape orice.
Zoom cu Ajutorul Rotiței de pe Mouse
Aici puteți alege dacă nivelul de zoom va fi controlat de rotița mouse-ului sau nu. De multe ori este mai bine să dezactivați această opțiune, astfel încât vizitatorii să nu fie deranjați în timp ce derulează în jos pe pagină și își blochează roata mouse-ului în cadrul iframe-ului hărții. Acest lucru este valabil mai ales pentru modulele de hărți cu lățime completă.
Zoom Care Poate fi Glisat
Aici puteți alege dacă harta va fi sau nu glisabilă pe dispozitivele mobile.
Utilizați Filtrul în Tonuri de Gri
Activarea acestei opțiuni va transforma harta într-o imagine în tonuri de gri.
Opțiuni Avansate Pentru Modulul Divi Fullwidth Map
În fila Avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat la oricare dintre multele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate la modul, care pot fi folosite pentru a personaliza modulul în fișierul style.css al Temei Copil.
ID CSS
Introduceți un ID CSS opțional pentru a fi utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea link-uri către anumite secțiuni ale paginii dvs.
Clasa CSS
Introduceți clase CSS opționale care vor fi utilizate pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema Divi Child sau în CSS-ul personalizat pe care îl adăugați la pagina sau site-ul dvs. folosind Opțiunile Temei Divi sau setările paginii Divi Builder.
CSS Personalizat
CSS personalizat poate fi aplicat și la modul și la oricare dintre elementele interne ale modulului. În secțiunea CSS personalizat, veți găsi un câmp de text în care puteți adăuga CSS personalizat direct la fiecare element. Intrările CSS în aceste setări sunt deja incluse în etichete de stil, așa că trebuie să introduceți doar reguli CSS separate prin punct și virgulă.
Vizibilitate
Această opțiune vă permite să controlați pe ce dispozitive apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, telefoane inteligente sau computere desktop. Acest lucru este util dacă doriți să utilizați diferite module pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente din pagină.
Opțiuni Individuale Pentru Modulul Divi Fullwidth Map
Titlu
În timp ce creați un PIN nou, puteți atribui un Titlu. Acest titlu va apărea în casetă când treceți cu mouse-ul peste indicatorul de pe hartă.
Conținut
În timp ce creați un pin nou, puteți aloca un bloc de text de conținut. Acest text va apărea în casetă când treceți cu mouse-ul peste indicatorul de pe hartă.
Adresa PIN Pentru Hartă
Aceasta este locația specifică de pe hartă în care va apărea noul indicator. Puteți introduce adresa într-un format standard.
