Samouczek Divi: Jak korzystać z modułu Map

przez Blair Jersyer | Divi

Moduły map ułatwiają integrację niestandardowych Map Google w dowolnym miejscu na stronie. Możesz nawet dodać nieograniczoną liczbę pinezek do mapy i ustawić własną lokalizację początkową. Modyfikacje kart są również dostępne w formacie pełnej szerokości, więc koniecznie sprawdź to również!

map divi apercu.png

Klucz API Map Google

Klucz API to wymagania użyć modułu Map. Aby uzyskać klucz API, zaloguj się do Google Developers Console, który przeprowadzi Cię przez proces i automatycznie aktywuje interfejs API JavaScript Map Google i wszystkie powiązane usługi. Pierwszą rzeczą, o którą zostaniesz poproszony, jest utworzenie nowego projektu.

zarejestrować API Google.jpg

Następnie zostaniesz poproszony o nazwanie swojego projektu. Możesz nazwać projekt, jak chcesz. W tym przykładzie nazwałem to po prostu „Mapy”. Możesz również wprowadzić tzw Nazwa domeny swojej witryny (dodaj przed nią *, jeśli zezwalasz na dostęp z www.domain.com i domain.com), aby upewnić się, że Twój klucz API jest autoryzowany.

nazwać projekt Google API.jpg

Po utworzeniu nazwanego projektu zobaczysz klucz interfejsu API, którego możesz użyć.

Utwórz poświadczenia aplikacji mapowej Google. jpg

Po uzyskaniu klucza API należy skopiować / wkleić go do panelu opcji motywu, przechodząc do: Divi >> Opcje motywu >> Ustawienia ogólne >> Klucz API Google Maps

Jak dodać moduł mapy do swojej strony

Zanim będziesz mógł dodać moduł mapy do swojej strony, musisz najpierw przejść do Divi Builder. Kiedyś Motyw Divi zainstalowany na Twojej stronie, zauważysz przycisk Użyj Divi Builder nad edytorem postów za każdym razem, gdy tworzysz nową stronę. Kliknij ten przycisk, aby aktywować Divi Builder i uzyskać dostęp do wszystkich modułów Divi Builder. Następnie kliknij przycisk Użyj Visual Builder aby uruchomić generator w trybie wizualnym. Możesz także kliknąć przycisk Użyj Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

divi budowniczy

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły można dodawać tylko w wierszach. Jeśli zaczynasz nową stronę, pamiętaj, aby najpierw dodać wiersz do swojej strony.

Znajdź moduł mapy na liście modułów i kliknij go, aby dodać go do swojej strony. Listę modułów można przeszukiwać, co oznacza, że ​​możesz również wpisać słowo „mapa”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł mapy! Po dodaniu modułu zostaniesz przywitany przez listę opcji modułu. Te opcje są podzielone na trzy główne grupy: Treść , Koncepcja et zaawansowany .

Przykład zastosowania: Dodaj moduł mapy do strony kontaktowej

Moduł mapy to świetny sposób na zaprezentowanie lokalizacji Twojej firmy na stronie kontaktowej. A możliwość dodania wielu pinezek do mapy w celu wyróżnienia różnych lokalizacji i informacji o firmie to przydatna i atrakcyjna funkcja.

W tym przykładzie zamierzam dodać moduł mapy, aby zaprezentować lokalizację i informacje o firmie, dodając niestandardową pinezkę do mapy.

prezentacja mapa google map company.jpg

Ważny : upewnij się, że w panelu opcji w Motyw Divi. Bez niego moduł mapy nie będzie działał.

Korzystając z programu Visual Builder, dodaj standardową sekcję u dołu strony kontaktowej. Następnie wstaw moduł Mapa do nowej sekcji. Na karcie Treść w ustawieniach karty wprowadź adres swojej firmy w opcji Adres centrum karty. Adres centrum mapy to centralny punkt mapy.

dodaj mapę opcji divi.jpg

Następnie kliknij + Dodaj nowy element aby stworzyć swój pierwszy pin. Zaktualizuj następujące elementy:

Tytuł: [wprowadź tytuł swojej lokalizacji]
Treść: [wprowadź treść swojego kodu PIN (adres i numer telefonu)]
Adres mapy: [wprowadź adres dla tej konkretnej lokalizacji]

wpisz adres miejsca precis.jpg

Zapisz ustawienia

To wszystko. Teraz masz dynamiczny moduł mapy u dołu strony kontaktowej z klikalną pinezką, która wyświetla informacje o firmie.

pin divi module card.jpg

Opcje zawartości modułu mapy

