Modulul de meniu pe ecran complet de pe Divi vă permite să adăugați cu ușurință antete colorate frumoase în partea de sus a paginilor (sau oriunde pe site-ul dvs., dacă doriți). Aceste module pot fi plasate numai în secțiuni cu lățime completă.

Cum se adaugă modulul Meniu ecran complet Divi

Înainte de a putea adăuga un modul Meniu ecran complet la pagina dvs., trebuie mai întâi să accesați Divi Builder. Odata ce Divi tema instalat pe dvs site-ul web, veți observa un buton Utilizați Divi Builder deasupra editorului de postare ori de câte ori creați o pagină nouă. Faceți clic pe acest buton pentru a activa Divi Builder și pentru a accesa toate modulele Divi Builder. Apoi faceți clic pe buton Utilizați Visual Builder pentru a porni generatorul în modul vizual. De asemenea, puteți face clic pe buton Activați Visual Builder când răsfoiți dvs site-ul web în prim-plan dacă sunteți conectat la tabloul de bord WordPress.

Odată ce ați intrat în Visual Builder, puteți face clic pe butonul plus gri pentru a adăuga un nou modul la pagina dvs. Noile module de meniu pe ecran complet pot fi adăugate numai în secțiunile de lățime completă. Dacă începeți o pagină nouă, nu uitați să adăugați mai întâi o secțiune de lățime completă la pagina dvs.

Găsiți modulul de antet pe ecran complet în lista de module și faceți clic pe acesta pentru a-l adăuga la pagina dvs. Lista modulelor poate fi căutată, ceea ce înseamnă că puteți, de asemenea, să tastați cuvântul „header full screen” și apoi să faceți clic pe „Enter” pentru a găsi și adăuga automat modulul header full screen! Odată adăugat modulul, veți fi întâmpinat de lista de opțiuni a modulului. Aceste opțiuni sunt separate în trei grupe principale: Conținut , Concepție et avansat .

Exemplu de caz de utilizare: adăugarea unui antet pe ecran complet într-o pagină Despre

Pentru acest exemplu, vă voi arăta cum să utilizați modulul antet Fullwidth pentru a adăuga un antet cu text personalizat și o imagine de fundal.

Toate modulele cu ecran complet sunt disponibile numai atunci când se utilizează secțiuni cu ecran complet. Folosind Visual Builder, introduceți o nouă secțiune pe ecran complet. Apoi adăugați un modul Persoană la secțiune.

Actualizați setările antetului ecranului complet după cum urmează:

Opțiuni de conținut

Titlu: Despre noi Textul subtitrării: Facem lucruri diferite ... Adresa URL a fundalului: [inserați imaginea 1920 x 800] Culoarea fundalului suprapus: rgba (0,0,0,0.2 , XNUMX)

Opțiuni de proiectare

Orientare text și siglă: Buton din mijloc Buton derulare în jos: DA Pictogramă: [selectați pictogramă] Pictogramă derulantă în jos Culoare: # fcbf00 Pictogramă derulare: 50px Culoare text: Culoare text deschis: # fcbf00 Titlu: Deschis Fără, aldin, majuscule Titlu Dimensiune font: 60px (desktop), 40px (tabletă), 30px (telefon) Dimensiune font subtitrare: 25px

Opțiuni avansate (CSS personalizate)

Element principal:
tapițerie: 100px 0;

Asta este!

Opțiuni de conținut pentru antetul ecranului complet

În fila conținut, veți găsi toate elementele de conținut ale modulului, cum ar fi text, imagini și pictograme. Toate acestea controlează ce apare în modulul dvs. va fi întotdeauna găsit în această filă.

Titlu

Introduceți titlul paginii dvs. aici.

Text subtitrare

Dacă doriți să utilizați un subtitlu, adăugați-l aici. Legenda dvs. va apărea sub titlu într-un font mic.

Buton # 1 Text

Introduceți textul butonului.

Buton # 2 Text

Introduceți textul butonului.

Conținut

Aici puteți defini conținutul care va fi plasat sub antet și textul titlului.

URL-ul butonului 1

