Comment créer une page d'équipe dynamique pour votre prochain projet Divi

Les pages d'équipe sont souvent sous-estimées. Avant d'acheter un produit ou d'embaucher un service, de nombreux utilisateurs naviguent vers les pages d'équipe ou sur les pages pour avoir une meilleure idée de l'entreprise et des personnes qui la soutiennent. Si votre page d'équipe laisse une première impression positive, cela pourrait conduire à des taux de conversion plus élevés. Maintenant, il existe de nombreuses façons de créer de belles pages d'équipe avec Divi, mais si vous cherchez de l'inspiration pour votre prochain projet, vous allez adorer ce post. Nous allons recréer une page d'équipe dynamique qui déclenche la biographie des membres en survol.

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

Abonnez-vous à notre chaîne Youtube

1. Commencez par une section normale + une ligne à une colonne pour le titre

Ouvrez une nouvelle page et définissez les attributs de la page sur « page blanche ». Une fois cela fait, entrez dans Divi Builder et ajoutez une section avec une ligne à une colonne.

Ajoutez un module de texte et de séparation.

2. Ajoutez du contenu au module de texte et stylisez-le

Ajoutez du contenu H1 au module de texte.

Passez à l'onglet Conception et stylisez les paramètres de texte H1 en conséquence :

• Police de titre : Poppins
• Poids de la police d'en-tête : léger
• Alignement du texte de l'en-tête : Centre
• Couleur du texte de l'en-tête : noir #000000
• Taille du texte de l'en-tête :
  • Bureau = 6vw
  • Tablette = 9vw
  • Téléphone = 11vw
• Espacement des lettres d'en-tête : -0.4vw

3. Stylisez le diviseur

Passons au module suivant, qui est le module diviseur. Changez la couleur du séparateur en noir et modifiez les paramètres de dimensionnement.

• Couleur du diviseur : Noir #oooooo
• Poids du diviseur : 12px
• Largeur : 14%
• Alignement du module : Centre

4. Créez des biographies d'équipe à l'aide d'une section régulière + une ligne à trois colonnes

Maintenant que nous avons terminé la section des titres, nous sommes prêts à commencer à créer les biographies de l'équipe. Commencez par ajouter une nouvelle section régulière avec une ligne à trois colonnes.

5. Ajustez les paramètres de dimensionnement des lignes

Autorisez la ligne à occuper toute la largeur du conteneur de section en modifiant les paramètres de dimensionnement.

• Utiliser une largeur de gouttière personnalisée : Oui
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 100 %

6. Ajuster les paramètres d'espacement des lignes

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

• Rembourrage supérieur : 2vw
• Rembourrage inférieur : 2vw

7. Ajouter un module Image & Blurb à la première colonne

Les deux modules principaux que nous utiliserons pour créer l'effet final sont une image et un module de présentation. Tout d'abord, ajoutez le module image, puis le texte de présentation.

8. Téléchargez une image et stylisez-la

Votre page d'équipe de survol consiste à présenter les membres de l'équipe. Ouvrez le module image et ajoutez une photo de l'un d'entre eux. Nous utiliserons l'une de nos images de stock Divi. Assurez-vous que les dimensions de votre image sont 612px X 612px.

Alignement

Passez à l'onglet Conception et modifiez l'alignement de l'image.

• Alignement de l'image : Centre

Dimensionnement

Modifiez également les paramètres de dimensionnement.

• Largeur : 30%
• Alignement du module : Centre

Espacement

Et ajoutez une marge supérieure négative.

• Marge:
  • Bureau = -3vw
  • Tablette et téléphone = -13vw

Frontière

Pour transformer l'image en cercle, nous allons modifier les paramètres de bordure.

• Coins arrondis : 20vw tous les quatre coins
• Styles de bordure : les quatre côtés
• Largeur de la bordure : 12 px
• Couleur de la bordure : Blanc #ffffff
• Style de bordure : Double

