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
Mobil
Återskapa exempel 1
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 ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
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
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.
filter
Gå sedan till filterinställningarna och spela med olika effekter.
- Mättnad: 40%
- Kontrast: 126%
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.
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
avstånd
Lägg också till anpassade avståndsvärden.
- Toppad padding: 10px
- Botten stoppning: 10px
- Vänster padding: 30px
- Möjningstryck: 30px
Skugga låda
Och avsluta med en subtil lådeskärm.
- Box Shadow Blur Force: 80px
- Skuggfärg: rgba (0,0,0,0,3)
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.
Bakgrundsfärg
Lägg sedan till en något transparent bakgrundsfärg.
- Bakgrundsfärg: rgba (255,255,255,0.96)
Testimonial-inställningar
Ändra också inställningarna för testikonen.
- Vittnesmålsikonsfärg: # 0c0c0c
- Testimonial-bakgrundsfärg: rgba (245,245,245,0)
Inställningar för kroppstext
Ändra sedan kroppsinställningarna.
- Kroppstypsnitt: Verdana
- Kroppshöjd: 1.7em
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
gräns
Lägg också till en vänster kant.
- Bredd på vänstra gränsen: 7px
- Vänster kantfärg: # 5400ff
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)
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.
Ändra bild
Glöm inte att ändra bilden av ditt andra vittnesmål.
Ändra gradientbakgrund
Ändra också lutningsbakgrunden på knappen.
- 1-färg: # ff001d
- 2-färg: # 3700ff
- Gradientriktning: 100deg
Ä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
Återskapa exempel 2
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.
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:
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å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)
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.
Bildöverlägg
Lägg också till ett bildöverlägg.
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.
Inaktivera testimonial-ikonen
Stäng sedan av testimonial-ikonen i artikelinställningar.
- Visa vittnesikon: Nej
Bakgrundsfärg
Lägg till en vit bakgrund då.
- Bakgrundsfärg: #ffffff
Inställningar för kroppstext
Ändra också inställningarna för kroppstext.
- Kroppsfärgad text: # 000000
- Kroppsbrevavstånd: -0.5px
- Kroppshöjd: 1.7em
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
gräns
Vi ger också modulen rundade hörn längst ner till vänster och höger '30px'.
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)
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.
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.
Återskapa exempel 3
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.
Lägg till en ny rad
Kolumnstruktur
Fortsätt lägga till en ny rad med följande kolumnstruktur:
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
Kolumn 2 bakgrundsfärg
Den andra kolumnen behöver en vit bakgrund.
- Kolumn 2 Bakgrundsfärg: #ffffff
dimensionering
Gå sedan till dimensioneringsparametrarna och ta bort rännans bredd.
- Använd en anpassad rännbredd: Ja
- Rännbredd: 1
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
gräns
Och ge var och en av gränserna 20px.
Skugga låda
Sist men inte minst, ge din linje en ruta skugga.
- Box Shadow Blur Force: 80px
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.
Ladda upp en bild
Fortsätt genom att ladda upp en bild i bildinställningarna.
Inaktivera testimonial-ikonen
Stäng sedan av testimonial-ikonen.
- Visa vittnesikon: Nej
Inaktivera bakgrundsfärg
Stäng också av bakgrundsfärgen.
- Använd bakgrundsfärg: Nej
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
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.
avstånd
Gå sedan till fliken Design och lägg till anpassade topp- och bottenmarginaler.
- Övre marginal: 50px
- Nedre marginal: 50px
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.
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.
Ändra bilden och kopian av intyget
Se till att du ändrar innehållet i vittnesboken med bilderna.
slutligen
Det är allt för denna handledning, jag hoppas att det kommer att tillåta dig att erbjuda flera variationer