Jak utworzyć lepki pasek nawigacyjny od dołu do góry w Divi

W dzisiejszym samouczku Divi pokażemy Ci krok po kroku, jak utworzyć lepki pasek nawigacyjny od dołu do góry w Divi. Umożliwi to początkowo przyklejenie paska nawigacyjnego na dole strony, aby uzyskać unikalny układ w części strony widocznej na ekranie. Następnie po przewinięciu poza górną część strony pasek nawigacyjny przyklei się do górnej części strony i pozostanie tam przez resztę strony. Można powiedzieć, że strona „odbierze” menu u dołu ekranu i wprowadzi przyjemny efekt interakcji do menu głównego i witryny.

Zacznijmy!

zapowiedź

Aby pomóc Ci zwizualizować wynik, który staramy się osiągnąć, przyjrzyjmy się końcowemu wynikowi:

Pobierz układ za DARMO

Aby położyć swoje ręce na projektach z tego samouczka, 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!

Aby zaimportować układ sekcji do Biblioteki Divi, przejdź do Biblioteki Divi.

Kliknij przycisk Importuj.

W wyskakującym okienku przenośności wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

Po zakończeniu układ sekcji będzie dostępny w Divi Builder.

Przejdźmy do samouczka, dobrze?

Czego potrzebujesz, aby zacząć

Aby rozpocząć, musisz wykonać następujące czynności:

1. Jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj motyw Divi.
2. Utwórz nową stronę w WordPress i użyj Divi Builder, aby edytować stronę w interfejsie (konstruktor wizualny).
3. Wybierz opcję „Buduj od podstaw”.

Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.

Tworzenie lepkiego paska nawigacyjnego od dołu do góry w Divi

Część 1: Tworzenie sekcji i nagłówka nad zawinięciem

W pierwszej części tego samouczka utworzymy sekcję strony widocznej na ekranie i nagłówek, które będą służyć jako główna sekcja nagłówka naszej strony. Sekcja będzie pełnoekranowa na komputerze, aby upewnić się, że sekcja zajmie cały widoczny obszar.

Dodaj wiersz

Aby rozpocząć, dodaj jednokolumnowy wiersz do sekcji domyślnej.

Ustawienia sekcji

Przed dodaniem modułu otwórz ustawienia sekcji i dodaj tło w następujący sposób:

• Kolor tła: #e9f9ff
• Obraz tła: [dodaj obraz]

Na karcie projektu zaktualizuj minimalną wysokość i dopełnienie.

• Minimalna wysokość: 100vh (komputer stacjonarny), auto (tablet i telefon)
• Wyściółka: góra 20vh, dół 20vh

Tekst nagłówka

Aby utworzyć tekst nagłówka, dodaj nowy moduł tekstowy do wiersza.

Następnie zaktualizuj treść o następujący nagłówek H1:

<h1>Above the Fold</h1>

Ustawienia tekstu

Na karcie projektu w ustawieniach tekstu zaktualizuj style czcionek nagłówka w następujący sposób:

• Czcionka nagłówka: Rubik
• Grubość czcionki nagłówka: pół pogrubiona
• Styl czcionki nagłówka TT
• Wyrównanie tekstu nagłówka: do środka
• Kolor tekstu nagłówka: #302ea7
• Rozmiar tekstu nagłówka: 130px (komputer), 70px (tablet), 40px (telefon)
• Odstępy między literami nagłówka: 2px
• Wysokość linii nagłówka: 1,3 em

Część 2: Tworzenie sekcji pod zgięciem

Aby zademonstrować funkcjonalność lepkiego paska nawigacyjnego, musimy dodać sekcję u dołu strony, aby mieć trochę miejsca na przewijanie.

Aby utworzyć sekcję, zduplikuj właśnie utworzoną sekcję powyżej części strony widocznej na ekranie.

Zaktualizuj zduplikowane tło sekcji.

• Kolor tła: #f4def1

Następnie nadaj sekcji dużą minimalną wysokość, abyśmy mieli miejsce na przewijanie strony. To jest tylko sekcja do wypełnienia w miejscu faktycznej zawartości strony.

• Minimalna wysokość: 200vh

Następnie zaktualizuj zawartość modułu tekstowego, zastępując słowo „Poniżej” słowem „Powyżej”.

Część 3: Tworzenie lepkiego paska nawigacyjnego

Aby utworzyć lepki pasek nawigacyjny od dołu do góry, naszym pierwszym krokiem jest utworzenie nowej sekcji z jednokolumnowym wierszem.

Dodaj nową sekcję i wiersz

Dodaj nową zwykłą sekcję bezpośrednio pod sekcją strony widocznej na ekranie.

Następnie dodaj do sekcji wiersz z jedną kolumną.

Tło sekcji i wypełnienie

Otwórz ustawienia sekcji i zaktualizuj kolor tła.

• Kolor tła: #302ea7

Następnie wyjmij górną i dolną wyściółkę, aby pasek nawigacyjny miał mniejszą wysokość.

• Padding: 0px na górze, 0px na dole

Dodaj widoczne przepełnienie

Aby mieć pewność, że menu rozwijane pozostaną widoczne, zaktualizuj opcje widoczności w następujący sposób:

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