Boîte ombre

Nous ajoutons également de la profondeur à l'image en appliquant une subtile ombre de boîte.

• Box Shadow : la première option
• Force de flou d'ombre de boîte : 50px

Indice Z

Dans l'une des étapes précédentes, nous avons ajouté une marge supérieure négative. Pour nous assurer que l'image reste en haut de la colonne, même lorsqu'elle la dépasse, nous allons augmenter l'index z dans les paramètres de visibilité.

• Indice Z : 3

9. Ajoutez du contenu à Blurb et stylisez-le

Ajouter un CSS personnalisé aux paramètres de la page

Avant de faire quoi que ce soit d'autre, nous allons ajouter du CSS personnalisé pour supprimer la marge inférieure par défaut de l'icône à l'intérieur du texte de présentation. Ajoutez les lignes de code CSS suivantes aux paramètres de la page :

.blurb-icon .et_pb_main_blurb_image
{
margin-bottom: 0px;
}

Donnez à Blurb une classe CSS

Ouvrez ensuite le module de présentation et ajoutez la classe CSS correspondante.

• Classe CSS : blurb-icon

Ajouter du contenu

Nous utiliserons un texte d'espace réservé, mais vous pouvez insérer le nom et la description réels d'un membre de l'équipe.

Choisissez l'icône

Choisissez ensuite une icône plus.

• Utiliser l'icône : Oui
• Icône : signe plus à l'intérieur d'un cercle

Arrière-plan de style

Passez aux paramètres d'arrière-plan, ajoutez une couleur d'arrière-plan blanche par défaut et un arrière-plan dégradé au survol.

• Fond : Blanc #ffffff
• Arrière-plan de survol : Dégradé
• Dégradé de couleur un : #00ffa1
• Dégradé de couleur deux : #29c4a9
• Type de dégradé : Linéaire
• Direction du gradient : 154 deg
• Position de départ : 0
• Position finale : 46 %

Icône de style

Appliquez ensuite les paramètres d'icône suivants :

• Couleur de l'icône :
  • Par défaut : #29c4a9
  • Survol : rgba transparent (255,255,255,0)
• Utiliser la taille de la police de l'icône : Oui
• Taille de la police de l'icône :
  • Bureau = 2vw
  • Tablette = 4vw
  • Téléphone = 6vw

Alignement

Passez aux paramètres de texte et modifiez l'alignement du texte.

• Alignement du texte : Centre

Texte d'en-tête de style

Ensuite, ouvrez les paramètres de texte d'en-tête et apportez quelques modifications à différentes tailles d'écran.

• En-tête : H4
• Police du titre : Poppins
• Police du titre : gras
• Couleur du texte du titre : blanc #ffffff
• Taille du texte du titre :
  • Ordinateur de bureau : 1.5vw
  • Tablette : 2.5vw
  • Téléphone : 3.5vw

Style du corps du texte

Faites de même pour les paramètres du corps du texte.

• Couleur du corps du texte : blanc #ffffff
• Taille du corps du texte :
  • Bureau = 0.8vw
  • Tablette = 1.9vw
  • Téléphone = 2.6vw
• Hauteur de la ligne du corps :
  • Bureau = 2vw
  • Tablette + Téléphone = 3vw

Dimensionnement

Ensuite, nous allons modifier les paramètres de dimensionnement de notre module de présentation.

• Largeur du contenu : 100 %
• Largeur : 81 %
• Alignement du module : Centre

Espacement

Nous appliquerons également des valeurs de marge et de remplissage personnalisées sur différentes tailles d'écran.

• Marge supérieure:
  • Bureau = -4vw
  • Tablette + Téléphone = -9vw
• Marge inférieure :
  • Bureau = 3.5vw
  • Tablette + Téléphone = 10vw
• Rembourrage supérieur et inférieur :
  • Bureau = 7.1vw
  • Tablette = 30vw
  • Téléphone = 28vw
