Vil du oprette en testimonials sektion i form af et gitter på din webside med Testimonial-modulet af Divi ?
Gitterlayout er ideelle til indhold som skal holdes sammen. Udtalelser er et godt eksempel på dette. I Divi, oprettes testimonials med et nyt modul for hver testimonial. Men heldigvis er det nemt at vise dem i et gitter.
I denne artikel vil vi se, hvordan man arrangerer testimonials i form af et gitter med modulet Udtalelser fra nogle af vores kunder de Divi. Vi vil se to forskellige layouts, så du kan vælge det, der passer bedst til dine behov.
Lad os starte!
undersøgelse
Her er en oversigt over, hvad vi vil gøre i denne tutorial.
Gitterlayout
Alternativt layout
Design af det første layout med Divi
Vi viser detaljerne i begge layouts, men det andet layout vil bruge modulerne fra det første.
Opret en linje
Først skal du oprette en ny række og vælge en 3 kolonne layout.
Åbn derefter linjeparametre ved at klikke på dets tandhjulsikon.
Vælg fanen Design og aktivere Brug Custom Gutter Witdh og sæt den til 1.
- Brug tilpasset tagrendebredde: Ja
- Rendebredde: 1
Rul derefter ned til Mellemrum og ændre afstandsindstillingerne som følger. Luk rækken. Vi vil oprette en anden række, men vi vil afslutte denne først og derefter klone den.
- Polstring (top og bund): 0px
Tilføj et "Testimonial"-modul
Tilføj derefter a testimonial modul i venstre kolonne.
Indstillinger for modulindhold
Tilsæt derefter indhold af vidnesbyrdet. Dette inkluderer forfatterens navn, jobtitel, firmanavn, indhold af liget og billedet af den person, der afgiver vidnesbyrd.
- Forfatter: navn på forfatter
- Stilling: Stilling i virksomheden
- Firma: firmanavn
- Kropsindhold: vidnesbyrd
- Billede: det valgte billede
Moduldesignparametre
Vælg derefter fanen Design.
Citat ikon
Skift ikonindstillinger. Ikonfarven vil også blive brugt til personens navn. Det vil være det samme for alle moduler.
- Citat Ikon Farve: #fd335a
- Citat Ikon Baggrundsfarve: #ffffff
Billede
Rul derefter ned til Billede og ændre følgende indstillinger:
- Billedkantbredde: 4 pixels
- Billedkantfarve: #000645
BodyText
Rul derefter ned til brødtekst og ændre skrifttypen
- Kropsskrifttype: Roboto Mono
ForfatterTekst
Rul derefter ned til ForfatterTekst.
- Forfatter skrifttype: Oswald
- Skrifttypevægt: Semi fed
- Skrifttype: TT
- Tekstfarve: #fd335a
Positionstekst
Rul derefter ned til Positionstekst (jobtitlen) og ændre skrifttypen.
- Positionsskrifttype: Roboto Mono
Firmatekst
Rul derefter ned til Firmatekst og ændre også skrifttypen.
- Firmaskrifttype: Roboto Mono
Border
Rul til sidst ned til Border og ændre grænsen som følger:
- Kantbredde: 24px
- Kantfarve: #000645
Dupliker Testimonial-modulet
Ensuite, dupliker modulet to gange og træk de to klonede moduler til de andre kolonner i rækken.
Tilpas det andet Testimonial-modul
Åbn dem indstillinger af det andet Testimonial-modul og rediger indholdet.
Billede
Vælg derefter fanen Design og scroll til Billede. Skift kantfarven.
- Billedkantfarve: #acf8f5
Border
Rul til sidst ned til Border og ændre farven.
- Kantfarve: #acf8f5
Tilpas det tredje testimonial-modul
Åbn dem indstillinger af det tredje Testimonial-modul og rediger indholdet.
Billede
Gå derefter til fanen Design, rul til Billede og ændre kantfarven.
- Billedkantfarve: #fccaa0
Border
Rul til sidst ned til Border og ændre kantfarven, så den passer til billedkanten. Luk modulindstillingerne.
- Kantfarve: #fccaa0
Dublet linje
Ensuite, dupliker linjen ved at klikke på den dubletindstilling, der vises, når du holder markøren over linjen. Da vi tilføjede 0px til den øverste og nederste polstring, rører denne nye linje automatisk linjen over den. Vi åbner hvert modul i den anden sektion for at ændre dets indhold og farver.
Tilpas det fjerde Testimonial-modul
Åbn dem indstillinger af det andet Testimonial-modul og rediger indholdet.
Billede
Rul derefter ned til Billede og skift kantfarven til #6eea9d.
- Billedkantfarve: #6eea9d
grænse
Rul til sidst ned til Border og skift kantfarven til #6eea9d for at matche billedets kant. Luk modulindstillingerne.
- Kantfarve: #6eea9d
Tilpas det femte Testimonial-modul
Åbn dem indstillinger af det femte Testimonial-modul og ændre dets indhold.
Billede
Rul derefter ned til Billede og ændre kantfarven til #fff67f.
- Billedkantfarve: #fff67f
Border
Rul til sidst ned til Border og ændre kantfarven, så den passer til billedkanten. Luk modulindstillingerne.
- Kantfarve: #fff67f
Tilpas det sjette testimonial-modul
Åbn endelig indstillinger af det sjette Testimonial-modul og erstatte indholdet.
Billede
Rul derefter ned til Billede og ændre kantfarven til #593a94.
- Kantbillede farve: #593a94
Border
Rul til sidst ned til Border og ændre farven, så den passer til billedets kant. Luk modulindstillingerne.
- Kantfarve: #593a94
Resultat
Her er resultatet vi har indtil videre.
Design af det andet layout med Divi
Det testimonial-gitter, vi har lavet, fungerer godt, hvis testimonialerne har nogenlunde samme størrelse.
Hvad hvis du havde korte og lange vidnesbyrd? Til dette, a gitter med forskellige størrelser til søjlerne er ideel. Vi kan placere de vidnesbyrd med flest oplysninger i de store spalter.
Til dette eksempel. vi opretter nye kolonner med de samme afstandsindstillinger og bruger de samme udtalelser som før, men med varierende mængder af tekst.
Opret de alternative linjer
første, tilføje en række til 2 kolonner med et kolonne 1/3 til venstre og en kolonne 2/3 til højre.
Åbn derefter linjeindstillingerne, gå til fanen for Design, rul til dimensionering og vælg Brug tilpasset tagrendebredde. Skift tagrendens bredde til 1.
- Brug tilpasset tagrendebredde: JA
- Rendebredde: 1
Rul derefter ned til Mellemrum.
- Polstring (top og bund): 0px
derefter, duplikere linje.
Vælg de indstillinger anden række layout og vælg layoutet med 2/3 tilbage et 1/3 højre.
Tilføj fire Testimonial-moduler
Endelig oprette eller trække dine Testimonial-moduler til linjerne. Vi bruger de samme moduler som i det foregående eksempel, men indholdet er blevet ændret for at skabe forskellige størrelser.
Modulerne tilpasser sig bredden af deres kolonner, som de gjorde i det foregående eksempel, men hver har forskellige højder på grund af deres kropsindhold. Dette skaber akavet mellemrum i gitteret. Heldigvis er det nemt at rette.
Åbn indstillingerne for det første modul og gå til fanen Design. Rul til dimensionering og indtast 100 % for "Højde".
Gentag dette for hvert modul .
- Højde: 100%
Endelige resultater
Gitterlayout
Her er et kig på vores gitterlayout. Dette fungerer godt, hvis udtalelserne er af samme størrelse.
Alternativt layout
Her er det alternative layout. Den er ideel til vidnesbyrd af forskellige størrelser.
Download DIVI nu!!!
Konklusion
Dette er vores kig på, hvordan man opretter en testimonials sektion i et gitterformat med modulet Udtalelser fra nogle af vores kunder fra Divi. Divis række- og modulindstillinger fungerer perfekt sammen for at skabe et gitter af flere rækker og kolonner.
De eksempler, vi har vist her, kan nemt udvides til at skabe endnu større gitter. Koncepterne fungerer også med andre typer Divi-moduler.
Vi håber, at denne vejledning vil inspirere dig til dine næste Divi-projekter. Hvis du har spørgsmål eller forslag, så find os her kommentarafsnittet at diskutere det.
Du kan også konsultere vores ressourcer, hvis du har brug for flere elementer til at gennemføre dine projekter med oprettelse af internetsider.
Tøv ikke med også at konsultere vores guide om WordPress blog oprettelse eller den ene på Divi: tidenes bedste WordPress-tema.
Men i mellemtiden del denne artikel på dine forskellige sociale netværk.
...
