Le module Divi "Témoignage" (tuto vidéo)

Le module Témoignage (Testimonial) met en forme une citation de client : le texte, le nom de l’auteur, son poste, sa société avec un lien facultatif, et sa photo, ronde par défaut. Placez-le sur une page de vente ou de services pour donner confiance. Dans la vidéo ci-dessous, je montre comment modifier ce rendu par défaut : forme de la photo, fond, bordure et ombre.

Nom anglais : Testimonial.

Ce module témoignage met rapidement en forme un témoignage : vous pouvez aussi créer vos propres mises en forme de témoignages en combinant modules textes et images.

Dans cette vidéo tutoriel Divi, je passe plus de 10 minutes à montrer comment on peut publier des témoignages dans une page Divi avec le module Témoignage : image carrée, ronde, rectangle aux bords arrondis, couleur de fond, mise en page, liens, variantes, déclinaisons, avec comme d'habitude, des expérimentations pratiques et des explications en détails.

Bonjour, je vais vous montrer comment créer des sections témoignage dans votre site Divi, comme celle-ci ou celle-ci.

D'abord, nous allons activer le Visual Builder pour pouvoir modifier la page. Si vous arrivez sur la vue filaire, cette vue abstraite, il suffit de cliquer sur le bouton avec les trois petits points en bas et cliquer sur le grand écran pour repasser en vue du bureau.

C'est-à-dire voir directement le résultat de l'édition.

D'abord nous allons créer une nouvelle section qui va accueillir nos témoignages. Donc on se place à l'endroit où on veut mettre cette section et on va cliquer sur le bouton bleu pour ajouter une nouvelle section.

On sélectionne "normal", puis ici on va les mettre en deux colonnes. On nous demande quel module insérer, donc dans la barre de recherche on va taper le début de "témoignage", puis cliquer sur témoignage.

Maintenant nous avons cette fenêtre qui s'est ouverte à gauche et un témoignage par défaut qui s'est affiché. Si cette fenêtre s'ouvre ici, souvenez-vous que vous pouvez la faire se balader comme ça. Moi j'aime la mettre à gauche, donc maintenant nous avons comme d'habitude les trois onglets Contenu, Style, Avancé et puis dans chacun des tas de sections.

Nous allons regarder donc en premier le texte avec le nom de l'auteur, ici c'est le nom de la personne qui témoigne. Ensuite son titre, parce que lorsqu'on veut mettre des témoignages, on veut montrer que ce sont des professionnels qui donnent des témoignages. Ensuite, vous n'êtes pas obligé de remplir ça, le nom de la société. Vous voyez qu'ici il y a une virgule et ici il n'y en a pas, donc ici on ajoute le nom de la société.

Ensuite le contenu va être le témoignage en lui-même.

Maintenant on a rempli tout le texte, on peut passer à la suite qui est l'image. Par défaut on nous met une image avec un petit bonhomme en niveau de gris, on va la remplacer par l'image de notre choix.

On va prendre une image carrée/rectangle qui s'affiche en rond. Nous allons voir pourquoi, tout de suite, elle s'affiche en rond. On va finir avant de continuer vers les éléments ici.

On a une option alors qui n'a pas été traduite en français : "Show Quote Icon". Ça veut dire "Afficher l'icône du guillemet". Donc, c'est simple : si on le décoche, il disparaît.

Ensuite, nous avons les liens : donc un lien possible sur tout le module, comme dans tous les modules, mais ce qui nous intéresse ici, c'est "Company link URL". Ça n'a pas été traduit non plus. C'est le lien qui va être sur le nom de la société. Donc, ici, je peux taper, si je le veux, l'adresse qui va créer le lien sur le nom de la société qu'on avait rempli ici.

Ensuite, "Module Link URL", on le laisse tranquille parce qu'on veut pas que quand les gens cliquent, ils aillent quelque part sur le module. On veut qu'il reste sur notre site.

Ensuite, on peut mettre un fond comme à tous les modules. Alors, par exemple, un dégradé. Donc, vous voyez que tout de suite, c'est plus lisible. Et on va éviter de mettre des dégradés sous du texte, même si on pourrait, euh, faire quelque chose d'un petit peu plus lisible, un petit peu plus… voilà, comme ça. Ça reste à peu près lisible, c'est pas mal. On va éviter de mettre du rouge ou du vert sous du texte. Donc, comme ce rendu n'est pas mal, ce qui va être intéressant, c'est que nous allons sauvegarder les changements dans le module, le dupliquer, le déplacer ici et continuer notre travail sur une copie. Comme ça, on a une version 1.

Maintenant, on travaille sur une version 2.

Donc, nous étions dans l'onglet "Fond". Sur la version 2, on va supprimer le dégradé. Pour ceci, je clique sur "Fond", je me rends dans l'onglet "Dégradé", je passe la souris sur le dégradé et je clique sur la poubelle.

Maintenant, on voit qu'il y a dans l'onglet de gauche une couleur de fond. Ici, on va lui mettre une couleur de fond blanche.

Et ce qu'on va faire pour obtenir l'effet qu'on a là-dessus, c'est qu'on va mettre une couleur de fond à la section. Donc, je passe la souris sur la section et dans la roue dentée bleue ("Réglage de la section"), je vais dans "Fond" > "Couleur" et je vais lui ajouter un gris très léger, comme ceci.

Maintenant, nous avons terminé le premier onglet "Contenu".

On va se rendre dans "Style". Ici, nous avons les couleurs de l'icône de citation. L'icône de citation, c'est le guillemet.

