Doriți să adăugați o siglă receptivă la modulul dvs. Fullwidth Menu al Divi ca sa se adapteze la vizualizarea de pe mobil?
Știați că mai mult de 50% din Filme Internetul vine de pe dispozitive mobile? Aceasta înseamnă că versiunea mobilă a dvs site-ul web este extrem de important și poate fi chiar principalul mod în care cineva vă va vizita pagina.
Asigurați-vă că dvs site-ul web este receptiv și prietenos cu dispozitivele mobile este un pas esențial în proiectarea unui site-ul web.
În acest tutorial, vă vom arăta cum să adăugați o siglă receptivă la modulul dvs. Fullwidth Menu folosind opțiunile de răspuns încorporate ale Divi.
Acest lucru vă va permite să adăugați un logo mai mare sau mai complex care va apărea pe ecrane mai mari și un logo mai mic sau mai simplu care va apărea pe ecrane mai mici.
Să începem!
studiu
Iată o previzualizare a ceea ce vom proiecta. Versiunea pentru desktop a site-ului web va avea un logo extins cu text suplimentar, iar versiunea mobilă a siglei va avea doar brandingul de bază al siglei.
Ce ai nevoie pentru a începe
Toate mai întâi, instalați și activați tema Divi și asigurați-vă că aveți cea mai recentă versiune a Divi pe site-ul dvs. Apoi, asigurați-vă că aveți cel puțin două versiuni ale logo-ului dvs.: una pentru vizualizarea desktop a site-ului dvs. și una pentru vizualizarea mobilă. În cele din urmă, descărcați șablonul Șabloane de antet și de subsol pentru pachetul de aranjament al liceului Divi.
Acum sunteți gata să începeți!
Cum să adăugați o siglă receptivă la modulul dvs. de antet cu lățime completă în Divi
Creați modulul Fullwidth Header
Citiți și: Divi: Cum să afișați modulul Fullwidth Header pe ecran complet
Adăugați o secțiune de lățime completă
Deoarece meniul original este construit cu un modul de meniu standard, va trebui să modificăm aspectul pentru a adăuga un modul Antet cu lățime completă.
Mai întâi, adăugați o secțiune cu lățime completă (Lățime maximă) la antetul global din meniul existent.
În setările secțiunii cu lățime completă, navigați la AvansatȘi apoi Efecte de derulare.
- Poziție lipicioasă: lipiți de sus
Apoi, adăugați culoarea de fundal.
- Fundal: #f5f0eb
Adăugați o culoare diferită pentru fundal în starea lipicioasă.
- Fundal (lipicios): #ffffff
Adăugați un modul Fullwidth Header
Acum să adăugăm modulul Fullwidth Header.
Deschideți setările modulului și eliminați fundalul.
Pentru a reproduce cu ușurință aspectul meniului original, putem folosi caracteristica Copiere stiluri pentru a copia unele dintre setările personalizate.
Vezi si: Divi: Cum să schimbați gradientul unui fundal la hover
Deschideți setările meniului de pornire, apoi faceți clic dreapta pe Textul meniului și selectați Copiați stiluri de text din meniu.
Odată copiat, faceți clic pe cele trei puncte ale modulului Fullwidth Header, apoi selectați Stiluri de text din meniu trecut.
Acum vom repeta aceiași pași cu setările meniului derulant.
Repetați încă o dată pentru pictograme.
Setați alinierea textului la dreapta.
- Alinierea textului: dreapta
Setați înălțimea maximă a logo-ului sub AmenajăriApoi dimensionarea.
- Înălțimea maximă a siglei: 50 px
Adăugați următorul CSS la secțiune Link de meniu sub CSS personalizat.
padding-top: 0px;
padding-bottom: 5px;
padding-left: 0.3em;
padding-right: 1.3em;
În cele din urmă, ajustați căptușeala de sus și de jos.
- Umplutură-Sup: 10px
- Căptușeală-partea inferioară: 10px
Acum ștergeți secțiunea inițială a meniului.
Adăugați sigla receptivă
Acum vom adăuga sigla receptivă. Din fericire, Divi face acest lucru ușor cu opțiunile de răspuns încorporate.
sub Conţinut, deschideți setările siglei și încărcați versiunea desktop a siglei dvs.
Selectați pictograma modului mobil pentru a utiliza opțiunile receptive, apoi înlocuiți sigla mobilă cu sigla dvs. receptivă.
Creați o pagină nouă cu un aspect predefinit
Pentru a vedea meniul pe lățime completă cu sigla responsive în acțiune, să creăm o pagină nouă cu un aspect predefinit din biblioteca Divi.
Pentru acest design, vom folosi pagina de pornire a liceului Pachet de layout pentru liceu pentru a se potrivi antet și subsol.
Adăugați o pagină nouă pe site-ul dvs. și dați-i un titlu, apoi selectați opțiunea Utilizați Divi Builder. Deoarece am importat aspectul antet și subsol ca antet și subsol global, utilizați aspectul implicit pentru această pagină.
Vom folosi un aspect prestabilit din biblioteca Divi pentru acest exemplu, așa că selectați Răsfoiți Aspecte.
Găsiți și selectați aspectul Pagina de pornire a liceului.
selecta Utilizați acest aspect pentru a adăuga aspectul paginii dvs.
Rezultat final
Acum să aruncăm o privire la designul nostru final.
Descărcați DIVI acum!!!
Concluzie
A avea un site web adaptabil și receptiv este mai important ca niciodată. Și datorită opțiunilor de răspuns încorporate ale Divi, construirea unuia este mai ușoară ca niciodată!
Cu un logo receptiv, identitatea mărcii dvs. va fi întotdeauna clară, indiferent de dimensiunea ecranului.
Sperăm că acest tutorial vă va inspira pentru următoarele proiecte Divi. Dacă aveți nelămuriri sau sugestii, găsiți-ne în secțiunea de comentarii pentru a discuta despre asta.
De asemenea, puteți consulta resursele noastre, dacă aveți nevoie de mai multe elemente pentru a vă derula proiectele de creare a site-urilor de internet, consultați ghidul nostru cu privire la Creare blog WordPress sau cea de pe Divi: cea mai bună temă WordPress din toate timpurile.
Dar între timp, împărtășește acest articol pe diferitele rețele de socializare.
...
