Co tydzień dostarczamy Ci nowe pomysły projektowe, które możesz wykorzystać w różnych projektach Divi. Te samouczki zazwyczaj zawierają przypadki użycia, które pomogą Ci podjąć Witryna internetowa na górnym poziomie.

W tym tygodniu w ramach naszej inicjatywy projektowej Divi W toku pokażemy, jak stworzyć piękne pływające menu przeglądu, które rozwija się po najechaniu na nie lub kliknięciu. Zacznijmy od kilku ogólnych kroków. Kontynuujemy, dodając elementy menu za pomocą modułów Blurb, a na koniec pozwalamy wybrać efekt najechania lub kliknięcia.

Chodźmy!

badanie

Zanim przejdziemy do samouczka, rzućmy okiem na wynik, jaki możemy uzyskać. Ale może być inaczej, ponieważ prawdopodobnie będziesz chciał dostosować to, czego się uczysz.

1. Utwórz pustą stronę i użyj szablonu strony zwiedzania

Dodaj nową pustą stronę i aktywuj Divi Builder

Pierwszą rzeczą do zrobienia jest utworzenie nowej, pustej strony. Nadaj swojej stronie tytuł i przejdź do Divi Budowniczy.

Pobierz stronę z miejscem turystycznym

Po włączeniu Divi Builder pobierz układ strony docelowej pakietu zwiedzania.

2. Dodaj nową zwykłą sekcję na dole strony

Po ukryciu głównego paska menu możemy rozpocząć dodawanie menu przeglądu. Aby to zrobić, dodamy nową zwykłą sekcję u dołu naszej strony.

Kolor tła

Otwórz ustawienia sekcji i dodaj lekko przezroczysty biały kolor tła.

• Kolor tła: rgba (255,255,255,0.98)

rozstaw

Przejdź na kartę Projekt i usuń wszystkie domyślne górne i dolne wypełnienie z sekcji.

• Top Padding: 0px
• Dolne wypełnienie: 0px

Domyślny cień

Dodaj cień pola do następnej sekcji.

• Box Shadow Blur Force: 18px
• Kolor cienia: #383838

Hover Box Shadow

I zmień siłę rozmycia cienia w dymku.

• Box Shadow Blur Force: 1000px

Ukryj przekroczenia sekcji i zwiększ indeks Z.

Zamierzamy użyć ustawień rozmiaru sekcji, aby ta technika działała, ale aby upewnić się, że nic nie wykracza poza kontener sekcji, będziemy musieli ukryć przepełnienia. Zwiększamy również indeks Z, aby upewnić się, że sekcja pozostanie u góry reszty strony.

• Przelew poziomy: ukryty
• Przelew pionowy: ukryty
• Indeks Z: 9999

3. Skonfiguruj rozmiar menu, aby pasował do wszystkich rozmiarów ekranu

Dodaj wiersz 1

Struktura kolumny

Kiedy już ustalisz podstawowe parametry sekcji, czas dodać wszystkie treść które chcesz wyświetlić w menu. Możesz stworzyć dowolny projekt, korzystając z elementów projektu Divi i wbudowanych opcji, ale musisz upewnić się, że idealnie skaluje się na wysokości „100 pikseli” dla wszystkich rozmiarów ekranu. Aby to zrobić, będziemy używać jednostki szerokości rzutni podczas całego procesu kompilacji i dostosowywać wartości na różnych rozmiarach ekranów. Zacznij od dodania nowego wiersza do sekcji, korzystając z następującej struktury kolumn:

zaklejania

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i upewnij się, że wypełniają całą szerokość sekcji.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

rozstaw

Przejdź do ustawień odstępów i usuń wszystkie domyślne górne i dolne wypełnienie.

• Top Padding: 0px
• Dolne wypełnienie: 0px

Dodaj moduł tekstowy do kolumny

Dodaj symbol

Kontynuuj, dodając moduł tekstowy do kolumny wiersza. Dodaj symbol „=” do pola treść lub możesz użyć dowolnego innego wybranego symbolu.

