Mapové moduly usnadňují integraci vlastních Map Google kdekoli na vaší stránce. Na mapu můžete dokonce přidat neomezený počet pinů a nastavit vlastní výchozí polohu. Moduly karet také přicházejí ve formátu celé šířky, takže si to určitě zkontrolujte také!
Klíč rozhraní Google Maps API
Klíč API je požadavky použít modul Mapa. Chcete-li získat klíč API, přihlaste se do Google Developers Console, který vás provede procesem a automaticky aktivuje JavaScript API Google Maps a všechny související služby. První věcí, kterou budete požádáni, je vytvoření nového projektu.
Dále budete požádáni, abyste svůj projekt pojmenovali. Projekt si můžete pojmenovat, jak chcete. V tomto příkladu jsem to jednoduše nazval „Mapy“. Můžete také zadat doménové jméno vašeho webu (přidejte před něj *, pokud povolíte přístup z www.domain.com a domain.com), abyste zajistili, že váš klíč API je autorizován.
Po vytvoření pojmenovaného projektu se zobrazí klíč API, který můžete použít.
Po získání klíče API je nutné jej zkopírovat / vložit do panelu voleb motivu takto: Divi >> Možnosti motivu >> Obecná nastavení >> Klíč API Google Maps
Jak přidat modul mapy na vaši stránku
Než budete moci na svou stránku přidat modul mapy, musíte nejprve přejít do Divi Builderu. Jednou Divi téma nainstalované na vašem webu, všimnete si tlačítka Použijte nástroj Divi Builder nad editorem příspěvků, kdykoli vytvoříte novou stránku. Kliknutím na toto tlačítko aktivujete Divi Builder a získáte přístup ke všem modulům Divi Builder. Poté klikněte na tlačítko Použijte Visual Builder pro spuštění generátoru ve vizuálním režimu. Můžete také kliknout na tlačítko Použijte Visual Builder při procházení webu v popředí, pokud jste připojeni k hlavnímu panelu WordPress.
Jakmile zadáte Visual Builder, můžete kliknutím na šedé tlačítko plus přidat nový modul na svou stránku. Nové moduly lze přidávat pouze do řádků. Pokud začínáte novou stránku, nezapomeňte nejprve přidat na stránku řádek.
Vyhledejte modul mapy v seznamu modulů a kliknutím na něj jej přidejte na svou stránku. Seznam modulů lze prohledávat, což znamená, že můžete také napsat slovo „mapa“ a poté kliknout na Enter pro automatické vyhledání a přidání modulu mapy! Jakmile je modul přidán, budete uvítáni seznamem možností modulu. Tyto možnosti jsou rozděleny do tří hlavních skupin: Obsah , Design et pokročilý .
Příklad případu: Přidat modul mapy na stránku kontaktu
Mapový modul je skvělý způsob, jak prezentovat umístění vaší firmy na stránce kontaktů. A možnost přidat do mapy více špendlíků pro zvýraznění různých míst a obchodních informací je užitečná a atraktivní funkce.
V tomto příkladu přidám mapový modul k předvedení informací o poloze a firmě přidáním vlastního špendlíku do mapy.
důležitý : Ujistěte se, že byl na panelu Možnosti v aplikaci zadán platný klíč Google API Divi téma. Bez něj nebude mapový modul fungovat.
Pomocí Visual Builderu přidejte standardní sekci do dolní části stránky s kontakty. Poté vložte modul Mapa do nové sekce. Na kartě Obsah v nastavení karty zadejte adresu vaší společnosti pod možností Adresa střediska karet. Adresa středu mapy je středem mapy.
Pak klikněte na tlačítko + Přidat novou položku vytvořit svůj první pin. Aktualizujte následující:
Název: [zadejte název vaší lokality]
Obsah: [zadejte obsah PINu (adresu a telefonní číslo)]
Adresa mapy: [zadejte adresu pro toto konkrétní místo]
Uložte nastavení
To je vše. Nyní máte ve spodní části kontaktní stránky modul dynamické mapy s klikatelným špendlíkem, který zobrazuje informace o společnosti.
Možnosti obsahu modulu mapy
Na kartě obsah najdete všechny prvky obsahu modulu, například text, obrázky a ikony. Vše, co ovládá co ve vašem modulu se vždy najde na této kartě.
+ Přidat nový článek
To je místo, kde přidáváte nové piny (nebo sloty) do vašeho modulu desky. Kliknutím na „přidat novou položku“ se otevře zcela nový seznam nastavení designu (včetně obsahu, designu, pokročilých) pro váš nový pin. Níže naleznete nastavení jednotlivých pinů.
Po přidání prvního špendlíku se zobrazí šedý pruh s názvem špendlíku jako značka. Šedá lišta má také tři tlačítka, která umožňují upravovat, duplikovat nebo mazat připínáček.
Klíč Google API
Modul Mapy používá Google Maps API a ke svému fungování vyžaduje platný klíč Google API. Před použitím modulu Map se ujistěte, že jste přidali svůj klíč API do panelu Možnosti v Divi téma.
Adresa centra
Zadejte adresu středového bodu mapy a adresa bude geokódována a zobrazena na mapě níže. To je užitečné, pokud máte více pinů a chcete, aby byla mapa zvětšena na konkrétním a přesnějším místě. Jednoduše můžete zadat adresu ve standardním formátu, například „1235 Sunny Road, Some City, State, 88343“.
Štítek správce
Tím se změní štítek modulu v konstruktoru pro snadnou identifikaci. Když použijete pohled WireFrame ve Visual Builderu, tyto popisky se zobrazí v bloku modulu rozhraní Divi Builder.
Možnosti návrhu modulu mapy
Na kartě Návrh najdete všechny možnosti stylingu modulu, například písma, barvy, velikost a mezery. Toto je karta, kterou použijete ke změně vzhledu vašeho modulu. Každý modul Divi má dlouhý seznam nastavení designu, která můžete použít ke změně, co chcete.
Kolečko myši Zvětšit
Zde můžete zvolit, zda bude úroveň přiblížení ovládána kolečkem myši nebo ne. Často je nejlepší tuto možnost vypnout, aby návštěvníci nebyli rušeni, když se posunou dolů po stránce a zaseknou kolečko myši do iframe mapy. To platí zejména pro moduly karet s plnou šířkou.
Přizpůsobitelné přiblížení
Zde si můžete vybrat, zda lze kartu přesunout na mobilní zařízení.
Používejte filtr ve stupních šedi
Povolením této možnosti změníte mapu na obrázek ve stupních šedi.
Pokročilé možnosti mapy
Na kartě Upřesnit najdete možnosti, které by zkušenější weboví designéři mohli považovat za užitečné, například vlastní atributy CSS a HTML. Zde můžete použít vlastní CSS na kterýkoli z mnoha prvků modulu. Na modul můžete také použít vlastní třídy a ID CSS, které lze použít k přizpůsobení modulu v souboru style.css vašeho podřízeného motivu.
CSS ID
Zadejte volitelné ID CSS, které chcete použít pro tento modul. ID lze použít k vytvoření vlastního stylu CSS nebo k propojení s konkrétními částmi vaší stránky.
CSS třídy
Zadejte volitelné třídy CSS pro tento modul. Třídu CSS lze použít k vytvoření vlastního stylu CSS. Můžete přidat více tříd oddělených mezerou. Tyto třídy lze použít ve vašem podřízeném motivu Divi nebo ve vlastní šabloně stylů CSS, kterou přidáte na svou stránku nebo na svůj web pomocí možností motivu Divi nebo nastavení na stránce Divi Builder.
Vlastní CSS
Vlastní CSS lze také použít na modul a na libovolné interní součásti modulu. V sekci Vlastní CSS najdete textové pole, kde můžete přidat vlastní šablony stylů CSS přímo ke každému prvku. Položky CSS v tomto nastavení jsou již zabaleny do značek stylů. Stačí tedy zadat pravidla CSS oddělená středníky.
viditelnost
Tato možnost umožňuje ovládat zařízení, na kterých se váš modul zobrazuje. Můžete se rozhodnout deaktivovat svůj modul na tabletech, chytrých telefonech nebo stolních počítačích jednotlivě. To je užitečné, pokud chcete použít různé mody na různých zařízeních, nebo pokud chcete zjednodušit mobilní design odstraněním určitých prvků ze stránky.
Možnosti jednotlivých pinů karty
Titul
Při vytváření nového špendlíku můžete přiřadit název. Tento nadpis se objeví v poli, když umístíte ukazatel myši nad špendlík na mapě.
Obsah
Při vytváření nového špendlíku můžete přiřadit textový blok obsahu. Tento text se objeví v poli, když umístíte ukazatel myši nad špendlík na mapě.
Adresa mapy
Toto je přesné místo na mapě, kde se objeví váš nový špendlík. Adresu můžete zadat ve standardním formátu.
[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”]STÁHNOUT TÉMA DIVI [/vcex_button][/vc_column=][vc_column /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”]STAŽTE SI TEMPLATES DIVI[/vcex_button][/vc_column][/vc_row]
Ostatní výukové programy Divi
- 5 webové stránky pro použití v hotelu Divi téma
- Jak přidat text na produkt Divi WooCommerce
- Jak změnit barvu nabídky mezi stránkami Divi
- Jak přizpůsobit mřížky blogu s Divi
- Jak používat role Divi editor na WordPress
- Jak vytvořit posuvník Divi na celé obrazovce
- Jak změnit barvu nabídek mezi stránkami Divi
- Funkce, které pravděpodobně nevíte o Divi
- Jak používat Divi Builder na WordPress
- Jak používat modul posunu videa Divi
- Jak používat modul Divi Builder Flip
- Jak přidat zkušební modul na Divi Builder
- Jak používat textový modul Divi
- Jak vytvořit posuvník na Divi
- Jak upravit roli uživatele Divi
- Jak používat modul Divi Social Media
- Jak používat modul obchodu na téma WordPress Divi
- Jak používat modul bočního panelu Divi
- Jak používat modul tabulky ceny Divi
- Jak používat titulní modul publikací Divi
- Jak přidat video modul Divi
- Jak používat navigační modul článku
- Jak používat vyhledávací modul Divi
- Jak používat modul peněženky Divi
- Jak používat modul osob na nástroji Divi Builder
- Jak používat modul peněz s filtrem Divi
- Jak používat posuvný modul s plnou šířkou
- Jak používat modul obrazu Divi Builder
- Jak používat navigační modul plné šířky nástroje Divi Builder
- Jak používat modul galerie obrázků
- Jak používat modul karty Divi Builder Full-Width Card
- Jak používat portálový modul Divi s plnou šířkou
- Jak používat modul záhlaví Divi s plnou šířkou
- Jak používat počítací modul Divi
- Jak používat posuvník článků v Divi Builderu
- Jak používat modul Divi Email Optin
