Cum se utilizează opțiunile de transformare pentru a proiecta fundaluri unice de divizare a secțiunii în Divi

Stilurile de divizare încorporate ale secțiunii Divi au fost întotdeauna un mod popular (și simplu) de a adăuga modele creative de fundal în paginile dvs. Nu numai că oferă o modalitate rapidă și frumoasă de a diviza conținutul paginii, dar poate adăuga și o textură de fundal abstractă pentru a vă distinge site-ul. Și odată cu lansarea opțiunilor de transformare Divi, există și mai multe lucruri interesante pe care le puteți face cu aceste divizoare de secțiuni.

În acest tutorial, vă voi arăta cum să utilizați opțiunile de transformare pentru a proiecta fundaluri unice de divizare a secțiunii în Divi.

Să începem.

Trage cu ochiul

Iată o scurtă privire asupra proiectelor pe care le veți putea construi în acest tutorial.

Descărcați GRATUIT Layout-ul Exemplelor de fundal pentru divizorul de secțiuni

Pentru a pune mâna pe aceste exemple de fundal de divizare a secțiunii, va trebui mai întâi să-l descărcați folosind butonul de mai jos. Pentru a avea acces la descărcare, va trebui să vă abonați la lista noastră de e-mail Divi Daily folosind formularul de mai jos. Ca nou abonat, veți primi și mai multe bunătăți 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 mai jos și faceți clic pe descărcare. Nu veți fi „resubscris” și nu veți primi e-mailuri suplimentare.

Descărcați fișierele

Descarcă gratis

Înscrieți-vă la buletinul informativ Divi și vă vom trimite prin e-mail o copie a pachetului final de planificare a paginii de destinație Divi, plus o mulțime de alte resurse, sfaturi și trucuri uimitoare și gratuite Divi. Urmăriți-vă și veți fi un maestru Divi în cel mai scurt timp. Dacă sunteți deja abonat, pur și simplu introduceți adresa de e-mail de mai jos și faceți clic pe descărcare pentru a accesa pachetul de aspect.

DESCARCA

V-ați abonat cu succes. Vă rugăm să 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 în pagina dvs., pur și simplu extrageți fișierul zip și trageți fișierul json în Divi Builder.

Acum să trecem la tutorial, nu-i așa?

Noțiuni de bază

Pentru a începe cu acest tutorial, tot ce aveți nevoie este Tema Divi și o imagine de utilizat pentru exemplul de conținut. Vom construi designul de la zero. Tot ce trebuie să faceți este să creați o pagină nouă și să implementați constructorul Divi pe partea frontală. Atunci ești gata să pleci.

Crearea fundalurilor de formă abstractă cu divizoare de secțiuni

Acest prim exemplu este un mod foarte interesant de a crea câteva fundaluri de formă abstractă pentru conținutul dvs. Practic, aceasta implică personalizarea unei secțiuni goale cu un divizor și poziționarea divizorului de secțiune oriunde pe pagină în spatele altor conținuturi.

Iată cum să o faci.

Crearea secțiunii de conținut

Înainte de a începe să adăugăm separatoarele noastre de secțiuni la pagina noastră, să adăugăm mai întâi câteva exemple de conținut. Creați o nouă secțiune obișnuită cu un rând cu două coloane.

Adăugați modulul de text

Apoi adăugați un modul text în coloana 1 cu următorul conținut simulat:

<h2>About Divi Meetups</h2>
<p>Your content goes here. Edit or remove this text inline or in the module Content settings. You can also style every aspect of this content in the module Design settings and even apply custom CSS to this text in the module Advanced settings</p>

Apoi actualizați designul după cum urmează:

Dimensiune text text: 16 px
Înălțimea liniei textului: 1.9em
Rubrica 2 Font: Roboto
Rubrica 2 Greutatea fontului: ușoară
Titlul 2 Dimensiune text: 50 px (desktop), 40 px (tabletă), 32 px (telefon)
Titlul 2 Înălțimea liniei: 1.4em

Adăugați modulul de imagine

Apoi adăugați un modul de imagine în coloana 2 și încărcați imaginea pe care doriți să o afișați. În acest exemplu, folosesc o imagine dintr-unul dintre pachetele noastre de aspect, care este de 800 px cu 1156 px.

Apoi reglați lățimea și alinierea imaginii după cum urmează:

Lățime: 80% (desktop), 70% (tabletă)
Alinierea modulului: stânga

Adăugați umplutura la coloana 1

Având textul și imaginea la locul lor, trebuie să adăugăm câteva căptușeli superioare în coloana 1 pentru a reduce modulul nostru de text. Deschideți setările rândului și actualizați următoarele:

Coloana 1 Custom Padding (desktop): partea superioară de 250 px
Coloana 1 Căptușeală personalizată (tabletă): 50 px de sus

Adăugarea secțiunii superioare cu divizorul secțiunii

În acest moment, suntem pregătiți să adăugăm prima noastră secțiune. Pentru a face acest lucru, trebuie să creăm o nouă secțiune. Deci, mergeți mai departe și creați o nouă secțiune obișnuită (nu adăugați o coloană la secțiune, deoarece nu vom avea nevoie de una) și trageți-o deasupra secțiunii care conține textul și imaginea noastră.

Apoi dați secțiunea și fundalul transparent și un divizor de top actualizând următoarele:

Culoare fundal: rgba (0,0,0,0)
Stilul divizorului superior: vezi captura de ecran
Culoare divizor: rgba (120.168.193,0.45)
Înălțimea divizorului: 500 px (desktop), 400 px (tabletă), 300 px (telefon)

Apoi, accesați fila avansată și setați valoarea indexului Z la 1, astfel încât să rămână deasupra secțiunii de sub ea.

Apoi actualizați dimensiunea și spațiul secțiunii după cum urmează:

