5 façons fantastiques de styler le module de témoignage de Divi

La seule chose que les visiteurs recherchent toujours sur un site Web, ce sont les témoignages. Ils représentent la crédibilité et influencent le processus de prise de décision des prospects ou des clients potentiels lorsqu'ils visitent votre site Web. En plus de vous assurer d'avoir des témoignages forts à partager, les rendre visuellement attrayants joue également un rôle important. Dans cet article, nous allons vous montrer 5 façons fantastiques de styliser le module de témoignage Divi en utilisant uniquement les options intégrées.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat final sur différentes tailles d'écran.

Bureau

Mobile

Recréer l'exemple #1

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Commençons par le premier exemple ! Créez une nouvelle page et ajoutez une section régulière.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et apportez quelques modifications aux paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Ajouter un module d'image à la colonne 1

Télécharger une image

Il est temps de commencer à ajouter des modules ! Le premier module dont nous aurons besoin est un module Image dans la colonne 1. Allez-y et téléchargez une image carrée de votre choix.

Filtres

Ensuite, allez dans les paramètres des filtres et jouez avec les différents effets.

• Saturation : 40 %
• Contraste : 126%

Ajouter un module de bouton à la colonne 1

Ajouter une copie

Le deuxième et dernier module dont nous aurons besoin dans la colonne 1 est un module de bouton. Ajoutez une copie de votre choix.

Paramètres des boutons

Ensuite, allez dans les paramètres du bouton et apportez quelques modifications à l'apparence de votre bouton.

• Utiliser des styles personnalisés pour le bouton : Oui
• Taille du texte du bouton : 14 px
• Couleur 1: #5400ff
• Couleur 2: #00fff6
• Direction du gradient : 100 degrés
• Largeur de la bordure du bouton : 0px
• Poids de la police : Ultra gras
• Style de police : majuscule

Espacement

Ajoutez également des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 30 px
• Rembourrage droit : 30 px

Boîte ombre

Et terminez avec une subtile ombre de boîte.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter le module de témoignage à la colonne 2

Ajouter du contenu

Dans la deuxième colonne, le seul module dont nous aurons besoin est un module de témoignage. Ajoutez du contenu aux différents champs et à la zone de contenu.

Couleur de l'arrière plan

Ensuite, ajoutez une couleur de fond légèrement transparente.

• Couleur d'arrière-plan : rgba(255,255,255,0.96)

Paramètres de l'icône de devis

Modifiez également les paramètres de l'icône de citation.

• Couleur de l'icône de citation : #0c0c0c
• Couleur d'arrière-plan de l'icône de devis : rgba(245,245,245,0)

Paramètres du corps du texte

Ensuite, modifiez les paramètres du corps du texte.

• Police de caractère : Verdana
• Hauteur de la ligne du corps : 1,7 em

Espacement

Continuez en ajoutant différentes valeurs de marge et de remplissage personnalisées dans les paramètres d'espacement.

• Marge supérieure : 15vw (ordinateur de bureau et tablette), 0vw (téléphone)
• Marge inférieure : 50px (tablette et téléphone)
• Marge de gauche : -10vw (ordinateur de bureau et tablette), 0vw (téléphone)
• Marge droite : 5vw
• Rembourrage supérieur : 70 pixels
• Rembourrage inférieur : 70px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Frontière

Ajoutez également une bordure gauche.

• Largeur de la bordure gauche : 7px
• Couleur de la bordure gauche : #5400ff

Boîte ombre

Enfin, ajoutez une ombre de boîte subtile pour façonner le module de témoignage.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba(0,0,0,0.49)

Cloner les deux modules et placer les doublons dans les colonnes 3 et 4

Une fois que vous avez terminé de modifier les modules dans les colonnes 1 et 2, vous pouvez cloner les modules et placer les doublons dans les deux colonnes restantes.

Changer l'image

N'oubliez pas de changer l'image de votre deuxième témoignage.

Changer l'arrière-plan du dégradé du bouton

Modifiez également l'arrière-plan du dégradé du bouton.

• Couleur 1 : #ff001d
• Couleur 2: #3700ff
• Direction du gradient : 100 degrés

Changer la couleur de la bordure du témoignage

Et faites correspondre la couleur de la bordure au nouveau fond dégradé du bouton.

• Couleur de la bordure gauche : #ff001d

Recréer l'exemple #2

