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
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.
wydawca - możesz utworzyć mega-menu lub podpowiedź za pomocą Divi Builder.
Tło Mega Pro - możesz wybrać kolor tła i czcionki.
Wyświetl lokalizacje - wybierz wszystkie strony lub nazwij określone strony, a następnie wprowadź wyjątki.
Animacja Mega Pro - wybierz animację. Wybierz spośród przesunięcia, przesunięcia, perspektywy, zanikania lub skali.
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.
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.
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.
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
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
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
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.
Aby dodać pole klasy CSS do pozycji menu, musisz włączyć klasy CSS. Na ekranie menu wybierz Opcje ekranu i włącz klasy CSS.
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.
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
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
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%.
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
Szablon karty zawiera moduł kodu z jQuery do tworzenia efektu najechania.
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
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.
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.
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
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
- strony internetowe 5 dotyczące stosowania restauracja Divi tematu
- Jak dodać tekst do produktu Divi WooCommerce
- Jak zmienić kolor menu między stronami Divi
- Jak spersonalizować siatki bloga za pomocą Divi
- Jak korzystać z roli Divi edytor na WordPressie
- Jak utworzyć pełnoekranowy suwak Divi
- Jak zmienić kolor menu między stronami Divi
- Funkcje, których prawdopodobnie nie wiesz o Divi
- Jak korzystać z Divi Builder na WordPress
- Jak korzystać z modułu przewijania wideo Divi
- Jak korzystać z modułu Divi Builder Flip
- Jak dodać moduł referencji w Divi Builder
- Jak korzystać z modułu tekstowego Divi
- Jak utworzyć suwak na Divi
- Jak edytować rolę użytkownika Divi
- Jak korzystać z modułu Divi Social Media
- Jak korzystać z modułu sklepu na temat WordPress Divi
- Jak korzystać z modułu paska bocznego Divi
- Jak korzystać z modułu tabeli cen Divi
- Jak korzystać z modułu tytułowego publikacji Divi
- Jak dodać moduł wideo Divi
- Jak korzystać z modułu nawigacji artykułów
- Jak korzystać z modułu wyszukiwania Divi
- Jak korzystać z modułu portfela Divi
- Jak korzystać z modułu person w Divi Builder
- Jak korzystać z modułu portfela z filtrem Divi
- Jak korzystać z modułu suwaka o pełnej szerokości
- Jak korzystać z modułu obrazu Divi Builder
- Jak korzystać z modułu nawigacji pełnej szerokości Divi Builder
- Jak korzystać z modułu galerii obrazów
- Jak korzystać z pełnego modułu karty Divi Builder
- Jak korzystać z modułu portfela o pełnej szerokości Divi
- Jak korzystać z modułu nagłówka Divi o pełnej szerokości
- Jak korzystać z modułu licznika Divi
- Jak korzystać z suwaka artykułów w Divi Builder
- Jak korzystać z modułu Divi Email Optin
Witam:
Gdzie mogę zobaczyć, jak tworzone jest wyskakujące okienko?
Nie mam sposobu, żeby to dostać. Udało mi się tylko stworzyć mega menu, ale wyskakujące okienka, które połączyłem, nie otwierają się.
Natknąłem się na kilka e-maili z Divi Life, ale niczego mi nie wyjaśniły.
Merci beaucoup.
Optin Monster: https://optinmonster.com