skip to Main Content

3 différentes façon de personnaliser le module témoignage sur Divi

Divi : le thème WordPress le plus facile à utiliser

Divi : Le meilleur thème WordPress de tous les temps !

Avec plus de 600.000 téléchargements, Divi est le thème WordPress le plus populaire au monde. Il est complet, facile à utiliser et livré avec plus de 62 templates gratuits. [ Recommandé ]

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 clients potentiels lors de la visite de votre site Web.

En plus de vous assurer que vous avez des témoignages forts à partager, leur attrait visuel joue également un rôle important. Dans ce tutoriel, nous allons vous montrer 3 façons fantastiques de personnaliser le module de témoignage Divi en utilisant uniquement les options intégrées.

Aperçu

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

Bureau

exemple 1 modification du module temoignage.jpg

exemple 2 modification module témoignage.jpg

exemple 3 modification module temoignage.jpg

Mobile

mobile exemple.jpg

Recréer l’exemple n ° 1

premier exemple temoignage divi.png

Ajouter une nouvelle section

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

ajouter une section sur divi.jpg

Ajouter une nouvelle ligne

Structure de colonne

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

ajouter une nouvelle colonne sur divi.jpg

Dimensionnement

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

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

reglage du dimensionnement divi.jpg

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.

télécharger une image divi.jpg

Les filtres

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

  • Saturation: 40%
  • Contraste: 126%

configuration des images.jpg

Ajouter un module de boutons à la colonne 1

Ajouter une copie

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

effectuer une copie d'une image.jpg

Paramètres du bouton

Ensuite, allez dans les paramètres du bouton et modifiez l’apparence de votre bouton.

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

paramètres du bouton divi.jpg

Espacement

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

  • Top Rembourrage: 10px
  • Rembourrage inférieur: 10px
  • Rembourrage gauche: 30px
  • Rembourrage Droite: 30px

configuration du rembourage interieur.jpg

Boîte ombre

Et terminez avec une ombre de boîte subtile.

  • Box Shadow Blur Force: 80px
  • Couleur de l’ombre: rgba (0,0,0,0,3)

configuration de l'ombre divi.jpg

Ajouter un 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.

ajouter un module de témoignage.jpg

Couleur de fond

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

  • Couleur de fond: rgba (255,255,255,0.96)

configuration de l'image de fond.jpg

Paramètres de l’icône du temoignage

Modifiez également les paramètres de l’icône du temoignage.

  • Couleur de l’icône du temoignage: # 0c0c0c
  • Couleur de l’arrière-plan de l’icône de temoignage: rgba (245,245,245,0)

configuration de la section de l'icone du temoignage.jpg

Paramètres du corps du texte

Modifiez ensuite les paramètres du corps du texte.

  • Corps Police: Verdana
  • Hauteur du corps: 1.7em

paramètre du corps du texte module temoignage.jpg

Espacement

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

  • Marge supérieure: 15vw (bureau et tablette), 0vw (téléphone)
  • Marge inférieure: 50px (tablette et téléphone)
  • Marge gauche: -10vw (bureau et tablette), 0vw (téléphone)
  • Marge droite: 5vw
  • Top rembourrage: 70px
  • Rembourrage inférieur: 70px
  • Rembourrage gauche: 50px
  • Rembourrage Droite: 50px

configuration de l'espacement divi module temoignage.jpg

Créez Facilement votre site Web avec Elementor

Elementor vous permet de créer facilement n'importe quel design de site Web avec un look professionnel. Arrêtez de payer cher pour ce que vous pouvez faire vous-même. [ Gratuit ]

Frontière

Ajoutez également une bordure gauche.

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

configuration de la bordure gauche divi.jpg

Boîte ombre

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

  • Box Shadow Blur Force: 80px
  • Force de propagation de l’ombre de la boîte: -10px
  • Couleur de l’ombre: rgba (0,0,0,0,49)

configuration de l'ombre module temoignage.jpg

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

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

clonner deux modules divi.jpg

Changer l’image

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

modifier limage divi.jpg

Changer le fond du dégradé

Modifiez également le fond dégradé du bouton.

  • Couleur 1: # ff001d
  • Couleur 2: # 3700ff
  • Direction du gradient: 100deg

modifier le fond du degradé divi module temoignage.jpg

Changer la couleur de la bordure du témoignage

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

  • Couleur de bordure gauche: # ff001d

module de témoignage divi

Recréer l’exemple n ° 2

exemple 2 création dune section de temoignage.png

Ajouter une nouvelle section

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

selection dune nouvelle section divi.jpg

Ajouter une nouvelle ligne

Structure de colonne

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

choisir une mise en page pour le module temoignage divi.jpg

Dimensionnement

Continuez en ouvrant les paramètres de ligne et en modifiant les paramètres de dimensionnement.

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

espacement module temoignage divi.jpg

Espacement

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

  • Rembourrage à gauche: 200px (bureau), 30px (tablette), 25px (téléphone)
  • Rembourrage à droite: 200px (bureau), 30px (tablette), 25px (téléphone)
  • Colonne 1 Rembourrage à gauche: 5px (bureau), 0px (tablette et téléphone)
  • Colonne 1 Rembourrage à droite: 2.5px (bureau), 0px (tablette et téléphone)
  • Colonne 2 Rembourrage à gauche: 2.5px (bureau), 0px (tablette et téléphone)
  • Colonne 2 Rembourrage à droite: 2.5px (bureau), 0px (tablette et téléphone)
  • Colonne 3 Rembourrage à gauche: 2.5px (bureau), 0px (tablette et téléphone)
  • Colonne 3 Rembourrage à droite: 5px (bureau), 0px (tablette et téléphone)