Ajouter une nouvelle section

Passons au deuxième exemple ! Ajoutez une nouvelle section régulière à votre page.

Ajouter une nouvelle ligne

Structure des colonnes

Sans apporter de modifications à la section, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Continuez en ouvrant les paramètres de ligne et en apportant quelques modifications aux paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1

Espacement

Ensuite, ajoutez des valeurs de remplissage personnalisées à la ligne et aux colonnes.

• Rembourrage gauche : 200 pixels (ordinateur de bureau), 30 pixels (tablette), 25 pixels (téléphone)
• Rembourrage droit : 200 pixels (ordinateur de bureau), 30 pixels (tablette), 25 pixels (téléphone)
• Remplissage gauche de la colonne 1 : 5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage à droite de la colonne 1 : 2,5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage gauche de la colonne 2 : 2,5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage droit de la colonne 2 : 2,5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage gauche de la colonne 3 : 2,5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)
• Remplissage à droite de la colonne 3 : 5 pixels (ordinateur de bureau), 0 pixels (tablette et téléphone)

Ajouter un module vidéo à la colonne 1

Lien vidéo

Le premier module dont nous aurons besoin dans la colonne 1 est un module vidéo. Liez cette vidéo à votre vidéo de témoignage.

Superposition d'images

Ajoutez également une superposition d'images.

Ajouter le module de témoignage à la colonne 1

Ajouter du contenu

Le deuxième et dernier module requis dans la colonne 1 est un module de témoignage. Commencez par ajouter les détails du témoignage.

Désactiver l'icône de devis

Ensuite, désactivez l'icône de citation dans les paramètres des éléments.

• Afficher l'icône du devis : Non

Couleur de l'arrière plan

Ajoutez ensuite un fond blanc.

• Couleur d'arrière-plan : #ffffff

Paramètres du corps du texte

Modifiez également les paramètres du corps du texte.

• Couleur du corps du texte : #000000
• Espacement des lettres du corps : -0,5 px
• Hauteur de la ligne du corps : 1,7 em

Espacement

Et ajoutez des valeurs de marge et de remplissage personnalisées dans les paramètres d'espacement.

• Marge inférieure : 30px (tablette et téléphone)
• Rembourrage supérieur : 50px
• Rembourrage inférieur : 50px
• Remplissage gauche : 80px
• Rembourrage droit : 80 px

Frontière

Nous donnons également au module des coins arrondis en bas à gauche et à droite « 30px ».

Boîte ombre

Et enfin, pour créer un peu de profondeur, nous donnons au module de témoignage une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner les modules trois fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé de modifier les deux modules de la colonne 1, clonez-les deux fois et placez les doublons dans les deux colonnes restantes.

Modifier les liens vidéo, le contenu et les superpositions d'images

N'oubliez pas de modifier le lien vidéo, le contenu et les superpositions d'images de vos nouveaux témoignages.

Recréer l'exemple #3

Ajouter une nouvelle section

Passons au troisième exemple ! Ajoutez une nouvelle section régulière à votre page.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne en utilisant la structure de colonnes suivante :

Colonne 1 Couleur d'arrière-plan

Ensuite, allez dans les paramètres d'arrière-plan et ajoutez une couleur d'arrière-plan à la première colonne.

• Couleur d'arrière-plan de la colonne 1 : #f9f9f9

Couleur d'arrière-plan de la colonne 2

La deuxième colonne aura besoin d'une couleur de fond blanc.

• Couleur d'arrière-plan de la colonne 2 : #ffffff

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et supprimez la largeur de la gouttière.

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

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage gauche : 0px
• Remplissage droit : 0px
• Remplissage supérieur de la colonne 1 : 100px
• Remplissage inférieur de la colonne 1 : 100px
• Remplissage gauche de la colonne 1 : 50px
• Remplissage à droite de la colonne 1 : 50px
• Remplissage supérieur de la colonne 2: 100px
• Remplissage inférieur de la colonne 2 : 100px
• Remplissage gauche de la colonne 2 : 50px
• Remplissage à droite de la colonne 2 : 50px

Frontière

Et donnez à chacune des bordures '20px'.

Boîte ombre

Enfin et surtout, donnez à votre rangée une ombre de boîte.

• Force du flou d'ombre de la boîte: 80px

Ajouter le module de témoignage à la colonne 1

Ajouter du contenu

