Comment créer des onglets de témoignages personnalisés avec Divi (téléchargement GRATUIT !)

Pour de nombreuses entreprises, les témoignages sont l'un des arguments clés pour obtenir de nouveaux clients. Cela signifie que prêter un peu plus d'attention aux témoignages sur votre site Web ne sera jamais perdu. Au sein de Divi, il existe de nombreuses manières différentes de partager des témoignages, en utilisant par exemple le module de témoignage Divi. Mais si vous recherchez une approche plus interactive, vous allez adorer ce tutoriel. Nous allons vous montrer comment créer des onglets de témoignages personnalisés dans Divi. Une fois que quelqu'un survole le module Blurb sur la gauche, un témoignage correspondant apparaît sur la droite. Les effets de transition dans cette conception sont également transparents, ce qui vous aide à donner cette sensation supplémentaire de personnalisation à votre site Web. Vous pourrez également télécharger le fichier JSON gratuitement !

Allons-y.

Aperçu

Avant de plonger dans le didacticiel, jetons un coup d'œil rapide au résultat sur différentes tailles d'écran.

Bureau

Mobile

Téléchargez GRATUITEMENT la mise en page des onglets de témoignages personnalisés

Pour mettre la main sur la mise en page gratuite des onglets de témoignages personnalisés, vous devrez d'abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! Si vous êtes déjà sur la liste, entrez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger. Vous ne serez pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Commençons à recréer !

Ajouter une nouvelle section

Couleur de l'arrière plan

Commencez par ajouter une nouvelle section à la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et ajoutez une couleur d'arrière-plan.

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

Espacement

Passez à l'onglet de conception de la section et ajoutez des valeurs de marge et de remplissage personnalisées.

• Marge supérieure : 5 %
• Marge inférieure : 5 %
• Marge de gauche : 5 %
• Marge de droite : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Frontière

Incluez également des coins arrondis.

• Tous les coins : 20px

Ajouter la ligne n° 1

Structure des colonnes

Continuez en ajoutant la première ligne à la section en utilisant la structure de colonnes suivante :

Espacement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et ajoutez une marge inférieure.

• Marge inférieure : 3%

Ajouter un module de texte à la colonne

Ajouter du contenu H2

Il est temps d'ajouter des modules, en commençant par un module de texte contenant du contenu H2.

Paramètres de texte H2

Passez à l'onglet de conception du module et modifiez les paramètres de texte H2 en conséquence :

• Police de la rubrique 2 : Montserrat
• Titre 2 Poids de la police : semi-gras
• Titre 2 Taille du texte : 31px
• Espacement des lettres de l'en-tête 2 : -1px

Ajouter un module diviseur à la colonne

Visibilité

Juste en dessous du module de texte, nous ajoutons un module de séparation. Assurez-vous que l'option "Afficher le diviseur" est activée.

• Afficher le diviseur : Oui

Ligne

Passez à l'onglet de conception du module et changez la couleur de la ligne en blanc.

• Couleur de la ligne : #ffffff

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Poids du diviseur : 10px
• Largeur : 14%
• Hauteur : 10px

Frontière

Et complétez les paramètres du module en ajoutant des coins arrondis aux paramètres de bordure.

• Tous les coins : 10px

Ajouter la ligne n° 2

Structure des colonnes

Passons à la rangée suivante. Utilisez la structure de colonnes suivante :

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et égalisez les hauteurs de colonne dans les paramètres de dimensionnement.

• Égaliser les hauteurs de colonne : Oui

Paramètres de la colonne 2

Couleur de l'arrière plan

Ensuite, ouvrez les paramètres de la colonne 2 et appliquez une couleur d'arrière-plan.

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

Espacement

Passez à l'onglet de conception de la colonne et appliquez un rembourrage supérieur et inférieur sur des tailles d'écran plus petites.

• Rembourrage supérieur :
  • Bureau : aucun
  • Tablette et téléphone : 300 px
• Rembourrage inférieur
  • Bureau : aucun
  • Tablette et téléphone : 300 px

Frontière

Incluez également des coins arrondis.

• Tous les coins : 10px

Ajouter le module Blurb n° 1 à la colonne 1

Ajouter du contenu

Il est temps d'ajouter des modules, en commençant par un premier module Blurb dans la colonne 1. Ajoutez du contenu de votre choix.

Télécharger une image au rapport 1:1

Téléchargez ensuite une image avec un ratio de 1:1.

Couleur de l'arrière plan

Ensuite, appliquez la couleur d'arrière-plan suivante :

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

Paramètres d'image

Modifiez également les paramètres de l'image.

• Placement des images/icônes : à gauche
• Coins arrondis de l'image : 100px

Paramètres du texte du titre

Ensuite, modifiez les paramètres du texte du titre en conséquence :

• Police du titre : Montserrat
• Poids de la police du titre : semi-gras
• Espacement des lettres du titre : -1px

Paramètres du corps du texte

Nous modifions également les paramètres du corps du texte.

• Police de caractère : Lato
• Taille du corps du texte : 13 px

Espacement

Ensuite, nous allons ajouter de l'espace autour du contenu de notre module en appliquant les valeurs de remplissage suivantes :

• Rembourrage supérieur : 5 %
• Rembourrage inférieur : 5 %
• Rembourrage gauche : 5 %
• Rembourrage droit : 5 %

Frontière

Ajoutez également des coins arrondis.

• Tous les coins : 10px

Animation

Par défaut, un effet d'animation est appliqué à l'image du module Blurb. Nous supprimons cette animation dans les paramètres d'animation.

• Animation d'image/icône : pas d'animation

Identifiant CSS

Pour créer la conception de l'onglet de témoignage, nous devrons ajouter du code à la fin de ce didacticiel. Pour nous y préparer, nous ajouterons un identifiant CSS à l'onglet avancé du module Blurb.