Ici, on peut par exemple mettre en rouge avec un fond jaune. On voit que c'est très moche. On se rend compte que c'était très bien avant. Donc, on va mettre par exemple une couleur bleue. En revanche, pour le fond, il faut mettre quelque chose de potable. Ici, on va mettre un fond blanc, comme on a mis un fond gris derrière. Comme ça, il n'est pas mélangé.

Ensuite, on a les options habituelles de texte. Ici, on va rien changer. Ce qui va nous intéresser, c'est l'image.

Ce qu'il faut savoir, c'est que dans le module Divi Témoignage, par défaut, ils ont fait des réglages qui vont rendre votre image ronde et en petit.

Ça va transformer votre grande image carrée en petite image ronde de 90 pixels de hauteur et de largeur.

Donc, ça on le voit ici dans "Largeur", "Hauteur" et encore quelque chose qui n'est pas traduit en français : "Rounded corners". Ça veut dire "bord arrondi".

Ici, si on change la largeur du portrait (donc là, on parle de cette image qui est ici), on voit sa largeur changer et sa hauteur.

Alors, vous voyez que ce n'est plus un rond, ça devient un ovale.

Donc, pourquoi ça ?

Parce que ce qui se passe, c'est que sur une page web, lorsqu'on met des bords arrondis d'une valeur égale à la largeur et la hauteur sur un carré, ça va nous créer un rond.

Donc, on va montrer ça.

Si je mets 100 de largeur, 100 de hauteur et 100 de bord arrondi, on voit que ça nous crée une image ronde.

En revanche, si je mets 150 de largeur, 150 de hauteur et que je mets 10 de bord arrondi, ça va me faire un carré de 150 x 150 avec des bords arrondis de 10 pixels.

Et là, pour voir ce que ça donne, vous voyez qu'on peut glisser ceci.

Et lorsqu'on arrive à la moitié de la valeur (en fait, ce n'est pas la valeur exacte, c'est la valeur arrondie), donc 150 / 2 = 75, on est en arrondi.

Ici, on peut mettre plus, ça ne changera rien, parce qu'on ne peut pas arrondir plus. En fait, on sera toujours à la moitié de la valeur.

D'ailleurs, ils auraient dû mettre 90, 90 et 45 au lieu de mettre 90, 90 et 90, ce qui nous a induits en erreur.

Donc, maintenant, ce qu'on veut faire, c'est supprimer ce rond qui nous embête.

Parce qu'on a, par exemple, des portraits qui sont plus hauts que larges et l'image est un peu petite aussi. Donc, on va la passer à 120 en largeur et, par exemple, 160 en hauteur.

Maintenant, c'est pas mal, mais le bord arrondi fait bizarre.

Donc, soit on le met à fond, mais ça ne va pas faire terrible, soit on le supprime complètement, ce qui est tout à fait potable.

Là, on voit qu'on a quelque chose de bien structuré.

Donc, ce qu'on va faire, c'est qu'on va dupliquer cette rangée pour que ça ressemble plus à quelque chose.

On va mettre deux identiques sur chaque ligne. Donc, on voit qu'on a une version 1 et une version 2.

D'ailleurs, sur la version 1, pendant qu'on y est, on va supprimer le lien. Hop, lien et celui-là également, lien.

Maintenant, on va dupliquer ça et on va passer à notre version 3.

Notre version 3 qui va être avec des petits changements subtils.

Ce qu'on va faire, c'est qu'on va supprimer le guillemet qui est identique sur les sites comme ceci.

Ce qui va nous permettre de mettre une petite bordure. Alors, ça, ce sont les bords à… autant pour moi, une petite bordure ici qu'on va mettre dans une couleur qui va être entre le gris de fond et le blanc.

Donc, on va se rapprocher du gris du fond.

Voilà, là on est sur le gris du fond. On met un petit peu plus. Hop, voyez comme c'est joli, ça ressort un petit peu par rapport à celui du dessus.

Maintenant, on peut ajouter des bords arrondis, donc d'une petite valeur simplement pour donner un petit effet.

Comme ça. Et puis, ce qu'on va faire, c'est qu'on va aller dans "Box Shadow", ce qui veut dire l'ombre de la boîte.

Donc, la boîte, c'est notre module.

Ici, on a les ombres prédéfinies, dont nous pouvons modifier ensuite la valeur. Donc, nous allons prendre celle-ci.

Et maintenant, on voit que ces bords arrondis et ce bord carré, ça fait un petit peu bizarre.

Donc, on va retourner dans l'image et on va lui dire de mettre un petit bord ici, par exemple, ou alors la même valeur que la boîte.

Non, ce n'est pas terrible.

Et maintenant, nous avons un module témoignage qui est très sympa.

Donc, ce qu'on va faire, c'est qu'on va passer la souris sur ce module, on va faire clic droit et on va dire "copier les styles de ce module".

Maintenant, on va se rendre sur celui de droite, on va faire clic droit et on va lui dire de "coller les styles du module".

Et vous voyez, il a copié celui de gauche vers la droite.

Maintenant, on peut prendre l'exemple dans lequel le deuxième témoignage a plus de texte que le premier.

Ce qui est bien avec notre boîte, c'est qu'on peut rajouter du texte sans problème. Elle va garder sa structure, son nombre de colonnes, etc.

Ensuite, on peut vérifier le rendu sur mobile.

Tout repasse en une colonne et c'est parfait, c'est magnifique.

Ce tutoriel continuera dans les formations dans lesquelles nous allons voir comment avoir une même hauteur de module à gauche et à droite et comment créer un témoignage qui a une structure différente de celle proposée par Divi, qui va toujours nous mettre une icône en haut, une image à gauche, un texte, etc.

La suite est dans la formation « Mieux utiliser Divi » (réservée aux membres) : Section témoignages et Design section Témoignages.