Moduli karata olakšavaju integraciju prilagođenih Google karata bilo gdje na vašoj stranici. Na kartu možete dodati čak i neograničene pribadače i postaviti prilagođeno početno mjesto. Moduli kartica također dolaze u formatu pune širine, pa svakako i to provjerite!
API ključ Google Maps
Ključ API je zahtjevi za korištenje modula Map. Da biste dobili API ključ, prijavite se na Google konzola za razvojne programere, koji će vas provesti kroz postupak i automatski aktivirati Google Maps JavaScript API i sve povezane usluge. Prvo što će se od vas tražiti je stvaranje novog projekta.
Zatim će se od vas tražiti da imenujete svoj projekt. Možete nazvati projekt kako god želite. U ovom sam ga primjeru jednostavno nazvao "Karte". Također možete unijeti naziv domene vaše web stranice (dodajte * ispred ako dopuštate pristup s www.domain.com i domain.com) kako biste bili sigurni da je vaš API ključ autoriziran.
Nakon što izradite imenovani projekt, vidjet ćete API ključ koji možete koristiti.
Nakon nabavke API ključa, morate ga kopirati / zalijepiti na ploču s opcijama teme tako da otvorite: Divi >> Opcije teme >> Opće postavke >> API ključ Google Maps
Kako dodati modul karte na svoju stranicu
Prije nego što svojoj stranici možete dodati modul karte, prvo morate uskočiti u Divi Builder. Jednom Divi tema instaliran na vašoj web stranici, primijetit ćete gumb Koristite Divi Builder iznad uređivača postova kad god izradite novu stranicu. Pritisnite ovaj gumb da biste aktivirali Divi Builder i pristupili svim modulima Divi Builder. Zatim kliknite na gumb Koristite Visual Builder za pokretanje generatora u vizualnom načinu. Također možete kliknuti gumb Koristite Visual Builder kada pregledavate web stranicu u prvom planu ako ste povezani na svoju WordPress nadzornu ploču.
Nakon što uđete u Visual Builder, možete kliknuti sivi gumb plus da biste na svoju stranicu dodali novi modul. Novi moduli mogu se dodavati samo unutar redaka. Ako započinjete novu stranicu, ne zaboravite prvo dodati redak na svoju stranicu.
Pronađite modul karte na popisu modula i kliknite ga da biste ga dodali na svoju stranicu. Popis modula je pretraživ, što znači da možete upisati i riječ "karta", a zatim kliknuti tipku enter da biste automatski pronašli i dodali modul karte! Nakon dodavanja modula, dočekat će vas popis opcija modula. Te su opcije podijeljene u tri glavne skupine: Sadržaj , Začeće et napredan .
Primjer slučaja: dodajte modul karte na stranicu kontakta
Modul karte izvrstan je način za prikazivanje lokacije vaše tvrtke na stranici s kontaktima. A mogućnost dodavanja više pribadača na vašu kartu za isticanje različitih lokacija i poslovnih podataka korisna je i atraktivna značajka.
Za ovaj primjer, dodat ću modul karte za prikaz informacija o lokaciji i tvrtki dodavanjem prilagođene pribadače na kartu.
Važno : Provjerite je li važeći Google API ključ unesen u ploču s opcijama Divi tema. Modul karte neće raditi bez njega.
Pomoću Visual Builder dodajte standardni odjeljak na dnu stranice s kontaktima. Zatim umetnite modul Map u svoj novi odjeljak. Na kartici Sadržaj postavki kartice unesite adresu tvrtke pod opcijom Adresa centra kartice. Adresa središta karte je središnja točka karte.
Zatim kliknite + Dodaj novu stavku stvoriti svoj prvi pin. Ažurirajte sljedeće:
Naslov: [unesite naslov svoje lokacije]
Sadržaj: [unesite svoj pin sadržaj (adresu i telefonski broj)]
Adresa karte: [unesite adresu za ovu konkretnu lokaciju]
Spremite postavke
To je sve. Sada imate modul dinamičke mape na dnu stranice s kontaktima s pribadačom koja može kliknuti i prikazuje podatke o tvrtki.
Opcije sadržaja modula karata
Na kartici Sadržaj pronaći ćete sve elemente sadržaja modula, kao što su tekst, slike i ikone. Sve to kontrolira što se pojavljuje u vašem modulu uvijek će se naći na ovoj kartici.
+ Dodajte novi članak
Ovdje dodajete nove igle (ili utore) na modul ploče. Klikom na "dodaj novu stavku" otvorit će se potpuno novi popis postavki dizajna (uključujući sadržaj, dizajn, napredne) za vaš novi pin. Za pojedinačne postavke pribadača pogledajte dolje.
Nakon što dodate prvu pribadaču, vidjet ćete sivu traku s naslovom pribadače kao oznakom. Siva traka također ima tri gumba koja vam omogućuju uređivanje, dupliciranje ili brisanje klina.
Google API ključ
Modul Maps koristi Google Maps API i zahtijeva važeći Google API ključ za rad. Prije korištenja modula karte, provjerite jeste li dodali svoj API ključ na ploču s opcijama Divi tema.
Adresa centra karata
Unesite adresu za središnju točku karte, a adresa će biti geokodirana i prikazana na donjoj karti. Ovo je korisno ako imate više pribadača i želite da se karta poveća na određenom i preciznijem mjestu. Možete jednostavno upisati adresu u standardnom formatu, kao što je "1235 Sunčana cesta, neki grad, država, 88343".
Oznaka administratora
Ovo će promijeniti oznaku modula u konstruktoru radi lakše identifikacije. Kada koristite prikaz WireFrame u Visual Builderu, ove se oznake pojavljuju u modulnom bloku sučelja Divi Builder.
Opcije oblikovanja modula karata
Na kartici Dizajn pronaći ćete sve mogućnosti oblikovanja modula, poput fontova, boja, veličine i razmaka. Ovo je kartica koju ćete koristiti za promjenu izgleda vašeg modula. Svaki Divi modul ima poduži popis postavki dizajna pomoću kojih možete promijeniti sve što želite.
Zumiranje kotača miša
Ovdje možete odabrati hoće li se zumom kontrolirati kotačić miša ili ne. Često je najbolje isključiti ovu opciju kako posjetitelje ne bi ometali dok pomiču stranicu i zataknu kotačić miša u okvir okvira karte. To se posebno odnosi na module kartica pune širine.
Zumiranje povisiv
Ovdje možete odabrati može li se kartica pomicati na mobilnim uređajima.
Upotrijebite filtar sivih tonova
Ako omogućite ovu opciju, karta će se pretvoriti u sliku sive.
Napredne mogućnosti karata
Na naprednoj kartici pronaći ćete opcije koje bi iskusnijim web dizajnerima mogle biti korisne, poput prilagođenih CSS i HTML atributa. Ovdje možete primijeniti prilagođeni CSS na bilo koji od mnogih elemenata modula. Na modul također možete primijeniti prilagođene CSS klase i ID-ove koji se mogu koristiti za prilagodbu modula u datoteci style.css vaše dječje teme.
CSS ID
Unesite neobavezni CSS ID koji ćete koristiti za ovaj modul. ID se može koristiti za stvaranje prilagođenog CSS stila ili za povezivanje na određene odjeljke vaše stranice.
CSS klasa
Unesite neobavezne CSS klase koje ćete koristiti za ovaj modul. CSS klasa može se koristiti za izradu prilagođenog CSS stila. Možete dodati više klasa odvojenih razmakom. Te se klase mogu koristiti u vašoj podređenoj temi Divi ili u prilagođenom CSS listu stilova koji dodate na svoju stranicu ili na svoje web mjesto pomoću opcija teme Divi ili postavki stranice Divi Builder.
Prilagođeni CSS
Prilagođeni CSS također se može primijeniti na modul i bilo koji od unutarnjih dijelova modula. U odjeljku Prilagođeni CSS pronaći ćete tekstualno polje u koje možete dodati prilagođene CSS stilske tablice izravno u svaki element. CSS unosi u ovim postavkama već su omotani stilskim oznakama. Dakle, samo unesite CSS pravila odvojena zarezom.
vidljivost
Ova vam opcija omogućuje upravljanje uređajima na kojima se pojavljuje vaš modul. Možete odabrati da deaktivirate svoj modul na tabletima, pametnim telefonima ili stolnim računalima pojedinačno. To je korisno ako želite koristiti različite modove na različitim uređajima ili ako želite pojednostaviti dizajn mobilnih uređaja uklanjanjem određenih elemenata sa stranice.
Mogućnosti pojedinačnih kartica
Naslov
Prilikom izrade nove pribadače možete dodijeliti naslov. Ovaj će se naslov pojaviti u okviru kada zadržite pokazivač iznad pribadače na karti.
Sadržaj
Prilikom izrade nove pribadače možete dodijeliti blok teksta sadržaja. Ovaj će se tekst pojaviti u okviru kada zadržite pokazivač iznad pribadače na karti.
Adresa karte
To je točno mjesto na karti gdje će se pojaviti vaš novi pin. Adresu možete unijeti u standardnom formatu.
[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”]PREUZMI DIVI TEMU [/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”]PREUZMITE predlošci DIVI[/vcex_button][/vc_column][/vc_row]
Ostali Divi tutoriali
- 5 web stranice za restoran korištenja Divi temu
- Kako dodati tekst na proizvod Divi WooCommerce
- Kako promijeniti boju izbornika između Divi stranica
- Kako personalizirati rešetke bloga s Divi-jem
- Kako koristiti uređivač uloga Divija na WordPressu
- Kako stvoriti klizač Divi na cijelom zaslonu
- Kako promijeniti boju izbornika između Divi stranica
- Značajke koje vjerojatno ne znate o Divi-ju
- Kako koristiti Divi Builder na WordPressu
- Kako koristiti modul za pomicanje videozapisa Divi
- Kako koristiti modul Divi Builder Flip
- Kako dodati testimonijalni modul na Divi Builderu
- Kako koristiti tekstualni modul Divi
- Kako stvoriti klizač na Divi
- Kako urediti Divi korisničku ulogu
- Kako koristiti modul Divi Social Media
- Kako se koristi modul trgovine na temi WordPress Divi
- Kako koristiti modul Divi bočne trake
- Kako koristiti modul Divi Table Table
- Kako koristiti naslovni modul Divi publikacija
- Kako dodati video modul Divi
- Kako koristiti navigacijski modul članka
- Kako koristiti modul Divi pretraživanja
- Kako koristiti modul Divi wallet
- Kako koristiti modul osobe na Divi Builderu
- Kako koristiti modul lisnice pomoću Divi filtar
- Kako koristiti modul klizača pune širine
- Kako koristiti modul Divi Builder Image
- Kako koristiti navigacijski modul pune širine Divi Buildera
- Kako se koristi modul galerije slika
- Kako koristiti modul Divi Builder za cijelu širinu kartice
- Kako koristiti modul Divi punog širine portfelja
- Kako se koristi Divi zaglavni modul pune širine
- Kako koristiti modul Divi Counter
- Kako koristiti klizač članaka na Divi Builderu
- Kako koristiti modul Divi Email Optin