Czy chciałbyś mieć Divi Mega Menu ze zdjęciami ilustrującymi treść z menu? Postępuj zgodnie z naszym samouczkiem, jak dodawać obrazy do Mega Menu?
Uwielbiamy interakcję z obrazami online. Mając to na uwadze, warto dodać obraz do swojego Witryna internetowa kiedykolwiek możliwe.
Dodatkowo, dodawanie obrazów w mega menu to kolejna świetna okazja, aby zapewnić użytkownikom interakcję, której potrzebują.
Obrazy wzbogacają również menu, przykuwając ich uwagę, aby jeszcze bardziej uprościć proces nawigacji.
badanie
Zanim przejdziemy do tego samouczka, przyjrzyjmy się wynikowi, który chcemy osiągnąć.
Stworzenie mega menu
Na początek musimy najpierw stworzyć menu.
W tym przykładzie utworzymy główny element menu nadrzędnego o nazwie „Mega Menu” z czterema pozycjami podmenu poniżej. Każda z czterech pozycji podmenu ma trzy pozycje podmenu.
Przejdź do pulpitu WordPress, a następnie kliknij Wyglądy> Menu
Kliknij „Utwórz nowe menu”, nadaj mu nazwę i kliknij „Utwórz menu”.
Pamiętaj, aby włączyć właściwość menu Klasy CSS, klikając kartę Opcje w prawym górnym rogu ekranu menu i sprawdzanie Klasy CSS.
Możesz teraz dodać swoje pozycje menu do nowo utworzonego menu.
Najpierw utwórzmy element menu, który będzie rodzicem wszystkich innych elementów menu. To jest link, który wyświetli Twoje mega menu po najechaniu myszą.
Aby utworzyć tę pozycję menu, utwórz niestandardowy link z następującymi parametrami:
- URL: http://#
- Tytuł nawigacji: Mega Menu
- Klasy CSS: mega-menu
Teraz ułóż/przeciągnij cztery pozycje menu (każda z trzema własnymi pozycjami podrzędnymi), aby stały się podpozycjami głównego nadrzędnego łącza Mega Menu.
Po dodaniu linków do menu przewiń w dół do „Przepisy dotyczące menu' na dole ekranu menu i wybierz 'Menu główne' do wyświetlania lokalizacji. Na koniec kliknij „Zapisz menu”
Oto jak do tej pory wygląda nasze mega menu:
Dodawanie obrazów do mega menu
Teraz, gdy menu jest gotowe, czas dodać obrazy.
Czytaj także: Jak unosić posty na blogu w DIVI?
Pobierz obrazy
Zacznij od uzyskania czterech obrazów. Te obrazy powinny odnosić się do czterech pozycji podmenu (O, dostarczanie usług, nasza praca i kontakt z nami).
Użyj edytora zdjęć, aby zmniejszyć i przyciąć każdy obraz do 500 pikseli szerokości i 300 pikseli wysokości.
Dodaj te obrazy do biblioteki WordPress. Kliknij Multimedia > Dodaj.
Przeciągnij obrazy na stronę, aby je dodać, lub kliknij 'Wybierz pliki"
Wstaw obrazy w Mega Menu
Wróć do strony menu w panelu WordPress.
W tym przykładzie link u góry pierwszej kolumny to " O ".
Kliknij strzałkę po prawej stronie elementu " O ". W polu Etykieta nawigacyjna dodaj żądany obraz za pomocą tagu html img bezpośrednio przed tekstem " O ". Tag obrazu powinien wyglądać tak:
<img src=”Insert Image URL” alt=”Alternate Text” width=”100%” />
Aby znaleźć adres URL obrazu, przejdź do Media > Biblioteka mediów, kliknij obraz, który chcesz dodać.
Na wyskakującym ekranie Szczegóły załącznika, znajdź adres URL w prawej sekcji, a następnie kliknij „Skopiuj adres URL do schowka”
Teraz wróć do konfiguracji pozycji menu " O " na stronie menu i zamień tekst „Wstaw adres URL obrazu” wklejając adres URL obrazu za pomocą ctrl + v.
Przed wyjściem z opcji konfiguracji dla pozycji menu " O ", znajdź pole tekstowe Klasy CSS i wpisz klasę „mega-link”.
To pozwoli nam później dodać niestandardowy styl.
Powtórz ten proces, aby dodać następujące trzy obrazy do każdego z elementów podmenu z klasą „mega-link”. (W tym przykładzie pozostałe trzy elementy to „Dostarczanie usług”, „Nasza praca” et " Skontaktuj się z nami ".)
Wynik
Uzyskaj dostęp do swojego strona internetowa i najedź na link do mega menu. Teraz Twoje mega menu powinno wyglądać tak:
Zwróć uwagę, że gdy najedziesz kursorem na każdy z obrazów, obrazy znikną wraz z pozycją podmenu bezpośrednio poniżej. Dzieje się tak, ponieważ obraz jest częścią tego linku, więc kliknięcie go przeniesie Cię do powiązanego adresu URL.
Ostatnie poprawki
W tym ostatnim kroku dodaj do menu niestandardowy css, aby czcionka tekstu była większa i wyśrodkowana. Daj również promień obramowania wokół obrazu, aby wyglądał czyściej.
W panelu WordPress przejdź do Divi> Opcje motywu .
Przewiń w dół do pola Custom CSS, wprowadź CSS poniżej i kliknij 'Zapisz zmiany' :
.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;
}
Ostateczny wynik
Skończyłeś !
Jeśli wykonałeś wszystkie kroki opisane w tym samouczku, oto wynik, który powinieneś uzyskać.
Pobierz DIVI teraz !!!
Wnioski
Masz mega menu Divi z obrazami bez konieczności używania wtyczki. Ten typ menu sprawdza się szczególnie dobrze w przypadku witryn internetowych. e-commerce którzy mają dużo treść i wymagają zdjęć produktów. Mamy nadzieję, że ten samouczek będzie przydatny w Twoich kolejnych projektach Divi.
Jeśli potrzebujesz więcej elementów do ukończenia projektów tworzenia stron internetowych, przejrzyj również nasz przewodnik na Tworzenie bloga WordPress lub ten na Divi: najlepszy motyw WordPress wszechczasów.
Jeśli masz jakiekolwiek wątpliwości lub sugestie, znajdź nas w sekcja komentarzy przedyskutować to.
Ale tymczasem, udostępnij ten artykuł w różnych sieciach społecznościowych.
...
