Comment ajouter un effet de survol aux biographies des membres de l'équipe dans Divi

Ce n'est un secret pour personne que les pages sont idéales pour créer des clics sur votre site Web. C'est aussi ce type de page qui mettra l'accent sur la partie humaine de l'entreprise derrière le site Web. Sachant cela, nous sommes conscients qu'il est important que nous prêtions attention à la façon dont nous structurons les pages, au type d'informations que nous partageons et à la manière dont nous créons des interactions. L'une des choses que vous pouvez faire pour améliorer l'expérience de la page à propos est de fournir une section sur les membres de l'équipe qui met vos employés à l'honneur. En plus de cela, vous pouvez ajouter un effet de survol bio aux photos des membres de l'équipe en utilisant uniquement les options intégrées de Divi. Cela vous permettra d'économiser de l'espace sur la page sur laquelle vous travaillez et de créer une interaction de survol entre vous et vos visiteurs.

Dans ce tutoriel, nous allons vous montrer étape par étape comment y arriver. Une fois que vous aurez compris l'approche, vous pourrez personnaliser le style de conception en fonction de vos propres besoins.

Allons-y !

Aperçu

Avant de plonger dans le didacticiel, examinons le résultat sur différentes tailles d'écran.

Bureau

Mobile

Commençons à recréer

Abonnez-vous à notre chaîne Youtube

Ajouter une nouvelle section

Espacement

Créez une nouvelle page ou ouvrez une page existante et ajoutez une nouvelle section à l'aide des valeurs de remplissage personnalisées suivantes :

• Rembourrage supérieur : 100 pixels
• Rembourrage inférieur : 100px

Ajouter la ligne n° 1

Structure des colonnes

Une fois que vous avez terminé d'ajouter le remplissage personnalisé à votre section, vous pouvez fermer les paramètres de la section et ajouter une nouvelle ligne en utilisant une seule colonne.

Ajouter un module de texte

Ajouter du contenu H2

Ajoutez un module de texte de titre à la colonne avec une copie H2 de votre choix.

Paramètres de texte H2

Ensuite, allez dans les paramètres de texte H2 et apportez quelques modifications à l'apparence de la copie.

• Police de titre 2 : Cinzel
• Titre 2 Style de police : petites majuscules
• En-tête 2 Alignement du texte : Centre
• Titre 2 Taille du texte : 70px

Ajouter un module diviseur

Visibilité

Continuez en ajoutant un nouveau module de séparation juste en dessous du titre Module de texte.

• Afficher le diviseur : Oui

Couleur du séparateur

Accédez à l'onglet design, ouvrez les paramètres de couleur et modifiez la couleur de votre séparateur en conséquence :

• Couleur du séparateur : #333333

Dimensionnement

Ensuite, nous allons réduire la taille du diviseur et le centrer.

• Largeur : 26%
• Alignement du module : Centre

Ajouter la ligne n° 2

Structure des colonnes

Juste en dessous de la ligne précédente que vous avez ajoutée, continuez et ajoutez une nouvelle ligne en utilisant trois colonnes de taille égale.

Dimensionnement

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

• Utiliser la largeur personnalisée : Oui
• Unité : PX
• Largeur personnalisée : 2000px
• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Égaliser les hauteurs de colonne : Oui

Espacement

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

• Marge supérieure : 50px
• Marge inférieure : 50px
• Rembourrage supérieur : 10px
• Rembourrage inférieur : 10px
• Rembourrage gauche : 5px
• Rembourrage droit : 5px
• Remplissage gauche des colonnes 1, 2 et 3 : 5px
• Remplissage des colonnes 1, 2 et 3 à droite : 5 px

Boîte ombre

Nous donnons également un peu de profondeur à notre ligne en y ajoutant une ombre de boîte avec les paramètres suivants :

• Force du flou d'ombre de la boîte: 80px
• Force de propagation de l'ombre de la boîte : -14px
• Couleur de l'ombre : rgba(0,0,0,0.3)

Ajouter un module d'image à la colonne 1

Télécharger l'image dans le module d'image

