Det enda som besökare letar alltid efter en webbplats, det här är vittnesmål. De representerar trovärdighet och påverkar beslutsprocessen för potentiella kunder när de besöker din webbplats.

Tillsammans med att se till att du har starka vittnesmål att dela, spelar deras visuella överklagande också en viktig roll. I denna handledning kommer vi att visa dig tre fantastiska sätt att anpassa Divi testmodul med endast de inbyggda alternativen.

undersökningen

Innan vi dyker in i handledningen, låt oss ta en titt på slutresultatet i olika skärmstorlekar.

office

Exempel 1 modul modifiering testimonial.jpg

exempel 2 modifieringsmodul testimon.jpg

Exempel 3 modifieringsmodul testimonial.jpg

Mobil

mobil example.jpg

Återskapa exempel 1

första exempel testimonial divi.png

Lägg till en ny sektion

Låt oss börja med det första exemplet! Skapa en ny sida och lägg till ett vanligt avsnitt.

Lägg till en sektion på divi.jpg

Lägg till en ny rad

Kolumnstruktur

Fortsätt lägga till en ny rad med följande kolumnstruktur:

lägg till en ny kolumn på divi.jpg

dimensionering

Utan att lägga till fler moduler öppnar du linjeparametrarna och gör några ändringar i måttparametrarna.

  • Gör den här linjen full bredd: Ja
  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1

inställning av dimensionering divi.jpg

Lägg till en bildmodul i kolumn 1

Ladda upp en bild

Det är dags att börja lägga till moduler! Den första moden som vi behöver är en bildmod i kolumn 1. Fortsätt och ladda upp en fyrkantig bild efter eget val.

ladda ner en bild divi.jpg

filter

Gå sedan till filterinställningarna och spela med olika effekter.

  • Mättnad: 40%
  • Kontrast: 126%

bildkonfiguration.jpg

Lägg till en knappmodul i 1-kolumnen

Lägg till en kopia

Den andra och sista modulen som vi behöver i kolumn 1 är en knappmodul. Lägg till en kopia av valet.

gör en kopia av en bild.jpg

Knappinställningar

Gå sedan till knappinställningar och ändra utseendet på din knapp.

  • Använd anpassade stilar för knappen: Ja
  • Knapptextstorlek: 14px
  • 1-färg: # 5400ff
  • 2-färg: # 00fff6
  • Gradientriktning: 100deg
  • Bredden på knappgränsen: 0px
  • Typsnittsvikt: Ultra fet
  • Teckensnittstyp: versaler

divi.jpg knappinställningar

avstånd

Lägg också till anpassade avståndsvärden.

  • Toppad padding: 10px
  • Botten stoppning: 10px
  • Vänster padding: 30px
  • Möjningstryck: 30px

inre vaddering konfiguration.jpg

Skugga låda

Och avsluta med en subtil lådeskärm.

  • Box Shadow Blur Force: 80px
  • Skuggfärg: rgba (0,0,0,0,3)

konfiguration av skugg divi.jpg

Lägg till en utvärderingsmodul i 2-kolumnen

Lägg till innehåll

I den andra kolumnen är den enda modulen vi behöver en rekommendationsmodul. Lägg till några innehåll till de olika fälten och området för innehåll.

lägg till en testimonial module.jpg

Bakgrundsfärg

Lägg sedan till en något transparent bakgrundsfärg.

  • Bakgrundsfärg: rgba (255,255,255,0.96)

bakgrundsbild configuration.jpg

Testimonial-inställningar

Ändra också inställningarna för testikonen.

  • Vittnesmålsikonsfärg: # 0c0c0c
  • Testimonial-bakgrundsfärg: rgba (245,245,245,0)

konfiguration av avsnittet av testimonial icon.jpg

Inställningar för kroppstext

Ändra sedan kroppsinställningarna.

  • Kroppstypsnitt: Verdana
  • Kroppshöjd: 1.7em

body text parameter module testimonial.jpg

avstånd

Fortsätt genom att lägga till olika anpassade marginal- och stoppningsvärden i avståndsinställningarna.

  • Övre marginal: 15vw (skrivbord och surfplatta), 0vw (telefon)
  • Nedre marginal: 50px (surfplatta och telefon)
  • Vänster marginal: -10vw (skrivbord och surfplatta), 0vw (telefon)
  • Höger marginal: 5vw
  • Toppad padding: 70px
  • Botten stoppning: 70px
  • Vänster padding: 50px
  • Möjningstryck: 50px

distans konfiguration divi modul testimonial.jpg

gräns

Lägg också till en vänster kant.

  • Bredd på vänstra gränsen: 7px
  • Vänster kantfärg: # 5400ff

Vänster gränskonfiguration divi.jpg

Skugga låda

Slutligen lägger du till en subtil ruta-skugga för att forma vittnesmodulen.

  • Box Shadow Blur Force: 80px
  • Boxskuggans utbredningskraft: -10px
  • Skuggfärg: rgba (0,0,0,0,49)

