Doriți să creați tranziții de fundal între elemente Divi ?
Creați tranziții fără întreruperi de design de fundal între elemente Divi este o modalitate excelentă de a îmbunătăți designul dvs site-ul web Divi.
Acest lucru vă permite să tranziți fără probleme un gradient, un model și o mască de fundal între o linie și o secțiune într-un mod creativ.
De exemplu, puteți avea un model sau o tranziție de mască în diferite culori fără a pierde alinierea generală și aspectul simetric al designului.
În acest tutorial, vom folosi opțiunile de design de fundal încorporate ale Divi pentru a crea o tranziție fără întreruperi de design de fundal între o secțiune Divi și o linie. Aplicația și versatilitatea acestui design sunt nelimitate, ducând opțiunile de design de fundal ale Divi la un nivel cu totul nou!
Să începem.
studiu
Iată o privire rapidă asupra designului pe care îl vom construi în acest tutorial.
Iată câteva exemple de modele care sunt posibile cu doar câteva modificări simple ale măștilor și modelelor de fundal.
Creați o pagină nouă cu Divi Builder
Pentru a începe, va trebui să faceți următoarele:
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.
Crearea unei tranziții fără întreruperi în fundal între o secțiune Divi și o linie
Crearea unui antet ca conținut substituent
Citiți și: Divi: Cum să creați file cu efect de hover din linii
Înainte de a intra, trebuie să adăugăm un antet ca cuprins fictiv. Pentru a începe, adăugați un rând cu o singură coloană la secțiunea implicită a paginii.
Apoi adăugați un modul Text la linie.
Adăugați text cu dimensiunea H1.
Sub filă Amenajări, actualizați designul textului antetului după cum doriți.
- Font: Roboto Condensed
- Greutatea fontului: aldine
- Stil: TT
- Alinierea textului: centrat
- Culoare text: #000000
- Dimensiunea textului titlului: 4vw
- Spațiere între litere: 0.1 em
- Înălțimea liniei: 1.3 em
Design de fundal al secțiunii
S-a adăugat umplutură la secțiune
Odată ce antetul fals este instalat, deschideți setările secțiunii și actualizați spațierea după cum urmează:
- Căptușeală (sus și jos): 15vw
S-a adăugat gradientul de fundal la secțiune
Acum că avem mai mult spațiu pentru a lucra, suntem gata să adăugăm designul nostru de fundal la secțiune. Sub fila Gradient de fundal, adăugați următoarele puncte de gradient:
- Opriri de gradient:
- 0%: #4f0f75 (la 0%)
- 25%: #2843c9 (la 25%)
- 50%: #4ae2e0 (la 50%)
- 75%: #3881ff (la 75%)
- 100%: #4f0f75 (la 100%)
Adăugarea unui model de fundal la secțiune
Sub filă Model de fundal, actualizați următoarele:
- Model: dungi diagonale
- Culoare model: rgba(79,15,117,0.23)
- Transformare: Rotire
- Dimensiune model: Dimensiune personalizată
- Latime: 7vw
- Înălțime: 5vw
- Repetare model Origine: Centru
Notă: Asigurați-vă că utilizați unitatea de lungime VW pentru lățimea și înălțimea modelului. Și, de asemenea, asigurați-vă că setați originea repetată la „centru”. Acest lucru va păstra modelul de fundal în același loc cu modelul de fundal pe care îl vom adăuga la rând mai târziu.
Adăugarea unei măști de fundal la secțiune
Sub filă Mască de fundal, adăugați următoarele:
- Mască de fundal: strat blob
- Culoare masca: rgba(0,0,0,0.7)
- Lățimea măștii: 100vw
- Poziție: Centru
Notă: La fel ca în cazul modelului, trebuie să dimensionăm masca folosind unitatea de lungime VW. De asemenea, trebuie să dăm măștii o poziție centrală.
Design de fundal de linie
Copiați și inserați fundalul secțiunii pe fundalul rândului
Pentru a accelera procesul de proiectare a fundalului liniei, copiați setările de fundal ale secțiunii.
Apoi lipiți fundalul pe linia existentă.
În acest moment, puteți vedea deja cum modelul de fundal și masca de pe linie fac o tranziție perfectă la fundalul secțiunii.
Se pare că linia are un fundal transparent, dar este de fapt același model și mască folosite în secțiune cu aceeași dimensiune și poziție.
Reglați dimensiunea rândului și umplutura folosind VW
În continuare, trebuie să oferim rândului nostru o lățime personalizată folosind unitatea de lungime VW. Actualizați următoarele:
- Latime: 75vw
- Latime maxima: 75 vw
- Căptușeală (sus, jos, stânga și dreapta): 10vw
Ajustați opririle de gradient pe linie
Apoi, trebuie să ajustam opririle de gradient pe fundalul liniei pentru o tranziție fără întreruperi în gradientul de fundal al secțiunii.
Sub filă Gradient de fundal, vom păstra cele trei puncte de gradient de mijloc moștenite din fundalul secțiunii) și vom elimina primul și ultimul oprire de gradient.
Apoi setați prima oprire la 0% și a treia oprire la 100%. Odată terminat, ar trebui să aveți următoarele degrade.
- Se oprește gradient
- 0%: #2843c9
- 50%: #4ae2e0
- 100%: #3881ff
Adăugați umbra casetei la linie
Pentru a da un pic de lifting designului și pentru a sublinia tranziția fără întreruperi a fundalului, putem adăuga o umbră de casetă la rând.
- Box Shadow: vezi captura de ecran
- Poziție verticală: 0px
- Intensitatea estomparii umbrei casetei: 4vw
- Culoare umbră: rgba(0,0,0,0.5)
Ajustați culoarea modelului de fundal al liniilor
Acum că avem toate elementele de fundal la locul lor, putem începe să reglam culorile pentru un design mai creativ.
Sub opțiune Model de fundal rând, actualizați următoarele:
- Culoare model: rgba(255,255,255,0.23)
Ajustați culoarea maștii de fundal a liniilor
De asemenea, putem actualiza culoarea măștii pentru linie pentru a face cu adevărat designul să iasă în evidență.
Sub filă Mască de fundal, actualizați următoarele:
- Culoarea măștii: #ffffff
- Transformarea măștii: inversată
Rezultat final
Să vedem rezultatul final.
Descărcați DIVI acum!!!
Mai multe posibilități
Iată câteva exemple de modele care sunt posibile cu doar câteva modificări simple ale măștilor și modelelor de fundal.
Vezi si: Divi: Cum să utilizați „Gradient Builder” pentru a vă înfrumuseța imaginile
Descărcați DIVI acum!!!
Concluzie
Cheia pentru a crea tranziții fără întreruperi de design de fundal în Divi este să utilizați aceste unități de lungime VW cu înțelepciune.
Mai întâi, trebuie să creăm un design de fundal al secțiunii care se potrivește cu lățimea ferestrei de vizualizare a browserului (dintr-o poziție centrată pe pagină). Odată terminat, putem folosi același design de fundal cu o singură linie. După aceea, avem doar câteva modificări de gradient și culoare pentru un design uimitor.
Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare.
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.
...
