W tym samouczku pokażemy, jak utworzyć przycisk menu rozwijanego za pomocą modułu menu o pełnej szerokości Divi. Aby to zrobić, najpierw utworzymy menu w WordPress. Następnie użyjemy modułu menu o pełnej szerokości Divi, aby wyświetlić to menu z niestandardowymi stylami za pomocą konstruktora Divi i trochę niestandardowego CSS. Rezultatem jest praktyczny i stylowy przycisk menu rozwijanego.
Zacznijmy.
badanie
Oto przegląd przycisku menu rozwijanego, który zintegrujemy z tym samouczkiem.
To, czego potrzebujesz, aby zacząć
Aby rozpocząć, jeśli jeszcze tego nie zrobiłeś, zainstaluj i aktywuj Motyw Divi zainstalowany (lub wtyczka Divi Builder, jeśli nie używasz Motyw Divi). Na początku użyjemy konstruktora Divi, aby zaprojektować przycisk menu rozwijanego.
Otóż to !
Utwórz menu w WordPress
Zanim zaczniemy tworzyć rozwijane menu za pomocą Divi Builder, musimy najpierw utworzyć menu WordPress, którego chcielibyśmy użyć dla modułu menu o pełnej szerokości. Aby to zrobić, przejdź do pulpitu WordPress i przejdź do Wygląd> Menu. Następnie utwórz nowe menu, klikając łącze, utwórz nowe menu, wprowadź nazwę menu i kliknij przycisk „Utwórz menu”.
Na razie możesz tworzyć niestandardowe linki ze znakiem „#” jako symbolem zastępczym dla adresu URL wraz z tekstem łącza.
Zorganizuj elementy menu tak, aby pozycja menu najwyższego poziomu miała łącze „Dowiedz się więcej” z trzema pozycjami podmenu.
Następnie pamiętaj, aby zapisać menu.
Jak utworzyć przycisk menu rozwijanego za pomocą modułu menu pełnej szerokości Divi
Po utworzeniu menu możemy rozpocząć projektowanie przycisku rozwijanego menu za pomocą Divi. Aby rozpocząć projekt, utwórz nową stronę w WordPress i użyj Divi Builder do edycji strony w interfejsie użytkownika (kreator wizualny).
Następnie będziesz mieć puste płótno, aby rozpocząć projektowanie w Divi.
Twórz fałszywe treści
Najpierw dodaj wiersz jednej kolumny do domyślnej sekcji standardowej.
Dodaj moduł tekstowy
Następnie dodaj moduł tekstowy do wiersza o następującej treści:
Divi Menu Twoja zawartość jest tutaj. Edytuj lub usuń ten tekst w tekście lub w ustawieniach zawartości modułu. Możesz również stylizować każdy aspekt tej zawartości w ustawieniach projektu modułu, a nawet zastosować niestandardowy CSS do tego tekstu w module Ustawienia zaawansowane.
Następnie zaktualizuj parametry projektu w następujący sposób:
Sekcja wypełnienia
Następnie zaktualizuj ustawienia sekcji o następujące elementy:
- Padding: 0px w dół
Odstępy między liniami i obramowanie
Po zaktualizowaniu wypełnienia sekcji otwórz ustawienia linii i przypisz do niego wypełnienie i delikatną ramkę.
- Tapicerka: 10vw u góry, 10vw u dołu, 5vw po lewej stronie, 5vw po prawej stronie
- Szerokość obramowania: 1px
Tworzenie przycisku menu rozwijanego
Aby utworzyć przycisk menu rozwijanego, będziemy używać modułu menu o pełnej szerokości. Umożliwi nam to dodanie wcześniej utworzonego menu.
Dodanie menu pełnej szerokości
Aby utworzyć moduł menu o pełnej szerokości, dodaj nową sekcję o pełnej szerokości pod bieżącą sekcją standardową.
Następnie dodaj do menu moduł menu o pełnej szerokości.
W wyskakującym oknie ustawień menu o pełnej szerokości (poniżej Treść) użyj menu rozwijanego, aby wybrać menu, które chcesz wyświetlić. Powinno to być to samo menu, które utworzyliśmy wcześniej, o nazwie „rozwijane menu przycisków”.
Następnie usuń domyślny biały kolor tła dla menu.
Po dodaniu menu z modułem menu o pełnej szerokości zapisz ustawienia. Wrócimy za chwilę do tego modułu, aby dokończyć projekt. Ale na razie dodamy tło do sekcji o pełnej szerokości.
Zaktualizuj projekt sekcji o pełnej szerokości
Otwórz ustawienia sekcji pełnej szerokości i zaktualizuj następujące elementy:
- Gradient po lewej stronie: # 0047d6
- Gradient prawego tła Kolor: # 45b2ff
- Maksymalna szerokość: 240px
- Wyrównanie sekcji: środek
Ustawiłem maksymalną szerokość sekcji na 240px, ponieważ odpowiada to szerokości domyślnej szerokości menu rozwijanego w Divi. Jest to również dobry rozmiar dla przycisku na komputerze i telefonie komórkowym.
- Zaokrąglone rogi: 5px
Na karcie Zaawansowane dodaj następującą klasę CSS, przepełnienie i indeks Z.
- Klasa CSS: przycisk rozwijany
- Przelew poziomy: widoczny
- Przelew pionowy: widoczny
- Indeks Z: 14
Klasa CSS jest potrzebna, abyśmy mogli później skierować nasz zewnętrzny CSS do tej sekcji. Przepełnienie należy ustawić jako widoczne, abyśmy mogli zobaczyć rozwijane menu. Indeks Z pomoże Ci utrzymać listę rozwijaną nad wszystkimi innymi treściami na stronie.
Zaprojektuj menu Fulwidth
Jesteśmy teraz gotowi do zaprojektowania modułu menu Fulwidth. Otwórz ustawienia modułu menu o pełnej szerokości i zaktualizuj następujące elementy:
- Utwórz łącza menu o pełnej szerokości: TAK
- Kolor tekstu rozwijanego: #ffffff
- Kolor tekstu menu mobilnego: #ffffff
- Wyrównanie tekstu: środek
- Kolor tła menu rozwijanego: # 45b2ff
- Kolor rozwijanego menu: #ffffff
- Kolor tła menu: #45b2ff
- Menu czcionek: Koduj bez częściowo skondensowanego
- Waga menu czcionki: częściowo pogrubiona
- Kolor tekstu menu: #ffffff
- Rozmiar tekstu menu: 16px
- Odstępy w menu: 2px
- Animacja menu rozwijanego: Rozwiń
Ustaw przycisk rozwijany
Aby przycisk zachodził na dolną ramkę, musimy dodać ujemny górny margines, który jest dokładnie w połowie wysokości przycisku.
- Margines: -40.5px wysoki
Jak widać, miejsce najechania nie zajmuje jeszcze całego obszaru przycisków, a menu rozwijane nadal znajduje się po prawej stronie. Aby rozwiązać ten problem, możemy dodać niestandardowy CSS.
Dodanie niestandardowego CSS
Przed dodaniem niestandardowego CSS należy dodać „rozwijany” identyfikator CSS do sekcji pełnej szerokości (nie do modułu).
Bez identyfikatora CSS poniższy CSS nie będzie działać.
Aby dodać niestandardowy CSS, otwórz ustawienia strony i wklej następujący kod w niestandardowym polu wprowadzania CSS.
.dropdown-button .et_pb_fullwidth_menu .fullwidth-menu-nav> ul {padding-top: 0px! } .dropdown-button .fullwidth-menu li> a {padding-bottom: 0px; wysokość linii: 81px; }. przycisk-dropdown .fullwidth-menu li li a {padding: 6px 0px; wysokość linii: 1.6em; } .dropdown-button .et_mobile_menu li a: hover, .nav ul li a: hover, .dropdown-button .fullwidth-menu a: hover {krycie: 1; } .dropdown-button .et_pb_fullwidth_menu_fullwidth .et_pb_row {dopełnienie: 0 0! ważne; }. przycisk-dropdown .fullwidth-menu li {display: block; }. przycisk-dropdown .fullwidth-menu .menu-item-has-children> a: first-child: after {right: 20px; }
Oto wynik końcowy
końcowe przemyślenia
Tworzenie przycisku menu rozwijanego za pomocą modułu menu o pełnej szerokości Divi obejmuje kilka kluczowych kroków. Najpierw tworzymy menu w WordPress, które chcemy zintegrować z modułem. Następnie używamy kreatora Divi do i stylizujemy moduł menu o pełnej szerokości według naszych upodobań. Następnie dodajemy niestandardowy CSS, aby dopracować projekt zarówno na komputerze, jak i na telefonie komórkowym. Rezultatem jest piękne (i przydatne) menu rozwijane rozwijane po najechaniu kursorem na komputer i kliknięciu na urządzeniu mobilnym. Mam nadzieję, że uznasz to za przydatne uzupełnienie zestawu narzędzi projektowych.
