Jak utworzyć lepki pasek stopki za pomocą lepkich opcji Divi

Jeśli szukasz sposobu na dodanie wezwania do działania, które śledzi odwiedzających, gdy poruszają się po Twojej witrynie, możesz rozważyć skorzystanie z przyklejonego paska stopki. Przyklejony pasek stopki jest używany w dolnej części przeglądarki i możesz dołączyć dowolne wezwanie do działania, niezależnie od tego, czy jest to przycisk, czy informacje kontaktowe. Gdy tylko odwiedzający przejdą do obszaru stopki strony, pasek stopki i projekt stopki połączą się, zmieniając jednocześnie style przyklejonego paska stopki. Ta piękna estetyka może pomóc Ci zwiększyć współczynniki konwersji na Twoich stronach! 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 globalnej stopki ZA DARMO

Aby położyć swoje ręce na darmowym szablonie globalnej stopki, musisz najpierw pobrać go 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 nowy szablon stopki

Przejdź do kreatora motywów Divi i dodaj nową globalną lub niestandardową stopkę

Zacznij od przejścia do Divi Theme Builder na zapleczu swojej witryny WordPress. Tam dodaj nową stopkę globalną lub niestandardową.

Zacznij budować od podstaw

Zacznij tworzyć szablon stopki od podstaw.

2. Zbuduj projekt stopki

Ustawienia sekcji

Kolor tła

W edytorze szablonów zauważysz sekcję. Otwórz tę sekcję i zastosuj czarny kolor tła.

• Kolor tła: #000000

Dodaj wiersz nr 1

Struktura kolumny

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

Kolor tła

Nie dodając jeszcze modułów, otwórz ustawienia wierszy i zmień kolor tła.

• Kolor tła: #ea6c01

Rozmiary

Przejdź do karty projektu wiersza i następnie zmień ustawienia rozmiaru.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 90%
• Maksymalna szerokość: 2580 pikseli
• Wyrównanie wierszy: Środek

Rozstaw

Dodaj również niestandardowe górne i dolne wyściółki na mniejszych ekranach.

• Górna wyściółka: 5px (tylko tablet i telefon)
• Dolna wyściółka: 5px (tylko tablet i telefon)

Granica

Następnie dodaj responsywne zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi:
  • Pulpit: 30px
  • Tablet i telefon: 15px

Przepełnienia

Aby upewnić się, że w dalszej części samouczka będziemy mogli utworzyć nakładanie się, ustawimy przepełnienia wierszy na widoczne.

• Przepełnienie poziome: widoczne
• Przepełnienie pionowe: Widoczne

Widoczność kolumn 1 i 3

Aby zapobiec wyświetlaniu zbyt wielu elementów paska stopki na mniejszych ekranach, ukryjemy pierwszą i ostatnią kolumnę w naszym wierszu zarówno na tablecie, jak i telefonie.

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Czas dodać moduły, zaczynając od modułu Blurb w kolumnie 1. Dodaj wybrane przez siebie treści.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia ikon

Przejdź do zakładki projektu modułu i odpowiednio dostosuj styl ikony:

• Kolor ikony: #f5d72e
• Ikona koła: Tak
• Kolor koła: #000000
• Umieszczenie obrazu/ikony: góra
• Wyrównanie obrazu/ikony: środek
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 32px

Ustawienia tekstu

Następnie zmień ustawienia tekstu.

• Wyrównanie tekstu: do środka
• Kolor tekstu: jasny

Ustawienia tekstu tytułu

Wprowadź również pewne zmiany w ustawieniach tekstu tytułu.

• Czcionka tytułu: Poppins
• Kolor tekstu tytułu: #000000

Ustawienia tekstu podstawowego

Zmodyfikuj również ustawienia tekstu podstawowego.

• Czcionka ciała: Poppins
• Grubość czcionki ciała: Ultra Bold
• Rozmiar tekstu ciała: 20px

Rozmiary

Następnie ustaw szerokość zawartości na „100%” w ustawieniach rozmiaru.

• Szerokość treści: 100%

Rozstaw

Aby utworzyć zakładkę, dodaj ujemny górny margines do ustawień odstępów.

• Górny margines: -60px

Animacja

I uzupełnij ustawienia modułu, usuwając animację ikon w ustawieniach animacji.

• Animacja obrazu/ikony: brak animacji

