Jak tworzyć stałe mobilne stopki w Divi

Wiemy, jak ważne jest, aby wszystko było dostosowane do potrzeb mobilnych. Aby pomóc Ci przenieść wrażenia mobilne na wyższy poziom, w tym poście krok po kroku pokażemy Ci, jak tworzyć stałe mobilne paski stopki za pomocą Divi.

Ten samouczek jest częścią naszej ciągłej inicjatywy projektowej Divi, w której każdego tygodnia staramy się umieszczać coś dodatkowego w twoim przyborniku projektowym. Tym razem użyjemy pakietu układu przychodni zdrowia i sprawimy, że stałe ruchome paski stopki będą pasować do stylu pakietu układu. Będziesz jednak mógł użyć tego podejścia do każdego rodzaju projektu, nad którym pracujesz, i stworzyć własne alternatywy dla stałych ruchomych stopek.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na trzy przykłady, które odtworzymy krok po kroku. Te przykłady pojawią się tylko na urządzeniach mobilnych (i tabletach, jeśli wolisz).

Odtwórz przykład nr 1

Dodaj nową sekcję na dole strony

Zacznijmy odtwarzać pierwszy stały mobilny pasek stopki! Zalecamy utworzenie strony dla trzech układów zawartych w pakiecie układów przychodni zdrowia. Po jednym na każdy przykład. Otwórz dowolną stronę, do której chcesz dodać pierwszy pasek stopki. Przewiń w dół do końca strony i dodaj nową sekcję zaraz po ostatniej.

Rozstaw

Otwórz ustawienia wiersza i usuń wszystkie niestandardowe górne i dolne dopełnienie w ustawieniach odstępów.

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

Widoczność

Ukrywamy tę sekcję również na komputerze. Jeśli chcesz, aby mobilny pasek stopki pojawiał się tylko na urządzeniach mobilnych, ukryj tę sekcję również na tablecie.

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmodyfikuj ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Wyrównaj wysokości kolumn: Tak

Rozstaw

Usuń wszystkie domyślne górne i dolne wyściółki następnego rzędu.

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

niestandardowe CSS

Na koniec dodajemy do wiersza kilka niestandardowych wierszy CSS. Te linie pomogą zmienić wiersz w stały pasek stopki.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Dodaj moduł tekstowy do kolumny 1

Dodaj zawartość

Czas zacząć dodawać moduły! Pierwszym modułem, którego potrzebujemy, jest moduł tekstowy w kolumnie 1. Dodaj wybraną zawartość.

Kolor tła

Przejdź do ustawień tła modułu i zmień kolor tła.

• Kolor tła: #5e89fb

Ustawienia tekstu

Zmodyfikuj również ustawienia tekstu.

• Czcionka tekstu: Work Sans
• Grubość czcionki tekstu: Lekka
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 16px
• Odstępy między literami tekstu: -1px

Rozstaw

Następnie dodaj kilka niestandardowych wartości dopełnienia.

• Górna wyściółka: 16px
• Dolna wyściółka: 16px
• Lewa wyściółka: 15px
• Prawe wypełnienie: 15px

Granica

I trochę zaokrąglonych rogów.

• U góry po lewej: 10 pikseli
• U góry po prawej: 10 pikseli

Cień Pudełka

Uzupełnij ustawienia modułu, dodając subtelny cień w kształcie pudełka.

• Siła rozmycia cieni w pudełku: 80px

Dodaj moduł Blurb do kolumny 2

Dodaj zawartość

Dodaj moduł Blurb do drugiej kolumny i dodaj wybrany tytuł.

Wybierz ikonę

Kontynuuj, wybierając ikonę modułu Blurb.

Kolor tła

Dodaj również kolor tła do modułu.

• Kolor tła: #62de9d

Ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikon.

• Kolor ikony: #ffffff
• Umieszczenie ikony: po lewej
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 19px

Ustawienia tekstu tytułu

Kontynuuj, modyfikując ustawienia tekstu tytułu.

• Czcionka tytułu: Work Sans
• Kolor tekstu tytułu: #ffffff
• Rozmiar tekstu tytułu: 16px
• Odstępy między literami tytułu: -1px

Rozstaw

Dodaj również niestandardowe wypełnienie do modułu.

• Górna wyściółka: 20px
• Dolna wyściółka: 10px
• Lewa wyściółka: 30px
• Prawe wypełnienie: 30px

Granica

I dodaj „10px” w lewym górnym i prawym górnym rogu.

• U góry po lewej: 10 pikseli
• U góry po prawej: 10 pikseli

Cień Pudełka

Na koniec dodaj do modułu subtelny cień pudełka.

• Siła rozmycia cieni w pudełku: 80px

Odtwórz przykład nr 2

Dodaj nową sekcję na dole strony

Przejdźmy do drugiego przykładu! Ponownie otwórz wybraną stronę, przewiń w dół do końca strony i dodaj nową sekcję.

Rozstaw

Otwórz ustawienia sekcji i usuń domyślną górną i dolną wyściółkę.

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

Widoczność

Ukryj sekcję na komputerze (i tablecie, jeśli wolisz).

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Bez dodawania żadnych modułów otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Usuń również domyślną górną i dolną wyściółkę rzędu.

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

niestandardowe CSS

