Mega menu to popularny element projektu, który może nadać Twojemu Witryna internetowa wybuch elegancji podczas oferowania odwiedzający dodatkowa warstwa nawigacyjna. Istnieje kilka sposobów dodawania mega-menu do Divi. Jedną z najłatwiejszych metod, których użyłem, jestwtyczka innej firmy o nazwie Divi Mega Pro .

Divi Mega Pro ułatwia tworzenie mega menu za pomocą Divi Builder. Każde menu można dodać do dowolnego elementu za pomocą klasy CSS. Oznacza to, że możesz dodać układ Divi do dowolnego łącza w menu, ale możesz pójść jeszcze dalej i dodać je do dowolnego elementu układu Divi, po prostu dodając klasę CSS.

Jest idealny do tworzenia menu i wyskakujących okienek z modułami sklepu, obrazami, suwakami, portfolio, ikonami, notkami, filmami, blogami itp. Działa również z Extra.

Utwórz Mega Pro Mega Menu

utwórz mega menu divi za pomocą divi mega.png

Menu Divi Mega Pro zostało dodane do menu deski rozdzielczej. Tutaj możesz wprowadzić swój klucz licencyjny, zobaczyć utworzone menu i utworzyć nowe menu. Po kliknięciu, aby dodać nowe menu, zobaczysz edytor dla typu postu menu. Ekran jest prosty, ale dużo się tu dzieje.

projekt menu Mega Pro.png

wydawca - możesz utworzyć mega-menu lub podpowiedź za pomocą Divi Builder.

zmień tło mega menu.png

Tło Mega Pro - możesz wybrać kolor tła i czcionki.

wybierz lokalizację menu.png

Wyświetl lokalizacje - wybierz wszystkie strony lub nazwij określone strony, a następnie wprowadź wyjątki.

wybierz animację menu.png

Animacja Mega Pro - wybierz animację. Wybierz spośród przesunięcia, przesunięcia, perspektywy, zanikania lub skali.

wybierz spust css.png

Wyzwalacze Mega Pro - dodaj wyzwalacz jako selektor CSS. Po zapisaniu zobaczysz klasę CSS, którą zamierzasz wkleić do pola klasy CSS elementu menu, modułu, wiersza lub sekcji. To jest to, co jest klikane lub najechane kursorem, aby wyświetlić menu. Wszystko może służyć jako wyzwalacz, a nie tylko jako element menu. Oznacza to, że możesz również używać Divi Mega Pro do tworzenia wyskakujących okienek lub podpowiedzi.

styl menu konfiguracji divi.png

Ustawienia wyświetlania Mega Pro : wybierz kierunek wyświetlania (górny lub dolny), wprowadź górny i dolny margines w pikselach, wybierz procent szerokości i aktywuj strzałkę. Aktywacja strzałki ujawnia więcej dostosowań, w których możesz wybrać typ strzałki (trójkąt lub okrągła), wybrać kolor, ustawić szerokość i wysokość oraz wyświetlić podgląd strzałki.

personalizacja przycisków divi.png

dostosowania przycisk zamykania: aktywuj przycisk zamykania na pulpicie lub telefonie komórkowym i dostosuj przycisk zamykania. Jeśli to włączysz, podgląd dostosuje kolor tekstu, kolor tła, rozmiar czcionki, promień obramowania, wypełnienie i wyświetlanie.

dodatkowa konfiguracja divi mega pro.png

Dodatkowe parametry Mega Pro - wybierz typ wyzwalacza (najechanie kursorem lub kliknięcie), typ wyjścia (najechanie kursorem lub kliknięcie) i wprowadź czas na wyjście.

Modele Divi Mega Pro

dostępne różne szablony divi mega pro.png

Deweloper udostępnił kilka modeli dla Divi Mega Pro. Po zakupie wtyczki szablony te są dostępne na Twoim koncie w zakładce Szablony układów wtyczek. Są one świetne, aby pomóc Ci zacząć projektować swoje mega menu. Posłużę się kilkoma w moich przykładach.

Divi Mega Pro Menu

divi mega pro.png menu

Po utworzeniu mega menu pojawi się ono na liście. Tutaj możesz edytować, szybko edytować lub usuwać menu. Możesz także wyszukiwać, filtrować według daty, wyświetlać według statusu itp. Zapewnia również unikalną klasę Mega Pro, dzięki czemu możesz je skopiować z tego miejsca zamiast otwierać każdą z nich, aby uzyskać klasę.

Podczas kopiowania klasy wklej ją bez dodatkowych spacji. W przeciwnym razie wszystkie mega-menu na stronie przestaną działać.

Jestem pewien, że nie byłoby łatwo to dodać, ale funkcja kopiowania i edycji byłaby przydatna. Możesz zapisać układy Divi w swojej bibliotece do ponownego wykorzystania, ale nie obejmuje to otaczających ustawień.