Clone Blurb Module i umieść duplikat w kolumnie 3

Po ukończeniu pierwszego modułu Blurb w kolumnie 1, sklonuj go raz i umieść duplikat w kolumnie 3.

Zmień zawartość i ikonę

Zmień treść i ikonę duplikatu.

Dodaj moduł Blurb do kolumny 2

Wybierz ikonę

Następnie dodaj nowy moduł Blurb do kolumny 2. Pozostaw puste pole zawartości i wybierz wybraną ikonę.

Kolor tła

Następnie dodaj kolor tła.

• Kolor tła: #000000

Ustawienia ikon

Przejdź do zakładki projektu modułu i odpowiednio zmień ustawienia ikon:

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

Rozmiary

Następnie wprowadź kilka zmian w ustawieniach rozmiaru.

• Szerokość: 70px
• Wyrównanie modułu: Środek
• Wysokość: 40px

Rozstaw

Następnie zastosuj niestandardowe wartości marginesów i dopełnienia dla różnych rozmiarów ekranu.

• Górny margines: -20px (tylko tablet i telefon)
• Górna wyściółka: 5px
• Dolna wyściółka: 0px

Granica

Następnie dodaj zaokrąglone rogi do ustawień obramowania.

• Wszystkie rogi: 10px

Animacja

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

• Animacja obrazu/ikony: brak animacji

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Następnym i ostatnim modułem, którego potrzebujemy w tym wierszu, jest moduł tekstowy w kolumnie 2. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

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

• Grubość czcionki tekstu: pół pogrubiona
• Rozmiar tekstu: 18px
• Wysokość linii tekstu: 1,8 em
• Wyrównanie tekstu: do środka

Dodaj wiersz nr 2

Struktura kolumny

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

Rozmiary

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

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Maksymalna szerokość: 2580 pikseli

Rozstaw

Dodaj trochę górnego i dolnego marginesu.

• Górny margines: 50px
• Margines dolny: 50px

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Dodaj moduł obrazu do kolumny 1 i prześlij swoje logo lub dowolny wybrany obraz.

Rozmiary

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

• Szerokość: 59%
• Wyrównanie modułu: do lewej

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość H3

Następnie dodaj moduł tekstowy do kolumny 2 z wybraną zawartością H3.

Ustawienia tekstu H3

Zmień ustawienia tekstu H3 modułu w następujący sposób:

• Czcionka nagłówka 3: Poppins
• Grubość czcionki nagłówka 3: pogrubiona
• Kolor tekstu nagłówka 3: #6d6d6d

Klonuj moduł tekstowy 3x i rozłóż w kolumnie 3 i 4

Po ukończeniu tego modułu tekstowego możesz sklonować trzy razy i rozmieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień zawartość

Upewnij się, że zmieniłeś zawartość każdego zduplikowanego modułu tekstowego.

Dodaj moduł tekstowy do kolumny 2

Dodaj zawartość

Dodaj kolejny moduł tekstowy tuż pod poprzednim modułem tekstowym w kolumnie 2 i dodaj wybrane przez siebie linki.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Rozmiar tekstu: 30px
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do lewej
• Kolor tekstu: jasny

Ustawienia tekstu łącza

Zmień też kolor tekstu linku.

• Kolor tekstu linku: #ffffff

Klonuj moduł tekstowy w razie potrzeby

Po ukończeniu modułu tekstowego sklonuj go tyle razy, ile chcesz.

Zmień zawartość

Upewnij się, że zmieniłeś treść i linki w każdym zduplikowanym module.

Dodaj moduł tekstowy do kolumny 3

Dodaj zawartość

Następnie dodaj kolejny moduł tekstowy do kolumny 3. Dodaj wybrane przez siebie połączone treści.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Rozmiar tekstu: 22px
• Wysokość linii tekstu: 1em
• Wyrównanie tekstu: do lewej
• Kolor tekstu: jasny

Ustawienia tekstu łącza

Zmodyfikuj również kolor tekstu linku.

• Kolor tekstu linku: #ea6c01

Klonuj moduł tekstowy w razie potrzeby

Klonuj ten moduł tyle razy, ile potrzebujesz.

Zmień zawartość

I oczywiście w razie potrzeby zmień treść i linki.

Dodaj moduł tekstowy do kolumny 4

Dodaj zawartość

