Jak utworzyć menu Blurb po najechaniu/kliknięciu na swoją stronę za pomocą Divi

Co tydzień dostarczamy nowe i bezpłatne pakiety układów Divi, których możesz użyć w swoim następnym projekcie. W przypadku jednego z pakietów układu udostępniamy również przypadek użycia, który pomoże Ci przenieść Twoją witrynę na wyższy poziom.

W tym tygodniu, w ramach naszej trwającej inicjatywy projektowania Divi, pokażemy, jak stworzyć oszałamiające menu z notatkami, które rozwija się po najechaniu na nie lub kliknięciu. Zaczniemy od kilku ogólnych kroków. Kontynuujemy dodawanie elementów menu za pomocą modułów Blurb, a na koniec umożliwimy wybór między efektem najechania kursorem a kliknięciem.

Weźmy się za to!

Zapowiedź

Zanim zagłębimy się w samouczek, rzućmy okiem na wyniki na różnych rozmiarach ekranu.

Tryb zawisu

Pulpit

mobilny

Kliknij Modus

Pulpit

mobilny

1. Utwórz pustą stronę i prześlij stronę docelową zwiedzania

Dodaj nową pustą stronę i włącz Divi Builder

Pierwszą rzeczą, którą musisz zrobić, to utworzyć nową pustą stronę. Nadaj swojej stronie tytuł i przełącz się na Divi Builder.

Prześlij stronę docelową zwiedzania

Po włączeniu Divi Builder prześlij układ strony docelowej pakietu Sightseeing Layout Pack.

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

Po ukryciu głównego paska menu możemy zacząć dodawać menu z notatkami. Aby to zrobić, dodamy nową zwykłą sekcję na dole 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ź do zakładki projektu i usuń wszystkie domyślne górne i dolne wyściółki sekcji.

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

Domyślny cień pudełka

Dodaj cień pudełka do następnej sekcji.

• Siła rozmycia cieni w pudełku: 18px
• Kolor cienia: #383838

Wskaż cień pola

I zmień siłę rozmycia cienia pola po najechaniu myszą.

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

Ukryj przepełnienia sekcji i zwiększ indeks Z

Użyjemy ustawień rozmiaru sekcji, aby ta technika działała, ale aby upewnić się, że nic nie przekracza kontenera sekcji, musimy ukryć przepełnienia. Zwiększamy również indeks Z, aby upewnić się, że sekcja pozostaje na górze reszty strony.

• Przepełnienie poziome: ukryte
• Przepełnienie pionowe: ukryte
• Indeks Z: 9999

3. Upewnij się, że cała zawartość menu sekcji jest tworzona przy użyciu Vw i pasuje do 100 wysokości rzutni na wszystkich rozmiarach ekranu

Dodaj wiersz nr 1

Struktura kolumny

Po zakończeniu podstawowych ustawień sekcji nadszedł czas, aby dodać całą zawartość, która ma się pojawiać w menu. Możesz stworzyć dowolny projekt, korzystając z elementów projektu Divi i wbudowanych opcji, ale musisz upewnić się, że wszystko pasuje do wysokości „100vh” na wszystkich rozmiarach ekranu. Aby to osiągnąć, użyjemy jednostki szerokości widocznego obszaru w całym procesie budowania i dostosujemy wartości na różnych rozmiarach ekranu. Zacznij od dodania nowego wiersza do sekcji, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wiersza i upewnij się, że zajmuje on 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 wyściółki.

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

Dodaj moduł tekstowy do kolumny

Dodaj symbol

Kontynuuj, dodając moduł tekstowy do kolumny wiersza. Dodaj symbol „=” do pola treści lub użyj dowolnego innego wybranego przez siebie symbolu.

Kolor tła

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

• Kolor tła: #000000

Ustawienia tekstu

Przejdź do zakładki projektu i zmień również ustawienia tekstu.

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

Rozstaw

Dodajemy również trochę miejsca na górze i na dole modułu, korzystając z następujących niestandardowych wartości dopełnienia:

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

Dodaj wiersz nr 2

Struktura kolumny

Kontynuuj, dodając drugi wiersz, korzystając z następującej struktury kolumn:

Rozmiary

Nie dodając jeszcze żadnych modułów, otwórz ustawienia wierszy i pozwól wierszowi zająć 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 i dodaj niestandardową górną i dolną wyściółkę.

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

Wyświetlacz

Aby mieć pewność, że obie kolumny pozostaną obok siebie na mniejszych ekranach, dodamy jeden wiersz kodu CSS do głównego elementu wiersza.

display: flex;

