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!

hartă divi apercu.png

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.

înregistrați un API Google.jpg

Apoi vi se va cere să vă denumiți proiectul. Puteți denumi proiectul oricum doriți. În acest exemplu, tocmai l-am numit „Carduri”. De asemenea, puteți introduce numele domeniului site-ului dvs. web (adăugați un * înaintea acestuia dacă permiteți accesul de la www.domain.com și domain.com) pentru a vă asigura că este autorizat pentru cheia dvs. API.

pentru a numi un proiect Google API.jpg

După ce ați creat un proiect numit, veți vedea o cheie API pe care o puteți utiliza.

creați o aplicație de identificare a hărții Google .jpg

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ă intrați în Divi Builder. Odată ce tema Divi este instalată pe site-ul dvs. web, 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.

divi builder

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 companiei pe pagina dvs. de contact. Iar capacitatea de a adăuga mai multe pini pe hartă pentru a prezenta diferite locații și informații despre companie 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 pin personalizat pe hartă.

prezentare harta google map company.jpg

Important : Asigurați-vă că a fost introdusă o cheie API Google validă în panoul Opțiuni al temei Divi. Modulul cardului 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.

adăugați o hartă a opțiunilor divi.jpg

Apoi faceți clic pe + Adaugă un articol nou pentru a crea primul dvs. PIN. Actualizați următoarele:

Titre: [entrez le titre de votre emplacement]
Contenu: [entrez le contenu de votre épinglette (adresse et numéro de téléphone)]
Adresse de la carte: [entrez l’adresse pour ce lieu précis]

introduceți o adresă pentru un loc precis.jpg

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.

pin divi module card.jpg

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ă.

opțiune conținut modul map.png

+ 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 Maps utilizează API-ul Google Maps și necesită o cheie API Google 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 temei Divi.

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.

modulul de harta ongle design.png

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.

tab de avans module divi.png

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

opțiunea de close divi.png

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 = "da"] [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"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 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" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

15 acțiuni
acțiune8
tweet1
Registru6