Kolor tła

Następnie zmień kolor tła modułu.

• Kolor tła: #000000

Ustawienia tekstu

Przejdź do karty Projekt i zmień również ustawienia tekstu.

• Czcionka tekstu: Open Sans
• Wyrównanie tekstu: środek
• Kolor tekstu: #ffffff
• Rozmiar tekstu: 3vw (komputer stacjonarny), 5vw (tablet), 7vw (telefon)
• Wysokość linii tekstu: 1em

rozstaw

Dodajemy również spację u góry iu dołu modułu, używając następujących niestandardowych wartości dopełnienia:

• Górna wyściółka: 2.5vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)
• Tapicerka u dołu: 2.5vw (komputer stacjonarny), 3.5vw (tablet), 5vw (telefon)

Dodaj linię 2

Struktura kolumny

Kontynuuj dodawanie drugiego wiersza, używając następującej struktury kolumn:

zaklejania

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i pozwól mu zajmować całą szerokość ekranu.

• Użyj niestandardowej szerokości rynny: Tak
• Szerokość rynny: 1
• Szerokość: 100%
• Maksymalna szerokość: 100%

rozstaw

Przejdź do ustawień odstępów, a następnie dodaj niestandardowe wypełnienie u góry iu dołu.

• Górna wyściółka: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)
• Tapicerka u dołu: 2vw (komputer stacjonarny), 4vw (tablet), 6vw (telefon)

pokaz

Aby upewnić się, że dwie kolumny pozostaną obok siebie na mniejszych ekranach, dodamy jedną linię kodu CSS do głównego elementu wiersza.

wyświetlacz: flex;

Dodaj moduł Blurb do kolumny 1

Dodaj treść

Czas zacząć dodawać pozycje menu! Dodaj nowy moduł Blurb do pierwszej kolumny w wierszu i wprowadź treść do wyboru.

Wybierz ikonę

Wybierz ikonę obok.

Dodaj link

Wprowadź łącze do strony odpowiadające pozycji menu.

• Adres URL tytułu linku: #

Ustawienia ikon

Przejdź do zakładki Projekt i odpowiednio zmień ustawienia ikon:

• Kolor ikony: # ff3314
• Umieszczenie ikon: u góry
• Użyj rozmiaru czcionki ikony: Tak
• Rozmiar czcionki ikon: 2vw (komputer), 3vw (tablet), 4vw (telefon)

Ustawienia tekstu tytułowego

Zmień także ustawienia tekstu tytułu.

• Tytuł Police: PT Serif
• Styl czcionki tytułu: podkreślenie
• Podkreśl kolor tytułu: # ff3314
• Tytuł tekstu: Wyrównanie do środka
• Rozmiar tytułu tekstu: 1.8vw (komputer stacjonarny), 2.3vw (tablet), 3.3vw (telefon)

Ustawienia tekstu podstawowego

Następnie zmień ustawienia tekstu podstawowego.

• Body Font: Lato
• Wyrównanie treści tekstu: środek
• Kolor tekstu: # c6c6c6
• Rozmiar tekstu: 0.9vw (komputer stacjonarny), 1.7vw (tablet), 2.1vw (telefon)
• Wysokość ciała: 1.8em

zaklejania

I zmień szerokość modułu na różnych rozmiarach ekranu, używając następujących wartości:

• Szerokość: 60% (komputer stacjonarny), 65% (tablet), 80% (telefon)

Animacja

Usuwamy również animację ikon w ustawieniach animacji.

• Ikona animacji: brak animacji

Sklonuj moduł i umieść kopię w kolumnie 2

Po zakończeniu modułu Blurb możesz go sklonować i umieścić duplikat w drugiej kolumnie linii.

Zmień kopię

Pamiętaj, aby zmienić kopię. Nie zapomnij zmienić ikony i łącza.

Klonuj linię dwa razy

Po zakończeniu obu modułów Blurb w rzędzie możesz dwukrotnie zduplikować całą linię.

Zmień kopię, ikonę i łącze dla każdego duplikatu notki indywidualnie

