Wilt u een sectie Testimonials maken in de vorm van een raster op uw webpagina met de Testimonial-module van Divi ?
Rasterindelingen zijn hier ideaal voor inhoud die bij elkaar gehouden moeten worden. Getuigenissen zijn hiervan een goed voorbeeld. In Divi, testimonials worden gemaakt met een nieuwe module voor elke testimonial. Maar gelukkig is het eenvoudig om ze in een raster weer te geven.
In dit artikel zullen we zien hoe u getuigenissen kunt rangschikken in de vorm van een raster met de module Ervaringen de Divi. We zullen twee verschillende lay-outs zien, zodat u degene kunt kiezen die het beste bij uw behoeften past.
Laten we beginnen!
overzicht
Hier is een overzicht van wat we in deze tutorial gaan doen.
Rasterindeling
alternatieve regeling
Ontwerp van de eerste lay-out met Divi
We zullen de details van beide lay-outs laten zien, maar de tweede lay-out zal de modules van de eerste gebruiken.
Maak een regel
Maak eerst een nieuwe rij en selecteer a 3 kolommen lay-out.
Open dan de lijnparameters door op het tandwielpictogram te klikken.
Selecteer het tabblad Design en activeer Gebruik Custom Gutter Witdh en zet deze op 1.
- Aangepaste gootbreedte gebruiken: Ja
- Gootbreedte: 1
Scroll dan naar beneden naar Spacing en wijzig de afstandsinstellingen als volgt. Sluit de rij. We gaan een tweede rij maken, maar we gaan deze eerst afmaken en dan klonen.
- Opvulling (boven en onder): 0px
Een module "Testimonial" toevoegen
Voeg dan een toe getuigenis module in de linkerkolom.
Instellingen voor module-inhoud
Voeg dan de . toe inhoud van de getuigenis. Dit omvat de naam van de auteur, functietitel, bedrijfsnaam, inhoud van het lichaam en de foto van de persoon die de getuigenis aflegt.
- Auteur: naam van de auteur
- Functietitel: Functie in het bedrijf
- Bedrijf: bedrijfsnaam
- Lichaamsinhoud: de getuigenis
- Afbeelding: de geselecteerde afbeelding
Module ontwerp parameters:
Selecteer vervolgens het tabblad Design.
Citaat Icoon
Pictograminstellingen wijzigen. De pictogramkleur wordt ook gebruikt voor de naam van de persoon. Het zal voor alle modules hetzelfde zijn.
- Citaat pictogramkleur: #fd335a
- Achtergrondkleur citaatpictogram: #ffffff
Beeld
Scroll dan naar beneden naar Beeld en wijzig de volgende instellingen:
- Breedte afbeeldingsrand: 4 pixels
- Kleur rand afbeelding: #000645
Lichaamstaal
Scroll dan naar beneden naar Tekstgedeelte en verander het lettertype
- Lichaamslettertype: Roboto Mono
Auteur tekst
Scroll dan naar beneden naar Auteur tekst.
- Auteur Lettertype: Oswald
- Lettergewicht: Semi Vet
- Lettertype: TT
- Tekstkleur: #fd335a
Positie Tekst
Scroll dan naar beneden naar Positie Tekst (de functietitel) en verander het lettertype.
- Positie Lettertype: Roboto Mono
Bedrijfstekst
Scroll dan naar beneden naar Bedrijfstekst en verander ook het lettertype.
- Bedrijfslettertype: Roboto Mono
Grens
Scroll ten slotte naar beneden naar Grens en wijzig de rand als volgt:
- Randbreedte: 24px
- Randkleur: #000645
Dupliceer de Testimonial-module
dan dupliceer de module twee keer en sleep de twee gekloonde modules naar de andere kolommen in de rij.
Pas de tweede Testimonial-module aan
Open ze instellingen van de tweede Testimonial-module en bewerk de inhoud.
Beeld
Selecteer vervolgens het tabblad desing en scroll naar Beeld. Verander de randkleur.
- Kleur rand afbeelding: #acf8f5
Grens
Scroll ten slotte naar beneden naar Grens en verander de kleur.
- Randkleur: #acf8f5
Pas de derde getuigenismodule aan
Open ze instellingen van de derde Testimonial-module en bewerk de inhoud.
Beeld
Ga dan naar het tabblad Design, scroll naar Beeld en verander de randkleur.
- Kleur rand afbeelding: #fccaa0
Grens
Scroll ten slotte naar beneden naar Grens en verander de randkleur zodat deze overeenkomt met de afbeeldingsrand. Sluit de module-instellingen.
- Randkleur: #fccaa0
Dubbele regel
dan dupliceer de regel door op de duplicaatoptie te klikken die verschijnt wanneer u de muisaanwijzer over de lijn beweegt. Omdat we 0px aan de bovenste en onderste opvulling hebben toegevoegd, raakt deze nieuwe regel automatisch de regel erboven. We zullen elke module in het tweede gedeelte openen om de inhoud en kleuren te wijzigen.
Pas de vierde Testimonial-module aan
Open ze instellingen van de tweede Testimonial-module en bewerk de inhoud.
Beeld
Scroll dan naar beneden naar Beeld en verander de randkleur in #6eea9d.
- Kleur rand afbeelding: #6eea9d
grens
Scroll ten slotte naar beneden naar Grens en verander de randkleur in #6eea9d om overeen te komen met de rand van de afbeelding. Sluit de module-instellingen.
- Randkleur: #6eea9d
Pas de vijfde Testimonial-module aan
Open ze instellingen van de vijfde Testimonial-module en wijzig de inhoud ervan.
Beeld
Scroll dan naar beneden naar Beeld en verander de randkleur in #fff67f.
- Kleur rand afbeelding: #fff67f
Grens
Scroll ten slotte naar beneden naar Grens en verander de randkleur zodat deze overeenkomt met de afbeeldingsrand. Sluit de module-instellingen.
- Randkleur: #fff67f
Pas de zesde getuigenismodule aan
Open tot slot de instellingen van de zesde Testimonial-module en vervang de inhoud.
Beeld
Scroll dan naar beneden naar Beeld en verander de randkleur in #593a94.
- Kleur randafbeelding: #593a94
Grens
Scroll ten slotte naar beneden naar Grens en verander de kleur zodat deze overeenkomt met de rand van de afbeelding. Sluit de module-instellingen.
- Randkleur: #593a94
Resultaat
Dit is het resultaat dat we tot nu toe hebben.
Ontwerp van de tweede lay-out met Divi
Het testimonial-raster dat we hebben gemaakt, werkt geweldig als de getuigenissen ongeveer even groot zijn.
Wat als je korte en lange getuigenissen had? Hiervoor is een raster met verschillende afmetingen voor de kolommen is ideaal. We kunnen de getuigenissen met de meeste informatie in de grote kolommen plaatsen.
Voor dit voorbeeld. we zullen nieuwe kolommen maken met dezelfde spatiëringsinstellingen en dezelfde getuigenissen gebruiken als voorheen, maar met verschillende hoeveelheden tekst.
Maak de alternatieve lijnen
eerste, voeg een rij toe aan 2 kolommen met kolom 1/3 naar links en a kolom 2/3 rechts.
Open vervolgens de lijninstellingen, ga naar het tabblad van Design, scroll naar Afmetingen en selecteer Aangepaste gootbreedte gebruiken. Wijzig de gootbreedte in 1.
- Gebruik aangepaste gootbreedte: JA
- Gootbreedte: 1
Scroll dan naar beneden naar Spacing.
- Opvulling (boven en onder): 0px
Vervolgens, duplicaat de lijn.
Selecteer de opties tweede rij layout en kies de layout met 2/3 over et 1/3 rechts.
Voeg vier Testimonial-modules toe
Eindelijk, maak of sleep uw Testimonial-modules naar de lijnen. We gebruiken dezelfde modules als in het vorige voorbeeld, maar de inhoud is gewijzigd om verschillende formaten te creëren.
De modules passen zich aan de breedte van hun kolommen aan zoals in het vorige voorbeeld, maar elk heeft verschillende hoogtes vanwege hun lichaamsinhoud. Dit zorgt voor onhandige afstanden in het raster. Gelukkig is het eenvoudig te repareren.
Open de instellingen van de eerste module en ga naar het tabblad Design. Scroll naar Afmetingen en voer 100% in voor "Hoogte".
Herhaal dit voor elke module .
- Hoogte: 100%
Definitieve resultaten
Rasterindeling
Hier is een blik op onze rasterlay-out. Dit werkt prima als de getuigenissen even groot zijn.
alternatieve regeling
Hier is de alternatieve lay-out. Het is ideaal voor getuigenissen van verschillende groottes.
Download DIVI nu!!!
Conclusie
Dit is onze kijk op hoe je een testimonials-sectie in een rasterformaat kunt maken met de module Ervaringen van Divi. Divi's rij- en module-instellingen werken perfect samen om een ​​raster van meerdere rijen en kolommen te creëren.
De voorbeelden die we hier hebben getoond, kunnen eenvoudig worden uitgebreid om nog grotere rasters te maken. De concepten werken ook met andere soorten Divi-modules.
We hopen dat deze tutorial je zal inspireren voor je volgende Divi-projecten. Als u zich zorgen maakt of suggesties heeft, kunt u ons vinden in het commentaar gedeelte om het te bespreken.
U kunt ook overleggen onze middelen, als u meer elementen nodig hebt om uw projecten voor het maken van internetsites uit te voeren.
Aarzel niet om ook onze gids te raadplegen over de WordPress blog creatie of die op Divi: het beste WordPress-thema aller tijden.
Maar in de tussentijd deel dit artikel op uw verschillende sociale netwerken.
...