Il est temps de commencer à ajouter des modules ! Le premier module dont nous aurons besoin dans la colonne 1 est un module de témoignage. Ajoutez le contenu.

Télécharger une image

Continuez en téléchargeant une image dans les paramètres d'image.

Désactiver l'icône de devis

Ensuite, désactivez l'icône de citation.

• Afficher l'icône du devis : Non

Désactiver la couleur d'arrière-plan

Désactivez également la couleur d'arrière-plan.

• Utiliser la couleur d'arrière-plan : Non

Paramètres du corps du texte

Continuez en allant dans l'onglet Conception et apportez quelques modifications aux paramètres du corps du texte.

• Police de caractère : Abril Fatface
• Couleur du corps du texte : #000000
• Taille du corps du texte : 20px

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Le deuxième module dont nous aurons besoin dans la colonne 1 est un module de texte. Ajoutez la copie du témoignage dans la zone de contenu.

Espacement

Ensuite, accédez à l'onglet Conception et ajoutez des marges supérieure et inférieure personnalisées.

• Marge supérieure : 50px
• Marge inférieure : 50px

Ajouter un module d'image à la colonne 1

Télécharger le logo de l'entreprise

Le troisième et dernier module dont nous aurons besoin dans la première colonne est un module Image. Vous pouvez utiliser ce module pour ajouter le logo de l'entreprise lié au témoignage.

Cloner tous les modules et placer les doublons dans la colonne 2

Une fois que vous avez terminé de modifier tous les modules de la colonne 1, vous pouvez continuer et les cloner. Une fois que vous l'avez fait, placez les doublons dans la deuxième colonne.

Modifier l'image et la copie du témoignage

Assurez-vous de modifier le contenu du témoignage ainsi que les images.

Recréer l'exemple n°4

Ajouter une nouvelle section

Passons au quatrième exemple ! Ajoutez une nouvelle section à votre page.

Ajouter une nouvelle ligne

Structure des colonnes

Continuez en ajoutant une nouvelle ligne à votre section en utilisant la structure de colonnes suivante :

Image de fond de la colonne 1

Ouvrez les paramètres de ligne et ajoutez une image d'arrière-plan à la première colonne.

• Répétition de l'image d'arrière-plan de la colonne 1 : aucune répétition

Image de fond de la colonne 3

Faites de même pour la troisième colonne.

• Colonne 3 Répétition de l'image d'arrière-plan : aucune répétition

Dimensionnement

Ensuite, allez dans les paramètres de dimensionnement et apportez quelques modifications.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

Supprimez ensuite le rembourrage supérieur et inférieur par défaut.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px

Ajouter le module de témoignage à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module de témoignage à la première colonne. Une fois que vous l'avez fait, ajoutez les détails du témoignage.

Fond dégradé

Donnez également au module un arrière-plan dégradé.

• Couleur 1 : #8b32ff
• Couleur 2 : #ff35ae
• Direction du gradient : 120 degrés

Paramètres de l'icône de devis

Ensuite, apportez quelques modifications aux paramètres de l'icône.

• Couleur de l'icône de devis : #000000
• Couleur d'arrière-plan de l'icône de citation : #ffffff

Paramètres de texte

Et changez la couleur du texte dans les paramètres du texte.

• Couleur du texte : clair

Espacement

Pour donner au module une forme carrée, nous allons ajouter un rembourrage personnalisé dans les paramètres d'espacement.

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px
• Remplissage gauche : 100 px
• Remplissage droit : 100 px

Boîte ombre

Vous voudrez également ajouter de la profondeur au témoignage en utilisant une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte: -10px
• Couleur de l'ombre : #ff35ae

Filtre par défaut

L'idée derrière ce témoignage est qu'une fois que vous le survolez, le témoignage disparaît et l'image apparaît. Pour obtenir cet effet, nous allons utiliser le filtre d'opacité dans les paramètres des filtres. Assurez-vous que l'opacité par défaut est « 100 % ».

• Opacité : 100 %

Filtre de survol

Et supprime toute opacité au survol.

• Opacité : 0%

Cloner le module de témoignage dans la colonne 3

Une fois que vous avez terminé de modifier le module de témoignage dans la colonne 1, clonez-le et placez le doublon dans la troisième colonne.

Changer le fond dégradé

Modifiez ensuite le fond dégradé du doublon.

