Jak dodać stały przełącznik mapy do szablonu strony Divi

Jeśli prowadzisz sklep stacjonarny i tworzysz dla niego witrynę, wiele osób może odwiedzić Twoją witrynę, aby uzyskać praktyczne informacje, takie jak adres. Oczywiście tutaj przydaje się Twoja strona kontaktowa, ale nie jest to jedyny sposób, w jaki możesz bezproblemowo udostępniać dane kontaktowe odwiedzającym. Jeśli szukasz kreatywnego sposobu na udostępnienie adresu firmy, spodoba ci się ten samouczek. Pokazujemy, jak dynamicznie dodać stały przełącznik mapy do każdej strony za pomocą Kreatora motywów Divi. Zaczniemy od stworzenia nowego szablonu strony. Następnie umieścimy dynamiczną zawartość strony w treści szablonu i dodamy stały przełącznik mapy na górze dynamicznej zawartości strony. Będziesz mógł również bezpłatnie pobrać szablonowy plik JSON!

Weźmy się za to.

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Pulpit

mobilny

Pobierz szablon strony ZA DARMO

Aby położyć ręce na darmowym szablonie strony, najpierw musisz go pobrać za pomocą przycisku poniżej. Aby uzyskać dostęp do pobrania, musisz zapisać się na naszą listę e-mailową Divi Daily, korzystając z poniższego formularza. Jako nowy subskrybent otrzymasz jeszcze więcej dobroci Divi i darmowy pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, po prostu wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybować” ani otrzymywać dodatkowych wiadomości e-mail.

Pobierz pliki

Pobierz za darmo

Dołącz do biuletynu Divi, a wyślemy Ci e-mailem kopię najlepszego pakietu układu strony docelowej Divi, a także mnóstwo innych niesamowitych i bezpłatnych zasobów, wskazówek i sztuczek Divi. Idź dalej, a w mgnieniu oka zostaniesz mistrzem Divi. Jeśli masz już subskrypcję, wpisz poniżej swój adres e-mail i kliknij Pobierz, aby uzyskać dostęp do pakietu układów.

POBIERANIE

Udało Ci się zasubskrybować. Sprawdź swój adres e-mail, aby potwierdzić subskrypcję i uzyskać dostęp do bezpłatnych cotygodniowych pakietów układów Divi!

1. Utwórz szablon strony w kreatorze motywów Divi

Przejdź do kreatora motywów Divi i dodaj nowy szablon strony

Ten samouczek rozpoczniemy od przejścia do Divi Theme Builder i dodania nowego szablonu strony.

Wprowadź obszar treści szablonu

Następnie wprowadź treść szablonu, wybierając opcję „Build Custom Body”.

2. Dodaj dynamiczną zawartość strony do obszaru ciała

Ustawienia sekcji

Rozstaw

W edytorze szablonów zauważysz sekcję. Otwórz ustawienia sekcji i usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj wiersz nr 1

Struktura kolumny

Kontynuuj, dodając nowy wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Bez dodawania modułów otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru w następujący sposób:

• Szerokość: 100%
• Maksymalna szerokość: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Dodaj moduł treści posta do kolumny

Aby umożliwić dynamiczne wyświetlanie zawartości każdej strony, użyjemy modułu Post Content w tym wierszu.

3. Utwórz stały projekt pinezki mapy

Dodaj wiersz nr 2 do sekcji

Struktura kolumny

Przejdź do następnego wiersza, w którym zastosowano następującą strukturę kolumn:

Rozmiary

Otwórz ustawienia wiersza, przejdź do zakładki projekt i zmień ustawienia rozmiaru w następujący sposób:

• Szerokość: 90%
• Maksymalna szerokość:
  • Pulpit: 600px
  • Tablet i telefon: 100%

Rozstaw

Następnie usuń wszystkie domyślne górne i dolne wyściółki.

• Górna wyściółka: 0px
• Dolna wyściółka: 0px

Ustawienia kolumny 1

Kolor tła

Następnie otwórz ustawienia kolumny 1 i użyj czarnego koloru tła.

• Kolor tła: #000000

Zdjęcie w tle

Następnie prześlij wybrany obraz tła. Obraz tła znajdziesz w spakowanym folderze, który możesz pobrać na początku tego samouczka.

Główny element CSS

Dodaj również następujące wiersze kodu CSS do głównego elementu kolumny:

width: 80% !important;
max-height: 80vh;

Widoczność

Następnie ustaw przelew pionowy na auto. To, w połączeniu z maksymalną wysokością z poprzedniego kroku, zapewnia, że ​​pasek przewijania pojawi się, gdy tylko kolumna przekroczy wysokość 80vh.

• Przepełnienie pionowe: Auto

Ustawienia kolumny 2

Główny element CSS

Otwórz następnie ustawienia kolumny 2 i zastosuj następujący wiersz kodu CSS do głównego elementu:

width: 12% !important;

Dodaj moduł mapy do kolumny 1

Czas dodać moduły, zaczynając od modułu mapy w kolumnie 1. Dodaj wybrany przez siebie pin mapy.

Rozmiary

Przejdź do zakładki projektowania modułu i zmień ustawienia rozmiaru w następujący sposób:

