Hoe u een getuigenis voor een rasterlay-out kunt maken in Divi

Rifat T Apr 19, 2022

Rasterlay-outs zijn ideaal voor het bevatten van grote hoeveelheden informatie. Het is een geweldige illustratie van hoe getuigenissen kunnen helpen. Gelukkig is het presenteren van de getuigenissen in een raster in Divi net zo eenvoudig als ze voor elke getuigenis in een aparte module te plaatsen. In deze zelfstudie leren we hoe u de testimonialsmodule van Divi kunt gebruiken om een ​​testimonial-rasterlay-out te maken. Om u te helpen een weloverwogen beslissing te nemen, laten we u twee mogelijke lay-outs zien.

Waar wachten we nog op?

Ontwerpvoorbeeld

Wat we in deze handleiding gaan maken, wordt hieronder weergegeven. Ik gebruik het gratis Print Shop Layout Pack om een ​​testimonial-gedeelte op mijn website te maken.

Eerste rasterlay-out

Voorlopig laten we u beide lay-outs in detail zien, hoewel de tweede gebruik zal maken van modules uit de eerste.

Maak geweldige websites

Met de beste gratis paginabuilder Elementor

Begin nu

Rij maken

Maak eerst een rij met 3 kolommen.

Klik vervolgens op het tandwiel-ion om de rij-instellingen te openen.

Schakel de ontwerpoptie in het menu in. Gebruik de optie Aangepaste gootbreedte en stel de gootbreedte in op 1.

  • Aangepaste breedte gebruiken: Ja
  • Gootbreedte: 1

Stel in het gedeelte Afstand de Opvulling boven en onder in op 0 pixels elk. Maak de rij af. Nadat we deze rij hebben voltooid, klonen we deze en maken we een tweede.

  • Vulling: 0px boven en onder

Getuigenismodule toevoegen

Vervolgens moeten we een testimonial-module toevoegen.

Getuigenis Inhoud

De testimonial-inhoud moet vervolgens worden toegevoegd. Dit omvat de naam, titel en bedrijf van de auteur, evenals de inhoud van het lichaam en een foto van de auteur. Voor mijn voorbeelden gebruik ik de veldnamen en de standaard body-inhoud.

  • Auteur: naam auteur’
  • Functietitel: person’s titel
  • Bedrijf: bedrijfsnaam
  • Lichaamsinhoud: de getuigenis
  • Afbeelding: de uitgelichte afbeelding

Getuigenis Module Ontwerp

Citaat Icoon

Verander de kleur van het citaatpictogram in #fd335a en de achtergrondkleur in wit om het gewenste effect te krijgen. Het is ook mogelijk om de kleur van het pictogram voor de naam van de persoon te gebruiken. Alle modules hebben dezelfde opbouw.

  • Kleur: #fd335a
  • Achtergrondkleur: #ffffff

Afbeelding

Afbeelding is het volgende item op de lijst. De afbeeldingsrandbreedte moet worden ingesteld op 4px en de randkleur moet worden gewijzigd in #000645. Voor elke module komt de grens overeen met de grens van de module. Elk van hen zal onafhankelijk worden bijgewerkt door ons team.

  • Breedte afbeeldingsrand: 4px
  • Kleur rand afbeelding: #000645

Lichaamstaal

Selecteer Roboto Mono in het vervolgkeuzemenu Hoofdtekst dat verschijnt zodra u dit doet. De rest van de instellingen moeten ook op hun standaardwaarden worden gelaten.

  • Lichaamslettertype: Roboto Mono

Auteur tekst

De Auteurstekst is daarna te vinden. Wijzig het lettertype in Oswald, het gewicht in Semi Bold, de stijl in TT en de kleur in #fd335a voor de laatste hand.

  • Lettertype: Oswald
  • Stijl: half vet
  • Stijl: TT
  • Tekstkleur: #fd335a

Positietekst

U wilt dan het lettertype van uw functietitel wijzigen in Roboto Mono. De rest van de instellingen moeten ook op hun standaardwaarden worden gelaten.

  • Positie Lettertype: Roboto Mono

Bedrijfstekst

Selecteer vervolgens onder 'Bedrijfstekst' Roboto Mono als uw standaardlettertype. Behoud de standaardinstellingen.

  • Bedrijfslettertype: Roboto Mono