Introduceți adresa URL a butonului.

URL-ul butonului 2

Introduceți adresa URL a butonului.

Adresa URL a imaginii logo-ului

Încărcați imaginea dorită sau tastați adresa URL a imaginii pe care doriți să o vizualizați.

Adresa URL a imaginii antetului

Încărcați imaginea dorită sau tastați adresa URL a imaginii pe care doriți să o vizualizați.

Adresa URL de fundal

Dacă este setată, această imagine va fi folosită ca fundal pentru acest modul. Pentru a elimina o imagine de fundal, trebuie doar să eliminați adresa URL din câmpul de setări. Imaginile de fundal vor apărea deasupra culorilor de fundal, ceea ce înseamnă că culoarea de fundal nu va fi vizibilă atunci când se aplică o imagine de fundal.

Culoarea de fundal

Definiți o culoare de fundal personalizată pentru modulul dvs. sau lăsați necompletat pentru a utiliza culoarea implicită.

Culoarea suprapusă în fundal

Alegeți o culoare de suprapunere a fundalului, care va fi plasată deasupra imaginii de fundal. Imaginile suprapuse semi-transparente pot crea efecte minunate atunci când sunt plasate deasupra imaginilor de fundal.

Eticheta de administrare

Aceasta va schimba eticheta modulului din constructor pentru o identificare ușoară. Când utilizați vizualizarea WireFrame în Visual Builder, aceste etichete apar în blocul de module din interfața Divi Builder.

Opțiuni de proiectare a antetului cu lățime completă

În fila Proiectare, veți găsi toate opțiunile de stilare a modulului, cum ar fi fonturile, culorile, dimensionarea și spațiul. Aceasta este fila pe care o veți utiliza pentru a schimba aspectul modulului dvs. Fiecare modul Divi are o listă lungă de setări de proiectare pe care le puteți utiliza pentru a schimba orice.

Orientare text și siglă

Aceasta controlează modul în care textul dvs. este aliniat în modul.

Faceți un ecran complet

Aici puteți alege dacă antetul este extins la dimensiunea ecranului complet.

Folosiți efectul Parallax

Dacă este activată, imaginile de fundal vor avea o poziție fixă, precum defilarea dvs., creând un efect de paralaxă distractiv.

Metoda Parallax

Definiți metoda, utilizată pentru efectul de paralaxă.

Afișați butonul de derulare în jos

Aici puteți alege dacă este afișat butonul de derulare în jos.

icoană

Alegeți o pictogramă de afișat pentru butonul de derulare în jos.

Derulați pictograma Culoare în jos

În mod implicit, pictograma derulantă moștenește culoarea textului antetului (alb sau gri). Puteți schimba această culoare ajustând culoarea din această opțiune folosind selectorul de culori.

Derulați în jos Dimensiunea pictogramei

Utilizați această setare pentru a mări sau micșora dimensiunea pictogramei de derulare în jos care apare în partea de jos a antetului.

Aliniere verticală a imaginii

Aceasta controlează orientarea imaginii din modul.

Culoarea textului

Aici puteți alege valoarea textului dvs. Dacă lucrați la un fundal întunecat, textul dvs. ar trebui să fie activat. Dacă lucrați cu un fundal deschis, textul dvs. ar trebui să fie întunecat.

Alinierea verticală a textului

Această setare determină alinierea verticală a conținutului dvs. Conținutul dvs. poate fi centrat vertical sau aliniat în partea de jos.

Fonturi de titlu

Puteți modifica fontul textului titlului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului titlului

Aici puteți regla dimensiunea textului din titlu. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului titlului

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului titlului dvs., alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de titlu

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul titlului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de titlu

Înălțimea liniei afectează spațiul dintre fiecare linie a textului titlului dvs. Dacă doriți să măriți spațiul dintre fiecare linie, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Conținutul fontului

Puteți modifica fontul textului conținutului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniat.

Dimensiunea fontului conținutului

Aici puteți regla dimensiunea textului de conținut. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau a introduce direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului de conținut

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului conținutului, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Difuzarea literelor de conținut

