Celebration d'anniversaire Elementor

Profitez de 60% de réduction sur les nouveaux achats, le renouvellement et les mises à niveau.

00 Jours
:
00 Hours
:
00 minutes
:
00 Secondes

Decouvrir

Comment créer un témoignage de mise en page de grille dans Divi

Rifat Divi Tutorials Apr 19, 2022

Les dispositions en grille sont idéales pour contenir de grandes quantités d'informations. C'est une excellente illustration de la façon dont les témoignages peuvent aider. Heureusement, présenter les témoignages dans une grille dans Divi est aussi simple que de les placer dans un module séparé pour chaque témoignage. Dans ce didacticiel, nous allons apprendre à utiliser le module de témoignage de Divi pour construire une mise en page de grille de témoignage. Pour vous aider à prendre une décision éclairée, nous vous montrerons deux mises en page potentielles.

Qu'est-ce qu'on attend?

Aperçu de la conception

Ce que nous allons faire dans ce guide est illustré ci-dessous. J'utilise le pack gratuit Print Shop Layout Pack pour créer une zone de témoignage sur mon site Web.

Disposition de la première grille

Pour l'instant, nous allons vous montrer les deux mises en page en détail, bien que la seconde utilisera les modules de la première.

Offres incroyables

Elementor 6e anniversaire avec jusqu'à 60% de réduction

Commencer Maintenant

Créer une ligne

Tout d'abord, créez une ligne de 3 colonnes.

Ensuite, cliquez sur l'ion d'engrenage pour ouvrir les paramètres de ligne.

Activez l'option de conception dans le menu. À l'aide de l'option Largeur de gouttière personnalisée, définissez la Largeur de gouttière sur 1.

  • Utiliser la largeur personnalisée : Oui
  • Largeur de gouttière : 1

Dans la section Espacement, définissez le Rembourrage supérieur et inférieur sur 0 pixel chacun. Terminez le rang. Après avoir terminé cette ligne, nous allons la cloner et en créer une seconde.

  • Rembourrage : 0px en haut et en bas

Ajouter un module de témoignage

Ensuite, nous devons ajouter un module de témoignage.

Contenu du témoignage

Le contenu du témoignage doit être ajouté ensuite. Cela comprend le nom, le titre et la société de l'auteur, ainsi que le contenu du corps et une photographie de l'auteur. Pour mes échantillons, j'utilise les noms de champs et le contenu du corps par défaut.

  • Auteur: nom de l'auteur’
  • Titre du poste: titre de person’s
  • Entreprise : nom de l'entreprise
  • Body Content : le témoignage
  • Image: l'image sélectionnée

Conception du module de témoignage

Icône de devis

Modifiez la couleur de l'icône de devis en #fd335a et la couleur d'arrière-plan en blanc pour obtenir l'effet souhaité. L'utilisation de la couleur de l'icône pour le nom de la personne est également possible. Tous les modules auront la même structure.

  • Couleur : #fd335a
  • Couleur de fond : #ffffff

Image

L'image est l'élément suivant sur la liste. La largeur de la bordure de l'image doit être définie sur 4 pixels et la couleur de la bordure doit être modifiée sur #000645. Pour chaque module, la bordure correspondra à la limite du module. Chacun d'eux sera mis à jour indépendamment par notre équipe.

  • Largeur de la bordure de l'image: 4 pixels
  • Couleur de la bordure de l'image: #000645

Le corps du texte

Sélectionnez Roboto Mono dans le menu déroulant Corps de texte qui apparaît une fois que vous avez fait cela. Le reste des paramètres doivent également être laissés à leurs valeurs par défaut.

  • Police du corps : Roboto Mono

Texte de l'auteur

Le texte de l'auteur peut être trouvé après cela. Changez la police en Oswald, le poids en Semi Bold, le style en TT et la couleur en #fd335a pour la touche finale.

  • Police : Oswald
  • Style: semi-gras
  • Style: TT
  • Couleur du texte : #fd335a

Texte de position

Vous voudrez ensuite modifier la police de votre titre de poste en Roboto Mono. Le reste des paramètres doivent également être laissés à leurs valeurs par défaut.

  • Police de position : Roboto Mono

Texte de l'entreprise