Grens

Klik in het laatste gedeelte op Rand. Om de afbeeldingsrand overeen te laten komen, wijzigt u de breedte in 24px en de randkleur in #000645. Sluit de configuratie-instellingen van de module. Het is ook mogelijk om de randkleur voor elke module afzonderlijk te wijzigen.

  • Breedte: 24px
  • Kleur: #000645

Dupliceer de module

Vervolgens moet u de module twee keer kopiëren en naar de andere kolommen in die rij verplaatsen.

Style de 2e testimonialsmodule

Wijzig de inhoud in de instellingen van de tweede testimonial-module.

Afbeelding

Ga vervolgens naar het ontwerptabblad en klik op Afbeelding onderaan de pagina. Het is mogelijk om de kleur van de rand te veranderen.

  • Kleur rand afbeelding: #acf8f5

Grens

Klik in het laatste gedeelte op Rand. Om de rand van de afbeelding overeen te laten komen, wijzigt u de randkleur in #acf8f5. Sluit de configuratie-instellingen van de module. Sluit de configuratie-instellingen van de module.

  • Kleur: #acf8f5

Style de 3e Testimonial-module

Breng de nodige wijzigingen aan in de instellingen van de derde testimonial-module.

Afbeelding

Scrol op het tabblad Ontwerpen omlaag naar Afbeelding en stel de Randkleur in op #fccaa0.

  • Kleur rand afbeelding: #fccaa0

Grens

Verander ten slotte de randkleur in #fccaa0 om overeen te komen met de afbeeldingsrand. Sluit de configuratie-instellingen van de module.

  • Kleur: #fccaa0

Dupliceer de rij

Wanneer u vervolgens met uw muis over de rij beweegt, kiest u de optie dupliceren om er een kopie van te maken. Door een 0px Top en Bottom Padding toe te voegen, overlapt deze nieuwe rij onmiddellijk zijn voorganger. Het wijzigen van de inhoud en kleuren van elke module wordt gedaan in het tweede gedeelte.

Stijl de 4e Testimonial-module

Wijzig de inhoud in de instellingen van de vierde testimonial-module.

Afbeelding

Open de afbeeldingsinstellingen en wijzig de randkleur.

  • Kleur rand afbeelding: #6eea9d

Grens

Verander ten slotte de randkleur in #6eea9d om overeen te komen met de afbeeldingsrand. Sluit de configuratie-instellingen van de module.

  • Kleur: #6eea9d

Style de 5e testimonialsmodule

Wijzig de inhoud in de instellingen van de vijfde testimonial-module.

Afbeelding

Open de afbeeldingsinstellingen om de randkleur van de imager te wijzigen.

  • Kleur rand afbeelding: #fff67f

Grens

Verander ten slotte de randkleur in #6eea9d om overeen te komen met de afbeelding. Verander ten slotte de randkleur in #fccaa0 om overeen te komen met de afbeeldingsrand. Sluit de configuratie-instellingen van de module.

  • Kleur: #fff67f

Stijl de 6e getuigenismodule

Wijzig de informatie in de instellingen van de zesde testimonial-module.

Afbeelding

Nu moeten we de afbeeldingskleur opnieuw wijzigen, voor die open afbeeldingsinstellingen.

  • Kleur rand afbeelding: #593a94

Grens

Wijzig ten slotte de Randkleur in #593a94 zodat deze overeenkomt met de afbeeldingsrand. Sluit de configuratie-instellingen van de module.

  • Kleur: #593a94

Laatste voorbeeld

Bekijk hoe ons raster is georganiseerd. Als alle getuigenissen even groot zijn, werkt deze techniek perfect.

Hier is een andere ontwerpbenadering. Voor de inhoud van verschillende formaten is het ideaal.

Afsluitende gedachten

Dat concludeert onze blik op het vermogen van Divi 's testimonial-module om een ​​testimonial-rasterlay-out te construeren. Met behulp van Divi's rij- en module-opties kunt u een raster bouwen met een verscheidenheid aan verschillende rij- en kolomconfiguraties. Voortbouwend op wat we hier hebben gedemonstreerd, kunnen we gemakkelijk een veel groter raster maken. Divi -modules van andere soorten kunnen ook profiteren van deze technieken.