Mega meniurile sunt un element de design popular care poate oferi site-ului dvs. un impuls elegant oferind în același timp vizitatorilor un strat suplimentar de navigare. Există mai multe moduri de a adăuga mega-meniuri la Divi. Una dintre cele mai simple metode pe care le-am folosit este cea aun plug-in terț numit Divi Mega Pro .

Divi Mega Pro facilitează crearea de mega meniuri folosind Divi Builder. Fiecare meniu poate fi adăugat la orice element folosind o clasă CSS. Acest lucru înseamnă că puteți adăuga un aspect Divi la orice link din meniu, dar puteți merge chiar mai departe și le puteți adăuga la orice element al unui aspect Divi doar prin adăugarea unei clase CSS.

Este ideal pentru crearea de meniuri și ferestre pop-up cu module de magazin, imagini, glisante, portofolii, pictograme, blurb, videoclipuri, bloguri etc. Funcționează și cu Extra.

Creați un Mega Pro Mega Meniu

creați un divi de mega meniu cu divi mega.png

Meniul Divi Mega Pro este adăugat la meniul tabloului de bord. Aici puteți introduce cheia de licență, puteți vedea meniurile pe care le-ați creat și puteți crea un nou meniu. Când faceți clic pentru a adăuga un nou meniu, veți vedea un editor pentru tipul de postare din meniu. Ecranul este simplu, dar aici se întâmplă multe.

proiectarea unui meniu Mega Pro.png

editor - puteți crea mega-meniul sau un tooltip folosind Divi Builder.

schimba fundalul mega menu.png

Mega Pro Background - puteți selecta fundalul și culorile fontului.

alegeți locația meniului.png

Vizualizați locațiile - alegeți toate paginile sau denumiți anumite pagini, apoi introduceți excepții.

alege animația meniului.png

Mega Pro Animație - selectați o animație. Alegeți dintre offset, offset, perspectivă, decolorare sau scară.

alege trigger css.png

Mega Pro Triggers - adăugați un declanșator ca selector CSS. După ce îl salvați, veți vedea clasa CSS pe care o veți lipi în câmpul clasei CSS a unui element de meniu, modul, rând sau secțiune. Aceasta este ceea ce se face clic sau se deplasează pentru a afișa meniul. Totul poate fi folosit ca declanșator și nu doar ca element de meniu. Aceasta înseamnă că puteți utiliza și Divi Mega Pro pentru a crea ferestre pop-up sau sfaturi de instrumente.

stilul meniului de configurare divi.png

Setări de afișare Mega Pro : alegeți direcția de afișare (sus sau jos), introduceți marginile de sus și de jos în pixeli, alegeți un procent de lățime și activați o săgeată. Activarea săgeții afișează mai multe personalizări în care puteți alege tipul de săgeată (triunghi sau rotund), alegeți culoarea, setați lățimea și înălțimea și puteți previzualiza săgeata.

personalizarea butoanelor divi.png

personalizări butonul de închidere: activați butonul de închidere de pe desktop sau de pe mobil și personalizați butonul de închidere. Dacă îl activați, sunt previzualizate personalizările pentru culoarea textului, culoarea de fundal, dimensiunea fontului, raza chenarului, umplerea și afișarea.

configurație suplimentară divi mega pro.png

Parametri suplimentari Mega Pro - alegeți tipul de declanșator (plutit sau făcut clic), tipul de ieșire (planat sau făcut clic) și introduceți întârzierea de ieșire.

Divi Mega Pro Modele

diferite șabloane disponibile divi mega pro.png

Dezvoltatorul a furnizat mai multe modele pentru Divi Mega Pro. Când achiziționați pluginul, aceste șabloane sunt disponibile în contul dvs., în fila Șabloane de aspect pentru pluginuri. Acestea sunt minunate pentru a vă ajuta să începeți să vă proiectați mega meniurile. Voi folosi câteva în exemplele mele.

Meniul Divi Mega Pro

divi mega pro.png meniu

Odată ce ați creat un mega meniu, acesta va apărea în listă. Aici puteți edita, edita rapid sau șterge meniurile. De asemenea, puteți căuta, filtra după dată, vizualiza în funcție de stare etc. De asemenea, oferă clasa unică Mega Pro, astfel încât să le puteți copia de aici, în loc să deschideți fiecare pentru a primi clasa.

Când copiați clasa, asigurați-vă că o lipiți fără spații suplimentare. În caz contrar, toate mega-meniurile de pe pagină nu vor mai funcționa.

Sunt sigur că nu ar fi ușor de adăugat, dar o funcție de copiere și editare ar fi la îndemână. Puteți salva aspectele Divi în biblioteca dvs. pentru reutilizare, dar aceasta nu include setările din jur.

