[Ad_1]

W dzisiejszym samouczku Divi pokażemy Ci krok po kroku, jak utworzyć lepki pasek nawigacyjny od dołu do góry w Divi. Dzięki temu pasek nawigacyjny pozostanie początkowo na dole strony, aby uzyskać unikalny układ w części strony widocznej na ekranie. Następnie, gdy miniesz sekcję w górnej części strony, pasek nawigacyjny pozostanie u góry strony i pozostanie tam przez resztę strony. 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 efekt końcowy:

Pobierz układ ZA DARMO

Aby zdobyć projekty z tego samouczka, musisz najpierw pobrać je za pomocą przycisku poniżej. Aby uzyskać dostęp do pobierania, musisz zapisać się na naszą listę mailingową Divi Daily za pomocą forma poniżej. Jako nowy subskrybent otrzymasz jeszcze więcej korzyści Divi i bezpłatny pakiet Divi Layout w każdy poniedziałek! Jeśli jesteś już na liście, wpisz poniżej swój adres e-mail i kliknij pobierz. Nie będziesz „ponownie subskrybowany” ani otrzymywać dodatkowych e-maili.

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

Kliknij przycisk Importuj.

W wyskakującym oknie przenoszenia wybierz zakładkę importu i wybierz plik do pobrania z komputera.

Następnie kliknij przycisk importu.

okno powiadomień divi

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

Przejdźmy do samouczka, dobrze?

To, czego potrzebujesz, aby zacząć

przedłużyć zakładki narożne

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.

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 linią wodną, ​​które będą służyć jako główna sekcja nagłówka naszej strony. Sekcja będzie pełnoekranowa na pulpicie, aby zapewnić, że sekcja zajmie całe okno.

Dodaj wiersz

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

lepki pasek nawigacyjny divi od dołu do góry

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]

lepki pasek nawigacyjny divi od dołu do góry

Na karcie Projekt zaktualizuj minimalną wysokość i wypełnienie.

  • Minimalna wysokość: 100 vh (komputer stacjonarny), automat (tablet i telefon)
  • Wyściółka: górna 20vh, dolna 20vh

lepki pasek nawigacyjny divi od dołu do góry

Tekst nagłówka

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

lepki pasek nawigacyjny divi od dołu do góry

Następnie zaktualizuj zawartość za pomocą następującego nagłówka H1:

<h1>Above the Fold</h1>

lepki pasek nawigacyjny divi od dołu do góry

Ustawienia tekstu

Na karcie Projekt w Ustawieniach tekstu zaktualizuj Style czcionek nagłówka w następujący sposób:

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

lepki pasek nawigacyjny divi od dołu do góry

Część 2: Tworzenie sekcji pod zakładką

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 utworzoną linią wodną.

lepki pasek nawigacyjny divi od dołu do góry

Zaktualizuj tło zduplikowanej sekcji.

  • Kolor tła: # f4def1

lepki pasek nawigacyjny divi od dołu do góry

Następnie nadaj sekcji dużą minimalną wysokość, abyśmy mieli miejsce na przewijanie strony. To tylko sekcja do wypełnienia, a nie rzeczywista zawartość strony.

lepki pasek nawigacyjny divi od dołu do góry

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

lepki pasek nawigacyjny divi od dołu do góry

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.

Dodaj nową sekcję i nową linię

Dodaj nową regularną sekcję bezpośrednio pod sekcją nad linią wodną.

lepki pasek nawigacyjny divi od dołu do góry

Następnie dodaj wiersz do kolumny do sekcji.

lepki pasek nawigacyjny divi od dołu do góry

Tło sekcji i dopełnienie

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

  • Kolor tła: #302ea7

lepki pasek nawigacyjny divi od dołu do góry

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

  • Wypełnienie: 0px na górze, 0px na dole

lepki pasek nawigacyjny divi od dołu do góry

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

lepki pasek nawigacyjny divi od dołu do góry

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 nawigacyjny na dole, ukryje menu rozwijane, jeśli użytkownik kliknie w niego w dolnej pozycji. Dla lepszego doświadczenia użytkownika chcemy, aby pasek nawigacyjny zaczynał się na samej górze strony na ekranie tabletu i telefonu.

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

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

lepki pasek nawigacyjny divi od dołu do góry

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)

lepki pasek nawigacyjny divi od dołu do góry

Zaktualizuj dopełnienie wiersza

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

  • Padding: 10 pikseli na górze, 10 pikseli na dole

lepki pasek nawigacyjny divi od dołu do góry

Utwórz menu nawigacyjne

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

Zacznij od dodania modułu menu do wiersza do kolumny.

lepki pasek nawigacyjny divi od dołu do góry

Zawartość menu

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

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

lepki pasek nawigacyjny divi od dołu do góry

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

  • Kolor aktywnego 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 hamburgera: #fff

lepki pasek nawigacyjny divi od dołu do góry

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

Ponieważ sekcja paska nawigacji ma bezwzględną pozycję na urządzeniach mobilnych, pasek będzie znajdować się nad (i odciąć) górną sekcję strony. Aby rozwiązać ten problem, musimy odsunąć górną sekcję za pomocą górnej krawędzi o tej samej wysokości co 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 zobaczyć menu mobilne. Kliknij prawym przyciskiem myszy sekcję zawierającą menu i wybierz opcję Sprawdź element z menu kontekstowego przeglądarki. Powinieneś zobaczyć przybornik pod sekcją pokazujący wymiary (w tym wysokość) sekcji. W tym przykładzie wysokość sekcji paska nawigacyjnego wynosi 72 piks.

lepki pasek nawigacyjny divi od dołu do góry

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ą).

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 zobaczyć granicy, ponieważ służy ona tylko do popchnięcia sekcji w dół, aby nie została przecięta.

lepki pasek nawigacyjny divi od dołu do góry

Ostateczny wynik

Odkryj efekt końcowy!

końcowe przemyślenia

Tworzenie lepkiego paska nawigacyjnego od dołu do góry można łatwo osiągnąć 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 przylega do dolnej i górnej części nawigatora. Mamy nadzieję, że pomoże to dodać bardziej wyjątkowy i wciągający obraz powyżej linii wodnej do Twojego Witryna internetowa.

Ten lepki pasek nawigacyjny działa najlepiej w przypadku projektu pojedynczej strony, a nie ogólnego 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ą konstruktora. Motyw Divi.

Nie mogę się doczekać, aby usłyszeć od Ciebie w komentarzach.

Do twojego zdrowia!



[Ad_2]

Link Źródło