skuggkonfigurationsmodul testimonial.jpg

Klona båda modulerna och placera dubbletterna i kolumnerna 3 och 4

När du är klar med redigeringen av modulerna i kolumnerna 1 och 2 kan du klona dem och placera duplikaten i de två återstående kolumnerna.

klon två moduler divi.jpg

Ändra bild

Glöm inte att ändra bilden av ditt andra vittnesmål.

redigera bilden divi.jpg

Ändra gradientbakgrund

Ändra också lutningsbakgrunden på knappen.

  • 1-färg: # ff001d
  • 2-färg: # 3700ff
  • Gradientriktning: 100deg

ändra bakgrunden för den degraderade divi-modulen testimonial.jpg

Ändra färgen på vittnesbörsen

Och associera färgen på gränsen till gradientbakgrunden för den nya knappen.

  • Vänster kantfärg: # ff001d

divi vittnesmodul

Återskapa exempel 2

exempel 2 skapande av ett vittnesmål avsnitt.png

Lägg till en ny sektion

Låt oss gå vidare till det andra exemplet! Lägg till ett nytt vanligt avsnitt på din sida.

val av en ny sektion divi.jpg

Lägg till en ny rad

Kolumnstruktur

Utan att göra några ändringar i avsnittet lägger du till en ny rad med följande kolumnstruktur:

välj en layout för testmodul divi.jpg

dimensionering

Fortsätt genom att öppna linjeparametrarna och ändra storlek på parametrarna.

  • Gör den här linjen full bredd: Ja
  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1

avståndsmodul testimonial divi.jpg

avstånd

Lägg sedan till anpassade fyllningsvärden i raden och kolumnerna.

  • Polstring vänster: 200px (skrivbord), 30px (surfplatta), 25px (telefon)
  • Polstring till höger: 200px (skrivbord), 30px (surfplatta), 25px (telefon)
  • 1-kolumn Polstring till vänster: 5px (skrivbord), 0px (surfplatta och telefon)
  • 1-kolumn Polstring till höger: 2.5px (skrivbord), 0px (surfplatta och telefon)
  • 2-kolumn Polstring till vänster: 2.5px (skrivbord), 0px (surfplatta och telefon)
  • 2-kolumn Polstring till höger: 2.5px (skrivbord), 0px (surfplatta och telefon)
  • 3-kolumn Polstring till vänster: 2.5px (skrivbord), 0px (surfplatta och telefon)
  • 3-kolumn Polstring till höger: 5px (skrivbord), 0px (surfplatta och telefon)

Anpassning av marginallinjen divi.jpg

Lägg till en videomodul i 1-kolumnen

Videolänk

Den första modulen som vi behöver i kolumn 1 är en videomodul. Länka den här videon till ditt videoklipp.

lägg till en video.jpg-modul

Bildöverlägg

Lägg också till ett bildöverlägg.

för att konfigurera bildöverlagringen på divi.jpg

Lägg till en utvärderingsmodul i 1-kolumnen

Lägg till innehåll

Den andra och sista modulen som behövs i kolumn 1 är en testmodul. Börja med att lägga till detaljerna i vittnesbördet.

lägg till en utvärderingsmodul i kolumnen 1.jpg

Inaktivera testimonial-ikonen

Stäng sedan av testimonial-ikonen i artikelinställningar.

  • Visa vittnesikon: Nej

inaktivera klonen på vittnesmål divi.jpg

Bakgrundsfärg

Lägg till en vit bakgrund då.

  • Bakgrundsfärg: #ffffff

sätt bakgrundsfärgen.jpg

Inställningar för kroppstext

Ändra också inställningarna för kroppstext.

  • Kroppsfärgad text: # 000000
  • Kroppsbrevavstånd: -0.5px
  • Kroppshöjd: 1.7em

konfigurera färgen på typsnittet testimonial.jpg

avstånd

Och lägg till anpassade marginal- och stoppningsvärden i avståndsinställningarna.

  • Nedre marginal: 30px (surfplatta och telefon)
  • Padding: 50px
  • Botten stoppning: 50px
  • Vänster padding: 80px
  • Möjningstryck: 80px

konfigurera upholstery.jpg

gräns

Vi ger också modulen rundade hörn längst ner till vänster och höger '30px'.

avrundade gränser configuration.jpg

Skugga låda

Slutligen, för att ge djup, ger vi Testimonial-modulen en subtil rutskugga.

  • Box Shadow Blur Force: 80px
  • Boxskuggans utbredningskraft: -10px
  • Skuggfärg: rgba (0,0,0,0,3)

skapande av gränser modul vittnesmål divi.jpg

Klon modulerna tre gånger och placera dubbletterna i de återstående kolumnerna

När du är klar med att redigera de två modulerna i 1-kolumnen, klonar du dem två gånger och placerar duplikaten i de två återstående kolumnerna.

