Vill du skapa en sektion för vittnesmål i form av ett rutnät på din webbsida med modulen Testimonial för Divi ?
Rutnätslayouter är idealiska för innehåll som måste hållas ihop. Rekommendationer är ett bra exempel på detta. I Divi, rekommendationer skapas med en ny modul för varje rekommendation. Men som tur är är det enkelt att visa dem i ett rutnät.
I den här artikeln kommer vi att se hur man ordnar vittnesmål i form av ett rutnät med modulen Referenser de Divi. Vi kommer att se två olika layouter, så att du kan välja den som bäst passar dina behov.
Låt oss börja!
undersökningen
Här är en översikt över vad vi kommer att göra i den här handledningen.
Rutnätslayout
Alternativt arrangemang
Design av den första layouten med Divi
Vi kommer att visa detaljerna för båda layouterna, men den andra layouten kommer att använda modulerna från den första.
Skapa en linje
Skapa först en ny rad och välj en 3 kolumn layout.
Öppna sedan linjeparametrar genom att klicka på dess kugghjulsikon.
Välj fliken Designa och aktivera Använd Custom Gutter Witdh och ställ in den på 1.
- Använd anpassad rännbredd: Ja
- Rännans bredd: 1
Scrolla sedan ner till Förband och ändra avståndsinställningarna enligt följande. Stäng raden. Vi kommer att skapa en andra rad, men vi kommer att avsluta den här först och sedan klona den.
- Utfyllnad (topp och botten): 0px
Lägg till en "Testimonial"-modul
Lägg sedan till a rekommendationsmodul i den vänstra kolumnen.
Inställningar för modulinnehåll
Lägg sedan till innehåll av vittnesmålet. Detta inkluderar författarens namn, tjänstetitel, företagsnamn, innehåll av kroppen och fotot av den person som avger vittnesmålet.
- Författare: författarens namn
- Befattning: Befattning i företaget
- Företag: företagsnamn
- Kroppsinnehåll: vittnesmålet
- Bild: den valda bilden
Moduldesignparametrar
Välj sedan fliken Designa.
Citat ikon
Ändra ikoninställningar. Ikonens färg kommer också att användas för personens namn. Det kommer att vara samma för alla moduler.
- Citat Ikon Färg: #fd335a
- Citat Ikon Bakgrundsfärg: #ffffff
Bild
Scrolla sedan ner till Bild och ändra följande inställningar:
- Bildkantbredd: 4 pixlar
- Bildkantfärg: #000645
Kropp text
Scrolla sedan ner till kropp text och ändra typsnittet
- Kroppstypsnitt: Roboto Mono
FörfattareText
Scrolla sedan ner till FörfattareText.
- Författare Font : Oswald
- Teckensnittsvikt: Halvfet
- Typsnittsstil: TT
- Textfärg: #fd335a
Positionstext
Scrolla sedan ner till Positionstext (jobbtiteln) och ändra typsnittet.
- Positionsteckensnitt: Roboto Mono
Företagstext
Scrolla sedan ner till Företagstext och ändra typsnittet också.
- Företagstypsnitt: Roboto Mono
Border
Till sist, scrolla ner till Border och ändra gränsen enligt följande:
- Kantbredd: 24px
- Kantfärg: #000645
Duplicera Testimonial-modulen
sedan duplicera modulen två gånger och dra de två klonade modulerna till de andra kolumnerna i raden.
Anpassa den andra Testimonial-modulen
Öppna dem inställningar i den andra Testimonial-modulen och redigera innehållet.
Bild
Välj sedan fliken desing och bläddra till Bild. Ändra kantfärgen.
- Bildkantfärg: #acf8f5
Border
Till sist, scrolla ner till Border och ändra färgen.
- Kantfärg: #acf8f5
Anpassa den tredje vittnesbördsmodulen
Öppna dem inställningar i den tredje Testimonial-modulen och redigera innehållet.
Bild
Gå sedan till fliken Designa, bläddra till Bild och ändra kantfärgen.
- Bildkantfärg: #fccaa0
Border
Bläddra till sist ner till Border och ändra kantfärgen så att den matchar bildkanten. Stäng modulinställningarna.
- Kantfärg: #fccaa0
Duplicerad linje
sedan duplicera raden genom att klicka på dubblettalternativet som visas när du håller muspekaren över linjen. Eftersom vi lade till 0px till den övre och nedre stoppningen, rör den här nya linjen automatiskt linjen ovanför den. Vi kommer att öppna varje modul i det andra avsnittet för att ändra dess innehåll och färger.
Anpassa den fjärde Testimonial-modulen
Öppna dem inställningar i den andra Testimonial-modulen och redigera innehållet.
Bild
Scrolla sedan ner till Bild och ändra kantfärgen till #6eea9d.
- Bildkantfärg: #6eea9d
gräns
Till sist, scrolla ner till Border och ändra kantfärgen till #6eea9d för att matcha bildens kant. Stäng modulinställningarna.
- Kantfärg: #6eea9d
Anpassa den femte Testimonial-modulen
Öppna dem inställningar i den femte Testimonial-modulen och ändra dess innehåll.
Bild
Scrolla sedan ner till Bild och ändra kantfärgen till #fff67f.
- Bildkantfärg: #fff67f
Border
Bläddra till sist ner till Border och ändra kantfärgen så att den matchar bildkanten. Stäng modulinställningarna.
- Kantfärg: #fff67f
Anpassa den sjätte testimonialsmodulen
Öppna slutligen inställningar i den sjätte Testimonial-modulen och ersätt innehållet.
Bild
Scrolla sedan ner till Bild och ändra kantfärgen till #593a94.
- Kantbildsfärg: #593a94
Border
Till sist, scrolla ner till Border och ändra färgen så att den matchar bildens kant. Stäng modulinställningarna.
- Kantfärg: #593a94
Resultat
Här är resultatet vi har hittills.
Design av den andra layouten med Divi
Det vittnesmål vi skapade fungerar utmärkt om vittnesmålen är ungefär lika stora.
Tänk om du hade korta och långa vittnesmål? För detta, a rutnät med olika storlekar för kolumnerna är idealiskt. Vi kan placera vittnesmålen med mest information i de stora kolumnerna.
För detta exempel. vi skapar nya kolumner med samma avståndsinställningar och använder samma vittnesmål som tidigare, men med varierande mängd text.
Skapa de alternativa raderna
först, lägg till en rad i 2 kolumner med en kolumn 1/3 till vänster och en kolumn 2/3 till höger.
Öppna sedan linjeinställningarna, gå till fliken för Designa, bläddra till Storlek och välj Använd anpassad rännbredd. Ändra rännans bredd till 1.
- Använd anpassad rännbredd: JA
- Rännans bredd: 1
Scrolla sedan ner till Förband.
- Utfyllnad (topp och botten): 0px
sedan, duplicera linje.
Välj de alternativ andra radens layout och välj layouten med 2/3 kvar et 1/3 rätt.
Lägg till fyra Testimonial-moduler
Hur som helst, skapa eller dra dina Testimonial-moduler till linjerna. Vi använder samma moduler som i föregående exempel, men innehållet har ändrats för att skapa olika storlekar.
Modulerna anpassar sig till bredden på sina kolumner som de gjorde i föregående exempel, men var och en har olika höjder på grund av deras kroppsinnehåll. Detta skapar besvärliga avstånd i rutnätet. Som tur är är det lätt att fixa.
Öppna inställningarna för den första modulen och gå till fliken Designa. Bläddra till Storlek och ange 100 % för "Höjd".
Upprepa detta för varje modul .
- Höjd: 100%
Slutresultat
Rutnätslayout
Här är en titt på vår rutnätslayout. Detta fungerar utmärkt om vittnesmålen är av samma storlek.
Alternativt arrangemang
Här är den alternativa layouten. Den är idealisk för vittnesmål av olika storlekar.
Ladda ner DIVI nu!!!
Slutsats
Det här är vår titt på hur man skapar en sektion med omdömen i ett rutnätsformat med modulen Referenser av Divi. Divis rad- och modulinställningar fungerar perfekt tillsammans för att skapa ett rutnät med flera rader och kolumner.
Exemplen vi har visat här kan enkelt utökas för att skapa ännu större rutnät. Koncepten fungerar även med andra typer av Divi-moduler.
Vi hoppas att denna handledning kommer att inspirera dig för dina nästa Divi-projekt. Om du har några funderingar eller förslag, kontakta oss kommentaravsnittet att diskutera det.
Du kan också konsultera våra resurser, om du behöver fler element för att genomföra dina projekt för att skapa webbplatser.
Tveka inte att också konsultera vår guide om WordPress blogg skapande eller den på Divi: det bästa WordPress-temet genom tiderna.
Men under tiden dela den här artikeln på dina olika sociala nätverk.
.
