Wyróżnienie wtyczki Divi: Divi Mega Pro

Divi Mega Pro to wtyczka innej firmy do Divi, która dodaje możliwość tworzenia mega menu i podpowiedzi za pomocą Divi Builder. Ponieważ megamenu i podpowiedzi są tworzone za pomocą Divi Builder, możesz używać dowolnych modułów, w tym modułów innych firm, skrótów i kodu oraz stylizować je za pomocą narzędzi Divi. W tym poście przyjrzymy się Divi Mega Pro, aby pomóc Ci zdecydować, czy Divi Mega Pro jest właściwym produktem dla Twoich potrzeb.

Konstruktor Divi Mega Pro

Zamiast dodawać moduły do ​​Divi Builder, Divi Mega Pro dodaje nowy typ postu utworzony za pomocą układów Divi, które mogą wyświetlać menu WordPress i moduły Divi. Twórz i dodawaj tyle, ile chcesz, do dowolnej strony i menu. Do pulpitu nawigacyjnego WordPress dodano nowy element menu o nazwie Divi Mega Pro . Obejmuje to listę Divi Mega Pro, edytor i ustawienia. Tutaj możesz tworzyć megamenu i podpowiedzi oraz zarządzać nimi. Przyjrzymy się każdej pozycji menu w odwrotnej kolejności.

Ustawienia Divi Mega Pro

Ustawienia umożliwiają dodanie przejścia slajdu do nagłówka, treści i stopki. Możesz je włączyć niezależnie. Domyślnie są wyłączone. Przejście zmieni zawartość menu lub podpowiedzi, zachowując widoczny kontener. Zmusza to megamenu i podpowiedzi do trybu najechania kursorem. Polecam je włączyć, chyba że musisz użyć trybu kliknięcia.

Dodaj nowe

Aby utworzyć mega element menu lub podpowiedź, kliknij Dodaj nowy . Spowoduje to otwarcie edytora, w którym można utworzyć menu lub podpowiedź. Zawiera edytor TinyMCE i możesz włączyć Divi Builder, aby utworzyć go za pomocą modułów Divi. Będziesz musiał utworzyć nową pozycję dla każdego mega elementu menu, który chcesz wyświetlić. Na przykład, jeśli chcesz, aby cztery różne łącza w nagłówku wyświetlały inny układ megamenu, musisz utworzyć cztery różne elementy.

Edytor zawiera wiele narzędzi na prawym pasku bocznym i na dole, w tym standardowe narzędzia do publikowania i opcje pól niestandardowych. Przyjrzyjmy się bliżej każdemu z narzędzi niestandardowych.

Wyświetl lokalizacje

Wybierz, gdzie ma być wyświetlane megamenu. Wybierz pomiędzy wszystkimi postami i stronami, wszystkimi postami, wszystkimi stronami lub określonymi stronami. Możesz dodać wyjątki dla wszystkich postów lub stron do pola. Jeśli wybierzesz konkretne lokalizacje, możesz je wpisać w pole. Możesz także wybrać wyświetlanie menu na stronach autora i stronach archiwum oraz wymusić renderowanie.

Mega profesjonalna animacja

Wybierz animację, której menu lub podpowiedź będzie używać po otwarciu. Wybierz opcję Odsuń, Przesuń w stronę, Perspektywa, Zanikanie lub Skaluj. Nadają one megamenu elegancki wygląd podczas otwierania i zamykania.

Wyzwalacze Mega Pro

Wprowadź wyzwalacz selektora CSS w polu. Pokazuje również unikalną klasę Mega Pro, którą należy wprowadzić w polach klasy CSS, aby wyświetlić układy.

Ustawienia wyświetlania Mega Pro

Ustawienia zawierają wiele opcji. Wybierz kierunek wyświetlania, dodaj górny i dolny margines, wybierz szerokość, wprowadź maksymalną wysokość, wybierz pozycję CSS z bezwzględnej lub stałej i włącz strzałkę.

Jeśli włączysz strzałkę, zobaczysz kilka narzędzi do stylizacji, aby wybrać typ, kolor, szerokość i wysokość. Pokazuje podgląd, więc będziesz wiedział, jak to wygląda z przodu.

Niestandardowe dostosowania przycisku zamykania

Dostosowania przycisku zamykania umożliwiają niezależne włączanie przycisku zamykania na komputerach stacjonarnych i telefonach.

Jeśli zdecydujesz się dostosować przycisk zamykania, zobaczysz inny zestaw opcji umożliwiających dostosowanie kolorów, rozmiaru czcionki, promienia obramowania i wypełnienia. Zawiera również podgląd, dzięki czemu możesz zobaczyć, jak będzie wyglądać z przodu.

Dodatkowe ustawienia Mega Pro

Dodatkowe ustawienia umożliwiają indywidualne wyłączenie menu na telefonach, tabletach i komputerach stacjonarnych. Wybierz typ wyzwalania między najechaniem a kliknięciem, typ wyjścia między najechaniem a kliknięciem i wprowadź opóźnienie wyjścia w polu.

Mega profesjonalne tło

Ten jest umieszczony pod edytorem. Ma próbnik kolorów, w którym możesz określić kolor tła menu.

Lista Divi Mega Pro