• Couleur 1 : #32b0ff
• Couleur 2: #89009e
• Direction du gradient : 120 degrés

Cloner la ligne

Et clonez toute la ligne.

Supprimer l'arrière-plan du dégradé de témoignages et modifier la couleur d'arrière-plan

La prochaine chose que vous devrez faire est de supprimer l'arrière-plan dégradé des modules de témoignage et d'utiliser à la place une couleur d'arrière-plan blanche.

• Couleur d'arrière-plan : #ffffff

Modifier les paramètres du texte de témoignage

Une fois que vous avez supprimé l'arrière-plan dégradé, vous pouvez modifier la couleur du texte dans les paramètres du texte.

• Couleur du texte : foncé

Recréer l'exemple #5

Ajouter une nouvelle section

Passons au prochain et dernier exemple de ce tutoriel ! Ajoutez une nouvelle section régulière à votre page.

Couleur de l'arrière plan

Modifiez la couleur d'arrière-plan de la section.

• Couleur d'arrière-plan : #ededed

Ajouter une nouvelle ligne

Structure des colonnes

Ensuite, ajoutez une nouvelle ligne en utilisant la structure de colonnes suivante :

Dimensionnement

Apportez également quelques modifications aux paramètres de dimensionnement.

• Faire cette ligne en pleine largeur : Oui
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 2

Ajouter un module de texte à la colonne 1

Ajouter du contenu

Continuez en ajoutant un module de texte à la première colonne. Ajoutez la copie du témoignage dans la zone de contenu.

Couleur de l'arrière plan

Et changez la couleur de fond du module.

• Couleur d'arrière-plan : #ffffff

Paramètres de texte

Ensuite, accédez à l'onglet Conception et modifiez l'orientation du texte dans les paramètres de texte.

• Orientation du texte : Centre

Espacement

Ajoutez également des valeurs de marge personnalisées.

• Marge de gauche : 50 pixels (ordinateur de bureau et tablette), 20 pixels (téléphone)
• Marge de droite : 50 px (ordinateur de bureau et tablette), 20 px (téléphone)

Ajouter le module de témoignage à la colonne 1

Ajouter du contenu

Juste en dessous du module de texte, vous pouvez ajouter un module de témoignage. Remplissez les champs du nom de l'auteur, de l'intitulé du poste et du nom de l'entreprise.

Télécharger une image

Téléchargez également une image dans les paramètres d'image.

Fond dégradé

Et ajoutez un fond dégradé.

• Couleur 1 : #5b32ff
• Couleur 2: #32e5f2
• Direction du gradient : 100 degrés

Paramètres de l'icône de devis

Continuez en accédant à l'onglet Conception et en modifiant les paramètres de l'icône de devis.

• Couleur de l'icône de devis : #000000
• Couleur d'arrière-plan de l'icône de citation : #ffffff

Paramètres de texte

Modifiez également l'orientation du texte dans les paramètres de texte.

• Orientation du texte : Centre
• Couleur du texte : clair

Paramètres du corps du texte

Ensuite, jouez avec les paramètres du corps du texte.

• Poids de la police de caractères : Ultra gras
• Style de police du corps : majuscule
• Taille du corps du texte : 15px
• Espacement des lettres du corps : -0,5 px
• Hauteur de la ligne du corps : 2,1 em

Espacement

Ajoutez une marge supérieure négative pour créer le chevauchement entre ce module et le module de texte.

• Marge supérieure : -25px

Boîte ombre

Et terminez la conception du témoignage en donnant au module de témoignage une ombre de boîte subtile.

• Force du flou d'ombre de la boîte: 80px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Cloner les deux modules deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé de modifier les modules de la colonne 1, vous pouvez les cloner deux fois et placer les doublons dans les deux colonnes restantes.

Modifier le contenu et les images des témoignages

Assurez-vous de modifier le contenu et les images utilisés dans les modules.

Modifier les arrière-plans dégradés des témoignages

Avec les arrière-plans dégradés.

• Couleur 1 : #a632ff
• Couleur 2: #f7a131

• Couleur 1: #3281ff
• Couleur 2: #2cf483

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final sur différentes tailles d'écran.

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré 5 façons fantastiques de styliser le module de témoignage Divi. Nous vous avons guidé pas à pas tout au long du didacticiel et créé des témoignages que vous pouvez utiliser sur pratiquement tous les sites Web sur lesquels vous travaillez. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous.