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

przez Blair Jersyer | Divi

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 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 są autoryzowane do Twojego klucza API.

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 będziesz mógł dodać moduł mapy pełnoekranowej 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 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

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 firmy na stronie kontaktowej. Możliwość dodawania do mapy wielu pinezek w celu wyróżnienia 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 do mapy niestandardową pinezkę.

dodaj pełnowymiarową mapę divi builder.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 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

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

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.

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