Comment créer un curseur de témoignage compact pour un en-tête dans Divi

L'ajout de témoignages sur votre site est un moyen efficace de renforcer la crédibilité de votre entreprise (ou marque) et de renforcer la confiance des visiteurs. Un curseur de témoignage est un outil pratique pour présenter les témoignages au même endroit. Dans cet esprit, il est logique d'ajouter un curseur de témoignage compact à votre en-tête afin que ces témoignages soient l'une des premières choses que l'utilisateur voit lorsqu'il visite votre site.

Dans ce didacticiel, nous allons vous montrer comment créer un curseur de témoignage compact pour présenter de courts témoignages dans l'en-tête de votre site Web. Pour ce faire, nous allons modifier le Slider Module de Divi de manière ludique et unique.

Commençons!

Aperçu

Voici le slider de témoignage compact que nous allons construire à l'aide du module Divi Slider.

Et voici ce même curseur de témoignage ajouté à un en-tête global.

Et voici à quoi cela ressemble sur mobile.

Téléchargez la mise en page et le modèle GRATUITEMENT

Pour mettre la main sur les designs de ce tutoriel, vous devrez d'abord le 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 !

Importer la mise en page dans la bibliothèque Divi

Pour importer la mise en page de la section dans votre bibliothèque Divi, accédez à la bibliothèque Divi.

Cliquez sur le bouton Importer.

Dans la fenêtre contextuelle de portabilité, sélectionnez l'onglet d'importation et choisissez le fichier à télécharger depuis votre ordinateur. Ce sera le fichier JSON nommé « divi-short-testimonial-slider-module-layout.json ».

Cliquez ensuite sur le bouton importer.

Une fois cela fait, la disposition des sections sera disponible dans le Divi Builder.

Importer le modèle d'en-tête dans le générateur de thème Divi

Si vous souhaitez importer un modèle d'en-tête avec le curseur de témoignage compact ajouté à l'en-tête, vous devrez naviguer dans Divi > Générateur de thèmes.

Utilisez ensuite l'icône de portabilité en haut à droite de la page pour importer le fichier JSON. Ce sera le fichier nommé « divi-short-testimonial-slider-header-template.json ».

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez effectuer les opérations suivantes :

1. Si vous ne l'avez pas encore fait, installez et activez le thème Divi.
2. Créez une nouvelle page dans WordPress et utilisez le Divi Builder pour éditer la page sur le front-end (constructeur visuel).
3. Choisissez l'option « Construire à partir de zéro ».

Après cela, vous aurez une toile vierge pour commencer à concevoir dans Divi.

Comment créer un slider de témoignage compact dans Divi

Ajouter une nouvelle ligne et un module de curseur

Pour commencer, ajoutez une ligne à une colonne à la section.

Ajoutez ensuite un module de curseur à la ligne.

Modifier la diapositive

Sous les paramètres du curseur, supprimez la deuxième diapositive par défaut sous l'onglet Contenu, puis cliquez pour modifier les paramètres de la diapositive restante.

Contenu de la diapositive

Sous l'onglet Contenu des paramètres de la diapositive, mettez à jour les éléments suivants :

• Titre : « Donec sollicitudin molestie malesuada. Vivamus suscipit tortor eget.
• Texte du bouton : tout lire
• Corps : — Tatiana Gagelman

Une fois terminé, enregistrez les paramètres de la diapositive.

Mettre à jour les paramètres du curseur

Dupliquer la diapositive et masquer les contrôles

Après avoir mis à jour la première diapositive avec du contenu, dupliquez cette diapositive pour créer une ou plusieurs diapositives supplémentaires.

Ensuite, sous le groupe d'options Éléments, masquez les commandes du curseur en mettant à jour les éléments suivants :

• Afficher les commandes : NON

Mettre à jour l'arrière-plan de toutes les diapositives

Ensuite, nous allons ajouter un arrière-plan qui sera utilisé pour toutes les diapositives. Cet arrière-plan comprendra un dégradé d'arrière-plan et un style d'image d'arrière-plan (pour quand/si vous ajoutez une image d'arrière-plan d'auteur à une diapositive individuelle).

Pour ajouter l'arrière-plan, mettez à jour les éléments suivants :

• Couleur d'arrière-plan du dégradé à gauche : #000000
• Dégradé de fond à droite : #000000
• Taille de l'image d'arrière-plan : Ajuster
• Position de l'image d'arrière-plan : centre à gauche
• Mélange d'images d'arrière-plan : luminosité

Il est important de noter que nous n'ajoutons pas d'image de fond ici. Nous ajoutons uniquement la taille, la position et le mode de fusion de l'image qui sera utilisée par une diapositive individuelle. Il est plus facile de l'ajouter ici plutôt que d'avoir à ajouter le même style à chaque diapositive séparément. Plus tard, nous vous montrerons comment ajouter des images aux diapositives individuelles.

Paramètres de conception du curseur

Sous l'onglet Conception, mettez à jour les éléments suivants :

Recouvrir

• Utiliser la superposition d'arrière-plan : OUI
• Couleur de superposition d'arrière-plan : rgba(0,0,0,0.7)

Texte du titre

