Doriți să afișați modulul Divi Fullwidth Header pe ecran complet?
Antetele pe ecran complet ocupă întregul ecran, indiferent de dimensiunea ecranului vizitator. Acest lucru este excelent pentru a atrage atenția utilizatorilor. Din fericire, este ușor să creezi un antet pe ecran complet cu modulul Antet cu lățime completă a lui Divi.
În acest articol, vă vom arăta cum să creați un antet cu lățime completă, să îl personalizați și să îl afișați pe ecran complet. Puteți folosi această abordare pentru a crea orice secțiune de eroi pe ecran complet pentru paginile dvs.
Să începem.
studiu
Să vedem o previzualizare a ceea ce vom proiecta în acest tutorial.
Birou
tabletă
Telefon
Cum să faceți antetul dvs. Divi Fullwidth un antet pe ecran complet
Începeți prin a adăuga o secțiune cu lățime completă la pagina la care lucrați.
Apoi adăugați a Modul Header cu lățime completă la secțiunea cu lățime completă.
Se deschid setările modulului. Selectați fila Amenajări. Activați opțiunea numită Faceți ecran complet
Acum avem un antet pe ecran complet. E la fel de simplu.
Activați pictograma de defilare
De asemenea, putem adăuga un buton care îi spune utilizatorului să deruleze în jos. Cu toate acestea, trebuie să-l activăm. Acest buton este întotdeauna vizibil în opțiunea ecran complet. Opțiunea antet ecran complet se potrivește întotdeauna cu înălțimea ecranului vizitator.
- Afișați butonul de derulare în jos: DA
Exemplu de antet Divi Fullwidth Fullscreen
Parametrii modulului antet cu lățime completă
Iată pașii pentru fiecare secțiune a setărilor modulului Fullwidth Header.
Citiți și: Divi: Cum să combinați măștile de fundal și separatoarele
Text
Toate mai întâi, adăugați textul care va fi vizibil în antetul cu lățime completă. Aceasta include titlul, subtitrarea, cuprins și textul butonului.
- Titlu: Creați blogul tău cu Divi
- Subtitrare: Blogpascher
- Burron #1: Rezumat
- Butonul #2: Programează
- Corp: (implicit)
imagini
atunci adauga poza. Aceasta se afișează în partea dreaptă a antetului pe toată lățimea, deplasând textul la stânga.
- Imagine antet: alegerea dvs
fundal
Derulați până la Context și setați culoarea la #f6f5ee.
- Culoare de fundal: #f6f5ee
Dispoziţie
Apoi, navigați la fila Design.
- Faceți ecran complet: DA
Pictograma derulează în jos
- Afișați butonul de derulare în jos: DA
- Culoare pictogramă derulați în jos: #000000 (desktop și tabletă), #ffffff (telefon)
- Dimensiunea pictogramei derulați în jos: 70px (desktop), 60px (tabletă), 50px (telefon)
Textul titlului
În continuare vom ajusta textul titlului.
- Nivel de titlu: H1
- Font: Inter
- Greutatea fontului: aldine
- Alinierea textului: Centru
- Culoare text: #000000
- Dimensiunea textului titlului: 75px (desktop), 40px (tabletă), 24px (telefon)
- Înălțimea liniei de titlu: 1.2 em
Text de descriere
Apoi derulați în jos la Corpul textului.
- Font: Open Sans
- Aliniere: Stânga
- Culoare: #000000
- Dimensiunea textului: 16px (desktop), 15px (tabletă), 14px (telefon)
- Înălțimea liniei: 1.8 em
subtitlu
Apoi derulați în jos la Subtitrare text.
- Font: Inter
- Greutatea fontului: aldine
- Stil: TT
- Aliniere: Centru
- Culoare: #ff5a17
- Dimensiune: 14px
- Spațiere între litere: 1px
- Înălțimea liniei: 1.8 em
Butonul #1
Apoi derulați în jos la Butonul Unu.
- Utilizați stiluri personalizate pentru buton: DA
- Dimensiunea textului: 20px (desktop), 18px (tabletă), 16px (telefon)
- Culoare text: #000000
- Culoare de fundal: #ffffff
- Lățimea chenarului: 0px
- Raza chenarului: 0px
- Font: Inter
- Greutatea fontului: aldine
- Pictogramă: alegerea dvs
- Culoare pictogramă: #000000
- Plasare: Corect
- Afișați doar pictograma la trecerea cursorului pentru butonul unu: NU
În cele din urmă, derulați în jos la opțiuni Buton One Umplutură.
- Captuseala:
- Desktop: 20px (sus și jos), 40px (stânga și dreapta)
- Tabletă: 16 px (sus și jos), 40 px (stânga și dreapta)
- Telefon: 12 px (sus și jos), 40 px (stânga și dreapta)
Butonul #2
În cele din urmă, derulați în jos la Butonul doi.
- Utilizați stiluri personalizate pentru butonul doi: da
- Dimensiune text: 20px (desktop), 18px (tabletă), 16px (telefon)
- Culoare text: #ffffff
- Culoare de fundal: #ff5a17
- Lățimea chenarului: 0 px
- Raza chenarului: 0px
- Font: Inter
- Greutatea fontului: aldine
Alegeți pictograma preferată.
- Pictogramă: alegerea dvs
- Culoare pictogramă: #000000
- Plasare: stânga
- Afișați doar pictograma la trecerea cursorului pentru butonul doi: NU
În cele din urmă, derulați în jos la opțiuni Buton doi umplutură.
- Captuseala:
- Desktop: 20px (sus și jos), 40px (stânga și dreapta)
- Tabletă: 16 px (sus și jos), 40 px (stânga și dreapta)
- Telefon: 12 px (sus și jos), 40 px (stânga și dreapta)
Rezultate finale
Așa arată antetul nostru pe lățime completă pe desktop-uri, tablete și telefoane.
De asemenea, puteți consulta: Divi: Cum să utilizați efectele de umbră și hover pentru a crea conținut interactiv
Birou
tabletă
Telefon
Descărcați DIVI acum!!!
Concluzie
Iată privirea noastră despre cum să creați un antet cu lățime completă cu modulul dvs. Divi Fullwidth Header.
Procesul este simplu și arată grozav pe orice dispozitiv. Adăugarea butonului Derulați în jos este o imagine excelentă care le spune utilizatorilor că pot derula.
Proiectarea unui antet pe ecran complet este similară cu proiectarea unei secțiuni Hero. Urmând câteva îndrumări simple vă poate ajuta să creați anteturi uimitoare pe ecran complet cu modulul Divi Fullwidth Header.
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.
...