• ID CSS : testimonial-person-1

CSS de l'image et du titre de présentation

Nous utilisons également deux lignes de code CSS dans l'onglet avancé. Un pour l'image de présentation et l'autre pour le titre de présentation.

width: 25% !important;

margin-top: 25px;

Cloner le module Blurb trois fois

Une fois que vous avez terminé le premier module Blurb, vous pouvez le cloner trois fois.

Modifier le contenu et les images

Assurez-vous de modifier le contenu et les images de chaque module Blurb en double.

Changer les couleurs d'arrière-plan

Avec les couleurs de fond.

• Duplicata 1 : #ffffe6
• Duplicata 2 : #d7ecd9
• Duplicata 3 : #f5d5cb

Modifier les identifiants CSS

Et, bien sûr, les identifiants CSS. Utilisez la numérotation consécutive.

• Duplicata 1 : témoignage-personne-2
• Duplicata 2 : témoignage-personne-3
• Duplicata 3 : témoignage-personne-4

Ajouter un module de texte de citation à la colonne 2

Ajouter une citation à la zone de contenu

Passons à la deuxième colonne. Là, le premier module dont nous avons besoin est un module de texte avec un guillemet.

Paramètres de texte

Passez à l'onglet de conception du module et modifiez les paramètres de texte comme suit :

• Police du texte : affichage Playfair
• Couleur du texte : #ffefdb
• Taille du texte : 200px
• Hauteur de la ligne de texte : 1 em

Position

Repositionnez également le module.

• Position : Absolu
• Emplacement : en haut à gauche
• Décalage horizontal : 5 %

Ajouter un module de texte de témoignage à la colonne 2

Ajouter du contenu de témoignage

Passons au module de texte suivant. Celui-ci sera dédié à notre premier témoignage. Le témoignage que vous placez dans la zone de contenu doit correspondre au premier module Blurb de la colonne 1.

Paramètres de texte

Modifiez les paramètres de texte du module en conséquence :

• Police du texte : Lato
• Couleur du texte : #000000
• Taille du texte : 20 pixels
• Hauteur de la ligne de texte : 2,1 em
• Alignement du texte : Centre

Dimensionnement

Assurez-vous également que la largeur est définie sur « 100 % ».

• Largeur : 100 %

Espacement

Ensuite, ajoutez des valeurs de marge et de remplissage personnalisées aux paramètres d'espacement.

• Marge supérieure : 30 %
• Rembourrage gauche : 10 %
• Rembourrage droit : 10 %

Identifiant CSS

Et ajoutez un identifiant CSS à l'onglet avancé. Le numéro à la fin de cet ID CSS doit correspondre au numéro à la fin de l'ID CSS du module Blurb correspondant.

• ID CSS : testimonial-copy-1

Cloner le module de texte trois fois

Une fois que vous avez terminé le premier module de texte de témoignage, vous pouvez le cloner trois fois.

Modifier le contenu du témoignage

Assurez-vous de modifier le contenu du témoignage dans les modules en double.

Modifier les identifiants CSS

Avec les identifiants CSS. Assurez-vous de suivre un ordre consécutif.

• Duplicata 1 : témoignage-copie-2
• Duplicata 2: témoignage-copie-3
• Duplicata 3 : témoignage-copie-4

Ajouter une classe CSS au premier module de texte de témoignage

Et nous devrons ajouter une classe CSS au témoignage que nous voulons activer au début. Dans ce cas, c'est le premier.

• Classe CSS : spectacle-témoignage

Ajouter un module de code sous le module de séparation (ligne n° 1)

Maintenant que nous avons tous les éléments en place, il est temps que la magie opère. Ajoutez un nouveau module de code juste en dessous du module de séparation dans la première ligne de la section.

Ajouter un code CSS

Insérez les lignes de code CSS suivantes entre les balises de style comme vous pouvez le voir dans l'écran d'impression ci-dessous.

.show-testimonial {
visibility: visible !important;
opacity: 1 !important;
top: 0 !important;
}

.testimonial-active {
transform: translateX(-10%);
}

[id*="testimonial-person"]{
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;

cursor: context-menu;
}

[id*="testimonial-copy"] {
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
-ms-transition: all 0.3s ease;
transition: all 0.3s ease;

position: absolute!important;
top: -100px;
bottom: auto;
left: 0;
right: auto;

visibility: hidden;
opacity: 0;
}

Ajouter du code JQuery

Ensuite, placez les lignes suivantes de code JQuery entre les balises de script comme vous pouvez le voir dans l'écran d'impression ci-dessous et vous avez terminé !

jQuery(function($){
$(document).ready(function(){

$('#testimonial-person-1').addClass('testimonial-active');

$('[id*="testimonial-person"]').hover(function() {

var $selector = $(this).attr('id').replace('person', 'copy');
var $testimonial = $('#' + $selector);

$('[id*="testimonial-copy"]').removeClass('show-testimonial');
$testimonial.addClass('show-testimonial');

$('[id*="testimonial-person"]').removeClass('testimonial-active');
$(this).addClass('testimonial-active');

});

});
});

Aperçu

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

Bureau

Mobile

Dernières pensées

Dans cet article, nous vous avons montré comment créer un design de témoignage interactif pour tout type de site Web que vous créez. Plus précisément, nous vous avons montré comment créer des onglets de témoignages personnalisés qui se déclenchent une fois que quelqu'un survole l'un des modules Blurb sur la gauche. Vous avez également pu télécharger le fichier JSON gratuitement ! Si vous avez des questions ou des suggestions, n'hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous souhaitez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube afin que vous soyez toujours l'une des premières personnes à connaître et à tirer parti de ce contenu gratuit.