• Titre Titre Niveau : H4
• Police du titre : Josefin Sans
• Poids de la police du titre : moyen
• Alignement du texte du titre : à gauche
• Taille du texte du titre : 16px (ordinateur de bureau et tablette), 14px (téléphone)
• Hauteur de la ligne de titre : 1,5 em

Le corps du texte

• Police de caractère : Josefin Sans
• Alignement du corps du texte : à gauche
• Couleur du corps du texte : #aaaaaa
• Espacement des lettres du corps : 0,05 em

Bouton

• Utiliser des styles personnalisés pour le bouton : OUI
• Taille du texte du bouton : 1em
• Couleur du texte du bouton : par défaut (bureau), #000 (survol)
• Couleur d'arrière-plan du bouton (bureau) : rgba(255,255,255,0.19)
• Couleur d'arrière-plan du bouton (survol) : #ffffff
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 0,05 em
• Police des boutons : Josefin Sans
• Marge du bouton : 0px en haut, 0px en bas
• Remplissage des boutons : 0 px en haut, 0 px en bas, 0,6 em à gauche, 0,6 em à droite

Remplissage et animation automatique

Mettez ensuite à jour l'espacement du curseur pour qu'il soit compact et définissez la vitesse d'animation automatique que vous souhaitez pour le curseur.

• Marge : 0px en haut, 0px en bas
• Rembourrage : 1 em haut, 1 em bas, 5 % à gauche, 5 % à droite
• Animation automatique : ON
• Vitesse d'animation automatique : 3 500

CSS personnalisé

Sous l'onglet avancé, ajoutez le CSS personnalisé suivant pour mettre à jour le style de chaque élément de curseur (titre, bouton et flèches)

Titre de la diapositive

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

Cela garantira que le titre de la diapositive ne créera pas de saut de ligne sur les petits écrans.

Bouton Glisser

position:absolute;
bottom: 1em;
right: 6%;

Cela donne au bouton une position absolue de sorte qu'il se trouve bien sous le titre et à droite de la diapositive, ce qui rend le curseur encore plus compact.

Faites glisser les flèches

font-size: 30px;
margin-top: -15px;

Cela rend simplement les flèches de navigation du curseur plus petites pour s'adapter à la taille compacte du curseur.

Astuce : ajoutez la même couleur d'arrière-plan à la colonne pour des transitions de diapositives plus fluides

Actuellement, l'animation de chaque diapositive animera la couleur d'arrière-plan avec le contenu de la diapositive, pour empêcher l'arrière-plan de montrer cette animation, nous pouvons donner la même couleur d'arrière-plan à la colonne afin que la transition soit plus fluide.

Pour ce faire, ouvrez les paramètres de la colonne parent du curseur et ajoutez la couleur d'arrière-plan suivante :

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

Ajout d'images d'arrière-plan de l'auteur à une diapositive

Si vous souhaitez inclure une image d'arrière-plan d'auteur pour une diapositive, vous pouvez le faire en ajoutant une image d'arrière-plan à chaque diapositive.

Une fois que vous avez ajouté l'image d'arrière-plan à la diapositive, l'image d'arrière-plan héritera des styles déjà en place dans les paramètres du curseur (pas de la diapositive).

Résultat

Découvrez le résultat final.

Ajout du curseur de témoignage compact à un modèle d'en-tête

Enregistrer le module dans la bibliothèque Divi

Avant de pouvoir ajouter le curseur de témoignage compact à un en-tête global, nous devons d'abord enregistrer le module dans la bibliothèque Divi. Vous pouvez le faire en survolant le module de curseur et en cliquant sur l'icône « Enregistrer dans la bibliothèque ». Donnez ensuite un nom à la mise en page et cliquez sur le bouton « Enregistrer dans la bibliothèque ».

Ajout de la disposition du module de témoignage compact à un modèle d'en-tête

Modifier l'en-tête personnalisé

Une fois que le nouveau module de curseur de témoignage a été enregistré dans la bibliothèque, nous sommes prêts à l'ajouter à un en-tête personnalisé.

Accédez à Divi > Générateur de thèmes, puis cliquez pour modifier l'en-tête personnalisé du modèle.

Insérer la disposition du module de curseur de témoignage enregistré à partir de la bibliothèque

Dans l'éditeur de mise en page d'en-tête, cliquez pour ajouter le module de curseur de témoignage compact à l'endroit où vous souhaitez qu'il s'affiche.

Dans le modal Insérer un module, sélectionnez l'onglet Ajouter à partir de la bibliothèque. Recherchez le curseur de témoignage compact que vous avez précédemment enregistré dans la bibliothèque et sélectionnez-le.

Une fois chargé, enregistrez les modifications.

Résultat final

Et voici ce même curseur de témoignage ajouté à un en-tête global.

Et voici le même curseur de témoignage sans les images d'arrière-plan de l'auteur.

Et voici à quoi cela ressemble sur mobile.

Dernières pensées

Le curseur de témoignage compact peut être un nouvel ajout à l'en-tête de tout site Web cherchant à renforcer la crédibilité de leurs services à l'endroit le plus visible de leur site Web. Vous pouvez également l'utiliser pour rediriger les visiteurs vers une page de témoignage ou une page de vente pour augmenter les conversions. Espérons que cela vous sera utile.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!