Divi Plugin Highlight: Divi MadMenu

Divi Madmenu este un plugin terță parte pentru Divi care adaugă noi caracteristici de meniu Divi Theme Builder. Adăugați butoane, un coș de cumpărături Woocommerce, opțiunea de căutare și reglați plasarea fiecărui element. Proiectați meniuri independente pentru desktop, tabletă și telefoane și setați punctele de întrerupere. Setați antetul ca fix și adăugați animații. Fiecare element este personalizabil. În acest articol, vom arunca o privire la Divi Madmenu și vom vedea ce poate face.

Divi Madmenu cu Divi Theme Builder

Divi Madmenu a fost conceput special pentru a lucra cu Divi Theme Builder. După ce ați instalat pluginul, accesați Divi Theme Builder, faceți clic pe Add Global Header și selectați Build Global Header pentru a crea antetul personalizat.

Veți vedea un nou modul adăugat la Divi Builder numit MadMenu. Acesta este singurul modul pe care va trebui să îl utilizați, dar puteți folosi altele dacă doriți să adăugați și mai multe caracteristici.

Conţinut

Modulul afișează un meniu și oferă o mulțime de opțiuni pentru personalizarea acestuia. Elements vă permite să activați funcții precum meniul pentru desktop și mobil, logo, căutare, coș și două butoane. Ele pot fi aranjate diferit și stilate independent.

Meniul desktop vă permite să alegeți meniul de afișat, să setați punctul de întrerupere pentru a determina când se schimbă într-un meniu mobil și să setați animația și durata submeniului.

Meniul mobil vă permite să selectați un meniu diferit pentru mobil și adaugă opțiuni pentru a restrânge submeniurile, pentru a face clic pe linkurile părinte și pentru a alege modul acordeon. Include aceleași opțiuni de animație ca și meniul desktop.

Comutarea meniului mobil include opțiuni pentru pictograme și etichete, inclusiv formatul de comutare, etichete închise și deschise și poziția etichetei.

Dacă sigla este activată, veți vedea o opțiune pentru a alege sigla, pentru a furniza o adresă URL a linkului și pentru a decide dacă se va deschide în aceeași fereastră.

Dacă Căutarea este activată, puteți alege o pictogramă sau o imagine.

Pentru Coș , puteți afișa pictograma, conținutul sau pictograma și conținutul, puteți selecta o imagine sau afișa sigla, puteți alege opțiuni de vizibilitate, o actualizare live etc.

Butonul 1 și butonul 2 sunt ajustate independent, dar au aceleași opțiuni. Adăugați text, o pictogramă, alegeți plasarea pictogramei, vizibilitatea, linkul și selectați modul în care se deschide. În exemplul de mai sus, am adăugat text la ambele butoane și am adăugat o pictogramă la primul buton.

Proiecta

Fila Design adaugă opțiuni pentru text, elemente de meniu, meniuri desktop și mobile, submeniuri desktop și mobile, logo, căutare, coș, butoane și multe altele. Iată câteva dintre ele.

Aspect general vă permite să alegeți alinierea. Setați-l la dreapta, la stânga, la centru, în jurul spațiului, în spațiul dintre și spațiu uniform. Alegeți direcția drop-down și setați ordinea meniului atât pentru desktop, cât și pentru mobil. În acest exemplu, am setat alinierea la dreapta și am setat lista verticală directă a submeniurilor în sus.

Elementele de aspect vă permit să controlați alinierea, lățimea etc. a meniului, siglei, căutării, coșului, butonul 1 și butonul 2.

Fiecare dintre elemente are o opțiune de proiectare text care include setări atât pentru meniul normal, cât și pentru meniul fix. Reglați culoarea link-ului activ, culoarea legăturii obișnuite, fontul, greutatea fontului, dimensiunea, spațiul etc. Exemplul de mai sus este Text: Meniu desktop. Am schimbat culorile, dimensiunile fontului și spațiul.

Text

Acesta este submeniul Text: Desktop . Am schimbat culorile, dimensiunile fontului și am redactat textul cu majuscule.

Acesta este text: Comutare meniu mobil . Oferă personalizări de text pentru textul deschis și închis. Am schimbat culoarea fontului și am mărit dimensiunea și distanța dintre litere.

Acesta este Text: Meniu mobil . Am schimbat culorile fontului și am scris textul cu majuscule.

Text: Submeniul mobil controlează fonturile pentru meniul derulant. Am schimbat culorile, am selectat textul cu majuscule cu o primă literă mai mare pentru fiecare cuvânt, am mărit dimensiunea fontului și am centrat textul.

Text: Butonul 1 și Text: Butonul 2 are aceleași opțiuni și le controlează butoanele independent. Am mărit dimensiunea fontului pentru ambele butoane și am făcut Butonul 1 mai mare. Le-am schimbat și culorile. Pentru Butonul 2, am selectat un alt font.

Text: Coșul controlează fontul pentru textul conținutului coșului. Am schimbat culoarea fontului, am mărit dimensiunea, am făcut cursivul, am subliniat fontul cu un stil ondulat și am schimbat culoarea subliniată.

Meniul

Elementele de meniu desktop vă oferă control asupra fundalurilor, marginii, căptușelii, colțurilor, chenarelor, umbrei casetei, etc. umbră cutie.

Elementele din submeniul desktop vă oferă același control ca elementele din meniu. Am schimbat culoarea de fundal, am adăugat o margine în partea de sus a fiecărui element și am adăugat o umbră de cutie.

