Przejdź do głównej treści

Samouczek Divi: Jak korzystać z modułu Map

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

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ć niestandardową lokalizację początkową. Moduły kart również są w formacie pełnej szerokości, więc również sprawdź to!

map divi apercu.png

Klucz API Map Google

Klucz API to wymagania użyć modułu karty. Aby uzyskać klucz API, zaloguj się do Google Developers Console, który poprowadzi 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 stworzenie nowego projektu.

zarejestrować API Google.jpg

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

nazwać projekt Google API.jpg

Po utworzeniu projektu o nazwie wyświetlany jest klucz API, którego można 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 Map Google

Jak dodać moduł mapy do swojej strony

Aby dodać moduł mapy do swojej strony, musisz najpierw przejść do Divi Builder. Po zainstalowaniu motywu Divi na swojej stronie internetowej zauważysz przycisk Użyj Divi Builder nad wydawcą 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 wewnątrz linii. Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać do niej linii.

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 także wpisać słowo „mapa”, a następnie kliknąć Enter, aby wyszukać i automatycznie 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 kontaktu

Moduł karty to świetny sposób na przedstawienie lokalizacji firmy na stronie kontaktowej. Możliwość dodania wielu pinezek do mapy w celu wyróżnienia różnych lokalizacji i informacji o firmie to przydatna i wciągająca funkcja.

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

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

prezentacja mapa google map company.jpg

Ważny Upewnij się, że prawidłowy klucz Google API został wprowadzony w panelu Opcje motywu Divi. Moduł karty nie będzie bez niego działał.

Za pomocą programu Visual Builder dodaj standardową sekcję na dole strony kontaktu. Następnie włóż moduł karty do nowej sekcji. Na karcie Zawartość ustawień karty wprowadź adres swojej firmy w polu Adres Card Center. Adres centrum mapy jest punktem centralnym mapy.

dodaj mapę opcji divi.jpg

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

Tytuł: [wprowadź tytuł swojej lokalizacji] Treść: [wpisz treść swojej klapy (adres i numer telefonu)] Adres mapy: [wprowadź adres tej lokalizacji]

wpisz adres miejsca precis.jpg

Zapisz ustawienia

To wszystko. Teraz masz dynamiczny moduł mapy na dole strony kontaktowej z pinezką wyświetlającą informacje o firmie.

pin divi module card.jpg

Opcje zawartości modułu mapy

W zakładce treści 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.

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

opcja moduł zawartości map.png

+ Dodaj nowy artykuł

Tutaj dodajesz nowe piny (lub gniazda) do modułu karty. Kliknięcie przycisku „dodaj nowy element” spowoduje otwarcie nowej listy parametrów projektu (w tym treści, projektu, zaawansowanego) dla nowego kodu PIN. Zobacz poniżej indywidualne ustawienia pinów.

Po dodaniu pierwszego pinezki zobaczysz szary pasek z tytułem pinezki jako etykietą. Szary pasek ma również trzy przyciski, które pozwalają edytować, powielać lub usuwać błąd.

Klucz API Google

Moduł Maps korzysta z interfejsu API Google Maps i wymaga prawidłowego klucza Google API do działania. Przed użyciem modułu Mapa upewnij się, że dodałeś klucz API w panelu Opcje motywu Divi.

Adres centrum map

Wprowadź adres centralnego punktu mapy, a adres zostanie geokodowany i wyświetlony na mapie poniżej. Jest to przydatne, jeśli masz wiele pinezek i chcesz powiększyć mapę do określonej i bardziej określonej lokalizacji. Możesz po prostu wpisać adres w standardowym formacie, takim jak „1235 Sunny Road, Some City, State, 88343”.

Etykieta administratora

Spowoduje to zmianę etykiety modułu w konstruktorze w celu łatwej identyfikacji. Gdy używasz widoku WireFrame w Visual Builder, te etykiety pojawiają się w bloku modułu interfejsu Divi Builder.

Opcje projektowania modułu mapy

Na karcie Projektowanie znajdziesz wszystkie opcje stylu modułu, takie jak czcionki, kolory, rozmiar i odstępy. Jest to karta, której użyjesz do zmiany wyglądu swojego modułu. Każdy moduł Divi ma długą listę parametrów projektowych, których można użyć do zmiany tego, 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 lepiej jest wyłączyć tę opcję, aby odwiedzający nie byli zakłócani, gdy przewijają stronę i blokują kółko myszy w ramce iframe karty. 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 bardziej doświadczonym projektantom stron internetowych, takie jak niestandardowe atrybuty CSS i HTML. Tutaj możesz zastosować niestandardowy CSS do jednego z wielu elementów modułu. Możesz także zastosować niestandardowe klasy i identyfikatory CSS do modułu, których można użyć do dostosowania modułu w pliku style.css motywu podrzędnego.

moduł przesunięcia na klawisze divi.png

Identyfikator CSS

Wprowadź opcjonalny identyfikator CSS, który będzie używany dla tego modułu. Identyfikatora można użyć do utworzenia niestandardowego stylu CSS lub do utworzenia linków do określonych sekcji strony.

Klasa CSS

Wprowadź opcjonalne klasy CSS, które będą używane dla tego modułu. Klasy CSS można użyć do utworzenia niestandardowego stylu CSS. Możesz dodać wiele klas oddzielonych spacją. Tych klas można używać w motywie podrzędnym Divi lub w niestandardowym arkuszu stylów CSS, który dodajesz do swojej strony lub witryny za pomocą opcji motywu Divi lub ustawień strony Divi Builder.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

Niestandardowy CSS

Niestandardowy CSS można również zastosować do modułu i jednego z wewnętrznych elementów modułu. W sekcji Niestandardowy CSS znajdziesz pole tekstowe, w którym możesz dodać niestandardowe arkusze stylów CSS bezpośrednio do każdego elementu. Wpisy CSS w tych parametrach są już opakowane w znaczniki stylu. Wpisz reguły CSS oddzielone średnikami.

widoczność

Ta opcja pozwala kontrolować urządzenia, na których pojawia się moduł. Możesz wyłączyć moduł indywidualnie na tabletach, smartfonach lub komputerach stacjonarnych. Jest to przydatne, jeśli chcesz korzystać z różnych modułów na różnych urządzeniach lub chcesz uprościć projektowanie mobilne poprzez wyeliminowanie niektórych elementów strony.

Indywidualne opcje pinów karty

opcja close divi.png

Tytuł

Podczas tworzenia nowego kodu PIN możesz przypisać tytuł. Ten tytuł pojawi się w polu po najechaniu myszką na pinezkę na mapie.

Treść

Podczas tworzenia nowego kodu PIN możesz przypisać blok tekstu treści. Ten tekst pojawi się w polu, przelatując nad pinezką na mapie.

Adres mapy

To jest dokładnie to miejsce na mapie, w którym pojawi się twój nowy pin. Możesz wpisać adres w standardowym formacie.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

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

Powrót do góry
14 akcji
udział8
ćwierkanie1
Enregistrer5