Divi Mega Menu – stylizacja i konfiguracja
Jak stworzyć i wystylizować Mega Menu w Divi?
Mega Menu w Divi pozwala rozbudować standardowe menu WordPressa o większą liczbę pozycji, kolumn, kategorii oraz dodatkowe elementy graficzne. Jest szczególnie przydatne na stronach firmowych z rozbudowaną ofertą, sklepach internetowych oraz serwisach posiadających wiele podstron.
W starszych wersjach Divi Mega Menu często wymaga wykorzystania własnego CSS. Dzięki temu można dopasować jego wygląd do identyfikacji wizualnej strony bez instalowania dodatkowej wtyczki.
Czym jest Mega Menu?
Standardowe menu rozwija listę podstron w jednej kolumnie. Mega Menu pozwala natomiast wyświetlić większy panel zawierający kilka kolumn.
Przykładowo:
USŁUGI
| Strony internetowe | Sklepy | SEO | Pozostałe |
|---|---|---|---|
| Strony firmowe | WooCommerce | Pozycjonowanie | Hosting |
| One Page | Sklepy B2B | Frazy SEO | Domeny |
| WordPress | Kody rabatowe | Audyt SEO | Poczta |
| Elementor | Integracje | SEO lokalne | SSL |
Takie rozwiązanie ułatwia użytkownikowi znalezienie odpowiedniej usługi bez konieczności przechodzenia przez wiele poziomów menu.
Mega Menu w starszym Divi
W starszych wersjach Divi można wykorzystać wbudowaną strukturę menu WordPressa i odpowiednie klasy CSS.
Najpierw przejdź do:
Wygląd → Menu
i przygotuj menu zawierające główną pozycję oraz jej podmenu.
Następnie głównej pozycji, która ma otwierać Mega Menu, można nadać klasę:
mega-menu
Jeżeli pole Klasy CSS nie jest widoczne, należy włączyć je w:
Opcje ekranu → Klasy CSS
Podstawowa stylizacja Mega Menu
Przykładowy kod dla starszego Divi:
/* Mega Menu */#top-menuli.mega-menu>ul { width: 100%; padding: 25px30px;}#top-menuli.mega-menu>ul>li { width: 25%; float: left;}#top-menuli.mega-menu>ul>li>a { font-weight: 700; font-size: 16px; padding-bottom: 10px;}#top-menuli.mega-menu>ul>liul { padding: 0;}#top-menuli.mega-menu>ul>lili { width: 100%;}#top-menuli.mega-menu>ul>lilia { padding: 6px0;}
Kod tworzy cztery podstawowe kolumny i pozwala nadać nagłówkom poszczególnych kategorii bardziej wyrazisty wygląd.
Zmiana szerokości Mega Menu
Jedną z najważniejszych rzeczy przy stylizacji jest odpowiednia szerokość rozwijanego menu.
Można ustawić na przykład:
#top-menuli.mega-menu>ul { width: 1000px; max-width: 90vw;}
Dzięki max-width: 90vw menu nie powinno wychodzić poza ekran na mniejszych urządzeniach.
W przypadku szerokiego menu można zastosować:
#top-menuli.mega-menu>ul { width: 1100px; max-width: 95vw;}
Warto dobrać szerokość do szerokości głównego kontenera strony.
Kolor tła Mega Menu
Tło można dopasować do kolorystyki witryny:
#top-menuli.mega-menu>ul { background: #ffffff; border-top: 3pxsolid #d1aa67;}
Można również zastosować ciemne Mega Menu:
#top-menuli.mega-menu>ul { background: #1d1d1b; border-top: 3pxsolid #d1aa67;}#top-menuli.mega-menu>ula { color: #ffffff;}
Efekt hover na elementach Mega Menu
Warto wyróżnić pozycję menu po najechaniu kursorem:
#top-menuli.mega-menu>ullia { transition: all0.2sease;}#top-menuli.mega-menu>ullia:hover { color: #d1aa67; padding-left: 5px;}
Efekt jest delikatny i pomaga użytkownikowi rozpoznać aktywną pozycję.
Nagłówki kategorii w Mega Menu
Dobrym rozwiązaniem jest wizualne odróżnienie nazw głównych kategorii od zwykłych linków:
#top-menuli.mega-menu>ul>li>a { font-size: 16px; font-weight: 700; color: #1d1d1b; border-bottom: 1pxsolid #ddd; margin-bottom: 8px;}
Dzięki temu użytkownik łatwiej rozpoznaje strukturę menu.
Mega Menu z ikonami
Mega Menu może również zawierać ikony przy poszczególnych kategoriach.
Przykładowo można wykorzystać Font Awesome:
#top-menuli.mega-menu>ul>li>a:before { content: "\f1d8"; font-family: "Font Awesome 5 Free"; font-weight: 900; margin-right: 8px;}
Ikony warto stosować oszczędnie. Jeżeli każda pozycja menu będzie miała inną ikonę, menu może stać się mniej czytelne.
Mega Menu z obrazkiem
W bardziej rozbudowanym menu można wykorzystać również grafikę.
Przykładowo jedna z kolumn może prezentować zdjęcie:
#top-menuli.mega-menu .menu-image { background-image: url("https://twojadomena.pl/wp-content/uploads/menu.jpg"); background-size: cover; background-position: center; min-height: 180px;}
Takie rozwiązanie może dobrze wyglądać np. w menu:
OFERTA → Strony internetowe / Sklepy / SEO / Hosting
i pozwala połączyć klasyczną nawigację z elementem wizualnym.
Mega Menu z przyciskiem
Jedną z pozycji można również wyróżnić jako przycisk:
#top-menuli.mega-menu>ul .menu-buttona { display: inline-block; padding: 10px18px; background: #d1aa67; color: #fff !important; border-radius: 3px;}
Można w ten sposób wyróżnić np.:
Wycena strony
Kontakt
Zapytaj o ofertę
Mega Menu a urządzenia mobilne
Bardzo ważne jest, aby pamiętać, że Mega Menu zaprojektowane dla komputera nie zawsze dobrze wygląda na telefonie.
Na urządzeniach mobilnych można ograniczyć szerokość i zmienić układ:
@media (max-width: 980px) {#top-menuli.mega-menu>ul { width: auto; max-width: 100%; }#top-menuli.mega-menu>ul>li { width: 100%; float: none; }}
W przypadku starszego Divi warto jednak sprawdzić dokładną strukturę menu, ponieważ sposób działania menu mobilnego może różnić się zależnie od wersji Divi i zastosowanego nagłówka.
Mega Menu a SEO
Mega Menu może również pomóc w uporządkowaniu struktury strony.
Umieszczenie w menu najważniejszych kategorii i usług ułatwia użytkownikom nawigację oraz pozwala wyszukiwarkom odkrywać istotne podstrony.
Nie należy jednak dodawać do Mega Menu kilkudziesięciu lub kilkuset linków tylko z myślą o SEO. Menu powinno przede wszystkim pomagać użytkownikowi.
Dobrym rozwiązaniem jest umieszczenie w nim najważniejszych:
- usług,
- kategorii,
- produktów,
- podstron informacyjnych,
- stron kontaktowych.
Mega Menu bez dodatkowej wtyczki
W starszym Divi można stworzyć wiele efektów Mega Menu przy wykorzystaniu:
- standardowego menu WordPress,
- klas CSS,
- CSS,
- ewentualnie niewielkiej ilości JavaScript.
Dzięki temu nie zawsze konieczne jest instalowanie dodatkowej wtyczki do Mega Menu.
Jest to szczególnie przydatne przy modernizacji starszej strony wykonanej w Divi, gdy chcemy poprawić wygląd menu bez przebudowy całego serwisu.
Najczęstsze problemy z Mega Menu Divi
Jeżeli Mega Menu nie działa prawidłowo, warto sprawdzić:
- czy główna pozycja ma odpowiednią klasę CSS,
- czy CSS nie jest nadpisywany przez Divi,
- czy nie działa cache,
- czy menu nie znajduje się w elemencie z
overflow: hidden, - czy szerokość menu nie jest zbyt duża,
- czy Mega Menu nie wychodzi poza ekran,
- czy menu mobilne działa prawidłowo.
Po wprowadzeniu zmian warto wyczyścić cache Divi oraz pamięć podręczną używanej wtyczki cache.
Podsumowanie
Mega Menu w Divi pozwala stworzyć rozbudowaną, czytelną nawigację dla stron posiadających wiele usług i podstron. W starszych wersjach Divi można je dodatkowo wystylizować za pomocą CSS, zmieniając szerokość, kolumny, kolory, odstępy, efekty hover czy wygląd linków.
Dobrze zaprojektowane Mega Menu powinno przede wszystkim ułatwiać użytkownikowi znalezienie informacji, a dopiero w drugiej kolejności pełnić funkcję elementu wspierającego strukturę SEO.