Distanța dintre litere afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul conținutului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de conținut

Înălțimea rândului afectează spațiul dintre fiecare rând al textului conținutului Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere situat în dreapta cursorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Subtitlu Font

Puteți modifica fontul textului subtitrării selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, cursive, cu majuscule și cu subliniere.

Dimensiunea fontului subtitrare

Aici puteți regla dimensiunea textului subtitrării. Puteți trage glisorul de raza de acțiune pentru a mări sau micșora dimensiunea textului sau introduceți direct valoarea dimensiunii textului dorit în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Culoarea textului subtitrare

În mod implicit, toate culorile textului din Divi apar în alb sau gri închis. Dacă doriți să modificați culoarea textului subtitrării, alegeți culoarea dorită din selectorul de culori folosind această opțiune.

Spațierea literelor de subtitrare

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul subtitrării, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de introducere acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Înălțimea liniei de subtitrare

Înălțimea liniei afectează spațiul dintre fiecare linie a textului subtitrării. Dacă doriți să măriți spațiul dintre fiecare rând, utilizați glisorul de gamă pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de intrare din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Lățimea maximă a textului

Utilizați această setare pentru a reduce lățimea maximă a textului din modulul antet. De exemplu, o valoare de 50% va asigura că textul nu depășește niciodată 50% din lățimea modulului de antet global.

Utilizați stiluri personalizate pentru buton

Activarea acestei opțiuni afișează diverse setări de personalizare a butoanelor pe care le puteți utiliza pentru a schimba aspectul butonului modulului.

Dimensiunea textului butonului

Această setare poate fi utilizată pentru a mări sau micșora dimensiunea textului din buton. Butonul se adaptează pe măsură ce dimensiunea textului crește și scade.

Culoarea textului butonului

În mod implicit, butoanele adoptă culoarea accentului temei dvs. așa cum este definită în Personalizatorul temei. Această opțiune vă permite să atribuiți o culoare de text personalizată butonului acestui modul. Selectați culoarea personalizată folosind selectorul de culori pentru a schimba culoarea butonului.

Culoarea fundalului butonului

În mod implicit, butoanele au o culoare de fundal transparentă. Acest lucru poate fi modificat selectând culoarea de fundal dorită din selectorul de culori.

Border Width

Toate butoanele Divi au o margine de 2 px în mod implicit. Această margine poate fi mărită sau micșorată folosind această setare. Bordurile pot fi eliminate prin introducerea unei valori 0.

Culoarea frontierei butonului

În mod implicit, marginile butoanelor adoptă culoarea accentului temei dvs. așa cum este definită în Personalizatorul temei. Această opțiune vă permite să atribuiți o culoare de margine personalizată butonului acestui modul. Selectați culoarea personalizată folosind selectorul de culori pentru a schimba culoarea chenarului butonului.

Rază de margine a butonului

Raza chenarului afectează rotunjimea colțurilor butoanelor. În mod implicit, butoanele din Divi au o rază mică de margine care rotunjește colțurile cu 3 pixeli. Puteți reduce această valoare la 0 pentru a crea un buton pătrat sau o puteți crește semnificativ pentru a crea butoane cu margini circulare.

Spațierea literelor de buton

Spațierea literelor afectează spațiul dintre fiecare literă. Dacă doriți să măriți spațiul dintre fiecare literă din textul butonului, utilizați glisorul de interval pentru a regla spațiul sau introduceți dimensiunea de spațiu dorită în câmpul de introducere din dreapta glisorului. Câmpurile de intrare acceptă diferite unități de măsură, ceea ce înseamnă că puteți introduce „px” sau „em” în funcție de valoarea mărimii dvs. pentru a-i schimba tipul de unitate.

Button Font

Puteți modifica fontul textului butonului selectând fontul dorit din meniul derulant. Divi vine cu zeci de fonturi grozave alimentate de Google Fonts. În mod implicit, Divi folosește fontul Open Sans pentru tot textul de pe pagina dvs. De asemenea, puteți personaliza stilul textului dvs. folosind opțiuni aldine, italice, cu majuscule și cu subliniere.