moduler testimonial divi blogpascher.jpg

Redigera videolänkar, innehåll och bildöverlagringar

Glöm inte att ändra videolänken, den innehåll och bildöverlagringar av dina nya vittnesmål.

ändra länkarna videor moduler testimonials exempel 2.jpg

Återskapa exempel 3

skapa exemplet 3 divi module testimonials.png

Lägg till en ny sektion

Låt oss gå vidare till det tredje exemplet! Lägg till ett nytt vanligt avsnitt på din sida.

val av en sektion divi.jpg

Lägg till en ny rad

Kolumnstruktur

Fortsätt lägga till en ny rad med följande kolumnstruktur:

välj en dubbel kolumnlayout.jpg

Kolumn 1 bakgrundsfärg

Gå sedan till bakgrundsinställningarna och lägg till en bakgrundsfärg i den första kolumnen.

  • Column 1 Bakgrundsfärg: # f9f9f9

konfiguration av divi.jpg radinställningar

Kolumn 2 bakgrundsfärg

Den andra kolumnen behöver en vit bakgrund.

  • Kolumn 2 Bakgrundsfärg: #ffffff

färgkonfiguration på divi.jpg

dimensionering

Gå sedan till dimensioneringsparametrarna och ta bort rännans bredd.

  • Använd en anpassad rännbredd: Ja
  • Rännbredd: 1

konfiguration av distansmodul testimonial divi exempel 3.jpg

avstånd

Lägg till anpassade avståndsvärden nästa.

  • Bästa vaddering: 0px
  • Padding Bottom: 0px
  • Vänster padding: 0px
  • Möjningstryck: 0px
  • Kolumn 1 Övre stoppning: 100px
  • Kolumn 1 Bottenplastning: 100px
  • Kolumn 1 Polstring vänster: 50px
  • 1-kolumn Polstring till höger: 50px
  • Kolumn 2 Övre stoppning: 100px
  • Botten stoppning av 2-kolumnen: 100px
  • Kolumn 2 Polstring vänster: 50px
  • 2-kolumn Polstring till höger: 50px

kolonnavståndskonfiguration på divi.jpg

gräns

Och ge var och en av gränserna 20px.

konifigering av gränser på divi.jpg

Skugga låda

Sist men inte minst, ge din linje en ruta skugga.

  • Box Shadow Blur Force: 80px

Exempel på exempel på skuggkonfigurationsmodul 3.jpg

Lägg till en utvärderingsmodul i 1-kolumnen

Lägg till innehåll

Det är dags att börja lägga till moduler! Den första modulen vi behöver i kolumn 1 är en vittnesmålsmodul. Lägg till innehåll.

lägg till en testmodul divi exempel 3.jpg

Ladda upp en bild

Fortsätt genom att ladda upp en bild i bildinställningarna.

ladda ner en bild divi builder modul testimonial.jpg

Inaktivera testimonial-ikonen

Stäng sedan av testimonial-ikonen.

  • Visa vittnesikon: Nej

deaktivera ikonet testimonial divi example 3.jpg

Inaktivera bakgrundsfärg

Stäng också av bakgrundsfärgen.

  • Använd bakgrundsfärg: Nej

inaktivera bakgrundsfärgen.jpg

Inställningar för kroppstext

Fortsätt genom att gå till fliken Design och göra några ändringar i inställningarna för brödtexten.

  • Polis Korp: Abril Fatface
  • Kroppsfärgad text: # 000000
  • Kroppstextstorlek: 20px

kroppstextparametrar modul vittnesmål divi.jpg

Lägg till en textmodul i 1-kolumnen

Lägg till innehåll

Den andra modulen som vi behöver i kolumn 1 är en textmodul. Lägg till testkopian i innehållsområdet.

lägg till en textmodul i kolumnen 1 divi example 3.jpg

avstånd

Gå sedan till fliken Design och lägg till anpassade topp- och bottenmarginaler.

  • Övre marginal: 50px
  • Nedre marginal: 50px

konfiguration av distansmodulets testimonial exempel 3.jpg

Lägg till en bildmodul i kolumn 1

Ladda ner företagets logotyp

Den tredje och sista modulen som vi behöver i den första kolumnen är en bildmodul. Du kan använda den här modulen för att lägga till företagslogotypen som är associerad med vittnesmålen.

divi vittnesmodul

Klona alla moduler och placera dubbletter i 2-kolumnen

När du är klar med att ändra alla moduler i kolumn 1 kan du kopiera och kopiera dem. När du har gjort det placerar du dubbletterna i den andra kolumnen.

divi vittnesmodul

Ändra bilden och kopian av intyget

Se till att du ändrar innehållet i vittnesboken med bilderna.

ändra ikon och innehåll i testet divi.jpg

slutligen

Det är allt för denna handledning, jag hoppas att det kommer att tillåta dig att erbjuda flera variationer