Jak stworzyć piękne zwoje stopki ujawniają się poniżej dzielników sekcji Divi

We wszystkich trendach projektowych stopki pozostają niezbędne. Ludzie tak bardzo się do nich przyzwyczaili, co z kolei czyni je bardzo przyjaznymi dla użytkownika. Pomagają odwiedzającym zorganizować pobyt w Twojej witrynie i przejść do konkretnej strony, której szukają. Dzięki Divi możesz łatwo utworzyć dowolną stopkę w jednej sekcji.

Teraz, jeśli chcesz nadać stopce dodatkowy wymiar i interakcję, pokochasz ten post. Połączymy kreatywnie sekcję stopki z podziałami sekcji, aby stworzyć odsłonięcie przewijania stopki.

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 układ za DARMO

Aby położyć swoje ręce na darmowym układzie, 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!

Subskrybuj nasz kanał YouTube

1. Utwórz nową pustą stronę i prześlij wybrany układ

Dodaj nową pustą stronę

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową pustą stronę.

Prześlij stronę docelową pakietu układu firmy SaaS

Przełącz się na Visual Builder i prześlij stronę docelową pakietu SaaS Company Layout Pack. Chociaż używamy tego konkretnego układu, możesz zastosować tę technikę na dowolnej stronie, nad którą pracujesz.

2. Dodaj indeks Z do każdej sekcji i usuń animacje sekcji

Dodaj indeks Z do sekcji bohaterów

Kontynuuj, zmieniając indeks z sekcji bohatera na stronie.

• Indeks Z: 3

Skopiuj indeks Z i wklej do wszystkich innych sekcji na stronie

Skopiuj indeks z i wklej go do wszystkich pozostałych sekcji na stronie. Zwiększenie indeksu z dla każdej sekcji jest kluczowym krokiem, aby samouczek zadziałał. Pozwoli to, aby każda z sekcji pojawiła się na górze sekcji stopki, którą dodamy później w poście.

Usuń animację sekcji bohatera

Aby upewnić się, że stopka pozostanie ukryta do dołu strony, usuniemy również wszystkie animacje sekcji. Otwórz sekcję bohatera i usuń animację.

• Styl animacji: Brak

Rozszerz animację na wszystkie sekcje na stronie

Rozszerz style animacji na wszystkie sekcje na stronie.

3. Zmodyfikuj ostatnią sekcję na stronie

Zmień kolor tła

Przejdź do ostatniej sekcji na stronie i zmień kolor tła.

• Kolor tła: #f2f2f2

4. Dodaj zwykłą sekcję nr 1 na dole strony

Ustawienia sekcji

Kolor tła

Jak można zauważyć na podglądzie tego posta, stopka pojawi się pod separatorem sekcji. Temu rozdzielaczowi sekcji poświęcimy nową sekcję na dole naszej strony. Otwórz ustawienia sekcji i użyj całkowicie przezroczystego koloru tła. Dzięki temu stopka będzie widoczna przez kontener sekcji, nawet jeśli jej pozycja będzie znajdować się poniżej.

• Kolor tła: rgba(0,0,0,0)

Górny rozdzielacz

Przejdź do zakładki projektu sekcji i dodaj górną przegrodę według własnego uznania.

• Styl dzielnika: Znajdź na liście
• Wysokość dzielnika: 250px (komputer), 150px (tablet), 100px (telefon)
• Powtarzanie poziome dzielnika: 2x

Indeks Z

Ta nowa sekcja również wymaga zwiększonego indeksu z.

• Indeks Z: 3

5. Dodaj zwykłą sekcję nr 2 na dole strony

Ustawienia sekcji

Kolor tła

Czas stworzyć sekcję stopki! Dodaj kolejną nową zwykłą sekcję na dole strony i wybierz wybrany kolor tła.

• Kolor tła: #202332

Rozmiary

Przejdź do zakładki projekt i upewnij się, że szerokość wynosi „100%”.

• Szerokość: 100%

Rozstaw

Musimy również zwiększyć górną wyściółkę sekcji.

• Górna wyściółka: 500px

Indeks Z

Indeks z, który przypisujemy do tej sekcji, jest niższy niż w innych sekcjach na stronie. Pomoże nam to ukryć sekcję, dopóki nie znajdziemy się na dole strony.

• Indeks Z: 2

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Otwórz ustawienia wiersza i odpowiednio zmień ustawienia rozmiaru:

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Odstępy między kolumnami