Dodaj moduł Blurb do kolumny 1

Dodaj zawartość

Czas zacząć dodawać pozycje do menu! Dodaj nowy moduł Blurb do pierwszej kolumny wiersza i wprowadź wybraną przez siebie treść.

Wybierz ikonę

Następnie wybierz ikonę.

Dodaj link

I wprowadź link do strony, który pasuje do pozycji menu.

• URL linku tytułowego: #

Ustawienia ikon

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

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

Ustawienia tekstu tytułu

Zmodyfikuj również ustawienia tekstu tytułu.

• Czcionka tytułu: PT Serif
• Styl czcionki tytułu: podkreślenie
• Kolor podkreślenia tytułu: #ff3314
• Wyrównanie tekstu tytułu: do środka
• Rozmiar tekstu tytułu: 1,8vw (komputer), 2,3vw (tablet), 3,3vw (telefon)

Ustawienia tekstu podstawowego

Następnie zmień ustawienia tekstu podstawowego.

• Czcionka ciała: Lato
• Wyrównanie tekstu podstawowego: do środka
• Kolor tekstu ciała: #c6c6c6
• Rozmiar tekstu ciała: 0,9vw (komputer), 1,7vw (tablet), 2,1vw (telefon)
• Wysokość linii ciała: 1,8 em

Rozmiary

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.

• Animacja ikon: brak animacji

Clone Blurb Module i umieść duplikat w kolumnie 2

Po ukończeniu modułu Blurb możesz go sklonować i umieścić duplikat w drugiej kolumnie rzędu.

Zmień kopię

Upewnij się, że zmieniłeś kopię.

Zmień ikonę

Wraz z ikoną.

Zmień łącze

I link do strony, który pasuje do nowego elementu menu.

Klonuj rząd dwa razy

Po ukończeniu obu modułów Blurb w rzędzie możesz dwukrotnie sklonować cały rząd.

Zmień kopię, ikonę i link dla każdego duplikatu Blurb indywidualnie

Upewnij się, że zmieniłeś kopię, ikonę i link dla każdego elementu menu notki osobno.

4. Spraw, aby sekcja była lepka

Domyślny

Po dodaniu wszystkich elementów, które chcesz pokazać w sekcji, możesz ustawić sekcję w lewym górnym rogu strony, dodając następujące dwa wiersze kodu CSS do głównego elementu sekcji:

position: fixed;
top: 0;

Unosić się (ważne!)

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

position: fixed;

5. Wybierz metodę: A) Menu po najechaniu lub B) Menu po kliknięciu

A) Menu po najechaniu

Domyślna wielkość sekcji

W następnej części samouczka będziesz musiał wybrać preferowaną metodę; menu po najechaniu lub kliknięciu. Menu podręczne będzie zachowywać się jak menu kliknięcia na mniejszych urządzeniach. Jeśli zdecydujesz się wybrać opcję najechania, 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,4 vw (komputer stacjonarny), 12 vw (tablet), 16 vw (telefon)

Rozmiar sekcji po najechaniu kursorem

Zmodyfikuj wartości po najechaniu kursorem, aby utworzyć rozwijane menu.

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

B) Menu po kliknięciu

Dodaj klasę CSS do modułu tekstowego

Jeśli chcesz menu, które otwiera 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: pełna szerokość-otwarta

Dodaj klasę CSS do sekcji

Otwórz następnie ustawienia sekcji i dodaj inną klasę CSS.

• Klasa CSS: płynna transformacja

Rozmiar sekcji

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

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

Dodaj kod do strony

Dodaj nowy wiersz na dole sekcji

Teraz, aby stworzyć efekt przełączania, będziemy potrzebować trochę kodu JQuery i CSS. Zacznij od dodania modułu kodu do nowego wiersza na dole sekcji.

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

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

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

});
</script>

Dodaj niestandardowy kod CSS do ustawień strony

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

.smooth-transform-active {
height: 100vh;
width: 80%;
}

.smooth-transform {
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
}

Zapowiedź

Teraz, gdy przeszliśmy przez wszystkie kroki, przyjrzyjmy się ostatecznemu wynikowi na różnych rozmiarach ekranu.

Tryb zawisu

Pulpit

mobilny

Kliknij Modus

Pulpit

mobilny

Końcowe przemyślenia

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

Jeśli chcesz dowiedzieć się więcej o Divi i zdobyć więcej gratisów Divi, zasubskrybuj nasz biuletyn e-mailowy i kanał YouTube, dzięki czemu zawsze będziesz jedną z pierwszych osób, które poznają i będą czerpać korzyści z tych bezpłatnych treści.