Cum să creați file de mărturii personalizate cu Divi (descărcare GRATUITĂ!)

Publicat: 2020-11-04

Pentru multe companii, mărturiile sunt unul dintre argumentele cheie pentru a obține noi clienți. Asta înseamnă că acordarea unei atenții suplimentare mărturiilor de pe site-ul dvs. web nu va fi niciodată risipită. În cadrul Divi, există multe modalități diferite de a partaja mărturii, folosind modulul Divi Testimonial, de exemplu. Dar dacă sunteți în căutarea unei abordări mai interactive, vă va plăcea acest tutorial. Vă vom arăta cum să creați file de mărturii personalizate în cadrul Divi. Odată ce cineva deplasează modulul Blurb în stânga, o mărturie corespunzătoare va apărea în dreapta. Efectele de tranziție din acest design sunt, de asemenea, perfecte, ceea ce vă ajută să oferiți senzația de personalizare suplimentară site-ului dvs. web. Veți putea descărca gratuit fișierul JSON!

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

filele mărturiei

Mobil

filele mărturiei

Descărcați GRATUIT aspectul filelor cu mărturii personalizate

Pentru a pune mâna pe aspectul gratuit al filelor de mărturii personalizate, 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

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.

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 adăugați o culoare de fundal.

  • Culoare fundal: #ffefdb

filele mărturiei

Spațiere

Treceți la fila de proiectare a secțiunii și adăugați câteva valori de marjă și umplere personalizate.

  • Marja superioară: 5%
  • Marja inferioară: 5%
  • Marja stângă: 5%
  • Marja dreapta: 5%
  • Căptușeală stângă: 5%
  • Căptușeală dreaptă: 5%

filele mărturiei

Frontieră

Includeți și câteva colțuri rotunjite.

  • Toate colțurile: 20 px

filele mărturiei

Adăugați rândul # 1

Structura coloanei

Continuați adăugând primul rând la secțiune folosind următoarea structură de coloane:

filele mărturiei

Spațiere

Fără a adăuga încă module, deschideți setările rândului și adăugați o margine inferioară.

  • Marja inferioară: 3%

file testimoniale

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

Adăugați conținut H2

Este timpul să adăugați module, începând cu un modul de text care conține un conținut H2.

filele mărturiei

Setări text H2

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

  • Rubrica 2 Font: Montserrat
  • Titlul 2 Greutate font: Semi Bold
  • Rubrica 2 Dimensiune text: 31 px
  • Rubrica 2 Spațierea literelor: -1 px

file testimoniale

Adăugați modulul divizor în coloană

Vizibilitate

Chiar sub modulul text, adăugăm un modul divizor. Asigurați-vă că este activată opțiunea „Show Divider”.

  • Show Divider: Da

filele mărturiei

Linia

Treceți la fila de proiectare a modulului și schimbați culoarea liniei în alb.

  • Culoare linie: #ffffff

filele mărturiei

Dimensionare

Modificați și setările de dimensionare.

  • Greutatea divizorului: 10 px
  • Lățime: 14%
  • Înălțime: 10 px

filele mărturiei

Frontieră

Și completați setările modulului adăugând câteva colțuri rotunjite la setările de margine.

  • Toate colțurile: 10 px

filele mărturiei

Adăugați rândul # 2

Structura coloanei

Trecem la rândul următor. Utilizați următoarea structură de coloane:

filele mărturiei

Dimensionare

Fără a adăuga încă module, deschideți setările rândurilor și egalizați înălțimile coloanei în setările de dimensionare.

  • Egalizați înălțimile coloanei: Da

filele mărturiei

Setări coloana 2

Culoare de fundal

Apoi, deschideți setările coloanei 2 și aplicați o culoare de fundal.

  • Culoare fundal: # fffbf9

filele mărturiei

filele mărturiei

Spațiere

Treceți la fila de proiectare a coloanei și aplicați câteva umpluturi de sus și de jos pe dimensiuni mai mici de ecran.

  • Căptușeală superioară:
    • Desktop: Nici unul
    • Tabletă și telefon: 300 px
  • Căptușeală inferioară
    • Desktop: Nici unul
    • Tabletă și telefon: 300 px

filele mărturiei

Frontieră

Includeți și câteva colțuri rotunjite.

  • Toate colțurile: 10 px

filele mărturiei

Adăugați Blurb Module # 1 la Coloana 1

Adauga continut

E timpul să adăugați module, începând cu primul modul Blurb din coloana 1. Adăugați un conținut la alegere.

filele mărturiei

Încărcați o imagine 1: 1

Încărcați o imagine cu un raport 1: 1 în continuare.

filele mărturiei

Culoare de fundal

Apoi, aplicați următoarea culoare de fundal:

  • Culoare fundal: # d5d6ea

filele mărturiei

Setări imagine

Modificați și setările imaginii.

  • Plasare imagine / pictogramă: stânga
  • Imagine Colțuri rotunjite: 100 px

filele mărturiei

Setări text titlu

Apoi, modificați setările textului titlului în consecință:

  • Titlu Font: Montserrat
  • Titlu Greutate font: Semi Bold
  • Spațierea literelor de titlu: -1 px

filele mărturiei

Setări text corp

Modificăm și setările pentru textul corpului.

  • Font corp: Lato
  • Dimensiunea textului corpului: 13 px

filele mărturiei

Spațiere

Apoi, vom adăuga spațiu în jurul conținutului modulului nostru, aplicând următoarele valori de umplere:

  • Căptușeală superioară: 5%
  • Căptușeală inferioară: 5%
  • Căptușeală stângă: 5%
  • Căptușeală dreaptă: 5%

