Przejdź do głównej treści

Divi Tutorial: Jak korzystać z modułu karty pełnoekranowej Divi

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

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

Pełnoekranowe moduły map w Divi ułatwiają integrację spersonalizowanych Map Google w dowolnym miejscu na Twojej stronie. Możesz nawet dodać nieograniczoną liczbę pinezek do mapy i ustawić własną lokalizację początkową. Mapy modułów są również w formacie normalnej szerokości, więc koniecznie to też sprawdź!

pełnej szerokości-map-overview.png

Klucz API Map Google

Klucz API to wymagania korzystać z modułu Mapy. 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.

utwórz klucz API Google.jpg

Następnie zostaniesz poproszony o nazwanie swojego projektu. Możesz nazwać projekt, jak chcesz. W tym przykładzie nazwałem go po prostu „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.

dodaj klucz API do projektu.jpg

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

Dokumenty graficzne

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ł pełnoekranowej karty Divi

Zanim dodasz pełnoekranowy 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 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 Włącz narzędzie Visual Builder podczas przeglądania witryny na pierwszym planie, jeśli jesteś podłączony do pulpitu nawigacyjnego WordPress.

używaj konstruktora divi

Po wejściu do programu Visual Builder możesz kliknąć szary przycisk plus, aby dodać nowy moduł do swojej strony. Nowe moduły o pełnej szerokości można dodawać tylko w sekcjach o pełnej szerokości.

pełna sekcja divi builder.png

Jeśli zaczynasz nową stronę, nie zapomnij najpierw dodać sekcji pełnej szerokości do swojej strony.

full map screen.png

Ł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]

Znajdź moduł mapy o pełnej szerokości 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 pełnoekranowa”, a następnie kliknąć Enter, aby automatycznie znaleźć i dodać moduł mapy o pełnej szerokości! 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 o pełnej szerokości do strony kontaktowej

Moduł mapy o pełnej szerokości to świetny sposób na zaprezentowanie lokalizacji Twojej firmy na stronie kontaktowej. Możliwość dodawania wielu pinezek do mapy w celu zaprezentowania różnych lokalizacji i informacji o firmie to przydatna i atrakcyjna funkcja.

W tym przykładzie dodam moduł mapy o pełnej szerokości, aby zaprezentować lokalizację i informacje o firmie, dodając niestandardowy pinezkę do mapy.

dodaj pełnowymiarową mapę divi builder.jpg

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

Korzystając z programu Visual Builder, dodaj sekcję Fullwidth u dołu strony kontaktowej. Następnie wstaw moduł Fullwidth Map do nowej sekcji. Na karcie Treść ustawień mapy o pełnej szerokości wprowadź adres swojej firmy w opcji Adres centrum mapy. Adres centrum mapy to centralny punkt mapy.

dodaj mapę divi example.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 tej konkretnej lokalizacji]

dodaj szczegóły mapa pełnej szerokości divi.jpg

Zapisz ustawienia

To wszystko. Masz teraz moduł dynamicznej mapy o pełnej szerokości u dołu strony kontaktowej z klikalną pinezką, która wyświetla informacje o firmie.

wynik mapa pełnej szerokości divi.jpg

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]

Opcje zawartości modułu mapy pełnej

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 content divi builder full width map module.png

Klucz Google API

Moduł Maps korzysta z Google Maps API i wymaga do działania prawidłowego klucza Google API. Przed użyciem modułu Mapa upewnij się, że dodałeś klucz API w panelu Opcje motywu 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 administracyjna

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 mapy o pełnej szerokości

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 czegokolwiek.

moduł projektowania opcji pełna szerokość map.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 o pełnej szerokości

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.

przekrój modułu moduł pełnej szerokości 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.

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]

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 zawartości mapy o pełnej szerokości

pin parametr karta moduł pełna szerokość.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.

Inne samouczki Divi

Ten artykuł zawiera komentarze 0

Zostaw 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.

Powrót do góry
18 akcji
udział10
ćwierkanie3
Enregistrer5