Adăugați o pictogramă de buton

Dezactivată, această setare va elimina pictogramele din buton. În mod implicit, toate butoanele Divi afișează o pictogramă săgeată pe hover.

Pictograma butonului

Dacă pictogramele sunt activate, puteți utiliza această setare pentru a alege ce pictogramă să utilizați în butonul dvs. Divi are diferite pictograme pentru a alege.

Buton pictogramă culoare

Ajustarea acestei setări va schimba culoarea pictogramei care apare pe butonul dvs. În mod implicit, culoarea pictogramei este aceeași cu culoarea textului butonului dvs., dar această setare vă permite să reglați culoarea independent.

Butonul de plasare a butonului

Puteți alege să afișați pictograma butonului dvs. la stânga sau la dreapta butonului dvs.

Afișați pictograma numai când treceți cu mouse-ul peste buton

În mod implicit, pictogramele butoanelor sunt afișate numai atunci când se deplasează. Dacă doriți ca pictograma să apară întotdeauna, dezactivați această setare.

Buton Culoare text hover

Când butonul este plasat peste mouse-ul unui vizitator, această culoare va fi utilizată. Culoarea se va schimba față de culoarea de bază definită în setările anterioare.

Culoarea fundalului butonului mouse-ului (culoarea butonului de hover)

Când butonul este plasat peste mouse-ul unui vizitator, această culoare va fi utilizată. Culoarea se va schimba față de culoarea de bază definită în setările anterioare.

Butonul de orientare a butonului frontal (culoarea de margine a hoverului)

Când butonul este plasat peste mouse-ul unui vizitator, această culoare va fi utilizată. Culoarea se va schimba față de culoarea de bază definită în setările anterioare.

Cu butonul de radar frontal

Când butonul este plasat pe mouse-ul unui vizitator, această valoare va fi utilizată. Valoarea se va modifica de la valoarea de bază definită în setările anterioare.

Indicație pentru distanța dintre note

Când butonul este plasat pe mouse-ul unui vizitator, această valoare va fi utilizată. Valoarea se va modifica de la valoarea de bază definită în setările anterioare.

Opțiuni avansate de antet cu lățime completă

În fila avansată, veți găsi opțiuni pe care designerii web mai experimentați le-ar putea găsi utile, cum ar fi atributele CSS și HTML personalizate. Aici puteți aplica CSS personalizat oricăruia dintre numeroasele elemente ale modulului. De asemenea, puteți aplica clase și ID-uri CSS personalizate modulului, care pot fi utilizate pentru a personaliza modulul în fișierul style.css al temei copilului dvs.

Cod CSS

Introduceți un ID CSS opțional de utilizat pentru acest modul. Un ID poate fi folosit pentru a crea un stil CSS personalizat sau pentru a crea legături către anumite secțiuni ale paginii dvs.

CSS

Introduceți clasele CSS opționale de utilizat pentru acest modul. O clasă CSS poate fi utilizată pentru a crea stiluri CSS personalizate. Puteți adăuga mai multe clase, separate printr-un spațiu. Aceste clase pot fi folosite în tema copilului Divi sau în foaia de stil CSS personalizată pe care o adăugați la pagina sau site-ul dvs. site-ul web folosind opțiunile temei Divi sau setările paginii Divi Builder.

CSS personalizate

CSS personalizat poate fi, de asemenea, aplicat modulului și oricărui intern al modulului. În secțiunea CSS personalizată, veți găsi un câmp de text în care puteți adăuga foi de stil CSS personalizate direct la fiecare element. Intrările CSS din aceste setări sunt deja înfășurate în etichetele de stil. Deci, introduceți regulile CSS separate prin punct și virgulă.

vizibilitate

Această opțiune vă permite să controlați dispozitivele pe care apare modulul dvs. Puteți alege să vă dezactivați modulul individual pe tablete, smartphone-uri sau desktop-uri. Acest lucru este util dacă doriți să utilizați moduri diferite pe diferite dispozitive sau dacă doriți să simplificați designul mobil prin eliminarea anumitor elemente de pe pagină.

[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