personnalisation des marge ligne divi.jpg

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.

ajouter un module video.jpg

Superposition d’image

Ajoutez également une superposition d’images.

configurer la superposition dimage sur divi.jpg

Ajouter un module de témoignage à la colonne 1

Ajouter du contenu

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

ajouter un module témoignage a la colonne 1.jpg

Désactiver l’icône de temoignage

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

  • Afficher l’icône du temoignage: Non

désactiver licone sur le temoignage divi.jpg

Couleur de fond

Ajouter un fond blanc ensuite.

  • Couleur de fond: #ffffff

configurer la couleur de fond.jpg

Cherchez-vous les meilleurs thèmes et plugins WordPress ?

Téléchargez les meilleurs plugins et thèmes WordPress sur Envato et créez facilement votre site web. Déjà plus de 49.720.000 de téléchargements. [EXCLUSIF]

Paramètres du corps du texte

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

  • Corps de couleur du texte: # 000000
  • Espacement lettre corps: -0.5px
  • Hauteur du corps: 1.7em

configurer la couleur de la police module temoignage.jpg

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: 50px
  • Rembourrage inférieur: 50px
  • Rembourrage gauche: 80px
  • Rembourrage Droite: 80px

configurer le rembourrage.jpg

Frontière

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

configuration des bordures arrondis.jpg

Boîte ombre

Enfin, pour donner de la profondeur, nous donnons au module Testimonial une ombre de boîte subtile.

  • Box Shadow Blur Force: 80px
  • Force de propagation de l’ombre de la boîte: -10px
  • Couleur de l’ombre: rgba (0,0,0,0,3)

création des borders module témoignages divi.jpg

Clonez les modules trois fois et placez 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.

modules temoignage divi blogpascher.jpg

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

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

modifier les liens videos modules temoignages exemple 2.jpg

Recréer l’exemple n ° 3

créer l'exemple 3 divi module temoignages.png

Ajouter une nouvelle section

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

selection dune section divi.jpg

Ajouter une nouvelle ligne

Structure de colonne

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

choisir une mise en page a colonne doublée.jpg

Colonne 1 Couleur de fond

Accédez ensuite aux paramètres d’arrière-plan et ajoutez une couleur d’arrière-plan à la première colonne.

  • Colonne 1 Couleur de fond: # f9f9f9

configuration des réglages de la ligne divi.jpg

Colonne 2 Couleur de fond

La deuxième colonne aura besoin d’un fond blanc.

  • Colonne 2 Couleur de fond: #ffffff

configuration de la couleur sur divi.jpg

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

configuration de l'espacement module temoignage divi exemple 3.jpg

Espacement

Ajoutez des valeurs d’espacement personnalisées ensuite.

  • Meilleur rembourrage: 0px
  • Rembourrage En Bas: 0px
  • Rembourrage gauche: 0px
  • Rembourrage Droite: 0px
  • Colonne 1 Rembourrage Supérieur: 100px
  • Colonne 1 Rembourrage inférieur: 100px
  • Colonne 1 Rembourrage à gauche: 50px
  • Colonne 1 Rembourrage à droite: 50px
  • Colonne 2 Rembourrage Supérieur: 100px
  • Rembourrage inférieur de la colonne 2: 100px
  • Colonne 2 Rembourrage à gauche: 50px
  • Colonne 2 Rembourrage à droite: 50px

configuration de l'espacement des colonnes sur divi.jpg

Frontière

Et donnez chacune des frontières ’20px’.

conifguration des bordures sur divi.jpg

Boîte ombre

Dernier point mais non le moindre, donnez à votre ligne une ombre de case.

  • Box Shadow Blur Force: 80px

configuration de l'ombre module temoignage exemple 3.jpg

Ajouter un 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.

ajout d'un module de temoignage divi exemple 3.jpg

Télécharger une image

Continuez en téléchargeant une image dans les paramètres de l’image.

telecharger une image divi builder module temoignage.jpg

Désactiver l’icône de temoignage

Ensuite, désactivez l’icône de temoignage.

  • Afficher l’icône du temoignage: Non

deactiver l'icone temoignage divi exemple 3.jpg

Désactiver la couleur de fond

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

  • Utiliser la couleur de fond: Non

desactiver la couleur de fond.jpg

Créez Facilement votre Boutique en ligne

Téléchargez gratuitement WooCommerce, le meilleurs plugins e-commerce pour vendre vos produits physiques et numériques sur WordPress. [Recommandé]

Paramètres du corps du texte

Continuez en accédant à l’onglet Conception et apportez quelques modifications aux paramètres du corps du texte.

  • Corps Police: Abril Fatface
  • Corps de couleur du texte: # 000000
  • Taille du corps du texte: 20px

paramètres du corps du texte module temoignage divi.jpg

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 de témoignage à la zone de contenu.

ajouter un module de texte a la colonne 1 divi exemple 3.jpg

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

configuration de lespacement module temoignage exemple 3.jpg

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 la société associé au témoignage.

module de témoignage divi

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 les copier et les copier. Une fois que vous avez fait, placez les doublons dans la deuxième colonne.

module de témoignage divi

Changer l’image et la copie du témoignage

Assurez-vous de changer le contenu du témoignage avec les images.

changer l'icone et le contenu du temoignage divi.jpg

Pour finir

C’est tout pour ce tutoriel, j’espère qu’il vous permettra de proposer plusieurs variantes

Cet article comporte 0 commentaires

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Back To Top
2 Partages
Partagez2
Tweetez
Enregistrer