Mapové moduly uľahčujú integráciu vlastných máp Google kdekoľvek na vašej stránke. Môžete dokonca pridať neobmedzené špendlíky na mapu a nastaviť vlastné počiatočné miesto. Moduly kariet tiež prichádzajú vo formáte celej šírky, takže si ich určite nezabudnite pozrieť!
Kľúč rozhrania Google Maps API
Kľúč API je požiadavky použiť modul Mapa. Ak chcete získať kľúč API, prihláste sa do Google Developers Console, ktoré vás prevedú procesom a automaticky aktivujú JavaScript API služby Mapy Google a všetky súvisiace služby. Prvá vec, ktorú budete požiadaní, je vytvorenie nového projektu.
Ďalej budete požiadaní, aby ste pomenovali svoj projekt. Projekt si môžete pomenovať ako len chcete. V tomto príklade som to jednoducho nazval „Mapy“. Môžete tiež zadať doménové meno vašej webovej stránky (pridajte pred ňu *, ak povolíte prístup z www.domain.com a domain.com), aby ste sa uistili, že váš kľúč API je autorizovaný.
Po vytvorení pomenovaného projektu sa zobrazí kľúč API, ktorý môžete použiť.
Po získaní kľúča API ho musíte skopírovať / vložiť do panela s možnosťami témy tak, že prejdete na: Divi >> Možnosti témy >> Všeobecné nastavenia >> Kľúč rozhrania Google Maps API
Ako pridať modul mapy na svoju stránku
Predtým, ako budete môcť na svoju stránku pridať modul mapy, musíte najskôr prejsť do Divi Builder. Raz Divi téma nainštalovaný na vašom webe, všimnete si tlačidlo Použite nástroj Divi Builder nad editorom príspevkov vždy, keď vytvoríte novú stránku. Kliknutím na toto tlačidlo aktivujete program Divi Builder a získate prístup ku všetkým modulom Divi Builder. Potom kliknite na tlačidlo Použite Visual Builder na spustenie generátora vo vizuálnom režime. Môžete tiež kliknúť na tlačidlo Použite Visual Builder pri prehliadaní webových stránok v popredí, ak ste pripojení k dashboardu WordPress.
Po zadaní nástroja Visual Builder môžete kliknutím na sivé tlačidlo plus pridať na svoju stránku nový modul. Nové moduly je možné pridávať iba do riadkov. Ak začínate novú stránku, nezabudnite najskôr na svoju stránku pridať riadok.
Vyhľadajte modul mapy v zozname modulov a kliknutím na ňu ho pridajte na svoju stránku. Zoznam modulov je prehľadateľný, čo znamená, že môžete tiež napísať slovo „mapa“ a potom kliknúť na kláves Enter, aby ste automaticky našli a pridali modul mapy! Po pridaní modulu vás privíta zoznam možností modulu. Tieto možnosti sú rozdelené do troch hlavných skupín: Obsah , Koncepcia et pokročilý .
Príklad použitia: Pridajte modul mapy na stránku kontaktu
Modul mapy je skvelý spôsob, ako prezentovať polohu vašej firmy na stránke kontaktov. A možnosť pridať do mapy viacero špendlíkov na zvýraznenie rôznych miest a obchodných informácií je užitočná a atraktívna funkcia.
V tomto príklade pridám modul mapy na prezentáciu informácií o polohe a firme pridaním vlastného špendlíka na mapu.
Dôležité informácie : Uistite sa, že ste na paneli Možnosti na stránke zadali platný kľúč rozhrania Google API Divi téma. Bez neho nebude modul mapy fungovať.
Pomocou programu Visual Builder pridajte štandardnú sekciu v dolnej časti stránky s kontaktmi. Potom vložte modul Mapa do svojej novej sekcie. Na karte Obsah v nastaveniach karty zadajte adresu svojej spoločnosti pod možnosťou Adresa strediska. Adresa stredu mapy je stredovým bodom mapy.
Potom kliknite na tlačidlo + Pridať novú položku na vytvorenie prvého špendlíka. Aktualizujte nasledujúce:
Názov: [zadajte názov svojej polohy]
Obsah: [zadajte obsah pinu (adresa a telefónne číslo)]
Adresa mapy: [zadajte adresu pre toto konkrétne miesto]
Uložte nastavenia
To je všetko. Teraz máte v spodnej časti kontaktnej stránky modul dynamickej mapy s klikateľným špendlíkom, ktorý zobrazuje informácie o spoločnosti.
Možnosti obsahu modulu mapy
Na karte Obsah nájdete všetky obsahové prvky modulu, napríklad text, obrázky a ikony. Všetko, čo ovláda čo vo vašom module sa vždy nájde na tejto karte.
+ Pridať nový článok
Toto je miesto, kde pridávate nové piny (alebo sloty) do svojho modulu na doske. Kliknutím na „pridať novú položku“ sa otvorí úplne nový zoznam nastavení dizajnu (vrátane obsahu, dizajnu, pokročilých) pre váš nový pin. Nižšie nájdete jednotlivé nastavenia pinov.
Po pridaní prvého špendlíka sa zobrazí šedý pruh s názvom špendlíka ako značka. Šedá lišta má tiež tri tlačidlá, ktoré umožňujú upravovať, duplikovať alebo mazať pripináčik.
Kľúč Google API
Modul Mapy používa Google Maps API a na fungovanie vyžaduje platný kľúč Google API. Pred použitím modulu Mapa sa uistite, že ste pridali svoj kľúč API na paneli Možnosti aplikácie Divi téma.
Adresa strediska máp
Zadajte adresu stredového bodu mapy a adresa bude geokódovaná a zobrazí sa na mape nižšie. To je užitočné, ak máte viac špendlíkov a chcete, aby bola mapa zväčšená na konkrétnom a presnejšom mieste. Môžete jednoducho napísať adresu v štandardnom formáte, napríklad „1235 Sunny Road, Some City, State, 88343“.
Štítok správcu
Toto zmení štítok modulu v konštruktore na ľahšiu identifikáciu. Keď použijete zobrazenie WireFrame v programe Visual Builder, tieto štítky sa zobrazia v bloku modulu rozhrania Divi Builder.
Možnosti návrhu modulu mapy
Na karte Dizajn nájdete všetky možnosti štýlov modulu, ako sú písma, farby, veľkosť a medzery. Toto je karta, ktorú použijete na zmenu vzhľadu vášho modulu. Každý modul Divi má dlhý zoznam nastavení dizajnu, pomocou ktorých môžete meniť, čo chcete.
Koliesko myši Zoom
Tu môžete zvoliť, či bude úroveň zväčšenia ovládaná kolieskom myši alebo nie. Často je najlepšie túto možnosť vypnúť, aby návštevníci neboli vyrušovaní pri posúvaní stránky nadol a zasunutí kolieska myši do rámca iframe. To platí najmä pre moduly kariet s plnou šírkou.
Drawable Zoom
Tu si môžete vybrať, či sa karta dá presunúť na mobilných zariadeniach.
Používajte filter v odtieňoch sivej
Povolením tejto možnosti zmeníte mapu na obrázok v odtieňoch šedi.
Rozšírené možnosti mapy
Na karte rozšírené nájdete možnosti, ktoré by sa mohli hodiť skúsenejším webovým dizajnérom, napríklad vlastné atribúty CSS a HTML. Tu môžete použiť vlastné CSS na ktorýkoľvek z mnohých prvkov modulu. Na modul môžete tiež použiť vlastné triedy a identifikátory CSS, ktoré sa dajú použiť na prispôsobenie modulu v súbore style.css vašej detskej témy.
CSS ID
Zadajte voliteľné ID CSS, ktoré sa použije pre tento modul. ID je možné použiť na vytvorenie vlastného štýlu CSS alebo na prepojenie s konkrétnymi sekciami vašej stránky.
Triedu CSS
Zadajte voliteľné triedy CSS, ktoré sa majú použiť pre tento modul. Na vytvorenie vlastného štýlu CSS je možné použiť triedu CSS. Môžete pridať viac tried oddelených medzerou. Tieto triedy môžete použiť vo svojej podradenej téme Divi alebo vo vlastnej šablóne štýlov CSS, ktorú pridáte na svoju stránku alebo na svoj web pomocou možností témy Divi alebo nastavení na stránke Divi Builder.
Vlastné CSS
Vlastné CSS je možné použiť aj na modul a na ktorékoľvek z jeho vnútorných častí. V sekcii Vlastné CSS nájdete textové pole, kde môžete priamo do každého prvku pridať vlastné šablóny štýlov CSS. Záznamy CSS v týchto nastaveniach sú už zabalené v značkách štýlov. Stačí teda zadať pravidlá CSS oddelené bodkočiarkami.
viditeľnosť
Táto možnosť vám umožňuje ovládať zariadenia, na ktorých sa modul zobrazuje. Môžete sa rozhodnúť deaktivovať svoj modul na tabletoch, smartfónoch alebo stolových počítačoch jednotlivo. To je užitočné, ak chcete používať rôzne módy na rôznych zariadeniach alebo ak chcete zjednodušiť mobilný dizajn odstránením určitých prvkov zo stránky.
Možnosti jednotlivých pin karty
Názov
Pri vytváraní nového špendlíka môžete priradiť názov. Tento nadpis sa zobrazí v poli, keď umiestnite kurzor myši na špendlík na mape.
Obsah
Pri vytváraní nového špendlíka môžete priradiť blok textu obsahu. Tento text sa zobrazí v poli, keď umiestnite kurzor myši na špendlík na mape.
Adresa mapy
Toto je presné miesto na mape, kde sa objaví váš nový špendlík. Adresu môžete zadať v štandardnom formáte.
[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”]STIAHNUŤ TÉMU DIVI [/vcex_button][/vc_column=][vc_column width] /1″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=2&url=23065&tid40632=tutorials” target=”blank” layout=”expanded” align=”center” font_family = ”Raleway” font_weight=”1″ style=”flat” custom_background=”#c700e” custom_hover_background=”#4226d8f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]STIAHNUŤ TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Ďalšie výukové programy spoločnosti Divi
- 5 webové stránky pre použitie v hoteli Divi tému
- Ako pridať text na produktoch Divi WooCommerce
- Ako zmeniť farbu ponuky medzi stránkami Divi
- Ako si prispôsobiť mriežky blogu s Divi
- Ako používať role Divi editor na WordPress
- Ako vytvoriť posuvník Divi na celej obrazovke
- Ako zmeniť farbu ponúk medzi stránkami Divi
- Funkcie, ktoré pravdepodobne neviete o Divi
- Ako používať Divi Builder na WordPress
- Ako používať modul posúvania videa Divi
- Ako používať modul Divi Builder Flip
- Ako pridať modul posudkov na Divi Builder
- Ako používať textový modul Divi
- Ako vytvoriť posúvač na Divi
- Ako upraviť rolu používateľa Divi
- Ako používať modul Divi Social Media
- Ako používať modul obchodu na tému WordPress Divi
- Ako používať modul bočného panela Divi
- Ako používať modul tabuľky cien Divi
- Ako používať titulný modul publikácií Divi
- Ako pridať video modul Divi
- Ako používať navigačný modul článku
- Ako používať vyhľadávací modul Divi
- Ako používať modul peňaľenky Divi
- Ako používať osobný modul na nástroji Divi Builder
- Ako používať modul peňaženky s filtrom Divi
- Ako používať posuvný modul s plnou šírkou
- Ako používať modul obrazu Divi Builder
- Ako používať navigačný modul v celej šírke nástroja Divi Builder
- Ako používať modul galérie obrázkov
- Ako používať modul kariet Divi Builder s plnou šírkou
- Ako používať portálový modul Divi s plnou šírkou
- Ako používať modul záhlavia Divi s plnou šírkou
- Ako používať počítací modul Divi
- Ako používať posúvač článkov v aplikácii Divi Builder
- Ako používať modul Divi Email Optin
