Doriți să utilizați măștile și modelele pentru secțiunea Hero în Divi ?
Noile măști și modele de fundal ale lui Divi sunt una dintre cele mai interesante noi caracteristici de design de până acum. Fiecare dintre măști și modele poate fi combinată cu alte elemente de fundal (cum ar fi culori, imagini și degrade) pentru nenumărate combinații unice cu doar câteva clicuri.
Astăzi vă vom arăta cum să utilizați Divi și noile sale măști și modele de fundal pentru a proiecta o secțiune de erou.
În acest tutorial, vom acoperi pașii importanți necesari pentru a crea măști și modele de fundal.
Vom arăta chiar și cum să poziționăm imaginile de fundal pentru a se potrivi cu un design de mască. Acest lucru ar trebui să vă ofere OUTILS trebuie să creezi secțiunea Hero perfectă pentru site-ul tău în câteva minute.
studiu
Iată o privire rapidă asupra designului pe care îl vom crea în acest tutorial.
Citiți și: Divi: Cum să creați o grilă de imagine receptivă cu link-uri și efecte de trecere
Exemplu de secțiune din Hero cu o mască și un model alb.
Iată o versiune întunecată a aceleiași secțiuni Hero cu o mască și un model negru.
Cu acest design la locul lui, puteți schimba cu ușurință măștile și pozițiile măștii cu doar câteva clicuri!
Creați o pagină nouă cu Divi Builder
Din tabloul de bord WordPress, accesați Pagini> Adăugare nouă pentru a crea o pagină nouă.
Dați-i un titlu care să aibă sens pentru dvs. și faceți clic Utilizare Divi Constructor
Apoi faceți clic pe Începeți să construiți (Construiește de la zero)
După aceea, veți avea o pânză goală pentru a începe să proiectați Divi.
Cum să utilizați măștile Divi și modelele de fundal în secțiunea Eroilor dvs
1. Creați structura aspectului
Pentru această secțiune de eroi, vom avea o structură clasică de aspect cu titlul și îndemnul în stânga și o imagine (sau design vizual) în dreapta.
Pentru acest exemplu, designul nostru vizual va fi creat folosind opțiunile de fundal ale Divi. Dar înainte de a ajunge la esențial, trebuie să creăm un rând cu două coloane pentru a economisi spațiu în partea dreaptă a paginii pentru a prezenta măștile de fundal ale secțiunii și designul modelului.
2. Adăugați titlul și îndemnul
În coloana din stânga (coloana 1), adăugați un modul Text pentru titlul dvs. principal, un modul Text pentru textul subtitrării și un modul Buton pentru butonul dvs.
3. Adăugați spațiere verticală la secțiune
Pentru ca designul nostru de fundal să pară înalt și frumos, trebuie să adăugăm înălțime verticală secțiunii. O modalitate simplă de a face acest lucru este să adăugați umplutură în partea de sus și de jos a secțiunii. Rețineți că trebuie să ajustăm umplutura de pe ecranul tabletei și telefonului pentru a face loc designului nostru de fundal odată ce coloanele sunt stivuite vertical.
Deschideți setările secțiunii. Sub fila Design, actualizați umplutura după cum urmează:
- Captuseala:
- Desktop: 20vw de sus, 20vw de jos
- Tabletă: 8vw de sus, 48vw de jos
- Telefon: 8vw de sus, 70vw de jos
4. Adăugați imagine de fundal și gradient
Apoi, putem adăuga o imagine de fundal și un gradient la secțiune. Rețineți că punctul focal principal al imaginii de fundal va fi dezvăluit în partea dreaptă a secțiunii, așa că utilizați o imagine care are ceea ce doriți să vedeți în partea dreaptă.
Pentru acest exemplu, folosim o imagine cu orizontul unui oraș. Partea dreaptă a imaginii are clădiri mai apropiate și mai bine aspectate, așa că funcționează foarte bine.
Sub filă Imagine de fundal, încărcați imaginea în fundalul secțiunii.
În Divi, puteți adăuga cu ușurință un gradient de culoare pe imaginea de fundal. Sub fila Gradient de fundal, adăugați următorul gradient pe fundalul secțiunii:
- Opriri de gradient:
- 0%: #3e22ff
- 100%: clar
- Gradient pătrat deasupra imaginii de fundal: DA
5. Creați un model de fundal pentru secțiune
Acum că avem gata imaginea de fundal și gradientul, putem adăuga un model de fundal pentru a finaliza designul.
În acest exemplu, vom folosi un model subtil care adaugă doar un pic de textură pentru a-i oferi un aspect mai unic.
Sub filă Modele de fundal, actualizați următoarele:
- Model de fundal: tufted
TRUC: Cu modele de fundal, de obicei este mai bine să le păstrați subtil. Încercați să utilizați dimensiuni personalizate pentru modele mai mici, apoi reduceți opacitatea culorii.
6. Creați o mască de fundal pentru secțiune
Cu modelul nostru de fundal la loc, suntem în sfârșit gata să testăm o mască de fundal nou-nouță pentru designul nostru. Există o mulțime de opțiuni și variații din care să alegeți. Pentru acest exemplu, vom folosi masca de tip fagure.
Sub filă Mască de fundal, actualizați următoarele:
- Mască: Fagure
- Culoarea măștii: #ffffff
- Dimensiune: Coperta
7. Reglați poziția imaginii de fundal
Deoarece folosim o mască de fundal, o parte din imaginea noastră de fundal este mascată (sau „mascata”).
În acest exemplu, ne vom asigura că partea din dreapta jos a imaginii este cea mai vizibilă și o vom muta puțin spre dreapta pentru a afișa mai multe clădiri.
Sub fila Imagine, actualizați următoarele:
- Poziția imaginii de fundal: dreapta jos
- Imagine de fundal Offset orizontal: -4vw
8. Utilizați un mod de amestecare
O modalitate de a deveni creativ cu toate aceste elemente de fundal este să adăugați un mod de amestecare. Modurile de amestecare pot fi adăugate la oricare dintre opțiunile de fundal și pot fi folosite pentru a amesteca mai multe straturi de fundal (imagine, gradient, mască etc.) în moduri creative.
Pentru acest exemplu, vom amesteca imaginea de fundal cu culoarea gradientului. Pentru a face acest lucru, faceți clic pe fila Imagine de fundal și adăugați un mod de amestecare pentru a amesteca culoarea gradientului cu imaginea de fundal, după cum urmează:
- Amestecare imagine de fundal: Înmulțire
9. Reglați masca de fundal pentru mobil
Este important să vă asigurați că designul măștii de fundal arată grozav și pe dispozitivele mobile. Din fericire, opțiunile încorporate facilitează acest proces.
Amintiți-vă că am adăugat deja umplutura suplimentară pe tabletă și telefon pentru a face loc designului nostru de fundal.
Acum tot ce trebuie să facem este să folosim opțiunile de transformare a fundalului și raportul de aspect pentru a ajusta masca pentru mobil.
Sub filă Mască de fundal, activați opțiunile de răspuns și actualizați următoarele:
Versiune pentru tabletă
- Transformarea măștii: Întoarce verticală, Întoarce orizontală, Rotire
- Raport de aspect al măștii: pătrat
Versiunea de telefon
- Transformarea măștii: Întoarce verticală, Întoarce orizontală, Rotire
- Raport de aspect al măștii: Portret
Rezultatul
Consultați designul pe care l-am creat până acum.
Calculator desktop
Versiunea tabletei
Ediția Telefon
10. Creați o versiune întunecată
Dacă doriți o versiune întunecată a acestui design, schimbați culoarea măștii de fundal într-o culoare închisă (cum ar fi negru).
Apoi schimbați culoarea modelului în negru.
Apoi schimbați titlul și textul subtitrării în alb. Și poate doriți să actualizați și culoarea butonului.
Așa arată versiunea întunecată.
Rezultate finale
Vezi si: Divi: Cum să personalizați linkul „Citește mai mult” al unui blog
Iată o altă privire asupra rezultatelor noastre finale.
Descărcați DIVI acum!!!
Concluzie
Creați o secțiune Erou pentru dvs site-ul web este foarte distractiv cu măști și modele de fundal de Divi. Opțiunile de fundal sunt ușor de schimbat pentru a obține designul perfect. Și există o mulțime de alte opțiuni pe care le puteți folosi (cum ar fi modurile de amestecare) pentru a crea fundaluri și mai unice.
În plus, puteți adăuga măști și modele la orice element Divi, nu doar secțiuni. Așa că distrează-te experimentând!
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.
...