Il est temps de commencer à ajouter des modules ! Pour obtenir l'effet bio hover, nous aurons besoin de deux modules au total ; un module Image et un module Blurb. Le module Image contiendra l'image du membre de l'équipe que vous souhaitez présenter. Le module Blurb, quant à lui, sera utilisé pour ajouter l'icône dans le coin inférieur gauche et la bio en survol. Ajoutez un module d'image à la première colonne en utilisant une image de taille carrée.

Filtres

Le design que nous créons est entièrement en niveaux de gris. Pour ajouter cette échelle de gris à notre image, allez dans les paramètres des filtres et supprimez toute la saturation.

• Saturation : 0%

Ajouter le module Blurb à la colonne 1

Ajouter du contenu

Continuez en ajoutant un nouveau module Blurb juste en dessous du module Image dans la colonne 1. Ajoutez le nom du membre de l'équipe dans le champ de titre et entrez quelques informations supplémentaires sur le membre de l'équipe dans la zone de contenu.

Choisissez l'icône

La prochaine chose que nous allons faire est de choisir une icône de choix qui montrera aux visiteurs qu'il y a plus qu'une simple image.

Couleur d'arrière-plan par défaut

Ensuite, nous choisirons une couleur de fond entièrement transparente.

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

Couleur d'arrière-plan du survol

Et nous changerons cette couleur en survol.

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

Paramètres d'icône par défaut

Nous voulons une icône visible qui aidera les visiteurs à comprendre qu'ils peuvent la survoler. Modifiez les paramètres de l'icône pour obtenir une icône comme celle-ci.

• Couleur de l'icône : #ffffff
• Icône de cercle : Oui
• Couleur du cercle : #000000
• Placement de l'icône : à gauche
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône : 50px

Paramètres de l'icône de survol

Cependant, nous ne voulons pas que l'icône apparaisse au survol. C'est pourquoi nous utiliserons à la place une couleur complètement transparente.

• Couleur de l'icône : rgba(255,255,255,0)
• Couleur du cercle : rgba(255,255,255,0)

Paramètres du texte du titre par défaut

Ensuite, allez dans les paramètres du texte du titre et apportez quelques modifications.

• Police du titre : Cinzel
• Poids de la police du titre : gras
• Style de police du titre : petites majuscules
• Couleur du texte du titre : #000000
• Taille du texte du titre : 0px

Paramètres du texte du titre de survol

Modifiez la taille du texte au survol.

• Taille du texte du titre : 30 px

Paramètres de corps de texte par défaut

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

• Police du corps : Open Sans
• Couleur du corps du texte : #000000
• Taille du corps du texte : 0px
• Hauteur de la ligne du corps : 1,8 em

Paramètres de survol du corps du texte

Et, encore une fois, modifiez la taille du corps du texte au survol.

• Taille du corps du texte : 14 px

Espacement par défaut

Enfin, nous devrons créer un chevauchement entre le module Blurb et le module Image en utilisant une marge supérieure négative.

• Marge supérieure : -3.7vw (ordinateur de bureau), -9vw (tablette et téléphone)
• Marge inférieure : 1.5vw (tablette), 2vw (téléphone)

Espacement de survol

Modifiez la marge personnalisée et les valeurs de remplissage au survol.

• Marge supérieure : -11.38vw
• Rembourrage supérieur : 20 px
• Rembourrage inférieur : 20px
• Rembourrage droit : 50 px

Cloner les deux modules deux fois et placer les doublons dans les colonnes restantes

Nous avons fini de créer notre premier effet de survol bio. Pour gagner du temps, nous pouvons simplement cloner deux fois les deux modules de la colonne 1 et placer les doublons dans les deux colonnes restantes.

Modifier l'image et le contenu du module Blurb

N'oubliez pas de modifier l'image dans le module Image et la copie dans le module Blurb pour terminer la section des membres de l'équipe !

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 effet de survol bio sur les photos des membres de l'équipe en utilisant uniquement les options intégrées de Divi. Nous avons mentionné à quel point il est important de créer des pages de qualité, car il s'agit de l'un des sites Web les plus visités. L'utilisation d'effets de survol bio pour les photos des membres de l'équipe vous permettra non seulement de faire passer votre page à propos au niveau supérieur, mais également de créer une interaction avec vos visiteurs. Si vous avez des questions ou des suggestions, assurez-vous de laisser un commentaire dans la section commentaires ci-dessous!