To pokazuje listę przedmiotów Divi Mega Pro, które utworzyłeś. Każdy z nich zawiera unikalną klasę Mega Pro. To jest to, co skopiujesz, aby wkleić tam, gdzie chcesz wyświetlić megamenu lub podpowiedź. Aby utworzyć megamenu, musisz utworzyć i skopiować każdy element menu osobno.

Dodanie MegaMenu

Aby dodać megamenu do menu nagłówka i stopki WordPress, musisz włączyć klasy CSS. Najpierw przejdź do Wygląd > Menu na pulpicie nawigacyjnym WordPress. Wybierz Opcje ekranu w prawym górnym rogu ekranu i upewnij się, że zaznaczone są Klasy CSS .

Następnie otwórz element menu, w którym chcesz wyświetlić mega element menu. Wklej klasę Unique Mega Pro dla megamenu w polu CSS Classes.

Powtórz ten proces dla każdego mega elementu menu, który chcesz wyświetlić.

Oto spojrzenie na to mega menu na froncie. Użyłem jednej z dołączonych wersji demonstracyjnych, jak zobaczymy później.

Dodawanie podpowiedzi

Możesz także użyć Divi Mega Pro do tworzenia mega podpowiedzi. Po prostu dodaj klasę CSS do elementu, w którym chcesz wyświetlić podpowiedź. Możesz ustawić podpowiedź, aby otwierała się po najechaniu myszką lub kliknięciu. Każdy moduł Divi może wyświetlać podpowiedź. Stylizuj moduł jak zwykle za pomocą narzędzi Divi.

Aby dodać podpowiedź, otwórz moduł Divi , w którym chcesz wyświetlić podpowiedź. Przejdź do zakładki Zaawansowane i wklej klasę Unique Mega Pro w polu Klasa CSS . Zapisz ustawienia i możesz wyświetlać podpowiedzi.

Teraz, gdy ktoś najedzie kursorem na element, do którego dodałeś klasę, pojawi się podpowiedź.

Podpowiedzi działają również w celu tworzenia mega menu dla nagłówków w Divi Theme Builder. Twórz elementy menu za pomocą modułów Divi, takich jak moduły tekstowe, moduły przycisków, moduły obrazów itp. Zalecam używanie modułów menu tylko do wyświetlania standardowych menu, ponieważ każdy link otwiera podmenu lub stronę, na którą wskazuje menu.

Dodaj Unique Mega Pro Class do pola CSS Class w każdym elemencie, który chcesz mieć jako mega element menu. Możesz użyć tej metody do tworzenia niestandardowych nagłówków i stopek. W poniższym przykładzie utworzyłem menu, używając standardowych modułów tekstowych jako linków menu. Do każdego dodam mega układ menu.

Pozycje menu będą działać jak normalne menu i wyświetlać pozycje mega menu po najechaniu myszką lub kliknięciu, w zależności od ustawień. W poniższym przykładzie najechałem kursorem na pierwszy link menu i otworzyło się megamenu dla tego modułu tekstowego.

Szablony Divi Mega Pro

Divi Mega Pro zawiera 15 szablonów na początek. Są one dostarczane jako pliki JSON. Prześlij je do edytora Divi Mega Pro i użyj ich do stworzenia układów Divi Mega Pro. Obejmują one banery eCommerce, zakładki, wezwania do działania, dane kontaktowe, formularz logowania, posty na blogu i wiele innych. Układy są dobrze zaprojektowane i świetnie współpracują z każdym stylem strony internetowej.

Szablony są w pełni konfigurowalne, więc możesz dostosować je tak, aby zawierały markowe czcionki i kolory. To jest szablon numer 9, który tworzy menu eCommerce dla polecanych marek. To pokazuje widok szkieletowy w edytorze zaplecza. Możesz także przeglądać układy z przodu. Mój domyślnie wyświetlał układ z paskiem bocznym, chociaż jestem pewien, że można go łatwo wyłączyć, aby wyświetlić układ w pełnej szerokości.

Oto jak by to wyglądało z przodu. To jest edytor zaplecza pokazujący widok pulpitu.

Gdzie kupić Divi Mega Pro

Divi Mega Pro jest dostępny w Divi Marketplace za 79 USD. Obejmuje nieograniczone korzystanie z witryny, rok wsparcia i aktualizacji oraz 30-dniową gwarancję zwrotu pieniędzy.

Kończące myśli

Oto nasze spojrzenie na Divi Mega Pro. Uważam, że tworzenie i używanie megamenu jest intuicyjne. Ponieważ korzysta z dowolnego modułu Divi Builder, tworzenie menu i podpowiedzi działa tak samo, jak budowanie dowolnego układu Divi. Dodatkowe funkcje, takie jak animacje, przyciski itp., zapewniają jeszcze większą kontrolę nad projektem i określają sposób działania menu i podpowiedzi. Działa dobrze ze stronami, postami, produktami WooCommerce i nie tylko. Dodane szablony to świetny sposób na rozpoczęcie pracy. Jeśli jesteś zainteresowany tworzeniem mega menu i podpowiedzi dla swoich stron internetowych Divi, warto przyjrzeć się Divi Mega Pro.

Chcemy usłyszeć od ciebie. Czy próbowałeś Divi Mega Pro? Daj nam znać, co o tym myślisz w komentarzach.