Cum să combinați măștile de fundal cu separatoarele de secțiuni în Divi

Combinarea măștilor de fundal cu separatoare de secțiuni în Divi adaugă un alt strat de creativitate unui arsenal deja puternic de opțiuni de design de fundal. Dacă nu ați avut prea multă experiență cu opțiunile de fundal ale Divi, cu siguranță ratați. O opțiune convenabilă, dar puternică, vă oferă posibilitatea de a adăuga o mască de fundal gradientului (sau imaginii) de fundal în doar câteva clicuri. Pe lângă opțiunile de fundal, separatoarele de secțiuni oferă utilizatorilor și posibilitatea de a-și îmbunătăți designul de fundal.

În acest tutorial, vă vom arăta cum să combinați măștile de fundal cu divizoare de secțiuni în Divi. Vă vom oferi instrucțiuni pas cu pas despre cum să finalizați un design de fundal pentru o secțiune Divi folosind această tehnică. În plus, vom aborda chiar și cum să creați câteva modele alternative cu doar câteva modificări simple.

Bucurați-vă!

Trage cu ochiul

Iată o privire rapidă asupra modelelor din acest tutorial.

Conceptul

Conceptul de bază pentru acest tutorial este de a combina o mască de fundal și divizoare de secțiune pentru a crea forme de mască și mai unice.

Mai întâi, adăugăm o mască de fundal.

Apoi adăugăm separatoare de secțiuni pentru a completa forma măștii într-un mod creativ.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe modelele din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. A dobândi
acces la descărcare va trebui să vă abonați la lista noastră de e-mail Divi Daily utilizând formularul de mai jos. Ca nou
abonat, vei primi și mai multă bunătate Divi și un pachet Divi Layout gratuit în fiecare luni! Dacă ești deja pe
listă, pur și simplu introduceți adresa dvs. de e-mail mai jos și faceți clic pe descărcare. Nu veți fi „reabonat” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Alăturați-vă buletinului informativ Divi și vă vom trimite prin e-mail o copie a pachetului Divi Landing Page Layout, plus o mulțime de alte resurse, sfaturi și trucuri Divi uimitoare și gratuite. Urmăriți și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți adresa de e-mail mai jos și faceți clic pe descărcare pentru a accesa pachetul de layout.

DESCARCA

Te-ai abonat cu succes. Vă rugăm să vă verificați adresa de e-mail pentru a vă confirma abonamentul și pentru a obține acces la pachetele de layout Divi săptămânale gratuite!

Pentru a importa aspectul secțiunii în biblioteca Divi, procedați în felul următor:

1. Navigați la Biblioteca Divi.
2. Faceți clic pe butonul Import din partea de sus a paginii.
3. În fereastra pop-up de portabilitate, selectați fila de import
4. Alegeți fișierul descărcat de pe computer (asigurați-vă că dezarhivați mai întâi fișierul și utilizați fișierul JSON).
5. Apoi faceți clic pe butonul de import.

Odată terminat, aspectul secțiunii va fi disponibil în Divi Builder.

Să trecem la tutorial, da?

De ce aveți nevoie pentru a începe

Pentru a începe, va trebui să faceți următoarele:

1. Dacă nu ați făcut-o încă, instalați și activați Tema Divi.
2. Creați o pagină nouă în WordPress și utilizați Divi Builder pentru a edita pagina pe front-end (generator vizual).
3. Alegeți opțiunea „Construiți de la zero”.
4. Acum aveți o pânză goală pentru a începe să proiectați în Divi!

Cum să combinați măștile de fundal și divizoarele în Divi

1. Adăugați dimensiunea secțiunii și spațiere

Pentru a începe lucrurile, vom adăuga dimensiune și spațiere la secțiunea existentă în constructor. Vom amâna adăugarea unui rând sau a oricărui conținut, astfel încât să ne putem concentra asupra designului de fundal al secțiunii

Deschideți setările pentru secțiune. Sub fila Design, actualizați dimensiunea și spațierea după cum urmează:

• Înălțime minimă: 50 vw
• Umplutură: 0px sus, 0px jos

Utilizarea unității de lungime VW pentru înălțime poate părea ciudată. Cu toate acestea, deoarece vom folosi unitatea de lungime VW pentru a dimensiona elementele noastre de fundal, acest lucru se va asigura că designul se scalează fluid pe diferite lățimi ale browserului.

2. Creați gradientul de fundal