Dodaj kilka niestandardowych linii CSS do następnego wiersza. Te wiersze kodu CSS pomogą w utworzeniu stałego mobilnego paska stopki.

display: flex;
position:fixed;
bottom: 0px;
z-index: 99;

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Kontynuuj, dodając moduł Blurb do pierwszej kolumny. Dodaj wybrany tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Kolor tła

Następnie dodaj kolor tła do modułu.

• Kolor tła: #62de9d

Ustawienia ikon

Przejdź do zakładki projekt i zmień ustawienia ikon modułu.

• Kolor ikony: #ffffff
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 25px

Ustawienia tekstu tytułu

Zmień również ustawienia tekstu tytułu.

• Czcionka tytułu: Work Sans
• Wyrównanie tekstu tytułu: do środka
• Kolor tekstu tytułu: #ffffff
• Odstępy między literami tytułu: -1px

Rozstaw

Dodaj trochę wyściółki górnej i dolnej, aby moduł miał trochę miejsca na oddychanie.

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

Granica

Dodajemy również '15px' w lewym górnym rogu modułu.

• Górny lewy: 15px

Cień Pudełka

A my uzupełnimy moduł o subtelny cień pudełkowy.

• Siła rozmycia cieni w pudełku: 80px

Clone Blurb Module dwa razy i umieść duplikaty w pozostałych kolumnach

Gdy skończysz modyfikować pierwszy moduł Blurb, możesz śmiało sklonować moduł dwukrotnie i umieścić duplikaty w dwóch pozostałych kolumnach.

Zmień kolor tła duplikatu #1

Zmień kolor tła pierwszego duplikatu.

• Kolor tła: #3d3d3d

Zmień ustawienia odstępów duplikatu nr 1

Wraz z ustawieniami odstępów.

• Górny margines: -20px
• Górna wyściółka: 50px
• Dolna wyściółka: 30px

Zmień obramowanie duplikatu #1

A także zaokrąglone rogi.

Zmień kolor tła duplikatu #2

Zmień również kolor tła drugiego duplikatu w trzeciej kolumnie.

• Kolor tła: #000000

Zmień obramowanie duplikatu nr 2

Wraz z zaokrąglonymi rogami.

• U góry po prawej: 15px

Odtwórz przykład nr 3

Dodaj nową sekcję na dole strony

Przejdźmy do następnego i ostatniego przykładu! Otwórz jedną ze stron, przewiń stronę w dół i dodaj nową sekcję.

Górny rozdzielacz

Otwórz ustawienia sekcji i dodaj górną przegrodę.

• Kolor dzielnika: #62de9d
• Wysokość dzielnika: 110px

Rozstaw

Usuń również całą domyślną górną i dolną wyściółkę sekcji.

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

Cień Pudełka

Dodaj subtelny cień pudełkowy do następnej sekcji.

• Siła rozmycia cieni w pudełku: 80px

niestandardowe CSS

I dodaj kilka niestandardowych wierszy CSS w zakładce Zaawansowane. Pomoże to zmienić sekcję w nieruchomą mobilną stopkę.

position:fixed;
bottom:0px;
width: 100%;
z-index: 99;

Widoczność

Na koniec wyłącz sekcję na komputerze (i tablecie, jeśli wolisz).

Dodaj nowy wiersz

Struktura kolumny

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

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i zmień ustawienia rozmiaru.

• Stwórz ten wiersz o pełnej szerokości: Tak
• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1

Rozstaw

Następnie dodaj niestandardową górną i dolną wyściółkę.

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

niestandardowe CSS

Aby upewnić się, że wszystkie trzy kolumny pozostają na tej samej wysokości, dodamy również wiersz kodu CSS do zakładki zaawansowanej wiersza.

display: flex;

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Teraz możemy zacząć dodawać moduły! Dodaj moduł Blurb do pierwszej kolumny i nadaj mu tytuł.

Wybierz ikonę

Następnie wybierz ikonę.

Ustawienia ikon

Przejdź do zakładki projektu i zmień ustawienia ikon.

• Kolor ikony: #ffffff
• Umieszczenie ikon: góra
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikony: 25px

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Czcionka tytułu: Work Sans
• Orientacja tekstu tytułu: Środek
• Odstępy między literami tytułu: -1px

Clone Blurb Module Dwa razy i umieść

Gdy skończysz modyfikować moduł Blurb w kolumnie 1, możesz sklonować moduł dwukrotnie. Umieść duplikaty w dwóch pozostałych kolumnach.

Zmień kolor ikony duplikatu nr 1

Nie zapomnij zmienić koloru ikony duplikatu znajdującego się w drugiej kolumnie.

• Kolor ikony: #000000

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie różne kroki, przyjrzyjmy się końcowemu wynikowi wszystkich trzech przykładów, które omówiliśmy powyżej.

Końcowe przemyślenia

W tym poście zajęliśmy się trzema różnymi projektami stałego mobilnego paska stopki, które można odtworzyć krok po kroku, postępując zgodnie z samouczkiem. Mobilne paski stopki będą śledzić odwiedzających przez cały czas ich przewijania na stronie. Ten samouczek jest częścią trwającej inicjatywy projektowej Divi, w której każdego tygodnia staramy się dodawać coś dodatkowego do zestawu narzędzi projektowych. Jeśli masz jakieś pytania lub sugestie, koniecznie zostaw komentarz w sekcji komentarzy poniżej!