Czy chciałbyś utworzyć pasek nawigacyjny w Divi, który będzie przyklejany od dołu do góry strony?
W samouczku Divi Dzisiaj pokażemy Ci krok po kroku, jak utworzyć lepki pasek nawigacyjny od dołu do góry w Divi.
Dzięki temu pasek nawigacyjny początkowo pozostanie na dole strony, aby uzyskać unikalny układ w części strony widocznej na ekranie. Następnie, gdy przewiniesz sekcję w górnej części strony, pasek nawigacyjny pozostanie na górze strony i pozostanie tam przez całą stronę.
Można powiedzieć, że strona „przejmie” menu na dole ekranu i wprowadzi przyjemny efekt interakcji do głównego menu i Witryna internetowa.
Zacznijmy!
badanie
Aby pomóc Ci zwizualizować wynik, który staramy się osiągnąć, spójrzmy na wynik końcowy:
Pobierz DIVI teraz !!!
Zacznijmy od stworzenia nowej strony za pomocą Divi Builder
Aby rozpocząć, musisz wykonać następujące czynności:
Z pulpitu WordPress przejdź do Strony> Dodaj nowy aby utworzyć nową stronę.
Nadaj mu tytuł, który ma dla Ciebie sens i kliknij Użyj Divi Builder
Następnie kliknij przycisk Rozpocznij budowę (Twórz od podstaw)
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Utwórz lepki pasek nawigacyjny od dołu do góry w Divi
Część 1: Tworzenie sekcji i nagłówka nad linią wodną
W pierwszej części tego samouczka utworzymy sekcję i nagłówek nad zakładką, które będą służyć jako główna sekcja nagłówka naszej strony. Sekcja zostanie wyświetlona na pełnym ekranie na pulpicie, aby zapewnić, że sekcja zajmie całe okno wyświetlania.
Czytaj także: Divi: Wybierz między siatką a układem o pełnej szerokości modułu Filtrowalne portfolio
Dodaj wiersz
Aby rozpocząć, dodaj wiersz do kolumny w 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]
Pod zakładką Wnętrze, zaktualizuj minimalną wysokość i wypełnienie.
- Minimalna wysokość: 100vh (komputer stacjonarny), auto (tablet i telefon)
- Wypełnienie: 20vh (góra i dół)
Tekst nagłówka
Aby utworzyć tekst nagłówka, dodaj do wiersza nowy moduł Tekst.
Następnie zaktualizuj treść z następującym nagłówkiem H1:
<h1>Above the Fold</h1>
Ustawienia tekstu
Pod zakładką Wnętrze w ustawieniach modułu Tekst zaktualizuj style czcionek nagłówka w następujący sposób:
- Nagłówek:
- Czcionka: Rubin
- Grubość czcionki: pół pogrubiona
- Styl: TT
- Wyrównanie tekstu: wyśrodkowane
- Kolor tekstu: #302ea7
- Rozmiar: 130px (komputer), 70px (tablet), 40px (telefon)
- Odstępy między literami: 2px
- Wysokość linii: 1,3 em
Część 2: Tworzenie sekcji poniżej linii wodnej
Aby zademonstrować funkcjonalność lepkiego paska nawigacyjnego, musimy dodać sekcję pod zakładką, aby mieć miejsce na przewijanie.
Aby utworzyć sekcję, zduplikuj sekcję nad właśnie utworzonym zagięciem.
Zaktualizuj tło zduplikowanej sekcji.
- Kolor tła: #f4def1
Następnie nadaj sekcji dużą minimalną wysokość, abyśmy mieli miejsce na przewijanie strony w dół. Jest to po prostu sekcja, którą należy wypełnić zamiast treść prawdziwa jedna strona.
- Minimalna wysokość: 200vh
Następnie zaktualizuj treść modułu Tekst, zastępując słowo "Poniżej" przez "Nad".
Część 3: Utwórz lepki pasek nawigacyjny
Aby utworzyć lepki pasek nawigacyjny od dołu do góry, naszym pierwszym krokiem jest utworzenie nowej sekcji z jednym rzędem do jednej kolumny.
Dodano nową sekcję i linię
Najpierw dodajmy nową sekcję zwykłą bezpośrednio pod sekcją nad zakładką.
Następnie dodajmy do sekcji wiersz z jedną kolumną.
Tło sekcji i dopełnienie
Otwórz ustawienia sekcji i zaktualizuj kolor tła.
- Kolor tła: #302ea7
Następnie usuń górną i dolną wyściółkę, aby pasek nawigacyjny miał mniejszą wysokość.
- Wypełnienie: 0 pikseli (góra i dół)
Dodaj widoczne przepełnienie
Aby upewnić się, ż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 telefonu komórkowego otworzy się domyślnie pod ikoną hamburgera. Jeśli utrzymamy pasek nawigacyjny na dole, spowoduje to ukrycie menu rozwijanego, jeśli użytkownik je kliknie.
Dla lepszego doświadczenia użytkownika chcemy, aby pasek nawigacyjny zaczynał się na samej górze strony na ekranie tabletu i telefonu.
W tym celu nadaj sekcji bezwzględną pozycję na tablecie i telefonie.
- Pozycja: względna (komputer stacjonarny), bezwzględna (tablet i telefon)
Dodaj lepką pozycję dla komputerów stacjonarnych i mobilnych
Aby dodać przyklejoną pozycję do sekcji paska nawigacji, zaktualizuj następujące elementy:
- Pozycja lepka: trzymaj się góry i dołu (komputer), trzymaj się góry (tablet i telefon)
Zaktualizuj dopełnienie wiersza
Po ukończeniu lepkiej sekcji otwórz ustawienia wierszy w sekcji i zaktualizuj dopełnienie w następujący sposób:
- Wypełnienie: 10 pikseli (góra i dół)
Utwórz menu nawigacyjne
Po umieszczeniu sekcji i linii jesteśmy gotowi do utworzenia menu nawigacyjnego.
Zacznij od dodania modułu Menu do wiersza jednokolumnowego.
Zawartość menu
Zaktualizuj zawartość menu w następujący sposób:
- wybierz menu z listy rozwijanej
- dodaj obraz logo
- usuń domyślny kolor tła
Pod zakładką Wnętrze, zaktualizuj następujący tekst menu i ustawienia ikon:
- Kolor aktywnego łącza: #fff
- Czcionka menu: Ruby
- Styl czcionki menu: TT
- Kolor tekstu: #fff
- Rozmiar tekstu menu: 16px
- Wyrównanie tekstu: prawo
- Kolor linii menu rozwijanego: #e19dff
- Kolor tekstu menu mobilnego: #302ea7
- Kolor ikony koszyka na zakupy: #fff
- Kolor ikony wyszukiwania: #fff
- Kolor ikony menu hamburgera: #fff
Używanie obramowania do przesunięcia bezwzględnej pozycji paska nawigacyjnego na urządzeniu mobilnym
Ponieważ sekcja paska nawigacyjnego ma pozycję bezwzględną na urządzeniach mobilnych, pasek będzie znajdował się powyżej (i odcina) górnej części strony. Aby to naprawić, musimy przesunąć górną sekcję, używając górnej krawędzi o tej samej wysokości, co pasek/sekcja nawigacyjna.
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.
Możesz również skonsultować się z: Divi: Jak stworzyć lepki pasek nawigacyjny
Kliknij prawym przyciskiem myszy sekcję zawierającą menu i wybierz opcję sprawdź element w menu kontekstowym przeglądarki. Powinieneś zobaczyć pudełko narzędzia pod sekcją wskazując wymiary (w tym wysokość) sekcji.
W tym przykładzie wysokość sekcji paska nawigacyjnego wynosi 72 piksele.
Dodaj przesunięcie górnej krawędzi do sekcji nad zakładką
Teraz, gdy ustaliliśmy wysokość sekcji, otwórz ustawienia dla górnej sekcji (nad zakładką).
Pod zakładką Wnętrze, dodaj następującą górną ramkę na tablecie i telefonie:
- Szerokość górnej krawędzi: 72 piksele (tablet i telefon)
- Kolor górnej krawędzi: #302ea7
Ponieważ granica ma taką samą wysokość jak sekcja z pozycją bezwzględną, nie będziesz w stanie zobaczyć granicy, ponieważ służy ona tylko do popchnięcia sekcji w dół, aby nie została przycięta.
Ostateczny wynik
Odkryj efekt końcowy!
Pobierz DIVI teraz !!!
Wnioski
Tworzenie lepkiego paska nawigacyjnego od dołu do góry można łatwo wykonać za pomocą wbudowanej pozycji Divi i lepkie opcje.
Kluczem jest nadanie sekcji powyżej zakładki wysokości 100vh, a następnie dodanie sekcji paska nawigacyjnego poniżej, która przykleja się do dolnej i górnej części przeglądarki. Mam nadzieję, że pomoże to w dodaniu bardziej wyjątkowego i wciągającego elementu w części widocznej na ekranie Witryna internetowa.
Ten lepki pasek nawigacyjny najlepiej sprawdza się w przypadku pojedynczego projektu strony, a nie całego szablonu. 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ą Generator motywów Divi .
Mamy nadzieję, że ten samouczek zainspiruje Cię do kolejnych projektów Divi. Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Możesz również skonsultować nasze zasoby, jeśli potrzebujesz więcej elementów do realizacji swoich projektów tworzenia stron internetowych.
Nie wahaj się również skonsultować z naszym przewodnikiem na temat Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Ale w międzyczasie udostępnij ten artykuł w różnych sieciach społecznościowych.
...