Odată ce secțiunea are o înălțime, suntem gata să adăugăm gradientul de fundal la secțiune. Acest lucru ne va oferi o culoare de fundal, astfel încât să putem prezenta mai târziu masca de fundal și combo de divizor.

Sub fila Conținut, faceți clic pe fila gradient de fundal sub opțiunile de fundal. Apoi adăugați un gradient după cum urmează:

• Color Stop 1: #1a2a6c (la 20%)
• Color Stop 2: #b21f1f (la 60%)
• Color Stop 2: #fdbb2d (la 100%)

3. Creați masca de fundal

Acum că avem un gradient de culoare, suntem gata să creăm o mască de fundal.

Sub fila Mască de fundal, actualizați următoarele:

• Mască: chevrons
• Culoare masca: #000
• Transformarea măștii: inversată
• Raport de aspect al măștii: vezi captura de ecran

4. Adăugați secțiunile de separare de fundal

Odată ce masca noastră este la locul său, putem modifica în continuare forma de mascare utilizând separatoare de secțiune. În acest exemplu, vom adăuga un separator de secțiune semicerc în partea de sus și de jos. Acest lucru va strânge masca de fundal pentru a arăta mai mult ca un design de săgeată fantezist.

Pentru a face acest lucru, faceți clic pe fila Design și adăugați următoarele Divizor:

Mai întâi, adăugați un separator superior sub fila Top.

• Stil divizor: vezi captura de ecran
• Culoare separator: #000
• Înălțimea separatorului: 10vw

Apoi, adăugați un separator inferior sub fila Inferioară.

• Stil divizor: vezi captura de ecran
• Culoare separator: #000
• Înălțimea separatorului: 10vw
• Divider Flip: Flip vertical

Rezultatul

Iată rezultatul de până acum.

Modificarea opțiunilor de fundal și a divizoarelor pentru mai multe modele

Acum că aveți ideea de bază la locul lor, ne putem juca cu ușurință cu separatoarele de secțiuni cu opțiuni de fundal pentru a crea mai multe modele.

Design alternativ #1

Pentru primul nostru design alternativ, vom roti masca de fundal existentă și vom înlocui separatoarele de secțiune în jumătate de cerc cu triunghiuri.

Pentru a face acest lucru, deschideți setările secțiunii existente, faceți clic pe fila Mască de fundal și actualizați următoarele:

• Transformare mască: Întoarcere verticală, rotire
• Raport de aspect al măștii: vezi captura de ecran

Apoi, actualizați divizoarele de secțiuni după cum urmează:

Top Divider

• Stil divizor: vezi captura de ecran
• Înălțimea separatorului: 13vw

Divizor de jos

• Stil divizor: vezi captura de ecran
• Înălțimea separatorului: 13vw
• Divider Flip: dezactivați

Rezultatul

Iată rezultatul.

Design alternativ #2

Pentru al doilea și ultimul nostru design alternativ, vom înlocui Masca Chevrons cu Masca Diagonal Bars 2 și, de asemenea, îi vom oferi un nou separator de secțiune superioară pentru a adăuga un efect de swooshing subtil designului.

Pentru a face acest lucru, deschideți setările secțiunii existente, faceți clic pe fila Mască de fundal și actualizați următoarele:

• Mască: bare diagonale 2
• Transformarea măștii: Flip orizontal
• Raport de aspect al măștii: vezi captura de ecran

Apoi, actualizați divizoarele de secțiuni după cum urmează:

Top Divider

• Stil divizor: vezi captura de ecran
• Divider Flip: Flip orizontal

Divizor de jos

• Stil separator: niciunul

Rezultatul

Iată rezultatul.

Rezultate finale

Pentru a vă face o idee mai bună despre cum vor arăta aceste fundaluri cu un anumit conținut, am adăugat un rând cu o singură coloană cu un titlu mare poziționat în centrul secțiunii. Am adăugat și un design suplimentar pentru fiecare care include o imagine cu un mod de amestecare.

Verifică-i!

Pentru a explora setările utilizate pentru conținut și imagini, nu ezitați să descărcați aspectul gratuit pentru acest tutorial (vezi mai sus), care include fiecare dintre modele.

Gânduri finale

Combinarea măștilor și a divizoarelor de secțiuni pentru modelele de fundal deschide mai multe posibilități de a crea forme unice pentru acele măști încorporate. Simțiți-vă liber să explorați diferite combinații pe cont propriu. Sperăm că acest lucru va fi util pentru propriul dvs. site web sau pentru următorul dvs. proiect.

Aștept cu nerăbdare vești de la tine în comentarii.

Noroc!