Îmi place că fiecare dintre elemente poate fi stilizat individual. Am adăugat umbre de casetă la meniul principal, elemente de meniu și căutare și le-am rotunjit colțurile. De asemenea, am schimbat culorile fonturilor și fundalurilor.

Iată una pe care am creat-o pentru site-ul meu de testare. Am adăugat sigla cu o umbră de casetă, meniul principal, căutare, coș și ambele butoane. Butoanele sunt decorate cu fundal alb și margini negre. De asemenea, am adăugat o margine de jos folosind culori din aspect.

Ne putem face o idee mai bună despre ceea ce se poate face cu meniurile, săpând în demonstrații.

Divi Madmenu Demos

Pluginul vine cu 10 demonstrații Madmenu pe care le puteți încărca în Biblioteca Divi. Mai multe dintre demonstrații au imagini în dosarele lor. Va trebui să le încărcați în biblioteca media.

Pentru a utiliza o demonstrație cu Theme Builder, faceți clic pentru a crea un antet global. Faceți clic pentru a insera o secțiune și alegeți Adăugați din bibliotecă . Acum puteți alege oricare dintre demonstrațiile de utilizat.

Utilizați demonstrațiile ca punct de plecare pentru a crea modele sau pur și simplu adăugați sigla și meniurile. Folosesc bine culorile de fundal, opțiunile de siglă, opțiunile de căutare și butoanele CTA. Să ne uităm la câteva dintre demonstrații cu site-ul meu de testare. Acestea includ modele diferite pentru desktop, tabletă și anteturi de telefon.

Demo 1

Demo 1 folosește titlul site-ului, meniul și butonul 1. Meniul folosește alinierea centrală. Submeniul include un stil cu o umbră de cutie și margini pentru a separa linkurile. Plutesc peste al doilea link.

Mobile crește dimensiunea fonturilor și folosește același stil pentru meniul principal și submeniul. De asemenea, folosește text cu o pictogramă pentru butonul de deschidere și închidere și înlocuiește titlul site-ului cu sigla.

Demo 2

Demo 2 adaugă o siglă, caută cu o pictogramă încercuită cu o margine pe o parte, meniu centrat, coș de cumpărături și butoane. Ambele butoane afișează sigle de pe rețelele sociale. Elementele din submeniu au stil independent de fundal.

Meniul mobil centrează toate pictogramele, înlocuiește textul meniului cu o pictogramă deschisă și adaugă albastru deschis pentru meniu.

Demo 3

Demo 3 folosește interesant butoanele. Butonul 1 include text pentru conectare sau înregistrare și are un efect de deplasare care elimină fundalul în cursă. Butonul 2 folosește imaginea unei inimi trasate pe linie.

Pentru mobil, butonul de deschidere / închidere include pictograma și textul de sub pictogramă. Pictogramele butoanelor sunt spațiate în mod egal pe antet folosind spațiul dintre ele. Titlul site-ului este înlocuit cu sigla, care este mutată în dreapta.

Demo 5

Demo 5 folosește spațiu pentru aspect și afișează butoanele ca CTA-uri. Ambele butoane utilizează fundaluri colorate diferite pentru a ieși în evidență.

Meniul mobil plasează butoanele din dreapta și stânga și adaugă pictograme. Logo-ul și butonul de deschidere / închidere cu text și pictogramă sunt plasate în centru.

Demo 7

Demo 7 plasează butoanele de pe ambele părți ale antetului cu meniul în centru. Logo-ul este plasat deasupra numelui site-ului. Meniul include pictograma de deschidere și închidere cu text. Elementele din meniul derulant sunt separate unele de altele, astfel încât părțile fundalului să poată fi afișate.

Versiunea mobilă menține butoanele la locul lor și înlocuiește textul cu pictograme. Titlul site-ului este, de asemenea, eliminat.

Demo 8

Demo 8 include galben îngroșat cu un meniu drop-down și un titlu în stânga, și meniul cu butoane în dreapta. Fiecare dintre butoane include elemente grafice.

Meniul mobil plasează butoanele din stânga și sigla și pictograma meniului în dreapta.

Demo 10

Demo 10 folosește un gradient pentru fundal și plasează un fundal mai întunecat în spatele fiecărei pictograme. Butoanele includ text și pictograme. Fiecare dintre linkurile din meniul derulant este separat unul de celălalt, iar linkul activ este mai întunecat. Logo-ul este plasat în stânga.

Meniul mobil elimină toate pictogramele, cu excepția pictogramei de căutare. Meniul este înlocuit cu pictogramele de deschidere / închidere, iar sigla este plasată în centru. Meniul derulant arată la fel.

Achiziționați Divi Madmenu

Divi Madmenu poate fi achiziționat de pe Divi Marketplace la 39 USD pe an pentru utilizare nelimitată și un an de actualizări și asistență.

Gânduri de sfârșit

Divi Madmenu pentru Divi Theme Builder are o mulțime de caracteristici și personalizări, ceea ce face mai ușor să proiectezi aproape orice tip de antet de care ai putea avea nevoie. Cantitatea mare de ajustări din fila de proiectare poate fi confuză la început, dar sunt ușor de utilizat și nu durează mult pentru a obține ceea ce controlează ce. Utilizarea celor două butoane împreună cu adăugarea de imagini și pictograme la butoanele de căutare și coș deschide o mulțime de posibilități de proiectare. Dacă sunteți interesat să creați meniuri interesante cu un singur modul, Divi Madmenu merită privit.

Vrem sa auzim de la tine. Ați încercat Divi Madmenu? Spuneți-ne ce părere aveți despre asta în comentariile de mai jos.

Imagine prezentată prin venimo / shutterstock.com