Mega meniurile sunt un element de design popular care vă poate oferi site-ul web o explozie de eleganță în timp ce oferă vizitatori un strat suplimentar de navigare. Există mai multe moduri de a adăuga mega-meniuri la Divi. Una dintre cele mai ușoare metode pe care le-am folosit esteun 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

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.

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

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

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

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

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.

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.

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.

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

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

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

Î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.

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.

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.

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

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

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%.

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

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

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

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.

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.

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

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=”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”]DESCĂRCĂ TEMA 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=”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=”fa fa-download”]DESCARCĂ ȘABLOANELOR DIVI[/vcex_button][/vc_column][/vc_row]

Alte tutoriale Divi

• site-uri web 5 pentru utilizare restaurant tematic Divi
• Cum să adăugați text pe un produs Divi WooCommerce
• Modificarea culorii meniului între paginile Divi
• Cum să personalizați grilele unui blog cu Divi
• Cum de a utiliza rolul editor Divi pe WordPress
• Cum se creează un glisor Divi pe ecran complet
• Modificarea culorii meniurilor între paginile Divi
• Caracteristici pe care probabil nu le cunoașteți despre Divi
• Cum se utilizează Divi Builder pe WordPress
• Cum se utilizează modulul de defilare video Divi
• Cum se utilizează modulul Divi Builder Flip
• Cum să adăugați un modul de mărturie pe Divi Builder
• Cum se utilizează modulul de text Divi
• Cum se creează un slider pe Divi
• Cum se editează un rol de utilizator Divi
• Cum se utilizează modulul Divi Social Media
• Cum se utilizează modulul magazin pe tema WordPress Divi
• Cum se utilizează modulul bara laterală Divi
• Cum se utilizează modulul de prețuri pentru divi
• Cum se utilizează modulul de titlu al publicațiilor Divi
• Cum se adaugă un modul video de Divi
• Cum să utilizați modulul de navigare pentru articole
• Cum se utilizează modulul de căutare Divi
• Cum se utilizează modulul portofel Divi
• Cum se utilizează modulul persoană pe Divi Builder
• Cum se utilizează modulul portofel cu filtrul Divi
• Modul de utilizare a modulului glisant cu lățime întreagă
• Cum se utilizează modulul de imagine Divi Builder
• Modul de utilizare a modulelor de navigație full-width din Divi Builder
• Cum se utilizează modulul galerie de imagini
• Modul de utilizare a modulului de carduri cu dimensiuni multiple de la Divi Builder
• Cum să utilizați modulul de portofoliu Full Width Divi
• Cum se utilizează modulul antet de Divi pentru lățimea completă
• Cum se utilizează modulul Counter Modul Divi
• Cum se utilizează glisorul de articole pe Divi Builder
• Cum se utilizează modulul Divi Email Optin