Modulele de hartă facilitează integrarea Google Maps personalizată oriunde pe pagina dvs. Puteți chiar să adăugați pini nelimitați pe hartă și să setați o locație de pornire personalizată. Modulele de carduri vin, de asemenea, într-un format cu lățime completă, deci asigurați-vă că verificați și asta!
Cheia API Google Maps
O cheie API este cerinţe pentru a utiliza modulul Harta. Pentru a obține o cheie API, conectați-vă la Google Developers Console, care vă va ghida prin proces și va activa automat API-ul JavaScript Google Maps și toate serviciile asociate. 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 cum doriți. În acest exemplu, l-am numit pur și simplu „Hărți”. De asemenea, puteți introduce nume de domeniu site-ului dvs. (adăugați un * în fața acestuia dacă permiteți accesul de pe www.domain.com și domain.com) pentru a vă asigura că cheia dvs. API este autorizată.
După ce ați creat un proiect numit, veți vedea o cheie API pe care o puteți utiliza.
După obținerea unei chei API, trebuie să o copiați / să o inserați în panoul de opțiuni tematice accesând: Divi >> Opțiuni temă >> Setări generale >> Cheia API Google Maps
Cum să adăugați un modul de hartă la pagina dvs.
Înainte de a putea adăuga un modul de hartă la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe site-ul dvs., veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Utilizați Visual Builder când îți răsfoiești site-ul în prim plan dacă ești conectat la tabloul de bord WordPress.
După ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Modulele noi pot fi adăugate numai în rânduri. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi un rând la pagina dvs.
Găsiți modulul de hartă în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „hartă” și apoi să faceți clic pe Enter pentru a găsi și adăuga automat modulul de hartă! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupuri principale: Conținut , Concepție et avansat .
Exemplu de caz de utilizare: Adăugați un modul de hartă la o pagină de contact
Un modul de hartă este o modalitate excelentă de a vă prezenta locația afacerii pe pagina de contact. Iar capacitatea de a adăuga mai multe indicatoare pe hartă pentru a evidenția diferite locații și informații despre afaceri este o caracteristică utilă și atractivă.
Pentru acest exemplu, voi adăuga un modul de hartă pentru a prezenta informații despre locație și companie, adăugând un indicator personalizat pe hartă.
Important : Asigurați-vă că a fost introdusă o cheie API Google validă în panoul Opțiuni al Divi tema. Modulul de hartă nu va funcționa fără el.
Folosind Visual Builder, adăugați o secțiune standard în partea de jos a paginii de contact. Apoi introduceți modulul Hartă în noua secțiune. În fila Conținut a setărilor cardului, introduceți adresa companiei dvs. sub opțiunea Adresa centrului cardului. Adresa centrului hărții este punctul central al hărții.
Apoi faceți clic pe + Adaugă un articol nou pentru a crea primul dvs. PIN. Actualizați următoarele:
Titlu: [introduceți titlul locației dvs.]
Conținut: [introduceți conținutul PIN (adresa și numărul de telefon)]
Adresa hărții: [introduceți adresa pentru această locație specifică]
Salvați setările
Asta e tot. Acum aveți un modul de hartă dinamică în partea de jos a paginii de contact, cu un PIN care poate fi făcut clic, care afișează informații despre companie.
Opțiunile privind conținutul modulelor de hartă
În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.
+ Adăugați un articol nou
Aici adăugați noi pini (sau sloturi) la modulul de bord. Dacă faceți clic pe „adăugați un element nou” se va deschide o listă complet nouă de setări de design (inclusiv conținut, design, avansat) pentru noul dvs. PIN. Vedeți mai jos setările individuale ale pinului.
După ce ați adăugat primul dvs. PIN, veți vedea o bară gri cu titlul PIN-ului ca etichetă. Bara gri are, de asemenea, trei butoane care vă permit să editați, să copiați sau să ștergeți știftul.
Cheia API Google
Modulul Hărți utilizează API-ul Google Maps și necesită o cheie Google API validă pentru a funcționa. Înainte de a utiliza modulul Hartă, asigurați-vă că ați adăugat cheia API în panoul Opțiuni al Divi tema.
Adresa centrului hărților
Introduceți o adresă pentru punctul central al hărții, iar adresa va fi geocodificată și afișată pe harta de mai jos. Acest lucru este util dacă aveți mai mulți pini și doriți ca harta să fie mărită într-o locație specifică și mai precisă. Puteți pur și simplu să tastați o adresă într-un format standard, cum ar fi „1235 Sunny Road, Some City, State, 88343”.
Etichetă de administrator
Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.
Opțiunile de proiectare a modulului hărților
În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice doriți.
Rotița mouse-ului Zoom
Aici puteți alege dacă nivelul de zoom va fi controlat de roata mouse-ului sau nu. De multe ori, cel mai bine este să dezactivați această opțiune, astfel încât vizitatorii să nu fie deranjați în timp ce derulează pagina și blochează roata mouse-ului în iframe-ul hărții. Acest lucru este valabil mai ales pentru modulele de carduri cu lățime completă.
Zoom trasabil
Puteți alege aici dacă cardul poate fi mutat pe dispozitive mobile.
Utilizați filtrul în tonuri de gri
Activarea acestei opțiuni va transforma harta dvs. într-o imagine în tonuri de gri.
Opțiuni avansate de hartă
Î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 oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.
Cod CSS
Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.
CSS
Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea un stil CSS personalizat. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi utilizate în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina dvs. sau la site-ul dvs. web utilizând opțiunile temei Divi sau setările paginii Divi Builder.
CSS personalizate
CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.
vizibilitate
Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.
Opțiuni pentru cartelele individuale ale cardurilor
Titlu
Când creați un nou pin, puteți atribui un titlu. Acest titlu va apărea în casetă atunci când treceți cu mouse-ul peste pinul de pe hartă.
Conținut
Când creați un nou pin, puteți atribui un bloc de text de conținut. Acest text va apărea în casetă când treceți cu mouse-ul peste pinul de pe hartă.
Adresă hartă
Acesta este locul exact de pe hartă unde va apărea noul tău cod. Puteți introduce adresa într-un format standard.
[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCĂRCĂ TEMA DIVI [/vcex_button][/vc_column][vc_column] width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]
Alte tutoriale Divi
- site-uri web 5 pentru utilizare restaurant tematic Divi
- Cum să adăugați text pe un produs Divi WooCommerce
- Modificarea culorii meniului între paginile Divi
- Cum să personalizați grilele unui blog cu Divi
- Cum de a utiliza rolul editor Divi pe WordPress
- Cum se creează un glisor Divi pe ecran complet
- Modificarea culorii meniurilor între paginile Divi
- Caracteristici pe care probabil nu le cunoașteți despre Divi
- Cum se utilizează Divi Builder pe WordPress
- Cum se utilizează modulul de defilare video Divi
- Cum se utilizează modulul Divi Builder Flip
- Cum să adăugați un modul de mărturie pe Divi Builder
- Cum se utilizează modulul de text Divi
- Cum se creează un slider pe Divi
- Cum se editează un rol de utilizator Divi
- Cum se utilizează modulul Divi Social Media
- Cum se utilizează modulul magazin pe tema WordPress Divi
- Cum se utilizează modulul bara laterală Divi
- Cum se utilizează modulul de prețuri pentru divi
- Cum se utilizează modulul de titlu al publicațiilor Divi
- Cum se adaugă un modul video de Divi
- Cum să utilizați modulul de navigare pentru articole
- Cum se utilizează modulul de căutare Divi
- Cum se utilizează modulul portofel Divi
- Cum se utilizează modulul persoană pe Divi Builder
- Cum se utilizează modulul portofel cu filtrul Divi
- Modul de utilizare a modulului glisant cu lățime întreagă
- Cum se utilizează modulul de imagine Divi Builder
- Modul de utilizare a modulelor de navigație full-width din Divi Builder
- Cum se utilizează modulul galerie de imagini
- Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
- Cum să utilizați modulul de portofoliu Full Width Divi
- Cum se utilizează modulul antet de Divi pentru lățimea completă
- Cum se utilizează modulul Counter Modul Divi
- Cum se utilizează glisorul de articole pe Divi Builder
- Cum se utilizează modulul Divi Email Optin