Pamiętaj, aby zmienić kopię, ikonę i łącze dla każdego elementu menu listy z osobna.

4. Spraw, aby sekcja była tandetna

Wada

Po dodaniu wszystkich elementów, które chcesz wyświetlić do swojej sekcji, możesz sprawić, by sekcja pozostała w lewym górnym rogu strony, dodając następujące dwa wiersze kodu CSS do głównego elementu sekcji. :

pozycja: stała; góra: 0;

Najedź kursorem (ważne!)

Włącz opcję najechania kursorem na główny element sekcji i upewnij się, że sekcja pozostaje lepka również w tym stanie.

pozycja: stała;

5. Wybierz metodę: A) Menu przelotu lub B) Kliknij menu

A) Menu zawisu

Domyślny rozmiar sekcji

W następnej części samouczka będziesz musiał wybrać preferowaną metodę. menu podręczne lub kliknij. Na mniejszych urządzeniach menu podręczne zachowuje się jak menu kliknięcia. Jeśli zdecydujesz się wybrać opcję najechania kursorem, otwórz ponownie ustawienia sekcji, przejdź do ustawień rozmiaru i odpowiednio zmień szerokość i wysokość menu:

• Szerokość: 8vw (komputer stacjonarny), 12vw (tablet), 20vw (telefon)
• Wysokość: 7.4vw (komputer stacjonarny), 12vw (tablet), 16vw (telefon)

Unieś sekcję

Zmień wartości najazdu, aby utworzyć rozwijane menu.

• Szerokość: 80%
• Wysokość: 100vh

B) Menu po kliknięciu

Dodaj klasę CSS do sekcji

Jeśli chcesz, aby menu otwierało się tylko po kliknięciu, musisz otworzyć moduł tekstowy zawierający symbol menu. Przejdź do zakładki Zaawansowane i dodaj niestandardową klasę CSS.

• Klasa CSS: otwarta na całą szerokość

Dodaj klasę CSS do modułu tekstowego

Następnie otwórz parametry sekcji i dodaj kolejną klasę CSS.

• Klasa CSS: płynna transformacja

Rozmiary sekcji

Następnie modyfikujemy szerokość i wysokość naszej sekcji.

• Szerokość: 8vw (komputer stacjonarny), 12vw (tablet), 20vw (telefon)
• Wysokość: 7.4vw (komputer stacjonarny), 12vw (tablet), 16vw (telefon)

Dodaj kod do strony

Dodaj nową linię na dole sekcji

Teraz, aby stworzyć efekt odwrócenia, będziemy potrzebować trochę kodu JQuery i CSS. Zacznij od dodania modułu kodu do nowego wiersza u dołu sekcji.

Dodaj moduł kodu do sekcji i wstaw kod przełączający JQuery

Skopiuj następujące wiersze z kodu JQuery i wklej je w polu kodu:

jQuery(function($){
$("#fullwidth-open").click(function() {
 $('.smooth-transform').toggleClass('smooth-transform-active');
});
});

Dodaj niestandardowy kod CSS do ustawień strony

Na koniec, otwórz następujące ustawienia strony i dodaj następujące wiersze kodu CSS:

.smooth-transform-active {height: 100vh; szerokość: 80%; } .smooth-transform {-webkit-przejście: wszystkie 0.5 są łatwe; -moz-przejście: wszystkie 0.5 są łatwe; -o-przejście: wszystkie 0.5 są łatwe; -ms-przejście: wszystkie 0.5 są łatwe; przejście: łatwość wszystkich 0.5; }

końcowe przemyślenia

W tym samouczku pokazaliśmy, jak stworzyć piękny moduł prezentacji, który rozwija się po kliknięciu / najechaniu kursorem (w zależności od twoich preferencji). To świetny sposób na dodanie dodatkowej interaktywności do menu, przy jednoczesnym zachowaniu responsywności dla wszystkich rozmiarów ekranu. Jeśli masz jakieś pytania lub sugestie, zostaw komentarz w zastrzeżonej sekcji poniżej.