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 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

W pełni wyposażone moduły kart Divi 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 map są również w formacie Normalnej szerokości, więc też to sprawdź!

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

Klucz API Map Google

Klucz API to wymagania aby użyć modułu Mapy. 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.

utwórz klucz 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 dozwolony.

dodaj klucz API do projektu.jpg

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

Jak dodać moduł pełnoekranowej karty Divi

Przed dodaniem pełnoekranowego modułu mapy do strony należy 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 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 pełnej szerokości można dodawać tylko w sekcjach pełnej szerokości.

pełna sekcja divi builder.png

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

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

Moduł mapy o pełnej szerokości to świetny sposób na zaprezentowanie swojej 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 o pełnej szerokości, aby przedstawić 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. Moduł karty nie będzie bez niego działał.

Za pomocą programu Visual Builder dodaj sekcję Pełna szerokość u dołu strony kontaktu. Następnie włóż moduł Fullwidth Map do nowej sekcji. Na karcie Treść ustawień mapy o pełnej szerokości wprowadź adres swojej firmy w opcji Adres centrum karty. Adres centrum mapy jest punktem centralnym mapy.

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

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

Zapisz ustawienia

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]

To wszystko. Teraz masz moduł dynamicznej mapy o pełnej szerokości u dołu strony kontaktowej z klikalnym pinem, który 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ś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.

opcja content divi builder full width map module.png

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 administracyjna

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

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

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.

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

pin parametr karta moduł pełna szerokość.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
18 akcji
udział10
ćwierkanie3
Enregistrer5