Lățime: 500 px (desktop), 400 px (tabletă), 320 px (telefon)
Alinierea secțiunii: centru
Marja personalizată: -100px
Căptușeală personalizată: 100 px sus, 100 px jos

Rețineți că lățimea este egală cu înălțimea separatorului pe care l-am adăugat mai devreme (500 px pentru desktop, 400 px pentru tabletă și 320 px pentru telefon). Acest lucru ne va oferi un design perfect pătrat pentru divizorul nostru de secțiuni. De asemenea, este important să micșorați lățimea și înălțimea separatorului pentru a le regla pentru tabletă și telefon, deoarece dacă nu faceți acest lucru, secțiunea va înclina și va rupe designul sau va provoca revărsare în fereastra de vizualizare a browserului.

Căptușeala personalizată este doar pentru a oferi secțiunii o anumită înălțime, astfel încât să nu trebuiască să ajustăm valorile traduse de transformare la fel de mult mai târziu.

Acum că avem designul secțiunii în poziție, putem folosi opțiunile de transformare pentru a poziționa și roti divizorul de secțiuni oriunde vrem pe pagină.

Actualizați următoarele:

Transformă axa X tradusă (desktop): -100%
Transformă axa Y tradusă (desktop): 200%

Transformă axa X tradusă (tabletă): -50%
Transformă axa Y tradusă (desktop): 100%

Transformare Rotire axa Z: -45 grade

Secțiunea Copiere și lipire

Vom adăuga încă o pagină de proiectare a separatorului de secțiuni. Dar, pentru a obține un început avansat în proiectare, implementați modul de vizualizare wireframe și copiați secțiunea de sus (cu stilul de separare a secțiunii) și lipiți-o sub secțiunea care conține textul și imaginea.

Actualizați setările secțiunii

Apoi actualizați marja personalizată după cum urmează:

Marjă personalizată: -100px jos

Apoi putem micșora dimensiunea secțiunii folosind opțiunea de transformare a scalei după cum urmează:

Scala de transformare (axa X și Y): 50%

Folosind Transform Translate, putem deplasa secțiunea în sus și în dreapta după cum urmează:

Transformă axa X tradusă (desktop): -20%
Transformă axa Y tradusă (desktop): -100%

Transformă axa X tradusă (tabletă): 80%

Transformă axa X tradusă (tabletă): 30%

Acum rotiți secțiunea după cum urmează:

Transformare Rotire axa Z (desktop): 225 de grade

Transformare Rotire axa Z (tabletă): -225 grade

Rezultat final

Să verificăm rezultatul final. Observați cum secțiunile sunt repoziționate pe tabletă și telefon pentru un design frumos.

Iată câteva exemple de diferite stiluri de divizare care utilizează același aspect. Simțiți-vă liber să experimentați cu diferite stiluri și rotații proprii.

Crearea divizoarelor de secțiune orizontale

Opțiunile de transformare ale Divi ne permit, de asemenea, să rotim separatoarele de secțiune pentru a crea modele de divizoare de secțiuni orizontale. Acest lucru vă poate oferi un fundal unic pentru conținutul paginii dvs.

Iată cum să o faci.

Duplicați secțiunea cu conținut fals

Pentru acest exemplu, putem folosi aceeași secțiune de conținut pe care am creat-o pentru primul exemplu de mai sus. Continuați și copiați și lipiți secțiunea din partea de jos a paginii.

Actualizați secțiunea de conținut

Apoi, deschideți setările secțiunii pentru secțiunea duplicată și actualizați următoarele:

Împletire personalizată (desktop): 80 px în partea de sus, 80 px în partea de jos
Căptușeală personalizată (tabletă): 0px top

Crearea divizorului de secțiune orizontală

Pentru a crea divizorul de secțiune orizontală, creați mai întâi o nouă secțiune obișnuită direct deasupra secțiunii de conținut.

Apoi actualizați următoarele:

Culoare fundal: rgba (0,0,0,0)
Stilul divizorului superior: vezi captura de ecran
Culoare divizor superior: rgba (120.168.193,0.45)
Înălțimea separatorului superior: 80vw
Flip divizor superior: vertical

Pentru a ne asigura că putem vedea divizorul de secțiune din partea de sus a secțiunii de sub acesta, trebuie să actualizăm indexul Z la 1.

În continuare, trebuie să oferim secțiunii noastre o lățime și o distanță personalizate, după cum urmează:

Lățime: 800 px
Alinierea secțiunii: stânga
Marjă personalizată: -100 px de sus
Căptușeală personalizată: 100 px sus, 100 px jos

Lățimea secțiunii (800 px) va deveni înălțimea secțiunii odată ce aceasta se rotește pentru a servi drept divizor de secțiune orizontală. Așadar, poate fi necesar să reglați această înălțime în funcție de cantitatea de conținut pe care o aveți în secțiunea de mai jos.

Acum suntem gata să poziționăm și să rotim secțiunea folosind opțiunile de transformare după cum urmează:

Transformă axa X tradusă: -50%
Transformă axa Y tradusă: 250%

Transformare Rotire axa Z: -90 grade

Rezultat final

Iată rezultatul final al designului.

Și iată câteva alte exemple de diferite stiluri de separare care utilizează același aspect.

Încheierea

Există întotdeauna loc pentru mai multe idei despre cum să adăugați un design unic site-ului dvs. web. Cu opțiunile de transformare Divi și separatoarele de secțiuni ușor de proiectat, puteți face lucruri destul de creative. Sperăm că exemplele din acest tutorial vă vor inspira să creați câteva fundaluri de divizare a secțiunilor pentru a aduce o nouă rotație la următorul dvs. proiect.

Aștept cu nerăbdare să aud de la dvs. în comentarii.

Noroc!