Divi Plugin Highlight: Mhmm
Instalarea Mhmm
Înainte de a putea încărca pluginul, trebuie să dezarhivați fișierul descărcat. Există două pluginuri în folder: mhmm și divi-stop-stacking. După ce ați dezarhivat folderul, încărcați și activați în mod normal. Dosarul include și un fișier JSON.
Activați cheia API în meniul de setări pentru a primi actualizări. Module Mhmm
Mhmm adaugă trei module la Divi Builder: Mhmm Hamburger
Fila Conținut a modulului Hamburger vă permite să alegeți meniul de afișat, să selectați din trei stiluri de meniu (ecran complet, diapozitiv în stânga și diapozitiv în dreapta) și să ajustați fundalul. Fundalul este ceea ce se afișează la deschiderea meniului hamburger.
Fila Proiectare include culoarea, stilul, alinierea, centrarea și ajustările textului pentru butonul de meniu. De asemenea, include setări pentru culoarea elementului de meniu, spațierea elementelor de meniu, textul elementului de meniu și textul elementului de submeniu.
Fila Avansat include vizibilitate și mai multe câmpuri CSS personalizate. Dacă nu există o ajustare pentru ceva în celelalte file, o puteți ajusta cu CSS aici. Mhmm Inline
Fila Conținut a modulului Inline include selectarea meniului, alinierea, activați o săgeată în jos pentru meniurile părinte și tranzițiile submeniului (alegeți dintre fade, creștere și instantanee). Fila Design include aceleași caracteristici ca și modulul Hamburger și adaugă umbră de casetă. Fila Avansat adaugă câmpuri specifice acestui meniu.
Mhmm Mega Menu
Fila Conținut a modulului Mega meniu vă permite să alegeți meniul dintr-o casetă derulantă și setările de fundal. Fila Proiectare include doar setările butonului de meniu. Fila Advanced are câmpuri pentru butonul meniu. Crearea și activarea anteturilor Inline și Hamburger
În meniul tabloului de bord, accesați Divi > Mhmm Headers . Aici creați un nou antet și vedeți lista de anteturi pe care le-ați creat.
Dacă faceți clic pe Adăugare nouă se deschide un mod la fel ca și construirea în biblioteca Divi. Aici denumiți antetul, selectați tipul de aspect și alegeți categoria. Trebuie să alegeți Layout pentru meniurile Inline și Hamburger.
Aceasta deschide un constructor unde puteți crea aspectul pentru antet. Adăugați secțiuni, rânduri, coloane, orice module doriți și stilizați-le în mod normal.
Folosesc un aspect 1/4, 1/2, 1/4 și am adăugat o imagine pentru siglă, un meniu Inline setat implicit și un buton pentru un îndemn, doar pentru a vedea cum funcționează.
Acest nou antet nu se va afișa până nu îl atribuiți. În Customizerul tematic, accesați Header & Navigation > Header Format .
Aici veți alege aspectul și stilul de antet. Vă oferă cinci stiluri de a alege. Acum afișează antetul pe care l-am creat, folosind grafica stelelor ca logo, meniul principal și un buton.
Stilurile includ:
- De bază
- Rămâneți în partea de sus
- Rămâneți în partea de sus, ascundeți pe scroll
- Rămâneți în partea de sus, arătați pe scroll
- Lipiți-vă de fund
- Rămâneți în partea de jos, arătați pe scroll
Crearea și activarea Mega meniurilor
Mega meniurile au două componente – antetul și meniul deschis. Acest lucru necesită să construiți în două biblioteci diferite. Antetul este construit la fel ca meniurile Inline și Hamburger. Meniul deschis este construit în biblioteca Mhmm Mega Menus. În meniul tabloului de bord, accesați Divi > Mhmm Mega Menus . Acesta este singurul lucru pe care l-am găsit confuz (îmi place să mă scufund fără să citesc instrucțiunile), dar odată ce am vizionat videoclipurile nu a fost o problemă să le creez.
Mhmm Header Hamburger Exemple
Acesta folosește modulul Hamburger. Folosesc elemente din pachetul de amenajare Coffee House.
Am plasat un fundal din aspect în secțiune. Rândul folosește un aspect 1/3, 1/3, 1/3 cu o imagine pentru logo, modulul Hamburger și un modul text deasupra unui modul buton. Toate culorile provin din aspect.
Am setat modulul Mhmm să utilizeze noul meu meniu, selectat centrat și am schimbat butonul și culorile de deplasare a butonului. Este setat să se centreze vertical și să deschidă meniul pe ecran complet. Modulul text afișează un mesaj folosind etichete H3 în timp ce butonul se deschide către o pagină nouă pentru a afișa hărți pentru locații. Modulul de butoane este din aspectul în sine.
Acesta este meniul deschis. Am adăugat un fundal la modulul Mhmm cu o suprapunere albă și opacitatea setată la 76. Am centrat textul și am schimbat culorile pentru a se potrivi cu aspectul. De asemenea, am setat dimensiunea elementului de meniu la 50 și înălțimea liniei elementului de meniu la 1,6. Butonul de închidere folosește și culori din aspect. Plutesc peste Știri.
Elementele din submeniu folosesc aceleași culori, dar am setat dimensiunea elementului de meniu la 36 și înălțimea rândului elementului de meniu la 1.
Acesta este același meniu folosind Slide în stânga. Mhmm Header Inline Exemple
Iată un antet simplu care utilizează modulul Inline. Am folosit elemente din pachetul de amenajare Pottery.
Folosesc un rând 1/4, 1/4, 1/2 cu un modul de imagine pentru siglă, modul buton pentru CTA și modulul Inline. Am plasat o imagine de fundal din pachetul de amenajare Pottery în secțiune și am adăugat o suprapunere neagră cu 50% opacitate. Am adăugat un efect de umbră secțiunii și am adăugat 7 pixeli pentru umplutură atât pentru secțiune, cât și pentru rând, și am făcut rândul pe toată lățimea. Butonul este unul dintre butoanele din pachetul de amenajare Ceramică. Am schimbat culoarea textului Mhmm în alb și am adăugat 20 de pixeli de umplutură în partea de sus. Am schimbat culorile articolelor din submeniu, folosind culori din aspectul însuși, atât pentru articolele obișnuite, cât și pentru cele cu mouse-ul. Meniul este setat la alinierea dreaptă.
A durat doar câteva secunde pentru a schimba aspectul antetului. Am schimbat configurația rândului la 1/2, 1/4, 1/4, am schimbat modulul imagine și Mhmm și le-am schimbat alinierea pentru a se potrivi.
Iată o privire la antetul de jos. L-am setat să rămână în partea de sus a scroll-ului. Exemple de meniu Mhmm Mega
Pentru mega meniu, folosesc o secțiune din pachetul de machete pentru rețete alimentare. Iată antetul. Se adaugă o pictogramă de meniu Hamburger.
Acesta este antetul creat în biblioteca Mhmm – Header. Folosește modulul Mega Menu. Am adăugat o imagine de fundal și o umbră de cutie la secțiune. Am adăugat o siglă la modulul de imagine, iar modulul Mega Menu afișează un meniu pătrat hamburger cu text. Am făcut-o centrată vertical și am schimbat textul și pictograma în alb.
Acesta este aspectul mega meniu creat în biblioteca Mhmm – Mega Menu. Aceasta este porțiunea care se deschide. Puteți construi orice tip de aspect doriți. Folosesc o secțiune din pachetul de aspect și am adăugat patru butoane. Sfat – Am încărcat un aspect într-o pagină obișnuită, am făcut clic dreapta pe secțiunea pe care doream să o folosesc în mega meniu și am selectat Copiere, am mers la aspectul mega meniu, am făcut clic dreapta pe o secțiune goală și am făcut clic pe Lipire.
Iată mega meniul deschis. Am adăugat un fundal alb secțiunii, am redus opacitatea la alb și am eliminat căptușeala. Mhmm Layouts
Mhmm include 8 machete pentru a vă ajuta să începeți. Importați-le în biblioteca Mhmm – Headers. Le puteți vedea pe pagina demonstrativă a dezvoltatorului. Divi Stop Stacking Plugin
Aceasta elimină stivuirea implicită la antet pe care Divi o face în mod normal atunci când un ecran se micșorează la 980 pixeli lățime. Instalați-l la fel ca Mhmm. Acesta adaugă un modul la Divi Builder. Tot ce trebuie să faceți este să plasați modulul undeva în rând. Oprește stivuirea pentru rândul în care se află modulul. Nu are opțiuni de reglat și nu afișează nimic.
Fără Divi Stop Stacking, antetul se stochează când ajungeți la 980 pixeli.
Cu Divi Stop Stacking, elementele de antet rămân pe aceeași linie. Licență și documentație Mhmm Puteți cumpăra Mhmm de pe site-ul dezvoltatorului. Are două licențe:
- 1 site live și 1 dev – 35 USD
- Site nelimitat – 65 USD
Pentru documentare, există o mulțime de tutoriale video pe site-ul dezvoltatorului. Vă recomand cu drag să le urmăriți, deoarece includ o mulțime de trucuri Divi. Gânduri de sfârșit Mhmm oferă o mulțime de funcții pentru a crea anteturi personalizate și mega meniuri pentru Divi. Poate face mult mai mult decât am arătat aici, dar necesită o oarecare răbdare pentru a învăța și s-ar putea să trebuiască să vă scufundați în CSS pentru a stiliza unele dintre elemente. Dacă sunteți interesat să creați anteturi personalizate pentru Divi, Mhmm merită să aruncați o privire. Vrem sa auzim de la tine. Ai încercat Mhmm? Spuneți-ne ce părere aveți despre asta în comentarii. Imagine prezentată prin aliaksei kruhlenia / shutterstock.com
homefinance blog