Otwórz następnie ustawienia kolumny 1 i dodaj lewe dopełnienie.

• Lewa wyściółka: 20px

Prawa krawędź kolumny

Dodaj również prawą ramkę do kolumny.

• Szerokość prawego obramowania: 1px
• Kolor prawego obramowania: #515151

Kopiuj Wklej style kolumn

Zastosuj zmiany do wszystkich kolumn, rozszerzając style lub używając opcji kopiuj-wklej.

Dodaj moduł obrazu do kolumny 1

Załaduj obrazek

Czas zacząć dodawać moduły! Dodaj nowy moduł obrazu do pierwszej kolumny i prześlij swoje logo.

Rozmiary

Przejdź do zakładki projektowania i zmień szerokość na różnych rozmiarach ekranu.

• Szerokość: 35% (komputer stacjonarny), 30% (tablet), 25% (telefon)
• Wyrównanie modułu: do lewej

Rozstaw

Dodaj również dolny margines.

• Pokaż przestrzeń pod obrazem: Tak
• Margines dolny: 50px

Dodaj moduł tekstowy #1 do kolumny 2

Dodaj zawartość

Do drugiej kolumny! Dodaj pierwszy moduł tekstowy z wybraną zawartością.

Ustawienia tekstu

Zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Nunito Sans
• Grubość czcionki tekstu: pół pogrubiona
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 19px

Rozstaw

I dodaj niestandardowy górny i dolny margines na różnych rozmiarach ekranu.

• Górny margines: 15px (komputer i tablet), 10px (telefon)
• Margines dolny: 15px (komputer i tablet), 10px (telefon)

Dodaj moduł tekstowy nr 2 do kolumny 2

Dodaj zawartość

Dodaj drugi moduł tekstowy do drugiej kolumny i wprowadź wybraną treść.

Dodaj link

Dodaj link pasujący do elementu stopki.

• Adres URL łącza modułu: #

Ustawienia tekstu

Następnie zmodyfikuj ustawienia tekstu.

• Czcionka tekstu: Nunito Sans
• Kolor tekstu: #dbdbdb
• Rozmiar tekstu: 17px

Rozstaw

I dodaj niestandardowe górne i dolne wyściółki na różnych rozmiarach ekranu.

• Górny margines: 15px (komputer i tablet), 10px (telefon)
• Margines dolny: 15px (komputer i tablet), 10px (telefon)

Klonuj moduł tekstowy nr 2 tyle razy, ile potrzeba

Sklonuj drugi moduł tekstowy w kolumnie 2 tyle razy, ile potrzeba.

Zmień zawartość

Upewnij się, że zmieniłeś treść.

Zmień linki

Wraz z linkami.

• Adres URL łącza modułu: #

Klonuj moduły w kolumnie 2 i umieść w pozostałych kolumnach

Po wypełnieniu drugiej kolumny możesz sklonować oba moduły tyle razy, ile potrzeba i umieścić duplikaty w dwóch pozostałych kolumnach wiersza.

Zmień zawartość

Zmień zawartość każdego duplikatu.

Zmień linki

Wraz z linkiem.

• Adres URL łącza modułu: #

6. Umocuj sekcję nr 2 na dole strony

Dodaj niestandardowy CSS

Teraz, aby utworzyć odsłonięcie przewijania, upewnimy się, że sekcja stopki będzie przylegać do dolnej części naszej strony, dodając dwie linie kodu CSS do głównego elementu sekcji.

position: fixed;
bottom: 0;

7. Dodaj dolny margines do sekcji nr 1, aby uzyskać efekt odsłonięcia

Dodaj dolny margines w różnych rozmiarach ekranu

Potrzebujemy również miejsca na dole naszej strony, aby pokazać stopkę. Otwórz sekcję zawierającą rozdzielacz sekcji i dodaj trochę dolnego marginesu na różnych rozmiarach ekranu i gotowe!

• Margines dolny: 400px (komputer), 700px (tablet), 800px (telefon)

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 stworzyć piękny zwój stopki, który pokazuje poniżej podziały sekcji, aby stworzyć niepowtarzalny efekt. Jest to świetny sposób na uczynienie stopki interaktywną i zwrócenie uwagi na wymienione w niej elementy. Mamy nadzieję, że ten samouczek zainspiruje Cię również do stworzenia własnej stopki podziału sekcji! Jeśli masz jakieś pytania lub sugestie, upewnij się, że zostawiłeś 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.