Cum să creați tranziții fără sudură de design de fundal între elementele Divi

Crearea de tranziții fără întreruperi de design de fundal între elementele Divi este o modalitate excelentă de a îmbunătăți designul site-ului dvs. Divi. Ideea este de a crea modele de fundal potrivite (atât pentru un rând, cât și pentru o secțiune) care au aceeași dimensiune și poziție, respectiv lățimea browserului (folosind unități de lungime vw). Acest lucru vă permite să tranziți fără probleme un gradient de fundal, un model și o mască între un rând și secțiune în moduri creative. De exemplu, puteți avea un model sau o tranziție de mască în culori diferite 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 perfectă de design de fundal între o secțiune și un rând Divi. Aplicația și versatilitatea acestui design sunt nemărginite, ducând opțiunile de design de fundal ale Divi la un nivel cu totul nou!

Să începem.

Trage cu ochiul

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.

Descărcați aspectul GRATUIT

Pentru a pune mâna pe designul din acest tutorial, mai întâi va trebui să îl descărcați folosind butonul de mai jos. Pentru a obține 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ă sunteți deja pe listă, pur și simplu introduceți adresa de e-mail de 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ă Newsletter-ului 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-vă și veți deveni un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, introduceți mai jos adresa dvs. de e-mail ș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 săptămânale gratuite de layout Divi!

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”.

După aceea, veți avea o pânză goală pentru a începe să proiectați în Divi.

Crearea unei tranziții fără sudură de design de fundal între o secțiune Divi și un rând

Partea 1: Crearea unui titlu ca conținut simulat

Înainte de a începe să ne proiectăm fundalurile, trebuie să adăugăm un titlu ca conținut simulat. 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 rând.

Adăugați un titlu H1 la conținutul corpului.

Sub fila design, actualizați designul textului titlului după cum doriți. Pentru acest design, ajută să adăugați o unitate de lungime VW pentru dimensiunea textului titlului, astfel încât să se scaleze fluid cu restul designului.

2. Proiectarea fundalului secțiunii

Adăugarea VW Padding la secțiune

Odată ce antetul simulat este la locul lui, deschideți setările secțiunii și actualizați spațierea după cum urmează:

• Captuseala: 15vw de sus, 15vw de jos

Adăugarea gradientului 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 în secțiune. Sub fila gradient, adăugați următoarele opriri de gradient:

• Oprire gradient 1: #4f0f75 (la 0%)
• Oprire gradient 2: #2843c9 (la 25%)
• Oprire gradient 3: #4ae2e0 (la 50%)
• Oprire gradient 4: #3881ff (la 75%)
• Oprire gradient 5: #4f0f75 (la 100%)

Adăugarea unui model de fundal la secțiune

Sub fila Model, actualizați următoarele:

• Modele: dungi diagonale
• Culoare model: rgba(79,15,117,0.23)
• Transformare model: Rotire
• Dimensiune model: Dimensiune personalizată
• Lățimea modelului: 7vw
• Înălțimea modelului: 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 fila Mască, adăugați următoarele:

• Mască de fundal: strat blob
• Culoare masca: rgba(0,0,0,0.7)
• Dimensiune masca: 100vw
• Poziția măștii: Centru

Notă: La fel ca și în cazul modelului, trebuie să dăm măștii o dimensiune folosind unitatea de lungime VW. De asemenea, trebuie să dăm măștii o poziție centrală.

3. Proiectarea fundalului rândului

Copiați și inserați fundalul secțiunii pe fundalul rândului

Pentru a accelera procesul de proiectare a fundalului rândului, copiați setările de fundal ale secțiunii.

Apoi lipiți fundalul pe rândul existent.

În acest moment, puteți vedea deja cum modelul de fundal și masca de pe rând ca o tranziție fără întreruperi la fundalul secțiunii. Se pare că rândul 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 și umplutura rândului 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
• Lățime maximă: 75 vw
• Căptușeală: 10vw sus, 10vw jos, 10vw stânga, 10vw dreapta

Prezentare generală a distanțelor și dimensionării în unitățile de lungime VW

Până acum, am adăugat valori de spațiere și poziție în aspectul nostru folosind unitatea de lungime VW. Iată o ilustrare rapidă a valorilor utilizate în prezent.

Până acum, avem o tranziție fără întreruperi între fundalul rândului și fundalul secțiunii pentru modele și măști. În continuare, vom actualiza gradientul de fundal al rândului, astfel încât să fie și fără întreruperi.

Ajustați opririle de gradient pe rând

Apoi, trebuie să reglam opririle de gradient pe fundalul rândului pentru o tranziție fără întreruperi în gradientul de fundal al secțiunii. Sub fila gradient, vom păstra cele trei opriri de gradient din mijloc moștenite din fundalul secțiunii) și vom șterge prima și ultima oprire a gradientului. Apoi poziționați prima oprire la 0% și a treia oprire la 100%. Odată terminat, ar trebui să aveți următoarele gradiente.

• Oprire gradient 1: #2843c9 (la 0%)
• Oprire gradient 2: #4ae2e0 (la 50%)
• Oprire gradient 3: #3881ff (la 100%)

Adăugați Box Shadow la rând

Pentru a oferi un pic de elevație designului și pentru a sublinia tranziția fără sudură a fundalului, putem adăuga o umbră de casetă la rând.

• Box Shadow: vezi captura de ecran
• Poziție verticală umbră casetă: 0px
• Intensitatea estomparii umbrei cutiei: 4vw
• Culoarea umbrei casetei: rgba(0,0,0,0.5)

Reglați culoarea modelului de fundal al rândului

Acum că avem toate elementele de fundal la locul lor, putem începe să reglam culorile pentru un design mai creativ. Sub opțiunea de model pentru rând, actualizați următoarele:

• Culoare model: rgba(255,255,255,0.23)

Reglați culoarea măștii de fundal pentru rând

De asemenea, putem actualiza culoarea măștii pentru rând pentru a face cu adevărat designul să iasă! Sub fila Mască, actualizați următoarele:

• Culoarea măștii: #ffffff
• Transformarea măștii: inversată

Rezultat final

Să vedem rezultatul final.

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.

Gânduri finale

Cheia pentru a crea tranziții fără întreruperi de design de fundal în Divi este să utilizați acele unități de lungime VW cu înțelepciune. În primul rând, trebuie să creăm un design de fundal al secțiunii care se scalează cu lățimea ferestrei de vizualizare a browserului (dintr-o poziție centrată pe pagină). Odată terminat, putem folosi același design de fundal pe un rând. După aceea, trebuie doar să facem câteva ajustări ale gradientului și culorilor pentru un design uimitor. Sperăm că această tehnică va adăuga o altă abilitate de design utilă pentru proiectele viitoare

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

Noroc!