Comment remplacer les logos des clients par des témoignages au survol/clic avec Divi

Vous cherchez un moyen d'ajouter de l'interaction aux logos des clients et aux témoignages correspondants ? Avec la fonctionnalité de contenu réactif de Divi, il est désormais plus facile que jamais d'afficher un contenu différent dans l'état par défaut d'un module et en survol. Dans le tutoriel Divi d'aujourd'hui, nous allons vous montrer comment remplacer les logos des clients par des témoignages en survol (bureau) et en cliquant (tablette et téléphone). Nous utiliserons le module Blurb pour nous aider à y parvenir ! Vous pourrez également télécharger gratuitement le fichier JSON de la mise en page !

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 logos clients

Pour mettre la main sur la mise en page gratuite des logos clients, vous devrez d'abord la télécharger à l'aide du 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 à une page nouvelle ou existante. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

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

Espacement

Ajoutez également des rembourrages haut et bas personnalisés.

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

Frontière

Complétez les paramètres de la section en ajoutant une bordure blanche.

• Largeur de la bordure : 1vw
• Couleur de la bordure : #ffffff

Ajouter la ligne n° 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et augmentez la largeur maximale de la ligne.

• Largeur maximale : 1500px

Ajouter un module de texte à la colonne

Ajouter du contenu H2 réactif

Le premier module dont nous avons besoin dans cette rangée est un module de texte avec du contenu H2 réactif.

• Bureau : survolez les logos des clients pour voir ce qu'ils ont à dire !
• Tablette et téléphone : cliquez sur les logos des clients pour voir ce qu'ils ont à dire !

Paramètres de texte H2

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

• Police de la rubrique 2 : Work Sans
• En-tête 2 Alignement du texte : Centre
• Titre 2 Couleur du texte : #ffffff
• Titre 2 Taille du texte : 40 px (ordinateur de bureau), 30 px (tablette), 25 px (téléphone)

Ajouter un module diviseur à la colonne

Visibilité

Le prochain et dernier module dont nous avons besoin dans cette rangée est un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

• Afficher le diviseur : Oui

Ligne

Ensuite, changez la couleur de la ligne du module.

• Couleur de la ligne : #ffffff

Dimensionnement

Modifiez également les paramètres de dimensionnement du module.

• Poids du diviseur : 4px
• Largeur : 10 %
• Alignement du module : Centre

Espacement

Complétez les paramètres du module en ajoutant une marge supérieure.

• Marge supérieure : 100 pixels

Ajouter la ligne n° 2

Structure des colonnes

Ajoutez une autre ligne juste en dessous de la précédente et utilisez la structure de colonnes suivante pour cela :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement sur différentes tailles d'écran. Assurez-vous également d'égaliser les hauteurs des colonnes, cela vous aidera pour la prochaine étape ; centrage du contenu de la colonne.

• Égaliser les hauteurs de colonne : Oui
• Largeur : 100 % (ordinateur de bureau), 80 % (tablette et téléphone)
• Largeur maximale : 1500px
• Hauteur minimale : 500 px (ordinateur de bureau), automatique (tablette et téléphone)

Élément principal

Pour centrer le contenu de la colonne de votre ligne, vous devrez 1) activer l'option « Egaliser les hauteurs de colonne » (étape précédente) et 2) ajouter la ligne de code CSS suivante à l'élément principal de votre ligne :

align-items: center;

Ajouter un module Blurb à la colonne

Laisser le contenu par défaut vide

Maintenant, pour remplacer les logos des clients au survol, nous utiliserons les modules Blurb. Commencez par le premier de la colonne 1. Assurez-vous de laisser le titre par défaut et le contenu du corps vides, mais continuez à activer l'option de survol sur les deux.

Ajouter du contenu au survol

Insérez du contenu écrit de votre choix dans les deux champs de survol.

Image par défaut

Continuez en téléchargeant un logo d'entreprise de votre choix dans les paramètres d'image et d'icône.

Supprimer l'image au survol

Nous remplacerons les logos des clients au survol en les supprimant entièrement dans leur état de survol.

Couleur d'arrière-plan du survol

Comme vous pouvez le remarquer dans l'aperçu de cet article, nous modifions également la couleur d'arrière-plan du module au survol. N'utilisez pas de couleur d'arrière-plan par défaut et ajoutez le code de couleur suivant au survol :

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

Paramètres d'image/icône

Passez à l'onglet de conception du module et assurez-vous que l'alignement image/icône suivant s'applique :

• Alignement image/icône : Centre

Paramètres de texte

Puisque nous utilisons une couleur d'arrière-plan de section noire, nous allons changer la couleur du texte du module dans les paramètres généraux du texte.

• Couleur du texte : clair

Paramètres du texte du titre

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

• Titre Titre Niveau : H3
• Police du titre : Work Sans
• Taille du texte du titre : 24 px
• Hauteur de la ligne de titre : 1.4em

Paramètres du corps du texte

Apportez également quelques modifications aux paramètres du corps du texte.

• Police du corps : Open Sans
• Couleur du corps du texte : #8c8c8c
• Hauteur de la ligne du corps : 2,5 em

Espacement par défaut

Ensuite, accédez aux paramètres d'espacement et assurez-vous qu'il n'y a pas de remplissage personnalisé dans l'état par défaut du module.

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage gauche : 0px
• Remplissage droit : 0px

Espacement de survol

Au survol, cependant, nous créons un espace blanc pour notre témoignage en utilisant les valeurs suivantes :

• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 50px
• Remplissage gauche : 50px
• Rembourrage droit : 50 px

Transition

Complétez les paramètres du module en supprimant la durée de transition par défaut. Cela permettra au témoignage d'apparaître immédiatement lorsque vous survolez/cliquez sur le logo.

• Durée de transition : 0 ms

Cloner le module Blurb deux fois et placer les doublons dans les colonnes restantes

Une fois que vous avez terminé le premier module Blurb dans la colonne 1, vous pouvez cloner le module deux fois et placer les doublons dans les colonnes restantes de la ligne.

Cloner la ligne entière

Vous pouvez désormais cloner cette ligne autant de fois que vous le souhaitez, en fonction du nombre de logos clients que vous souhaitez afficher.

Modifier le contenu du survol de chaque doublon de module Blurb

Assurez-vous de modifier le logo du client dans chaque module Blurb en double.

Changer le logo de chaque module Blurb en double

Modifiez également le contenu de survol de chaque module en double et vous avez terminé !

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 utiliser la fonctionnalité d'options réactives de Divi pour remplacer les logos des clients par des témoignages au survol/clic. C'est un excellent moyen d'économiser de l'espace sur vos pages et de créer un design interactif sur différentes tailles d'écran. En plus de montrer le didacticiel, nous avons également partagé le fichier JSON gratuitement au début de cet article ! Si vous avez des questions, 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.