Descărcați un Layout GRATUIT pentru mărturie pentru Divi

Nu este un secret faptul că mărturiile sunt o parte crucială a multor întreprinderi și site-ul lor web. Acestea adaugă un sentiment de credibilitate serviciilor pe care le oferiți sau produselor pe care le oferiți. Acordarea unei atenții deosebite modului în care vă afișați mărturiile este adesea plătită. Cu Divi, există o mulțime de moduri în care puteți stiliza secțiunea de mărturii, există chiar și un modul de mărturie dedicat acestuia. Cu toate acestea, dacă sunteți în căutarea unui mod unic de a adăuga interacțiune la mărturiile dvs., vă va plăcea această postare. Împărtășim un frumos aspect personalizat pentru mărturii de mișcare, creat cu noile efecte de scroll ale lui Divi. De asemenea, vom recrea designul pas cu pas!

Să ajungem la asta.

previzualizare

Înainte de a ne arunca cu capul în tutorial, să aruncăm o privire rapidă asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Descărcați Free Testimonial Layout GRATUIT

Pentru a pune mâna pe aspectul mărturiei cu mișcare liberă, 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!

Să începem să recreăm!

Adăugați o secțiune nouă

Culoare de fundal

Începeți prin a adăuga o nouă secțiune la pagina la care lucrați. Deschideți setările secțiunii și schimbați culoarea de fundal în negru.

• Culoare fundal: # 000000

Spațiere

Treceți la fila de proiectare a secțiunii și adăugați câteva umpluturi personalizate în partea de sus și de jos pe diferite dimensiuni ale ecranului.

• Căptușeală superioară: 10% (desktop), 20% (tabletă), 30% (telefon)
• Căptușeală inferioară: 10% (desktop), 20% (tabletă), 30% (telefon)

Adăugați rândul # 1

Structura coloanei

Continuați adăugând un prim rând folosind următoarea structură de coloane:

Adăugați un modul de text în coloană

Adăugați conținut H2

Primul modul de care avem nevoie în coloana acestui rând este un modul de text cu conținut H2.

Setări text H2

Treceți la fila de proiectare a modulului de text și modificați setările de text H2 în consecință:

• Rubrica 2 Font: Questrial
• Titlul 2 Aliniere text: centru
• Titlul 2 Dimensiune text: 85 px (desktop), 45 px (tabletă), 35 px (telefon)
• Rubrica 2 Spațierea literelor: 2 px
• Rubrica 2 Înălțimea liniei: 1.1em

Adăugați modulul divizor în coloană

Vizibilitate

Apoi, adăugați un modul divizor chiar sub modulul text și asigurați-vă că opțiunea „Afișează divizorul” este activată.

• Show Divider: Da

Setări linie

Treceți la fila de proiectare a modulului și modificați setările liniei după cum urmează:

• Culoare linie: # 161616
• Stilul liniei: solid
• Poziția liniei: sus

Dimensionare

Modificați și setările de dimensionare.

• Greutatea divizorului: 14 px
• Lățime: 13% (desktop), 20% (tabletă), 30% (telefon)
• Alinierea modulului: centru

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor! Acest rând va fi dedicat primei noastre mărturii. Utilizați următoarea structură de coloane:

Imagine de fundal desktop

Apoi, încărcați imaginea de fundal albastră de pe desktop pe care o puteți găsi în folderul de descărcare pe care l-ați putut descărca la începutul acestei postări.

• Dimensiunea imaginii de fundal: potrivită
• Imagine de fundal Poziție: Centru

Imagine de fundal pentru tabletă și telefon

Folosim o versiune rotită a imaginii de fundal albastre pe dimensiuni de ecran mai mici. Puteți găsi această imagine de fundal și în folderul de descărcare.

• Dimensiunea imaginii de fundal: potrivită
• Poziția imaginii de fundal: Centru

Dimensionare

Treceți la fila de proiectare a rândului și modificați lățimea maximă în setările de dimensionare.

• Lățime maximă: 2000 px

Spațiere

Efectuați și câteva modificări la setările de spațiere.

• Marja superioară: 100 px
• Căptușeală superioară: 15%
• Căptușeală inferioară: 15%

Efect de derulare a mișcării orizontale

Apoi, accesați fila avansată și activați o mișcare orizontală în efectele de derulare.

• Activați mișcarea orizontală: Da
• Offset de pornire: -4
• Decalaj mediu: 0 (la 50%)
• Decalare finală: 0
• Declanșatorul efectului de mișcare: partea de sus a elementului

Efect de defilare în interior și în exterior

Vom adăuga și un efect de defilare personalizat în interior și în afara.

• Activați Fading In and Out: Da
• Opacitate de pornire: 0% (la 19%)
• Opacitate medie: 100% (de la 25% la 88%)
• Opacitate finală: 0% (la 93%)
• Efect de declanșare a mișcării: partea de sus a elementului

