Moduly máp na celú obrazovku v aplikácii Divi uľahčujú integráciu prispôsobených máp Google všade na vašej stránke. Môžete dokonca pridať neobmedzené špendlíky na mapu a nastaviť vlastné počiatočné miesto. Mapy modulov sú tiež vo formáte normálnej šírky, takže si to určite overte aj vy!
Kľúč rozhrania Google Maps API
Kľúč API je požiadavky používať modul Mapy. 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 máte autorizáciu pre váš kľúč API.
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 Divi Full Screen Card
Skôr ako budete môcť na svoju stránku pridať modul mapy na celú obrazovku, 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 Povoliť 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 stránku nový modul. Nové moduly s plnou šírkou je možné pridať iba do sekcií s plnou šírkou.
Ak začínate novú stránku, nezabudnite na svoju stránku najskôr pridať sekciu s plnou šírkou.
V zozname modulov vyhľadajte modul mapy s plnou šírkou a kliknutím na ňu ho pridajte na svoju stránku. V zozname režimov je možné prehľadávať, čo znamená, že môžete tiež napísať slovo „mapa na celú obrazovku“ a potom kliknúť na kláves Enter, aby ste automaticky našli a pridali modul mapy na celú šírku! 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 prípadu: Pridajte na stránku kontaktov modul mapy s plnou šírkou
Modul mapy s plnou šírkou je skvelý spôsob, ako prezentovať miesto vašej firmy na stránke kontaktov. Užitočnou a atraktívnou funkciou je možnosť pridať do mapy viacero špendlíkov na zvýraznenie rôznych miest a obchodných informácií.
V tomto príklade pridám modul mapy s plnou šírkou na zobrazenie informácií o polohe a firme pridaním vlastného špendlíka do mapy.
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 sekciu Celá šírka v dolnej časti stránky s kontaktmi. Potom vložte modul Fullwidth Map do svojej novej sekcie. Na karte Obsah v nastaveniach mapy v celej šírke zadajte adresu spoločnosti pod možnosťou Adresa v strede mapy. 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 vašej polohy] Obsah: [zadajte obsah vášho PIN (adresa a telefónne číslo)] Adresa na mape: [zadajte adresu tohto konkrétneho miesta]
Uložte nastavenia
To je všetko. Teraz máte v spodnej časti kontaktnej stránky modul dynamickej mapy s plnou šírkou a klikateľným špendlíkom, ktorý zobrazuje informácie o spoločnosti.
Možnosti obsahu modulu s celkovou šírkou
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.
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ávy
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 mapy v celej šírke
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 čokoľvek meniť.
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 s plnou šírkou
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.
Individuálne možnosti obsahu v celej šírke mapy
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
