Folosirea comenzilor de transformare ale Divi pentru a crea machete unice pentru modulul Blurb

Comenzile de transformare ale lui Divi facilitează poziționarea și stilizarea elementelor paginii dvs. pentru a crea aspecte unice. Modulul blurb al lui Divi este unul dintre cele mai comune elemente pentru prezentarea articolelor pe un site web. Așadar, m-am gândit că voi arăta cum să folosesc acele efecte Transform prin crearea a două planuri unice care conțin modulul blurb. Sigur, puteți realiza o poziționare similară folosind margini și umplutură, dar procesul ar fi mult mai implicat și nu aproape la fel de distractiv. În plus, comenzile de transformare vă permit să adăugați un stil suplimentar pentru a scala și roti blurbs-ul pentru modele și mai unice.

În acest tutorial, vă voi arăta cum să poziționați și să rotiți blurbs în moduri creative folosind comenzile de transformare Divi.

Să începem.

A început

Pentru acest tutorial, tot ce ai nevoie este Divi. Pentru a configura lucrurile, continuați și creați o pagină nouă. Acordați titlului paginii dvs. și implementați constructorul Divi pe partea frontală pentru a crea o pagină de la zero.

Acum sunteți gata să începeți.

Crearea designului de aspect Blurb # 1

În acest prim aspect, vom structura blur-urile folosind două rânduri diferite. Apoi, vom folosi opțiunile Transformare Divi pentru a scala și poziționa modulele blurb pentru a crea un aspect unic al modulului blurb.

Creați primul rând

Pentru a începe, creați o secțiune obișnuită, apoi adăugați următorul aspect al coloanei pentru rând: 1/2 1/6 1/6 1/6

Adăugați și stilizați modulul text

În coloana 1/2 din stânga, adăugați un modul text cu următorul conținut:

<h2>Our Services</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 următoarele setări de proiectare:

Culoare fundal: #ffffff
Lățime: 500 px
Marjă personalizată (desktop): -70px la stânga
Marjă personalizată (tabletă): 20 px stânga
Împletire personalizată: 20 px sus, 20 px jos

Actualizați capitonarea secțiunii

În continuare, trebuie să adăugăm niște căptușeli la secțiunea noastră. Deschideți setările secțiunii și actualizați următoarele:

Căptușeală personalizată: top 20vw

Actualizați setările pentru primul rând

Apoi, actualizați setările rândului după cum urmează:

Lățimea jgheabului: 1
Căptușeală personalizată: 10vw sus, 0 px jos
Lățimea chenarului: 5 px
Culoare margine: #eeeeee

Adăugați al doilea rând

Apoi adăugați un alt rând sub rândul pe care tocmai l-ați personalizat. Oferiți-i un aspect cu șase coloane.

Creați și stilizați modulele Blurb

Acum este timpul să începem să creăm modulele blurb pe care le vom poziționa în cele din urmă folosind comenzile de transformare. Adăugați o coloană 2 a modulului blurb din primul rând (de sus) pe care l-ați creat.

În setările blurb, ștergeți conținutul și actualizați textul titlului cu cuvântul „Servicii”. Apoi faceți clic pentru a utiliza o pictogramă în locul unei imagini. Pentru acest exemplu, folosesc pictograma cloud.

Actualizați restul setărilor de blurb după cum urmează:

Culoare pictogramă: #ffffff
Pictogramă cerc: DA
Culoare cerc: # 5e89fb
Titlu Font: Nunito
Alinierea textului titlului: centru
Dimensiune text titlu: 16 px
Căptușeală personalizată: 1vw sus, 1vw jos, 1vw stânga, 1vw dreapta

Apoi actualizați marja implicită sub pictograma blurb adăugând următorul CSS în caseta Blurb Image CSS de sub fila avansată:

margin-bottom: 5px

Apoi, copiați modulul blurb pe care tocmai l-ați creat și lipiți-l în fiecare dintre coloane asigurându-vă că aveți două module blurb în coloana 3 a rândului superior și lăsați coloanele 5 și 6 goale în al doilea rând.

Adăugați efecte de transformare pentru a scala și poziționa Blurbs

Acum suntem pregătiți să folosim comenzile de transformare pentru a poziționa și scala scalările într-un design unic.

Mai întâi, deschideți setarea blurb a blurbului în coloana 2 a rândului superior și actualizați comenzile de transformare după cum urmează:

Axa X a scalei de transformare: 242%
Axa Y a scalei de transformare: 242%

Transformă axa X Traducere: -96px
Transformă axa Y tradusă: -44px

Apoi, actualizați setările modulului Blurb superior din coloana 3 a primului rând după cum urmează:

Axa X a scalei de transformare: 192%
Axa Y a scalei de transformare: 192%

Transformă axa X Traducere: -70px
Transformă axa Y tradusă: -13px