Adăugați un modul de text în coloană

Adauga continut

Primul modul de care avem nevoie în acest rând este un modul de text. Plasați conținutul mărturiei în caseta de conținut.

Setări text

Treceți la fila de proiectare și modificați setările de text în consecință:

• Font text: Questrial
• Greutatea fontului textului: Bold
• Culoarea textului: #ffffff
• Dimensiune text: 50 px (desktop), 30 px (tabletă), 25 px (telefon)
• Înălțimea liniei de text: 1,5em
• Aliniere text: centru

Dimensionare

Apoi, modificați lățimea pe diferite dimensiuni ale ecranului în fila de proiectare.

• Lățime: 63% (desktop), 100% (tabletă și telefon)
• Alinierea modulului: centru

Adăugați modulul persoană în coloană

Adauga continut

Treceți la modulul următor, care este un modul persoană. Adăugați numele, poziția și link-urile de socializare.

Incarca imaginea

Încărcați o imagine pătrată la alegere în continuare.

Setări pictograme

Treceți la fila de proiectare și schimbați culoarea pictogramei din setările pictogramei.

• Culoare pictogramă: # 2b302e

Imagine

Transformă imaginea într-un cerc adăugând câteva colțuri rotunjite.

• Toate colțurile: 100 px

Setări text titlu

Apoi, modificați setările pentru textul titlului după cum urmează:

• Titlu Font: Questrial
• Greutatea fontului titlului: Bold
• Culoarea textului titlului: #ffffff
• Dimensiune text titlu: 24 px

Setări text corp

Efectuați și câteva modificări la setările pentru textul corpului.

• Font corp: Questrial
• Culoarea textului corpului: #ffffff
• Dimensiunea textului corpului: 15 px

Setări text poziție

De asemenea, modificăm setările pentru textul poziției.

• Poziția Font: Questrial
• Culoare text poziție: # 1b66ff
• Dimensiune text poziție: 17 px

Dimensionare

Împreună cu lățimea pe diferite dimensiuni ale ecranului.

• Lățime: 25% (desktop), 100% (tabletă și telefon)
• Alinierea modulului: centru

Spațiere

Navigați la setările de spațiere următoare și adăugați o margine de sus.

• Marja superioară: 100 px

Elementul principal

Pentru a ne asigura că întregul conținut este aliniat în modulul nostru de persoană, vom merge la fila avansată și vom adăuga două linii de cod CSS la elementul principal al modulului.

display: flex;
align-items: center;

Imagine membru

Vom folosi o lățime personalizată pentru elementul de imagine membru și pe dimensiuni de ecran mai mici.

Comprimat:

width: 20% !important;

Telefon:

width: 30% !important;
margin-right: 5%;

Clona rândul # 2

După ce ați completat rândul care conține mărturia, puteți clona întregul rând o singură dată.

Schimbați imagini de fundal rând

Va trebui să facem câteva modificări la acest rând duplicat, începând cu imaginile de fundal de pe desktop și cu dimensiuni mai mici ale ecranului. Puteți găsi versiunile roșii ale imaginilor de fundal în folderul de descărcare.

Schimbați spațiul rândurilor

Adăugați o marjă superioară negativă la rândul următor.

• Marja superioară: -15%

Schimbați culoarea textului poziției modulului persoană

Și completați setările de rând duplicat schimbând culoarea textului poziției în setările modulului persoană.

• Culoare text poziție: # ff233e

Clonați ultimul rând

După ce ați completat rândul de mărturie duplicat, îl puteți clona.

Schimbați imagini de fundal rând

Schimbați imaginile de fundal ale rândului utilizând versiunile galbene pe care le puteți găsi în folderul de descărcare.

Schimbați culoarea textului poziției modulului persoană

Modificați și culoarea textului poziției în setările modulului persoană și ați terminat!

• Culoare text poziție: # ffbc1b

previzualizare

Acum că am parcurs toți pașii, să aruncăm o privire finală asupra rezultatului pe diferite dimensiuni de ecran.

Desktop

Mobil

Gânduri finale

În această postare, am împărtășit un aspect frumos de mărturii despre mișcare pe care l-ați putut descărca gratuit! Am folosit fundaluri personalizate și am putut evidenția fiecare mărturie cu efectele de scroll ale lui Divi. Am recreat designul, pas cu pas, de asemenea! Dacă aveți întrebări sau sugestii, nu ezitați să lăsați un comentariu în secțiunea de comentarii de mai jos.

Dacă sunteți dornici să aflați mai multe despre Divi și să obțineți mai multe cadouri Divi, asigurați-vă că vă abonați la newsletter-ul nostru de e-mail și la canalul YouTube, astfel încât să fiți întotdeauna unul dintre primii oameni care să cunoască și să obțină beneficii din acest conținut gratuit.