Przejdź do głównej treści

Przegląd wtyczki WordPress: Divi Mega Pro

Divi: najłatwiejszy w użyciu motyw WordPress

Divi: Najlepszy motyw WordPress wszechczasów!

więcej Pobieranie 600.000, Divi jest najpopularniejszym motywem WordPress na świecie. Jest kompletny, łatwy w użyciu i zawiera więcej niż darmowe szablony 62. [Zalecane]

Mega menu to popularny element projektu, który może zwiększyć elegancję Twojej witryny, zapewniając jednocześnie dodatkową warstwę nawigacji. Istnieje kilka sposobów dodawania mega-menu do Divi. Jedną z najprostszych metod, których użyłem, jest metodawtyczka 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 menu, ale możesz pójść o krok dalej i dodać je do dowolnego elementu układu Divi, po prostu dodając klasę CSS.

Świetnie nadaje się do tworzenia menu i wyskakujących okienek z modułami sklepu, obrazami, suwakami, portfolio, ikonami, tekstami prezentacji, filmami, blogami i nie tylko. 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, przejrzeć utworzone menu i utworzyć nowe menu. Po kliknięciu, aby dodać nowe menu, zobaczysz edytor dla rodzaju publikacji menu. Ekran jest prosty, ale dzieje się tutaj wiele rzeczy.

projekt menu Mega Pro.png

wydawca - możesz stworzyć mega-menu lub etykietkę za pomocą Divi Builder.

zmień tło mega menu.png

Tło Mega Pro - możesz wybrać tło i kolory 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, przejścia lub skali.

wybierz spust css.png

Wyzwalacze Mega Pro - dodaj wyzwalacz jako selektor CSS. Po zapisaniu zobaczysz klasę CSS, którą wkleisz w polu klasy CSS elementu menu, modułu, wiersza lub sekcji. Jest to klikane lub przewijane, aby wyświetlić menu. Wszystko może służyć jako wyzwalacz, a nie tylko element menu. Oznacza to, że możesz także 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 (w górę lub w dół), wprowadź górny i dolny margines w pikselach, wybierz procent szerokości i aktywuj strzałkę. Włączenie strzałki ujawnia więcej dostosowań, w których możesz wybrać typ strzałki (trójkąt lub okrągły), wybrać kolor, ustawić szerokość i wysokość oraz wyświetlić podgląd strzałki.

personalizacja przycisków divi.png

Łatwo stwórz swoją stronę internetową dzięki Elementor

Elementor pozwala łatwo stworzyć dowolny projekt strony internetowej o profesjonalnym wyglądzie. Przestań płacić drogo za to, co możesz zrobić sam. [Bezpłatny]

dostosowania przycisk zamykania: Aktywuj przycisk zamykania na pulpicie lub telefonie komórkowym i dostosuj przycisk zamykania. Jeśli ją włączysz, podgląd tekstu, kolor tła, rozmiar czcionki, promień obramowania, wypełnienie i dostosowania wyświetlania będą wyświetlane.

dodatkowa konfiguracja divi mega pro.png

Dodatkowe parametry Mega Pro - wybierz rodzaj wyzwalacza (najechanie myszką lub kliknięcie), typ wyjścia (najechanie myszką lub kliknięcie) i wprowadź opóźnienie wyjścia.

Modele Divi Mega Pro

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

Deweloper dostarczył kilka modeli Divi Mega Pro. Po zakupie wtyczki szablony te są dostępne na Twoim koncie, na karcie Szablony układów wtyczek. Doskonale nadają się do pomocy w rozpoczęciu projektowania mega menu. Wykorzystam niektóre z nich 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 także unikalną klasę Mega Pro, dzięki czemu można ją skopiować stąd, 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 dodanie tego nie byłoby łatwe, ale funkcja kopiowania i edycji byłaby wygodna. Możesz zapisać układy Divi w swojej bibliotece do ponownego użycia, ale nie obejmuje to ustawień otoczenia.

Dodanie wyzwalacza

wybierz selektor divi.png

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

klasy css.jpg

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

Szukasz najlepszych motywów i wtyczek WordPress?

Pobierz najlepsze wtyczki i motywy WordPress na Envato i łatwo stwórz swoją stronę. Już więcej niż pobrań 49.720.000. [EXCLUSIVE]

dodaj klasę css menu divi.png

Wklej klasę CSS w polu menu. Teraz ten element menu pokaże mega-menu, najeżdżając myszką i przeniesie Cię na stronę kliknij, aby kliknąć.

divi mega menu design pro.png

Zauważysz, że Divi Mega Pro jest również opcją w opcjach łącza menu. Doskonale nadają się do dodawania pozycji menu do menu, która tak naprawdę nigdzie się nie wybiera. Dodaj klasę CSS, tak jak każdy inny element menu.

Sekcja kontaktowa w mega menu

sekcja kontaktu mega menu pro.png

Menu otwiera się po najechaniu myszką. Zawsze mogę kliknąć link Kontakt, aby otworzyć stronę kontaktową, jeśli chcę. Gdybym chciał tylko wyświetlić mega-menu, mógłbym po prostu użyć linku do głównego menu Kontakt i zmienić jego nazwę (jak w powyższym przykładzie).

W tym nieco zmieniłem kolory, używając ustawień tła i wyświetlania, a nie Divi Buildera. Dodaje pasek u dołu menu.

Proste wezwanie do działania z kolumnami menu

design kontakt sekcja divi mega pro.png

Jest to jeden z szablonów, który dodaje wiele kolumn. Dostosowuję kolory tła i czcionek. Dodałem także 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ć pozycję w ustawieniach.

tabs

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

Szablon zakładki zawiera moduł kodu z jQuery do tworzenia efektu najazdu.

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

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

Informacje konfiguracje Bubbles

demo infobulles divi.png

W tym przypadku dodałem klasę CSS do tekstu prezentacji, aby otworzył małe wyskakujące okienko. Wyskakujące okienko to tylko obraz z cieniem pod spodem.

Na powyższym obrazku moja mysz unosi się nad słowami STRONA NA ŻYWO. Nie zmieniłem jeszcze pozycji, ale łatwo jest ustawić ją tak, jak chcesz.

Z łatwością stwórz swój sklep internetowy

Uzyskaj woocommerce, najlepsze wtyczki e-commerce do sprzedaży produktów swoich fizycznych i cyfrowych na WordPressie. [Zalecane]

projekt info bull divi mega pro.png

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

wynik info bubble divi.png

Wyskakujące okienko pojawia się teraz po lewej iu góry obrazu, gdy nad nim lecę. 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:

  • Jedna strona - 15 $ rocznie
  • Trzy strony - 29 $ rocznie
  • Nieograniczona liczba witryn - 59 $ rocznie
  • Nieograniczona żywotność - 129 $ raz

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

Inne samouczki Divi

Ten artykuł zawiera komentarze 2
  1. Witam:
    Gdzie mogę zobaczyć, jak tworzone jest wyskakujące okienko?
    Nie mogę tego zdobyć. Mogłem tylko stworzyć mega menu, ale pop-upy, które połączyłem, nie otwierają się.
    Spotkałem kilka e-maili z Divi Life, ale niczego nie wyjaśnili.
    Merci beaucoup.

Zostaw komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *

Ta strona używa Akismet, aby zmniejszyć niechciane. Dowiedz się więcej o sposobie wykorzystania danych komentarzy.

Powrót do góry
4 akcji
udział4
ćwierkanie
Enregistrer