Apoi, actualizați modulul blurb din coloana 4 a rândului superior, după cum urmează:

Axa X a scalei de transformare: 158%
Axa Y a scalei de transformare: 158%

Transformă axa X Traducere: 33 px
Transformă axa Y tradusă: -13px

Apoi, actualizați modulul blurb inferior din coloana 3 din rândul superior, după cum urmează:

Axa X a scalei de transformare: 132%
Axa Y a scalei de transformare: 132%

Transformă axa X Traducere: 89 px
Transformă axa Y tradusă: 39 px

Apoi dați-i următoarea culoare de fundal pentru a crea o pauză în marginea rândului pentru un element de design subtil:

Culoare fundal: #ffffff

Asta e!

Pentru un element de design suplimentar, puteți crește treptat opacitatea culorii cercului pe fiecare dintre pictogramele utilizate pe tot aspectul.

Ajustări mobile

Pentru a regla aspectul modulului de blurb pentru afișajele de pe tabletă și telefon, putem pur și simplu seta efectele de transformare înapoi la starea inițială, astfel încât blurbs să revină la dimensiunea originală și să fie poziționate frumos în coloane. Pentru a face acest lucru, putem folosi funcția de selectare multiplă a lui Divi. Deoarece poate fi dificil să faceți clic pe modulele care au fost poziționate cu proprietatea de transformare, este un moment bun pentru a activa modul grilă în setările constructorului. Acest lucru vă va permite să vedeți modulele blurb în poziția lor originală. Odată ce vă aflați în modul grilă, continuați și țineți apăsat ctrl sau cmd și apoi faceți clic pe fiecare dintre modulele care au un efect de transformare. Apoi faceți clic pe pictograma roată a oricăruia dintre modulele selectate pentru a deschide setările modale ale elementului.

În modul Setări element, actualizați următoarele:

Axa X a scalei de transformare: 100%
Axa Y a scalei de transformare: 100%

Transformă axa X Traducere: 0 px
Transformă axa Y tradusă: 0 px

Acest lucru va restabili poziția și scala inițiale ale blurbs-urilor de pe afișajele de pe tabletă și telefon.

Rezultat final

Iată designul final.

Crearea aspectului modulului Blurb # 2

În acest exemplu următor, vă voi arăta un aspect unic al modulului blurb folosind opțiunile de transformare a scalei, traducerii și rotirii Divi. De asemenea, voi arunca un fragment CSS bonus care adaugă perspectivă fiecăruia dintre blurbs. Iată cum să o faci.

Creați titlul

Mai întâi, adăugați o nouă secțiune obișnuită cu un rând cu o coloană. Apoi adăugați un modul text la rând cu următorul conținut:

<h2>Our Process</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 restul setărilor modulului text după cum urmează:

Rubrica 2 Font: Nunito
Titlul 2 Greutate font: Semi Bold
Rubrica 2 Dimensiune text: 50 px
Rubrica 2 Spațierea literelor: 7 px
Lățime: 500 px

Crearea aspectului Blurb cu un rând cu șase coloane

Asta are grijă de titlu. Acum este timpul să adăugăm rândul pentru aspectul modulului nostru de blurb. Continuați și creați un rând nou cu un aspect cu șase coloane direct sub rândul curent.

Stilul modulului Blurb

În prima coloană, adăugați un nou modul de blurb și actualizați setările după cum urmează:

Ștergeți textul corpului din caseta de conținut și actualizați textul titlului cu cuvântul „Pas”.

Apoi faceți clic pentru a utiliza o pictogramă și alegeți pictograma de verificare a cercului.

Dă Blurb-ului o culoare de fundal alb după cum urmează:

Culoare fundal: #ffffff

Apoi actualizați setările de proiectare:

Culoare pictogramă: #ffffff
Pictogramă cerc: DA
Culoare cerc: # 3d0dad
Titlu Font: Nunito
Greutatea fontului titlului: Bold
Titlu Stil Font: TT
Alinierea textului titlului: centru
Spațierea literelor de titlu: 4 px

Apoi, dați blurbului o umbră de cutie după cum urmează:

Box Shadow: Vedeți Captura de ecran
Culoare umbră: rgba (0,0,0,0.12)

Și, în cele din urmă, adăugați efectul de transformare a rotirii la modulul blurb:

Transformare Rotire axa X: -3deg
Transformare Rotire axa Y: -10 grade
Transformare Rotire axa Z: 31 grade

Asta se ocupă de primul nostru modul de blurb.

Actualizați setările rândului

Acum, înainte de a începe duplicarea modulului nostru de blurb, trebuie să actualizăm setările rândului după cum urmează:

Lățimea jgheabului: 2
Căptușeală personalizată: 11vw sus, 0 px jos

Acest lucru vă va ajuta să utilizați spațierea blurbs în aspect.

Duplicarea și stilul Restul Blurbs