Adăugarea unui declanșator

alege selectorul divi.png

În câmpul Mega Pro Triggers, veți vedea o singură clasă Mega Pro. Copiați-l și lipiți-l în câmpul CSS Class al elementului pe care doriți să îl utilizați ca declanșator.

clase css.jpg

Pentru a adăuga câmpul CSS Class la un element de meniu, trebuie să activați clasele CSS. Din ecranul meniului, selectați Opțiuni de ecran și să activați clasele CSS.

adăugați un meniu din clasa css divi.png

Lipiți clasa CSS în câmpul de meniu. Acum, acest element de meniu va afișa mega meniul pe hover și vă va duce la pagina cu clic.

divi mega design meniu pro.png

Veți observa că Divi Mega Pro este, de asemenea, o opțiune din opțiunile de link din meniu. Sunt minunate pentru a adăuga la meniu un element de meniu care nu merge de fapt nicăieri. Adăugați clasa CSS ca orice alt element de meniu.

Contactați secțiunea din meniul mega

contact secțiune mega meniu pro.png

Meniul se deschide cu mouse-ul. Pot oricând să fac clic pe linkul Contact pentru a deschide pagina de contact, dacă vreau. Dacă aș dori doar să se afișeze mega meniul, aș putea folosi linkul meniu principal Contact și să îl redenumesc (ca în exemplul de mai sus).

În aceasta, am schimbat ușor culorile folosind fundalul și setările de afișare, mai degrabă decât folosind Divi Builder. Se adaugă o bară în partea de jos a meniului.

Apel simplu la acțiune cu coloane de meniu

design section contact divi mega pro.png

Acesta este unul dintre modelele care adaugă mai multe coloane. Fac ajustări la culorile fundalului și fontului. Am adăugat și o săgeată și am făcut lățimea de 75%.

schimba culoarea de fundal divi mega pro.png

Opțiunile de culoare de fundal și font adaugă ceva mai mult pentru a-l face să iasă în evidență. Am lăsat alinierea implicită, care plasează meniul în dreapta ecranului. Puteți regla poziționarea în setări.

file

meniu design cu tab-uri mega menu divi.png

Șablonul de filă include un modul de cod cu jQuery pentru a crea efectul de hover.

meniu demo cu tab-ul divi mega pro.png

Am adăugat conținut în file și le-am adaptat site-ului. Fiecare dintre linkurile din stânga prezintă o filă diferită în majoritatea meniului.

Info Configurații cu bule

demo infobulles divi.png

Pentru aceasta, am adăugat clasa CSS într-un blurb, astfel încât să se deschidă o fereastră de tip pop-up pe hover. Pop-ul este doar o imagine cu o umbră dedesubt.

În imaginea de mai sus mouse-ul meu planează peste cuvintele SITE WEB. Nu am ajustat încă poziționarea, dar este ușor să o faci să apară oriunde vrei.

design info bull divi mega pro.png

Pentru aceasta, am creat un popup pentru a afișa o imagine cu un anumit text. Am setat direcția de afișare la Scăzut și, pentru a face să apară lângă imaginea pe care doresc să o adaug, am adăugat o marjă de -300.

rezultatul balonului info divi.png

Fereastra pop-up apare acum în stânga și în partea de sus a imaginii atunci când trec pe deasupra ei. Am adăugat culoarea de fundal transparentă, culoarea chenarului, umplutura și conturul rotunjit.

Licența și documentația

licență și demonstrație.png

Aveți posibilitatea de a alege între patru licențe:

  • Site unic - 15 USD pe an
  • Trei site-uri - 29 USD pe an
  • Site-uri nelimitate - 59 USD pe an
  • Durată de viață nelimitată - 129 USD o singură dată

Documentația este oferit de o demonstrație video și un articol de pe site explică caracteristicile și explică, pas cu pas, cum se folosește pluginul.

[vc_row center_row = "da"] [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"] DESCARCĂ TEMA DIVI [/ vcex_button] [/ width»_column_column] » 1/2 ″] [vcex_button url = "https://www.elegantthemes.com/affiliates/idevaffiliate.php?id=23065&url=40632&tid1=tutorials" target = "blank" layout = "expanded" align = "center" font_family = "Raleway" font_weight = "700 ″ style =" flat "custom_background =" # c4226e "custom_hover_background =" # 8d184f "custom_color =" #ffffff "custom_hover_color =" #ffffff "icon_right" =" TEMP D FA-DOWNLOAD DIVI [/ vcex_button] [/ vc_column] [/ vc_row]

Alte tutoriale Divi

4 acțiuni
acțiune4
tweet
Registru