W kolumnie 4 dodamy kolejny moduł tekstowy poniżej pierwszego modułu tekstowego. Dodaj wybrane przez siebie treści.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Rozmiar tekstu: 16px
• Wysokość linii tekstu: 1,8 em
• Wyrównanie tekstu: do lewej
• Kolor tekstu: jasny

Dodaj media społecznościowe do kolumny 4

Dodaj wybrane sieci społecznościowe

Następnie dodaj moduł Social Media Follow na końcu kolumny. Dodaj wybrane sieci społecznościowe.

Usuń kolor tła każdej sieci społecznościowej indywidualnie

Usuń kolor tła każdej sieci społecznościowej indywidualnie.

Rozstaw

Wróć do zwykłych ustawień modułu, przejdź do ustawień odstępów i dodaj kilka niestandardowych wartości marginesów.

• Górny margines: -15px
• Lewy margines: -8px

Dodaj wiersz nr 3

Struktura kolumny

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

Rozmiary

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

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 2
• Wyrównaj wysokości kolumn: Tak
• Maksymalna szerokość: 2580 pikseli

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Następnie dodaj moduł tekstowy do kolumny 1. Wstaw wybrane przez siebie treści.

Ustawienia tekstu

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

• Czcionka tekstu: Poppins
• Kolor tekstu: #595959
• Rozmiar tekstu: 13px
• Wyrównanie tekstu: do środka

Ustawienia tekstu łącza

Zmodyfikuj również kolor tekstu linku.

• Kolor tekstu łącza: #595959

Klonuj moduł tekstowy dwa razy i umieść duplikaty w pozostałych kolumnach

Po ukończeniu modułu w kolumnie 1 możesz sklonować go dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień wyrównanie tekstu

Zmień odpowiednio wyrównanie tekstu dla każdego zduplikowanego modułu tekstowego:

• Moduł tekstowy w kolumnie 2:
  • Pulpit: środek
  • Tablet i telefon: lewy

• Moduł tekstowy w kolumnie 3:
  • Pulpit: prawy
  • Tablet i telefon: lewy

Zmień zawartość

I zmień również zawartość w obu zduplikowanych modułach.

3. Zastosuj lepkie efekty do paska stopki

Otwórz wiersz nr 1 i zastosuj lepkie ustawienia

Teraz, gdy nasz podkład do projektowania jest już na miejscu, nadszedł czas na zastosowanie efektu lepkiego. Otwórz pierwszy wiersz w sekcji, przejdź do zakładki zaawansowane i zastosuj następujące lepkie ustawienia:

• Lepka pozycja: trzymaj się do dołu
• Odsunięcie lepkiego dolnego:
  • Pulpit: 50px
  • Tablet i telefon: 20 pikseli

Wiersz lepkie style

Kolor tła

Teraz, gdy zmieniliśmy nasz wiersz na przyklejony, możemy zastosować lepkie style do wiersza i wszystkich jego elementów podrzędnych. Zacznij od dodania lepkiego koloru tła do rzędu 1.

• Lepki kolor tła: #000000

Zastosuj lepkie style do modułów Blurb w kolumnie 1 i 3

Ustawienia ikon

Następnie otwórz moduły Blurb w kolumnach 1 i 3 i dodaj lepki kolor koła.

• Kolor lepkiego koła: #ea6c01

Ustawienia tekstu tytułu

Dodaj też przyklejony kolor tekstu tytułu.

• Kolor tekstu przyklejonego tytułu: #ea6c01

Zastosuj lepkie style do modułu Blurb w kolumnie 2

Kolor tła

Następnie otwórz moduł Blurb w kolumnie 2 i zastosuj lepki kolor tła.

• Lepki kolor tła: #ea6c01

4. Zapisz wszystkie zmiany szablonu i kreatora motywów

Po wykonaniu lepkich kroków pamiętaj, aby zapisać zmiany w szablonie i kreatorze motywów przed wyświetleniem wyniku 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 poście pokazaliśmy, jak wykazać się kreatywnością dzięki lepkim opcjom Divi. Mówiąc dokładniej, pokazaliśmy, jak zbudować lepki pasek stopki, który łączy się z głównym obszarem stopki, gdy ludzie przewijają stronę, na której się znajdują. Udało Ci się również pobrać szablonowy plik JSON za darmo! 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.