Comment créer des survols de survol uniques pour les témoignages avec Divi

Les témoignages sont une affaire énorme pour de nombreux sites Web. Ils font preuve d'expertise et les visiteurs vont généralement les chercher s'ils veulent déterminer la crédibilité d'une entreprise ou d'une personne. C'est pourquoi il est important de réfléchir à la façon dont vous présentez visuellement les témoignages sur votre site Web.

Avec Divi, vous pouvez afficher vos témoignages exactement comme vous le souhaitez. Pour vous inspirer, nous allons vous montrer comment créer une manière étonnante et unique de présenter des témoignages en utilisant des chevauchements de survol.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat final.

Ajouter une nouvelle section

Commençons! Ajoutez une nouvelle page ou ouvrez une page existante et ajoutez une nouvelle section régulière.

Ajouter une nouvelle ligne 1

Structure des colonnes

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

Dimensionnement

Sans ajouter encore de modules, ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.

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

Espacement

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

• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage gauche de la colonne 2 : 2vw (ordinateur de bureau), 3vw (tablette et téléphone)
• Rembourrage droit de la colonne 2 : 11vw (ordinateur de bureau), 3vw (tablette et téléphone)

Ajouter un module d'image à la colonne 1

Télécharger une image

Il est temps de commencer à ajouter les différents modules ! Commencez avec un module d'image dans la première colonne. Téléchargez une image de portrait de votre choix.

Alignement des images

Ouvrez les paramètres de l'image et modifiez l'alignement de l'image.

• Alignement de l'image : à gauche

Dimensionnement

Modifiez ensuite les paramètres de dimensionnement.

• Largeur : 78 % (ordinateur de bureau), 70 % (tablette et téléphone)
• Alignement du module : à gauche

Ajouter le module de texte de chevauchement de survol à la colonne 1

Ajouter du contenu

Juste en dessous du module Image, ajoutez un module Texte. Placez les détails de la personne dans la zone de contenu.

Arrière-plan par défaut

Procédez en ajoutant une couleur de fond.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Survoler l'arrière-plan

Ajoutez une autre couleur d'arrière-plan au survol.

• Couleur d'arrière-plan : #0f1bff

Paramètres de texte par défaut

Ensuite, modifiez les paramètres de texte.

• Couleur du texte : #ffffff
• Taille du texte : 0px
• Hauteur de la ligne de texte : 0px

Paramètres de texte de survol

Faites quelques ajustements pour les paramètres de texte en survol.

• Taille du texte : 19px
• Hauteur de la ligne de texte : 2 em

Paramètres de texte d'en-tête par défaut

Les paramètres du texte d'en-tête doivent également être modifiés.

• Titre 3 Poids de la police : Ultra gras
• Titre 3 Style de police : majuscule
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 0px
• Titre 3 Hauteur de ligne : 0em

Paramètres de texte d'en-tête de survol

Ajoutez différentes valeurs au survol.

• Titre 3 Taille du texte : 35px
• En-tête 3 Hauteur de ligne : 1,1 em

Espacement

Ensuite, accédez aux paramètres d'espacement et ajoutez des valeurs.

• Marge supérieure : -100px
• Marge de gauche : 50px
• Marge de droite : 50px
• Rembourrage supérieur : 40 px
• Rembourrage inférieur : 60px

Modifier l'orientation du texte

Revenez aux paramètres de texte et modifiez l'orientation du texte.

• Orientation du texte : Centre

Ombre de boîte par défaut

Ensuite, ajoutez une ombre de boîte par défaut au module de texte. Cette ombre de boîte fera partie de la conception globale.

• Position horizontale de l'ombre de la boîte : 1000px
• Position verticale de l'ombre de la boîte : -400px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 250px
• Couleur de l'ombre : rgba(175,175,175,0,13)

Ombre de la boîte de survol

Pour créer l'effet spécial de chevauchement de survol, ajoutez également une ombre de zone de survol.

• Position horizontale de l'ombre de la boîte : -73px
• Position verticale de l'ombre de la boîte : -49px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 10px
• Couleur de l'ombre: rgba (255,182,12,0,53)

Transitions

Pour créer une transition en douceur, modifiez la durée de la transition dans l'onglet avancé.

• Durée de transition : 1000 ms

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

Ajouter du contenu

Dans la deuxième colonne, la première chose dont nous aurons besoin est un module de texte de titre. Allez-y et ajoutez un résumé du témoignage.

Paramètres de texte d'en-tête

Ensuite, modifiez les paramètres du texte de l'en-tête.

• Titre 3 Police : Goudy Bookletter 1911
• Titre 3 Alignement du texte : à gauche
• Titre 3 Taille du texte : 3,5 vw (ordinateur de bureau), 40 px (tablette), 30 px (téléphone)
• En-tête 3 Hauteur de ligne : 1,1 em

Espacement

Continuez en ajoutant des valeurs d'espacement personnalisées.

• Marge supérieure : 7vw (ordinateur de bureau), 100 px (tablette), 50 px (téléphone)

