Stylizacja Modułu Menu Mobilnego Divi
Dzięki temu samouczkowi będziesz mógł stylizować i dostosowywać moduł menu mobilnego Divi Theme Builder, wraz z obrazem, menu hamburgera, menu rozwijanym, pozycjami menu i pozycjami podmenu. Dowiesz się, jak zmieniać takie rzeczy, jak kolory, obramowanie, odstępy, efekty najechania i nie tylko !
Zrozumienie Struktury Menu Divi Mobile
Po pierwsze, musimy zrozumieć, w jaki sposób tworzone jest menu mobilne Divi, abyśmy mogli osobno modyfikować jego poszczególne elementy, aby stworzyć własny styl. Jest wiele części, ale tutaj omówimy tylko te najbardziej istotne i pomocne. Należą do nich:
- Nagłówek
- Obraz logo
- Ikona Hamburgera
- Menu rozwijane
- Pozycje menu i linki
- Elementy podmenu i linki
Po przygotowaniu naszego selektora CSS możesz rozpocząć dodawanie niestandardowego kodu w miejscu, w którym jest napisane „TWÓJ CSS TUTAJ”. (pamiętaj, aby usunąć ten tekst)
Domyślny Nagłówek Menu Mobilnego
Zacznijmy od nagłówka menu. To ta część, w której znajduje się logo i menu hamburgerowe. W Divi są ograniczone ustawienia, więc ten CSS będzie potrzebny za każdym razem, gdy chcesz zmienić kolor lub dostosować odstępy.
Edytuj domyślny nagłówek menu
/*edit the default Divi mobile menu header*/
#main-header {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Poniżej znajduje się lista pomysłów na rzeczy, które możesz chcieć zrobić, aby nadać styl całemu podmenu . Możesz to zrobić, umieszczając fragmenty w selektorze pokazanym powyżej.
Usuń lub dostosuj odstępy
padding: 0!important;
Zmień kolor tła
background: #000000!important;
Obraz Logo Divi Mobile Menu
Możesz również zrobić kilka rzeczy z obrazem logo.
Edytuj obraz logo domyślnego menu mobilnego Divi
/*edit the Divi default mobile menu logo image*/
#logo {
YOUR CSS HERE
}
Edytuj obraz logo modułu menu Divi Mobile
/*edit the Divi mobile menu logo image*/
.et_pb_menu__logo img {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Oto kilka pomysłów, które możesz zrobić, aby nadać styl obrazowi mobilnego logo Divi. Dostosuj odstępy
padding: 30px;
Dostosuj szerokość
width: 80%;
Ustaw maksymalną szerokość
max-width: 200px;
Dodaj cień pudełka
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
Divi Mobile Menu Hamburger Ikona
Jeśli chcesz zmienić niektóre ustawienia za pomocą ikony hamburgera w menu mobilnym, możesz to zrobić za pomocą CSS. Pamiętaj, że moduł Menu ma kilka ustawień, takich jak rozmiar i kolor, ale domyślne menu nie ma do tego żadnych ustawień.
Edytuj ikonę Hamburgera Divi Mobile Menu
/*edit the Divi mobile hamburger icon*/
.mobile_menu_bar:before {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Poniżej znajduje się lista pomysłów na rzeczy, które możesz chcieć zrobić, aby wystylizować ikonę hamburgera w menu Divi . Możesz to zrobić, umieszczając fragmenty w selektorze pokazanym powyżej.
Ustaw kolor
color: #000000;
Dodaj kolor tła
background: #ff0000;
Ustaw rozmiar
font-size: 48px;
Zmień ikonę
content: „\63”;
Dodaj obramowanie
border: 2px solid #ff0000;
Zaokrąglij granicę
border-radius: 100px;
Zmień Ikonę Na X Po Otwarciu
Rozwijane Menu Mobilne Divi
Edytuj menu rozwijane Divi Mobile
/*edit the Divi mobile menu dropdown*/
.et_mobile_menu {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Poniżej znajduje się lista pomysłów dotyczących niektórych rzeczy, które możesz chcieć zrobić w menu rozwijanym Divi Mobile . Możesz to zrobić, umieszczając fragmenty we właściwym selektorze pokazanym powyżej.
Usuń górną granicę
border-top: 0px;
Dostosuj odstępy
padding: 0px!important;
Dodaj lub dostosuj cień
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
Uczyń to szerszym
width: 112%;
margin-left: -6%;
Teraz dochodzimy do linków do pozycji menu. Możesz tutaj dokonać wielu zmian, takich jak kolor, odstępy, tło, krycie, a nawet pozbyć się maleńkiej dolnej granicy.
Edytuj linki nadrzędne menu mobilnego
/*Divi mobile menu parent links*/
.et_mobile_menu li a {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Poniżej znajduje się lista pomysłów na niektóre rzeczy, które możesz chcieć zrobić, aby nadać styl linkom nadrzędnym menu mobilnego Divi . Możesz to zrobić domyślnie lub po najechaniu kursorem, umieszczając fragmenty we właściwym selektorze pokazanym powyżej.
Dostosuj odstępy
padding: 10px 20px;
Zmień krycie (szczególnie po najechaniu kursorem)
opacity: 1;
Zmień kolor tła (szczególnie po najechaniu kursorem)
background: #ffffff;
Zmień rozmiar czcionki
font-size: 20px!important;
Zmień kolor linku
color: #2cba6c;
Dodaj odstępy między literami
letter-spacing: 2px;
Dostosuj granicę
border-bottom: 2px solid #000000!important;
Divi Mobile Menu Podmenu Linki Podrzędne
Podobnie jak w poprzedniej sekcji, możesz również dostosować pozycje podmenu. Są one domyślnie wyświetlane z małym wcięciem po lewej stronie. Sugestie dotyczące stylów tutaj powinny być prawdopodobnie podobne do poprzedniej sekcji dotyczącej linków nadrzędnych.
Edytuj linki podrzędne menu mobilnego
/*Divi mobile menu submenu links*/
.et_mobile_menu .menu-item-has-children li a {
YOUR CSS HERE
}
Pomysły Na Niestandardowy Styl
Poniżej znajduje się lista pomysłów na niektóre rzeczy, które możesz chcieć zrobić, aby nadać styl linkom podmenu Divi Mobile . Możesz to zrobić domyślnie lub po najechaniu kursorem, umieszczając fragmenty we właściwym selektorze pokazanym powyżej.
Dostosuj odstępy
padding: 10px 20px;
Zmień krycie (szczególnie po najechaniu kursorem)
opacity: 1;
Zmień kolor tła (szczególnie po najechaniu kursorem)
background: #ffffff;
Zmień rozmiar czcionki
font-size: 20px!important;
Zmień kolor linku
color: #2cba6c;
Dodaj odstępy między literami
letter-spacing: 2px;
Dostosuj granicę
border-bottom: 2px solid #000000!important;
Autor
Nelson Lee Miller (alias The Divi Teacher)