Doriți să combinați măștile de fundal și separatorul de Divi sa ai fundaluri sublime si unice?
Combinația de măști 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.
Pe lângă opțiunile de fundal, separatoarele de secțiuni permit utilizatorilor să-și îmbunătățească designul de fundal.
În acest tutorial, vă vom arăta cum să combinați măștile de fundal cu separatoare de secțiuni Divi. Vă vom oferi instrucțiuni pas cu pas despre cum să realizați un design de fundal pentru o secțiune Divi folosind această tehnică.
În plus, vom explica chiar și cum să creați modele alternative cu doar câteva modificări simple.
Să începem!
studiu
Iată o previzualizare a desenelor din acest tutorial.
Conceptul
Conceptul de bază al acestui 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 creativ forma măștii.
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 Utilizați Divi Builder
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 proiectarea în Divi.
Combinați măști de fundal și separatoare în Divi
Adăugați dimensiunea secțiunii și spațierea
Pentru început, vom adăuga dimensiunea și spațierea la secțiunea existentă în constructor. Vom suspenda adăugarea unei linii sau a tuturor cuprins astfel încât să ne putem concentra pe proiectarea fundalului secțiunii.
Deschideți setările secțiunii. Sub fila Amenajări, actualizați dimensiunea și spațierea după cum urmează:
- Înălțime minimă: 50 vw
- Umplutură (sus și jos): 0px
Creați gradientul de fundal
Odată ce secțiunea are o anumită înălțime, suntem gata să adăugăm gradientul de fundal la secțiune.
Sub filă Conţinut, faceți clic pe fila Gradient de fundal sub opțiunile de fundal. Apoi adăugați un gradient după cum urmează:
- Se oprește gradient
- 20%: #1a2a6c
- 60%: #b21f1f
- 100%: #fdbb2d
Creați masca de fundal
Acum că avem un gradient de culoare, suntem gata să creăm o mască de fundal.
Sub filă Mască de fundal, actualizați următoarele:
- Mască: Herringbone
- Culoarea măștii: #000000
- Transformare: inversată
- Mask Aspect Ratio: vezi captura de ecran
Adăugați separatori de secțiuni (separatori)
Cu masca pe loc, putem modifica în continuare forma măștii folosind separatoare de secțiuni.
În acest exemplu, vom adăuga un separator de secțiune semicerc în partea de sus și de jos. Acest lucru va comprima 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 Amenajări și adăugați următorii separatori:
Mai întâi, adăugați un separator superior sub filă Top.
- Stil separator: vezi captura de ecran
- Culoare: #000
- Înălțimea separatorului: 10 vw
Apoi, adăugați un separator inferior sub filă De jos.
- Stil separator: vezi captura de ecran
- Culoare: #000
- Înălțimea separatorului: 10 vw
- Divider Flip: Flip vertical
Rezultatul
Iată rezultatul de până acum.
Ajustați opțiunile de fundal și separatoarele pentru mai mult design
Acum că aveți ideea de bază, ne putem juca cu ușurință cu separatoarele de secțiuni pentru a crea mai multe modele.
Vezi si: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile
Design alternativ #1
Pentru primul nostru design alternativ, vom roti masca de fundal existentă. În continuare vom înlocui separatoarele de secțiune semicirculară 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:
- Mask Transform: inversare verticală, rotație
- Mask Aspect Ratio: vezi captura de ecran
Apoi, actualizați separatorii de secțiuni după cum urmează:
Despărțitor superior
- Stil separator: vezi captura de ecran
- Înălțimea separatorului: 13 vw
Despărțitor de jos
- Stil separator: vezi captura de ecran
- Înălțime: 13 vw
- Flip divizor: dezactivați
Rezultatul
Iată rezultatul.
Design alternativ #2
Pentru al doilea și ultimul nostru design alternativ, vom înlocui masca chevrons de mască Bare diagonale 2 și, de asemenea, oferiți-i un nou separator de secțiune superioară.
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
- Mask Transform: flip orizontal
- Raport de aspect: vezi captura de ecran
Apoi, actualizați separatorii de secțiuni după cum urmează:
Despărțitor superior
- Stil separator: vezi captura de ecran
- Divider Flip: Flip orizontal
Despărțitor de jos
- Stil separator: niciunul
Rezultatul
Iată rezultatul.
Rezultate finale
Pentru a vă oferi o idee mai bună despre cum vor arăta aceste fundaluri cuprins, am adăugat un rând la o coloană cu un titlu.
Citiți și: Divi: Cum se creează o mască de fundal lipicioasă
Descărcați DIVI acum!!!
Concluzie
Combinarea măștilor și a divizoarelor de secțiuni pentru modelele de fundal deschide mai multe posibilități de a crea forme unice pentru aceste măști încorporate.
Simțiți-vă liber să explorați diferite combinații pe cont propriu.
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.
Nu ezitați să consultați și ghidul nostru despre 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.
...