Ensuite, sous "Texte de l'entreprise", sélectionnez Roboto Mono comme police par défaut. Conservez les paramètres par défaut.

  • Police de l'entreprise : Roboto Mono

Frontière

Dans la dernière section, cliquez sur Bordure. Afin de faire correspondre la bordure de l'image, changez la largeur en 24px et la couleur de la bordure en #000645. Fermez les paramètres de configuration du module. Il est également possible de modifier la couleur de la bordure pour chaque module séparément.

  • Largeur: 24pixels
  • Couleur : #000645

Dupliquer le module

Ensuite, vous devez copier le module deux fois et le déplacer vers les autres colonnes de cette ligne.

Styliser le 2e module de témoignage

Modifiez le contenu dans les paramètres du deuxième module de témoignage.

Image

Ensuite, allez dans l'onglet design et cliquez sur Image en bas de la page. Il est possible de changer la couleur de la bordure.

  • Couleur de la bordure de l'image: #acf8f5

Frontière

Dans la dernière section, cliquez sur Bordure. Pour correspondre à la bordure de l'image, changez la couleur de la bordure en #acf8f5. Fermez les paramètres de configuration du module. Fermez les paramètres de configuration du module.

  • Couleur : #acf8f5

Styliser le 3e module de témoignage

Apportez les modifications nécessaires aux paramètres du troisième module de témoignage.

Image

Dans l'onglet Conception, faites défiler jusqu'à Image et définissez la Couleur de la bordure sur #fccaa0.

  • Couleur de la bordure de l'image: #fccaa0

Frontière

Enfin, changez la couleur de la bordure en #fccaa0 afin de correspondre à la bordure de l'image. Fermez les paramètres de configuration du module.

  • Couleur : #fccaa0

Dupliquer la ligne

Ensuite, lorsque vous passez votre souris sur la ligne, choisissez l'option de duplication pour en faire une copie. L'ajout d'un rembourrage supérieur et inférieur de 0px signifie que cette nouvelle ligne chevauche immédiatement son prédécesseur. La modification du contenu et des couleurs de chaque module se fera dans la deuxième section.

Styliser le 4e module de témoignage

Modifiez le contenu dans les paramètres du quatrième module de témoignage.

Image

Ouvrez les paramètres de l'image et modifiez la couleur de la bordure.

  • Couleur de la bordure de l'image: #6eea9d

Frontière

Enfin, modifiez la couleur de la bordure en #6eea9d pour qu'elle corresponde à la bordure de l'image. Fermez les paramètres de configuration du module.

  • Couleur : #6eea9d

Styliser le 5e module de témoignage

Modifiez le contenu dans les paramètres du cinquième module de témoignage.

Image

Pour modifier la couleur de la bordure de l'imageur, ouvrez les paramètres de l'image.

  • Couleur de la bordure de l'image: #fff67f

Frontière

Enfin, modifiez la couleur de la bordure en #6eea9d pour correspondre à l'image Enfin, modifiez la couleur de la bordure en #fccaa0 afin de correspondre à la bordure de l'image. Fermez les paramètres de configuration du module.

  • Couleur : #fff67f

Styliser le 6e module de témoignage

Modifiez les informations dans les paramètres du sixième module de témoignage.

Image

Maintenant, nous devons à nouveau changer la couleur de l'image, pour cela ouvrir les paramètres d'image.

  • Couleur de la bordure de l'image: #593a94

Frontière

Enfin, changez la couleur de la bordure en #593a94 pour correspondre à la bordure de l'image. Fermez les paramètres de configuration du module.

  • Couleur : #593a94

Aperçu final

Découvrez comment notre réseau est organisé. Si tous les témoignages ont la même taille, cette technique fonctionne parfaitement.

Voici une approche de conception différente. Pour le contenu de différentes tailles, c'est idéal.

Réflexions finales

Cela conclut notre examen de la capacité du module de témoignage de Divi à construire une disposition de grille de témoignage. En utilisant les options de lignes et de modules de Divi, vous pouvez créer une grille avec une variété de configurations de lignes et de colonnes différentes. En développant ce que nous avons démontré ici, nous pourrions facilement créer une grille beaucoup plus grande. Les modules Divi d'autres types peuvent également bénéficier de ces techniques.