• Szerokość: 88%
• Wyrównanie modułu: Środek

Rozstaw

Następnie usuń domyślny dolny margines.

• Margines dolny: 0px

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Dodaj Moduł Blurb poniżej Modułu Mapy w kolumnie 1. Użyj wybranych treści.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia obrazu/ikony

Przejdź do zakładki projektu i zmień ustawienia ikony w następujący sposób:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: po lewej

Ustawienia tekstu tytułu

Następnie nadaj styl tekstowi tytułu.

• Grubość czcionki tytułu: pogrubiona
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 16px
• Wysokość wiersza tytułu: 1,6 em

Ustawienia tekstu podstawowego

Następnie odpowiednio zmodyfikuj ustawienia tekstu podstawowego:

• Kolor tekstu ciała: #ffffff
• Rozmiar tekstu treści:
  • Pulpit: 16px
  • Tablet: 14px
  • Telefon: 13px
• Wysokość linii ciała: 1,8 em

Rozstaw

Zastosuj również następujące wartości dopełnienia:

• Górna wyściółka: 70px
• Dolna wyściółka: 70px
• Lewa wyściółka: 7%
• Prawa wyściółka: 7%

Animacja

I usuń domyślną animację modułu w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

Dodaj moduł Blurb do kolumny 2

Pozostaw puste pola zawartości

Do kolumny 2. Tam dodamy moduł Blurb bez zawartości.

Wybierz ikonę

Następnie wybierz ikonę.

Kolor tła

Następnie zmień kolor tła.

• Kolor tła: #0045ff

Ustawienia obrazu/ikony

Przejdź do karty projektu i odpowiednio dostosuj ustawienia ikony:

• Kolor ikony: #ffffff
• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: środek
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 25px

Rozmiary

Następnie zmodyfikuj ustawienia rozmiaru.

• Szerokość: 70px
• Wysokość: 70px

Rozstaw

Następnie usuń domyślny dolny margines.

• Margines dolny: 0px

Cień Pudełka

Uwzględnij również cień pudełka.

• Pozycja pozioma cienia pudełka: 6px
• Pozycja pionowa cienia pudełka: 6px
• Kolor cienia: rgba(0,0,0,0.3)

Główny element i obraz rozmycia CSS

Następnie przejdź do zakładki zaawansowane i użyj następujących wierszy kodu CSS dla głównego elementu:

display: flex;
justify-content: center;
align-items: center;

I dodaj ten wiersz kodu CSS w polu Blurb Image:

margin-bottom: 0;

4. Dodaj funkcję przełączania

Dodaj klasę CSS do wiersza nr 2

Teraz, gdy mamy już wszystkie elementy, czas skupić się na funkcjonalności. Zacznij od otwarcia drugiego wiersza i zastosowania następującej klasy CSS:

• Klasa CSS: map-toggle-row

Dodaj klasę CSS do modułu Blurb w kolumnie 2

Otwórz moduł Blurb w kolumnie 2 obok i użyj następującej klasy CSS:

• Klasa CSS: map-toggle

Dodaj moduł kodu poniżej modułu Blurb w kolumnie 2

Następnie dodaj moduł kodu poniżej modułu Blurb w kolumnie 2.

Dodaj tagi stylu i skryptu

Umieść kilka tagów stylu i skryptu w polu kodu.

Wstaw kod CSS

W tagach stylu używamy następującego kodu CSS:

.map-toggle-row {
-webkit-transition: .1s ease-in-out;
-moz-transition: .1s ease-in-out;
-o-transition: .1s ease-in-out;
transition: .1s ease-in-out;
}

.reveal-map{
left: 0 !important;
}

.map-toggle {
cursor: pointer;
}

Wstaw kod JQuery

Oraz następujący kod JQuery wewnątrz tagów skryptu:

jQuery(function($){
$(document).ready(function(){

var toggleIcon = $('.map-toggle');
var toggleRow = $('.map-toggle-row');

toggleIcon.click(function(){
toggleRow.toggleClass('reveal-map');
});

});
});

Dodaj ustaloną pozycję z poziomym przesunięciem do rzędu nr 2

Na koniec musimy odpowiednio zmodyfikować ustawienia pozycji drugiego wiersza:

• Pozycja: Naprawiono
• Lokalizacja: Lewy środek
• Przesunięcie w poziomie:
  • Pulpit: -500px
  • Tablet i telefon: -72%
• Indeks Z: 11

5. Zapisz zmiany w kreatorze stron i motywów

Po zastosowaniu wszystkich zmian możesz zapisać wszystkie zmiany Divi Theme Builder i wyświetlić wynik na swojej stronie!

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Pulpit

mobilny

Końcowe przemyślenia

W tym samouczku pokazaliśmy, jak twórczo umieszczać dane adresowe firmy w projektach stron. Mówiąc dokładniej, pokazaliśmy Ci, jak zbudować szablon strony, który zawiera stały przełącznik mapy, aby odwiedzający mogli zawsze uzyskać dostęp do lokalizacji Twojej firmy! Udało Ci się również bezpłatnie pobrać szablonowy plik JSON. Jeśli masz jakieś pytania lub sugestie, możesz zostawić komentarz w sekcji komentarzy poniżej.

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.