Nadaj sekcji bezwzględną pozycję na urządzeniach mobilnych

Menu rozwijane dla urządzeń mobilnych otworzy się domyślnie pod ikoną hamburgera. Jeśli utrzymamy pasek nawigacji na dole, ukryje to menu rozwijane, jeśli użytkownik kliknie je na dolnej pozycji. Dla lepszego doświadczenia użytkownika chcemy, aby pasek nawigacyjny zaczynał się na samej górze strony na wyświetlaczu tabletu i telefonu.

Aby to zrobić, nadaj sekcji bezwzględną pozycję na tablecie i telefonie.

• Pozycja: względna (komputer), bezwzględna (tablet i telefon)

Dodaj lepką pozycję dla komputerów stacjonarnych i mobilnych

Aby dodać przyklejoną pozycję do sekcji paska nawigacyjnego, zaktualizuj następujące elementy:

• Sticky Position: Stick to Top i Bottom (komputer), Stick to Top (tablet i telefon)

Zaktualizuj wypełnienie wiersza

Po zakończeniu lepkiej sekcji otwórz ustawienia wiersza wewnątrz sekcji i zaktualizuj dopełnienie w następujący sposób:

• Padding: 10px góra, 10px dół

Utwórz menu nawigacyjne

Po umieszczeniu sekcji i wiersza jesteśmy gotowi do stworzenia menu nawigacyjnego.

Zacznij od dodania modułu menu do jednokolumnowego wiersza.

Zawartość menu

Zaktualizuj zawartość menu w następujący sposób:

• wybierz menu z rozwijanego menu
• dodaj obraz logo (używam obrazu o wymiarach 122px na 52px)
• usuń domyślny kolor tła

Na karcie projektu zaktualizuj następujące ustawienia tekstu i ikon menu:

• Aktywny kolor linku: #fff
• Czcionka menu: Rubik
• Styl czcionki menu: TT
• Kolor tekstu menu: #fff
• Rozmiar tekstu menu: 16px
• Wyrównanie tekstu: do prawej
• Kolor linii menu rozwijanego: #e19dff
• Kolor tekstu w menu mobilnym: #302ea7
• Kolor ikony koszyka na zakupy: #fff
• Kolor ikony wyszukiwania: #fff
• Kolor ikony menu Hamburger: #fff

Używanie obramowania do przesunięcia bezwzględnej pozycji paska nawigacyjnego na urządzeniu mobilnym

Ponieważ sekcja paska nawigacji ma pozycję bezwzględną na urządzeniach mobilnych, pasek będzie znajdować się nad (i odciąć) górną sekcję strony. Aby to naprawić, musimy przesunąć górną sekcję za pomocą górnej krawędzi, która ma taką samą wysokość jak pasek nawigacji/sekcja.

Sprawdź wysokość sekcji paska nawigacyjnego na urządzeniu mobilnym

Aby określić wysokość paska nawigacyjnego na urządzeniu mobilnym, otwórz aktywną wersję strony w nowym oknie przeglądarki. Następnie możesz zmniejszyć szerokość przeglądarki poniżej 980 pikseli, aby wyświetlić menu mobilne. Kliknij prawym przyciskiem myszy sekcję zawierającą menu i wybierz opcję sprawdzania elementu z menu prawego przycisku myszy w przeglądarce. Powinieneś zobaczyć przybornik poniżej sekcji, pokazujący wymiary (w tym wysokość) sekcji. W tym przykładzie wysokość sekcji paska nawigacyjnego wynosi 72 piks.

Dodaj odsunięcie górnej krawędzi do sekcji nad zagięciem

Teraz, gdy ustaliliśmy wysokość sekcji, otwórz ustawienia dla sekcji górnej (nad zakładką).

Na karcie Projekt dodaj następującą górną ramkę na tablecie i telefonie:

• Szerokość górnej krawędzi: 72px (tablet i telefon)
• Kolor górnej granicy: #302ea7

Ponieważ granica ma taką samą wysokość jak sekcja z pozycją bezwzględną, nie będzie można jej zobaczyć, ponieważ służy ona tylko do popchnięcia sekcji w dół, aby nie została odcięta.

Ostateczny wynik

Sprawdź efekt końcowy!

Końcowe przemyślenia

Tworzenie lepkiego paska nawigacyjnego od dołu do góry można łatwo wykonać za pomocą wbudowanej pozycji Divi i opcji przyklejania. Kluczem jest nadanie sekcji nad zakładką wysokości 100vh, a następnie dodanie sekcji paska nawigacyjnego poniżej, która będzie przylegać do dolnej i górnej części przeglądarki. Mamy nadzieję, że pomoże to w dodaniu bardziej unikalnej i wciągającej części górnej do Twojej witryny.

Ten lepki pasek nawigacyjny działa najlepiej w przypadku projektu pojedynczej strony, a nie szablonu globalnego. To powiedziawszy, możesz łatwo użyć tego jako projektu strony głównej i użyć globalnego nagłówka dla pozostałych stron za pomocą kreatora Divi Theme.

Czekam na kontakt z Państwem w komentarzach.

Pozdrawiam!