W zakładce Treść znajdziesz wszystkie elementy treści modułu, takie jak tekst, obrazy i ikony. Wszystko to kontroluje co pojawi się w module zawsze będzie można znaleźć w tej zakładce.

opcja moduł zawartości map.png

+ Dodaj nowy artykuł

Tutaj dodajesz nowe piny (lub gniazda) do modułu płytki. Kliknięcie „dodaj nowy element” otworzy zupełnie nową listę ustawień projektu (w tym zawartość, projekt, zaawansowane) dla nowego pinu. Zobacz poniżej indywidualne ustawienia pinów.

Po dodaniu pierwszej pinezki zobaczysz szary pasek z tytułem pinezki jako tagiem. Na szarym pasku znajdują się również trzy przyciski umożliwiające edycję, kopiowanie lub usuwanie pinezki.

Klucz Google API

Moduł Mapy wykorzystuje API Map Google i do działania wymaga ważnego klucza Google API. Przed użyciem modułu Mapa upewnij się, że dodałeś klucz API w panelu Opcje modułu Motyw Divi.

Adres centrum map

Wprowadź adres środkowego punktu mapy, a adres zostanie geokodowany i wyświetlony na mapie poniżej. Jest to przydatne, jeśli masz wiele pinezek i chcesz, aby mapa została powiększona w określonej i dokładniejszej lokalizacji. Możesz po prostu wpisać adres w standardowym formacie, na przykład „1235 Sunny Road, Some City, State, 88343”.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Podczas korzystania z widoku WireFrame w programie Visual Builder etykiety te pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania modułu mapy

Na karcie Projekt znajdziesz wszystkie opcje stylizacji modułu, takie jak czcionki, kolory, rozmiar i odstępy. To jest zakładka, której użyjesz do zmiany wyglądu modułu. Każdy moduł Divi ma długą listę ustawień projektu, których możesz użyć do zmiany, co chcesz.

moduł map ongle design.png

Koło myszy Zoom

Tutaj możesz wybrać, czy poziom powiększenia będzie kontrolowany za pomocą kółka myszy, czy nie. Często najlepiej jest wyłączyć tę opcję, aby nie przeszkadzać odwiedzającym, gdy przewijają stronę w dół i wtykają kółko myszy w element iframe mapy. Jest to szczególnie prawdziwe w przypadku modułów kart o pełnej szerokości.

Przeciągnij zoom

Tutaj możesz wybrać, czy kartę można przenieść na urządzenia mobilne.

Użyj filtra skali szarości

Włączenie tej opcji zmieni twoją mapę w obraz w skali szarości.

Zaawansowane opcje map

Na karcie Zaawansowane znajdziesz opcje, które mogą być przydatne dla bardziej doświadczonych projektantów stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do dowolnego z wielu elementów modułu. Możesz również zastosować niestandardowe klasy CSS i identyfikatory do modułu, których można użyć do dostosowania modułu w pliku style.css motywu potomnego.

moduł przesunięcia na klawisze divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS do użycia w tym module. Identyfikator może służyć do tworzenia niestandardowego stylu CSS lub do łączenia z określonymi sekcjami strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS do użycia w tym module. Do tworzenia niestandardowych stylów CSS można użyć klasy CSS. Możesz dodać wiele klas oddzielonych spacją. Klasy te mogą być używane w motywie potomnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub do witryny internetowej za pomocą opcji motywu Divi lub ustawień na stronie Divi Builder.

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i dowolnych elementów wewnętrznych modułu. W sekcji Niestandardowe CSS znajdziesz pole tekstowe, w którym możesz dodać własne arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych ustawieniach są już opakowane w znaczniki stylu. Po prostu wprowadź reguły CSS oddzielone średnikami.

widoczność

Ta opcja umożliwia sterowanie urządzeniami, na których pojawia się Twój moduł. Możesz indywidualnie dezaktywować swój moduł na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz używać różnych modów na różnych urządzeniach lub jeśli chcesz uprościć projekt mobilny, usuwając określone elementy ze strony.

Indywidualne opcje pinów karty

opcja close divi.png

Tytuł

Tworząc nowy pin, możesz przypisać tytuł. Ten tytuł pojawi się w polu po najechaniu kursorem na pinezkę na mapie.

Treść

Tworząc nowy pin, możesz przypisać blok tekstu zawartości. Ten tekst pojawi się w polu po najechaniu kursorem na pinezkę na mapie.

Adres mapy

To jest dokładne miejsce na mapie, w którym pojawi się nowa pinezka. Możesz wpisać adres w standardowym formacie.

[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”]POBIERZ MOTYW DIVI [/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=”centrum” 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”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi

Opublikuj komentarz

Twoj adres e-mail nie bedzie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.