• Rembourrage gauche et droit
  • Bureau = 2vw
  • Tablette + Téléphone = 8vw

Frontière

Transformez le module de présentation en cercle en ajoutant un rayon de bordure.

• Coins arrondis : 50vw tous les quatre coins

Boîte ombre

Et complétez la conception du module de présentation en ajoutant une ombre de boîte qui apparaît au survol.

• Box Shadow : Cinquième Style
• Position horizontale de l'ombre de la boîte : 0vw
• Position verticale de l'ombre de la boîte :
  • Bureau + Survol = -14vw
  • Tablette = -44vw
  • Téléphone = -46vw
• Force de propagation de l'ombre de la boîte :
  • Bureau + Survol = -6vw
  • Tablette + Téléphone = -19vw
• Couleur de l'ombre de la boîte :
  • Survol = rgba(0,0,0,0,05)

10. Colonne de style un

Maintenant que nous avons ajouté tous les modules dont nous avons besoin à la première colonne, il est temps de styliser la colonne.

Fond

Ouvrez les paramètres d'arrière-plan de la première colonne et appliquez l'arrière-plan dégradé suivant :

• Style d'arrière-plan : Dégradé
• Dégradé de couleur un : #00ffa1
• Dégradé de couleur deux : #29c4a9
• Type de dégradé : doublure
• Direction du gradient : 282 deg

Frontière

Passez à l'onglet Conception et transformez la colonne en cercle en ajoutant un rayon de bordure.

• Coins arrondis : 50vw

Débordement

Pour être sûr que l'image apparaisse au-dessus de la colonne, nous allons modifier les débordements horizontaux et verticaux dans les paramètres de visibilité.

• Débordement horizontal et vertical : Visible

11. Supprimer les colonnes vides et dupliquer la première colonne deux fois

Nous avons terminé la première colonne et tous les modules qu'elle contient. Pour gagner du temps, nous allons supprimer les colonnes vides et cloner deux fois la première colonne.

Supprimer les colonnes deux et trois

Revenez aux paramètres de la ligne principale et cliquez sur l'icône de la corbeille pour les colonnes deux et trois.

Dupliquer la colonne une fois

Après avoir supprimé les colonnes deux et trois, la première colonne aura l'air bizarre pendant une seconde, mais tout change dès que vous clonez la colonne deux fois.

12. Modifier le contenu et les couleurs de la colonne deux

Il est maintenant temps de styliser les nouvelles colonnes pour vos deux autres membres de l'équipe.

Colonne deux

Ouvrez les paramètres de la deuxième colonne et modifiez le fond dégradé

• Couleur de dégradé de fond un : #00eeff
• Fond dégradé de couleur deux : #309ce5

Téléchargez également une autre image.

Continuez en ouvrant le module de présentation et en modifiant le fond dégradé.

• Survolez la première couleur d'arrière-plan : #00eeff
• Survolez la deuxième couleur de fond : #309ce5

Modifiez également la couleur de l'icône.

• Couleur de l'icône par défaut : #309ce5

Troisième colonne

Ouvrez les paramètres de la troisième colonne et modifiez le fond dégradé.

• Couleur de dégradé de fond un : #ff91ec
• Couleur de dégradé de fond deux : #a500ff

Modifiez ensuite l'arrière-plan dégradé du texte de présentation.

• Survolez la couleur d'arrière-plan un : #ff91ec
• Survolez la couleur d'arrière-plan deux : #a500ff

Avec la couleur de l'icône.

• Couleur de l'icône par défaut : #a500ff

Aperçu

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

Bureau

Mobile

C'est un Wrap !

Dans cet article, nous vous avons montré comment créer une page d'équipe de survol dynamique avec des options de survol colorées. N'hésitez pas à utiliser ce design dans votre prochain projet Divi. Essayez-le pour une page d'équipe ou un annuaire de contributeurs. Faites-nous savoir si vous avez des idées dans les commentaires.