Acum suntem gata să duplicăm și să personalizăm restul de blurbs. Continuați și copiați modulul blurb din coloana 1 și lipiți-l în toate coloanele rămase, cu excepția ultimei coloane (coloana 6). Vom lăsa coloana 6 goală pentru a lăsa mai mult spațiu pentru blurbs pentru a fi mutate la dreapta.

Acum deschideți setarea modulului blurb din coloana 2 și actualizați următoarele:

Culoare cerc: # 62de9d

Axa X a scalei de transformare: 120%
Axa Y a scalei de transformare: 120%

Transformă axa Y Traducere: -10% (asigurați-vă că introduceți valoarea procentuală aici)

Apoi, actualizați modulul blurb din coloana 3 după cum urmează:

Culoare cerc: # 5e89fb

Axa X a scalei de transformare: 140%
Axa Y a scalei de transformare: 140%

Transformă axa Y tradusă: -20%
Transformă axa X tradusă: 10%

Actualizați modulul blurb din coloana 4 după cum urmează:

Culoarea cercului: # 2a3fc9

Axa X a scalei de transformare: 160%
Axa Y a scalei de transformare: 160%

Transformă axa Y tradusă: -30%
Transformă axa X tradusă: 30%

Și, în cele din urmă, actualizați modulul blurb din coloana 5 după cum urmează:

Culoare cerc: # 62de9d

Axa X a scalei de transformare: 180%
Axa Y a scalei de transformare: 180%

Transformă axa Y tradusă: -40%
Transformă axa X tradusă: 55%

După cum puteți vedea, fiecare dintre blurbs va crește dimensiunea cu 20% de la stânga la dreapta. Iar valorile procentuale ale traducerii transformate asigură faptul că blur-urile rămân aliniate frumos.

Deoarece proiectul se revarsă în ultima coloană (coloana 6), îl vom lăsa necompletat. Dar puteți adăuga oricând o altă coloană în coloana 6 dacă creșteți dimensiunea rândului.

Adăugarea proprietății Perspective la fiecare coloană

În CSS, proprietatea perspectivă este utilizată pentru a oferi un element poziționat 3D o anumită perspectivă în spațiul Z. Practic definește cât de departe obiectul apare departe de utilizator în timp ce se uită la ecran. Proprietatea perspectivă trebuie aplicată containerului părinte al aceleia care are poziția 3D, care în acest caz este modulul nostru de blurb. Prin urmare, trebuie să adăugăm perspectiva fiecărei coloane folosind un mic fragment de CSS după cum urmează.

Adăugați următorul CSS în caseta CSS a elementului principal al coloanei pentru fiecare dintre cele 5 coloane după cum urmează:

Coloana 1 Element principal:

perspective: 1000px

Coloana 2 Element principal:

perspective: 1000px

Coloana 3 Element principal:

perspective: 1000px

Coloana 4 Element principal:

perspective: 1000px

Coloana 5 Element principal:

perspective: 1000px

În acest caz, schimbarea este foarte subtilă, dar merită efortul suplimentar în opinia mea.

Iată proiectarea aspectului modulului blurb fără perspectivă.

Și iată-l cu perspectiva în loc.

Dacă doriți să faceți ca blurbs să pară mai aproape de utilizator, puteți reduce valoarea perspectivei. De exemplu, așa vor arăta blurbs cu „perspectivă: 400px” adăugată la fiecare coloană.

Adăugarea unui fundal divizor la secțiune

Pentru a face ca blurbururile să pară în picioare pe o suprafață, putem adăuga un fundal divizor în secțiune. Deschideți setările secțiunii și actualizați următoarele:

Stilul divizorului inferior: vezi captura de ecran
Culoare divizor inferior: #dddddd
Înălțimea divizorului inferior: 27vw
Repetare orizontală a compartimentului inferior: 0,8x
Flip divizor inferior: orizontal

Pentru a regla aspectul pentru afișajele de pe tabletă și telefon, va trebui să selectați mai mult fiecare dintre modulele de blurb și să actualizați următoarele opțiuni de transformare în setările Element pentru afișarea tabletei:

Axa X a scalei de transformare: 100%
Axa Y a scalei de transformare: 100%

Transformă axa Y tradusă: 0%
Transformă axa X tradusă: 0%

Rezultat final

Acum să verificăm rezultatul final al aspectului modulului blurb.

Gânduri finale

Cu comenzile de transformare Divi, aveți capacitatea de a plasa cu ușurință modulele de blurb în zone precise ale paginii. Acest lucru face distractiv să experimentați și să creați noi machete ale modulului de blurb pentru a include servicii, pași de proces și nenumărate alte utilizări. Sper că acest tutorial vă oferă puțină inspirație pentru testarea personală a acestor tehnici de proiectare.

Pentru mai multă inspirație, consultați aceste 5 modele creative de module blurb.

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

Noroc!