Jak zrobić Mega Menu w Divi?

Interakcja z użytkownikiem jest jednym z ważniejszych aspektów na stronie internetowej. Chodzi o to, aby w jak najkrótszym czasie zainteresować treścią, która „zatrzyma” go na dłużej. Pierwszą rzeczą, na którą zwraca się uwagę są zdjęcia. Oko ludzkie, obrazy jest w stanie „odczyta” natychmiast, natomiast przeczytanie kilka słów zajmuje już nieco więcej czasu. Dlatego zastosowanie zdjęć w Mega Menu to dobre rozwiązanie aby interakcje z internautą rozpocząć od samego początku. Pozwoli to usprawnić nawigację w Twojej witrynie gdy nasze menu jest bardziej rozbudowane. Istnieją do tego różne wtyczki, które dodadzą taką funkcjonalność do Twojego motywu WordPress jednak w Divi ta opcja jest wbudowana.

Tworzenie Mega Menu z Divi

Krok 1 – Stworzenie menu.

Pierwsza sprawa to stworzenie standardowego menu. Dla przykładu stworzę menu pod nazwą: „Mega Menu”, które będzie zawierać 4 podmenu z 3 stronami. Dla jasności poniżej podział przedstawiony za pomocą listy wypunktowanej: Mega Menu

• O nas
  • Nasz zespół
  • Nasza misja
  • Historia Firmy
• Usługi
  • Tworzenie stron internetowych
  • Tworzenie blogów
  • Marketing internetowy
• Nasze prace
  • Strony internetowe
  • Blogi
  • Kampanie reklamowe
• Kontakt
  • Wsparcie
  • Szkolenia
  • Współpraca

Jak to wykonać?

W panelu administratora WordPress, przejdź do Wygląd → Menu. Kliknij „utwórz nowe menu” i nadaj mu nazwę (dla przykładu u siebie dam „Mega Menu”). Następnie dodajesz linki do menu. W tym celu dla mojego przypadku wykorzystam  „Własne odnośniki”. Jeśli chcesz możesz użyć istniejących stron, wpisów lub kategorii. Aby dodać niestandardowy odnośnik klikam na „Własne odnośniki” i dodaje swój adres URL i tekst odnośnika. Powtarzam ten proces dla wszystkich linków. Uwaga: W tym przykładzie dodaję hashtag (#) w polu tekst odnośnika URL, który służy mi jako pusty link czyli nigdzie on nie będzie kierował. Na końcu tworzysz jeszcze jeden odnośnik, który będzie pełnił funkcje wyświetlania mega menu. U siebie nazwałem go „Mega menu”. Przekształcenie menu w mega menu jest dość proste. Wszystko, co musisz zrobić, to dodać klasę CSS do głównego elementu Mega Menu, który właśnie utworzyłeś. Aby to zrobić, kliknij strzałkę po prawej stronie pozycji Mega Menu, aby wyświetlić dodatkowe opcje konfiguracji. Następnie znajdź pole tekstowe oznaczone „Klasy CSS (opcjonalne)” i wpisz „mega-menu„. Jeśli nie widzisz pola tekstowego  „Klasy CSS (opcjonalne)”, musisz kliknąć kartę „Opcje ekranu” w prawym górnym rogu kokpitu WordPress. W „Pokaż zaawansowane właściwości menu” zaznacz opcję „Klasy CSS”. Po dodaniu wszystkich odnośników przewiń w dół do „Ustawienia menu” Teraz uporządkuj / przeciągnij cztery pozycje menu, aby każda była z trzema elementami podrzędnymi. Teraz twoje menu powinno wyglądać tak:   Kliknij w przycisk „Zapisz Menu”. Teraz na stronie menu powinno wyglądać jak poniżej:

Dodawanie zdjęć do Mega Menu

Teraz jak już masz gotowe menu możesz dodać zdjęcia. W pierwszej kolejności należy przygotować w moim przypadku 4 zdjęcia. Zdjęcia dobrze jakby nawiązywały do pozycji podmenu (O nas, Usługi, Nasze prace, Kontakt). Możesz pobrać je z pexels.com, pixabay.com lub innych banków zdjęć. Za pomocą edytora zdjęć warto przygotować zdjęcia tak aby miały jednakowy rozmiar. Sugerowany rozmiar to 500 pikseli – szerokość, 300 pikseli -wysokość. Możesz skorzystać z programu, o którym mówię TUTAJ. Następnie przygotowane zdjęcia dodaj do Biblioteki mediów WordPress. Teraz wróć do strony z konfiguracją menu. W moim przykładzie, w pierwszej kolumnie menu jest odnośnik ” O nas”. Kliknij w strzałkę po prawej stronie pozycji „O nas”. W polu ” Etykieta nawigacji”, dodaj wybrany obraz wykorzystując poniższy kod HTML przed tekstem „O nas”.

<img src="URL OBRAZU" alt="TEKST ALTERNATYWNY" width="100%">
  Aby wstawić adres URL obrazu, przejdź do Media → Biblioteka. Kliknij obraz, który chcesz dodać. W otwartym oknie "Szczegóły załączonego pliku", znajdź adres URL w sekcji po prawej, zaznacz go, a następnie użyj kombinacji klawiszy Ctrl + C, aby skopiować go do schowka.  Teraz wróć do konfiguracji pozycji menu "O nas" na stronie menu i zastąp tekst "URL OBRAZU", wklejając adres URL obrazu za pomocą ctrl + v. Zanim opuścisz opcje konfiguracji dla elementu menu "O nas", odszukaj pole tekstowe "Klasy CSS (opcjonalne)" i wpisz klasę "mega-link". Pozwoli nam to później dodać niestandardowy wygląd.  Powtórz ten proces, aby dodać kolejne trzy obrazy do każdego z elementów podmenu wraz z klasą "mega-link". (W tym przykładzie pozostałe trzy elementy to "Usługi", "Nasza praca" i "Kontakt"). Przejdź do swojej witryny i najedź kursorem na link "Mega Menu ". Teraz Twoje mega menu powinno wyglądać tak: 

Ostatnie poprawki

W tym ostatnim kroku dodaj niestandardowe CSS do menu, aby zwiększyć i wyśrodkować czcionkę tekstową. Dodaj również obramowanie wokół obrazu, dzięki czemu będzie bardziej czytelny. W panelu administracyjnym WordPress, przejdź do Divi → Opcje motywu . Przewiń w dół do „Niestandardowe CSS” i wprowadź następujący kod CSS:

.mega-link > a { text-align: center; font-size: 20px !important; text-transform: uppercase; font-weight: 400 !important; letter-spacing: 3px; } .mega-link > a img { margin-bottom: 8px; -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; }

Zapisz zmiany.

Efekt końcowy

Teraz już potrafisz wykonać mega menu przy pomocy Divi z obrazami bez konieczności korzystania z wtyczki. Skorzystaj z tego dodatku do bieżącej strony lub następnego projektu, aby poprawić nawigację. Tego rodzaju menu działa szczególnie dobrze w przypadku witryn e-commerce, które zawierają dużo treści i wymagają obrazów produktów. Mam nadzieję, że powyższa instrukcja będzie dla Ciebie pomocna 🙂 Ustawienia koloru i czcionek znajdziesz w Panelu WordPress przechodząc do Divi -> Stylista tematów -> Nagłówek i nawigacja -> Główny pasek menu -> szukaj opcji z opisem „… Menu Rozwijanego”.