Dodawanie wyzwalacza

wybierz selektor divi.png

W polu Mega Pro Triggers zobaczysz pojedynczą klasę Mega Pro. Skopiuj go i wklej w polu CSS Class elementu, którego chcesz użyć jako wyzwalacza.

klasy css.jpg

Aby dodać pole klasy CSS do pozycji menu, musisz włączyć klasy CSS. Na ekranie menu wybierz Opcje ekranu i włącz klasy CSS.

dodaj klasę css menu divi.png

Wklej klasę CSS do pola menu. Teraz ta pozycja menu wyświetli mega menu po najechaniu kursorem i przeniesie Cię do strony po kliknięciu.

divi mega menu design pro.png

Zauważysz, że Divi Mega Pro jest również opcją w opcjach łącza menu. Świetnie nadają się do dodawania pozycji menu do menu, które tak naprawdę nigdzie się nie wybiera. Dodaj klasę CSS jak każdą inną pozycję menu.

Sekcja kontaktowa w mega menu

sekcja kontaktu mega menu pro.png

Menu otwiera się po najechaniu kursorem. Jeśli chcę, zawsze mogę kliknąć łącze Kontakt, aby otworzyć stronę kontaktową. Gdybym tylko chciał, aby mega menu się wyświetlało, mógłbym po prostu użyć linku menu głównego Kontakt i zmienić jego nazwę (jak w powyższym przykładzie).

W tym przypadku nieznacznie zmieniłem kolory, używając ustawień tła i wyświetlania, zamiast używać Divi Builder. Dodaje pasek u dołu menu.

Proste wezwanie do działania z kolumnami menu

design kontakt sekcja divi mega pro.png

To jeden z modeli, które dodają wiele kolumn. Dostosowuję kolory tła i czcionki. Dodałem również strzałkę i zrobiłem szerokość 75%.

zmień kolor tła divi mega pro.png

Kolor tła i opcje czcionek dodają nieco więcej, aby się wyróżnić. Zostawiłem domyślne wyrównanie, które umieszcza menu po prawej stronie ekranu. Możesz dostosować położenie w ustawieniach.

tabs

wygląd menu z zakładkami mega menu divi.png

Szablon karty zawiera moduł kodu z jQuery do tworzenia efektu najechania.

menu demonstracyjne z zakładką divi mega pro.png

Dodałem treści do zakładek i dostosowałem je do serwisu. Każdy z linków po lewej stronie pokazuje inną kartę w większości menu.

Informacje konfiguracje Bubbles

demo infobulles divi.png

W tym przypadku dodałem klasę CSS do jakiegoś blurb, aby po najechaniu kursorem otwierał małe okienko wyskakujące. Wyskakujące okienko to tylko obraz z cieniem poniżej.

Na powyższym obrazku moja mysz najeżdża na napis LIVE WEBSITE. Nie dostosowałem jeszcze położenia, ale łatwo jest sprawić, by pojawiało się w dowolnym miejscu.

projekt info bull divi mega pro.png

W tym przypadku utworzyłem wyskakujące okienko, aby pokazać obraz z tekstem. Ustawiłem kierunek wyświetlania na Niski i aby pojawił się obok obrazu, do którego chcę dodać, dodałem margines -300.

wynik info bubble divi.png

Wyskakujące okienko pojawia się teraz po lewej stronie i u góry obrazu, gdy na nie najeżdżam. Dodałem przezroczysty kolor tła, kolor obramowania, wypełnienie i zaokrąglony kontur.

Licencja i dokumentacja

license and demonstration.png

Masz wybór między czterema licencjami:

  • Pojedyncza witryna - 15 USD rocznie
  • Trzy witryny - 29 USD rocznie
  • Nieograniczona liczba witryn - 59 USD rocznie
  • Nieograniczona żywotność - jednorazowo 129 $

Dokumentacja jest zapewniony przez prezentację wideo, a artykuł na stronie wyjaśnia funkcje i krok po kroku wyjaśnia, jak korzystać z wtyczki.

[vc_row center_row=”yes”][vc_column width=”1/2″][vcex_button target=”blank” layout=”expanded” align=”center” font_family=”Raleway” font_weight=”700″ style=”flat” custom_background=”#18b69d” custom_hover_background=”#118d7a” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ MOTYW DIVI [/vcex_button][/vc_column][vc_column width=” 1 /2″][vcex_button url=”https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials” target=”blank” layout=”expanded” align=”centrum” font_family = „Raleway” font_weight=”700″ style=”flat” custom_background=”#c4226e” custom_hover_background=”#8d184f” custom_color=”#ffffff” custom_hover_color=”#ffffff” icon_right=”fa fa-download”]POBIERZ SZABLONY DIVI[/vcex_button][/vc_column][/vc_row]

Inne samouczki Divi