filele mărturiei

Frontieră

Adăugați și câteva colțuri rotunjite.

  • Toate colțurile: 10 px

filele mărturiei

Animaţie

În mod implicit, există un efect de animație aplicat imaginii Blurb Module. Eliminăm această animație din setările animației.

  • Animație imagine / pictogramă: fără animație

filele mărturiei

ID CSS

Pentru a crea designul filelor de mărturii, va trebui să adăugăm un cod la sfârșitul acestui tutorial. Pentru a ne pregăti pentru asta, vom adăuga un ID CSS în fila avansată a modulului Blurb.

  • ID CSS: testimonial-person-1

filele mărturiei

Blurb Image & Title CSS

Folosim două linii de cod CSS și în fila avansată. Una pentru imaginea blurb și cealaltă pentru titlul blurb. 

width: 25% !important;
margin-top: 25px;

filele mărturiei

Modul Clona Blurb de trei ori

După ce ați finalizat primul modul Blurb, îl puteți clona de trei ori.

filele mărturiei

Schimbați conținutul și imaginile

Asigurați-vă că modificați conținutul și imaginile pentru fiecare modul duplicat Blurb.

filele mărturiei

Schimbați culorile de fundal

Împreună cu culorile de fundal.

  • Duplicat 1: # fffed6
  • Duplicat 2: # d7ecd9
  • Duplicat 3: # f5d5cb

filele mărturiei

Schimbați ID-urile CSS

Și, desigur, codurile CSS. Folosiți numerotarea consecutivă.

  • Duplicat 1: testimonial-person-2
  • Duplicat 2: testimonial-person-3
  • Duplicat 3: testimonial-person-4

filele mărturiei

Adăugați un modul de citare a textului în coloana 2

Adăugați o ofertă la caseta de conținut

La a doua coloană. Acolo, primul modul de care avem nevoie este un modul de text cu un caracter de citat.

filele mărturiei

Setări text

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

  • Font text: Playfair Display
  • Culoarea textului: #ffefdb
  • Dimensiune text: 200 px
  • Înălțimea liniei de text: 1em

filele mărturiei

Poziţie

Repoziționați și modulul.

  • Poziție: Absolută
  • Locație: stânga sus
  • Decalaj orizontal: 5%

filele mărturiei

Adăugați un modul text pentru mărturii în coloana 2

Adăugați conținut de mărturie

Treceți la următorul modul de text. Acesta va fi dedicat primei noastre mărturii. Mărturia pe care o plasați în caseta de conținut trebuie să se potrivească cu primul modul Blurb din coloana 1.

filele mărturiei

Setări text

Modificați setările de text ale modulului în consecință:

  • Font text: Lato
  • Culoarea textului: # 000000
  • Dimensiune text: 20 px
  • Înălțimea liniei textului: 2.1em
  • Aliniere text: centru

filele mărturiei

Dimensionare

Asigurați-vă că lățimea este setată și la „100%”.

  • Lățime: 100%

filele mărturiei

Spațiere

Apoi, adăugați câteva valori de marjă și umplere personalizate la setările de spațiere.

  • Marja superioară: 30%
  • Căptușeală stângă: 10%
  • Căptușeală dreaptă: 10%

filele mărturiei

ID CSS

Și adăugați un ID CSS în fila avansată. Numărul de la sfârșitul acestui ID CSS trebuie să se potrivească cu numărul de la sfârșitul ID-ului CSS al modulului Blurb corespunzător.

  • ID CSS: testimonial-copy-1

filele mărturiei

Clonați modulul de text de trei ori

Odată ce ați finalizat primul modul text testimonial, îl puteți clona de trei ori.

filele mărturiei

Schimbați conținutul mărturiei

Asigurați-vă că modificați conținutul mărturiei din modulele duplicat.

filele mărturiei

Schimbați ID-urile CSS

Împreună cu ID-urile CSS. Asigurați-vă că urmați o comandă consecutivă.

  • Duplicat 1: testimonial-copy-2
  • Duplicat 2: testimonial-copy-3
  • Duplicat 3: testimonial-copy-4

filele mărturiei

Adăugați clasa CSS la primul modul text mărturie

Și va trebui să adăugăm o clasă CSS la mărturia pe care dorim să o activăm la început. În acest caz, acesta este primul.

  • Clasa CSS: spectacol-mărturie

file testimoniale

Adăugați un modul de cod sub modulul divizor (rândul 1)

Acum, că avem toate elementele la locul lor, este timpul să facem magia să se întâmple. Adăugați un nou modul de cod chiar sub modulul divizor din primul rând al secțiunii.

file testimoniale

Adăugați cod CSS

Introduceți următoarele linii de cod CSS între etichetele de stil așa cum puteți vedea în ecranul de imprimare de mai jos. 

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

file testimoniale

Adăugați cod JQuery

Apoi, plasați următoarele linii de cod JQuery între etichetele de script așa cum puteți vedea în ecranul de imprimare de mai jos și ați terminat! 

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

file testimoniale

previzualizare

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

Desktop

file testimoniale

Mobil

file testimoniale

Gânduri finale

În această postare, v-am arătat cum să creați un design interactiv de mărturii pentru orice tip de site web pe care îl creați. Mai precis, v-am arătat cum să creați file de mărturie personalizate care se declanșează odată ce cineva trece pe unul dintre modulele Blurb din stânga. Ați reușit să descărcați gratuit fișierul JSON! 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.