Ajouter le module de texte de description à la colonne 2

Ajouter du contenu

Ajoutez un autre module de texte avec l'intégralité du témoignage juste en dessous du titre Module de texte.

Paramètres de texte

Après avoir ajouté le témoignage, continuez et modifiez les paramètres du texte.

• Hauteur de la ligne de texte : 2,2 em
• Orientation du texte : à gauche

Espacement

Ajoutez également une marge supérieure personnalisée.

• Marge supérieure : 4vw (ordinateur de bureau), 50px (tablette et téléphone)

Ajouter une nouvelle ligne

Structure des colonnes

Maintenant que nous avons terminé la première ligne, ajoutons la seconde en utilisant la structure de colonnes suivante :

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement.

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

Espacement

Ajoutez ensuite des valeurs d'espacement personnalisées.

• Marge supérieure : 100 pixels
• Rembourrage supérieur : 0px
• Rembourrage inférieur : 0px
• Remplissage gauche de la colonne 1 : 11vw (ordinateur de bureau), 3vw (tablette et téléphone)
• Remplissage droit de la colonne 1 : 2vw (ordinateur de bureau), 3vw (tablette et téléphone)

Cloner les modules de texte de la ligne précédente et les placer dans la colonne 1

Revenez à la ligne précédente et clonez les deux modules de la colonne 2. Une fois cela fait, placez les doublons dans la première colonne de la nouvelle ligne.

Modifier l'orientation du texte

Modifiez l'orientation du texte des deux modules.

• Orientation du texte : à droite

Ajouter un module d'image à la colonne 2

Télécharger une image

Ensuite, ajoutez un module d'image à la deuxième colonne et téléchargez une nouvelle image de portrait.

Alignement des images

Modifiez l'alignement de l'image du module.

• Alignement de l'image : à droite

Dimensionnement

Continuez en modifiant les paramètres de dimensionnement.

• Largeur : 78 % (ordinateur de bureau), 70 % (tablette et téléphone)
• Alignement du module : à droite

Espacement

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

• Marge supérieure : 50px (tablette et téléphone)

Ajouter le module de texte de chevauchement de survol à la colonne 2

Ajouter du contenu

Le dernier module dont nous avons besoin pour terminer cette conception est un module de texte sous le module d'image. Ajoutez les détails de la personne dans la zone de contenu.

Arrière-plan par défaut

Ensuite, ajoutez une image d'arrière-plan au module.

• Couleur d'arrière-plan : rgba(255,255,255,0)

Survoler l'arrière-plan

Changez la couleur d'arrière-plan en survol.

• Couleur d'arrière-plan : #690cff

Paramètres de texte par défaut

Modifiez ensuite les paramètres de texte.

• Couleur du texte : #ffffff
• Taille du texte : 0px
• Hauteur de la ligne de texte : 0px
• Orientation du texte : Centre

Paramètres de texte de survol

Faites quelques ajustements en survol.

• Taille du texte : 19px
• Hauteur de la ligne de texte : 2 em

Paramètres de texte d'en-tête par défaut

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

• Titre 3 Poids de la police : Ultra gras
• Titre 3 Couleur du texte : #ffffff
• Titre 3 Taille du texte : 0px
• Titre 3 Hauteur de ligne : 0em

Paramètres de texte d'en-tête de survol

Avec quelques petits ajustements en survol.

• Titre 3 Taille du texte : 35px
• En-tête 3 Hauteur de ligne : 1,1 em

Espacement

Continuez en allant dans les paramètres d'espacement et ajoutez des valeurs personnalisées.

• Marge supérieure : -80px
• Marge de gauche : 50px
• Marge de droite : 50px
• Rembourrage supérieur : 40 px
• Rembourrage inférieur : 60px

Ombre de boîte par défaut

Ajoutez une ombre de boîte par défaut au module de texte.

• Position horizontale de l'ombre de la boîte : -1000px
• Position verticale de l'ombre de la boîte : -420px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 250px
• Couleur de l'ombre : rgba(175,175,175,0,13)

Ombre de la boîte de survol

Et changez l'ombre de la boîte au survol.

• Position horizontale de l'ombre de la boîte : -73px
• Position verticale de l'ombre de la boîte : -49px
• Force du flou de l'ombre de la boîte : 0px
• Force de propagation de l'ombre de la boîte: 10px
• Couleur de l'ombre : rgba (12 255 238 0,53)

Transitions

Enfin, créez une transition en douceur en modifiant la durée de la transition.

• Durée de transition : 1000 ms

Aperçu

Maintenant que nous avons parcouru toutes les étapes, jetons un dernier coup d'œil au résultat final !

Dernières pensées

Nous espérons que cet article vous a inspiré à créer de superbes sections de témoignages en utilisant des chevauchements de survol ! Ils vous aident vraiment à ajouter une autre dimension à votre site Web sans avoir à passer beaucoup de temps à coder ou à comprendre. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!