Comment concevoir une page de membre d'équipe avec des icônes de médias sociaux en survol sur Divi

Rifat Divi Tutorials Jul 5, 2021

Nous avons parfois besoin d'afficher les membres de l'équipe sur nos sites Web, c'est un excellent moyen de présenter nos membres de l'équipe habiles au monde extérieur. Nous pouvons afficher leur image, leur nom et leur désignation dans l'entreprise. Pour leur donner plus de visibilité, vous pouvez ajouter leurs liens de médias sociaux à la conception. Maintenant, généralement, les gens ajoutent ces liens sous le nom et la désignation, mais il est temps de faire le bon choix et de modifier le mode de conception. Dans le didacticiel Divi d'aujourd'hui, nous verrons comment créer une page de membre d'équipe avec des icônes de réseaux sociaux survolant l'image. Ne perdons pas plus de temps et allons-y !

Pic furtif

Ce sera notre conception d'aujourd'hui.

Partie 1 : Module de conception

Paramètres : Section Un

Couleur de l'arrière plan

Commencez par changer la couleur de la section initiale pour la page sur laquelle vous travaillez. Ouvrez les paramètres de la section et modifiez la couleur d'arrière-plan.

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

Espacement

Maintenant, à partir de l'onglet conception et modifiez les paramètres d'espacement.

Créer des sites Web incroyables

Avec le meilleur constructeur de page Elementor

Commencer Maintenant
  • Rembourrage supérieur : ordinateur de bureau et tablette : 100 pixels et téléphone : 50 pixels
  • Rembourrage inférieur : ordinateur de bureau et tablette : 100 pixels et téléphone : 50 pixels

Ajout d'une nouvelle ligne

Structure des colonnes

Ajoutez maintenant une nouvelle ligne avec la structure de colonne suivante.

Colonne : Module de texte 1

Ajouter du contenu H1

Ajoutons maintenant un peu de contexte de notre choix à ce module avec le contenu H1.

Paramètres de texte H1

Apportez maintenant quelques modifications au module à partir de l'onglet Conception. Tout d'abord, modifiez les paramètres de cap.

  • Police de titre : Alata
  • Couleur du texte de l'en-tête : #ffffff
  • Taille du texte de l'en-tête : ordinateur de bureau : 50 pixels, tablette : 45 pixels et téléphone : 35 pixels
  • Hauteur de la ligne de cap : 1,2 em

Colonne : Module diviseur

Visibilité

Ajoutons un module diviseur. Assurez-vous que l'option « Afficher le diviseur » est activée.

  • Afficher le diviseur : Oui

Ligne

Dans l'onglet conception, modifiez la couleur de la ligne.

  • Couleur de la ligne : #ffffff

Dimensionnement

Modifiez la taille de ce module diviseur.

  • Poids du diviseur : 2px
  • Largeur maximale : 100 pixels
  • Hauteur : 2px

Colonne : Module de texte 1

Ajouter un contexte descriptif

Ici, nous allons ajouter un autre module de texte où nous mettrons du contenu de notre choix.

Paramètres de texte

Dans l'onglet Conception, modifiez les paramètres de texte en conséquence.

  • Police du texte : Alata
  • Couleur du texte : #7c7c7c
  • Taille du texte : 17 pixels
  • Hauteur de la ligne de texte : 1,9 em

Espacement

À partir de la section d'espacement, effectuez la modification suivante.

  • Marge inférieure : 0px

Ajout et paramètres : deuxième partie

Ajoutez maintenant une autre section régulière en dessous de la précédente.

Fond dégradé

Utilisez maintenant un fond dégradé pour cette section.

  • Couleur 1 : #0f0f0f
  • Couleur 2: #000000
  • Position de départ : 10 %
  • Position finale : 10 %

Espacement

Ensuite, modifiez les paramètres d'espacement.

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

Ajout d'une nouvelle ligne

Structure des colonnes

Ajoutez maintenant une nouvelle ligne sur cette section avec la structure de colonne suivante.

Dimensionnement

Ouvrez les paramètres de ligne et modifiez les paramètres de dimensionnement comme suit :

  • Utiliser la largeur de gouttière personnalisée : Oui
  • Largeur de la gouttière : 2px

Colonne 1 : Module de suivi des médias sociaux

Ajouter des réseaux sociaux

Maintenant, nous allons ajouter un module de suivi des médias sociaux à la colonne 1 et mettre les connexions de médias sociaux souhaitées

Supprimer la couleur d'arrière-plan des icônes de médias sociaux

Cliquez sur les paramètres pour chaque icône, puis accédez à l'arrière-plan et sélectionnez transparent. Vous pouvez également cliquer sur la couleur et la supprimer.

Ajouter un lien vers chaque réseau social

Ajoutez également un lien correspondant à chaque réseau social.

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

À partir de l'option des paramètres du module, ajoutez cette couleur comme arrière-plan.

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

Couleur d'arrière-plan du survol

Changez la couleur d'arrière-plan pour l'effet de survol.

  • Couleur d'arrière-plan du survol : #494949

Image de fond

Ensuite, téléchargez une image de membre de l'équipe en arrière-plan.

  • Taille de l'image d'arrière-plan : couverture
  • Mélange d'images d'arrière-plan : multiplier

Alignement

Dans l'onglet conception du module, modifiez les paramètres d'alignement.

  • Alignement du module : Centre

Icône

Changez maintenant la couleur de l'icône.

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

Espacement

Ensuite, allez dans les paramètres d'espacement et appliquez les valeurs suivantes :

  • Marge inférieure : 0px
  • Rembourrage supérieur : ordinateur de bureau : 250 pixels, tablette : 450 pixels et téléphone : 200 pixels
  • Rembourrage inférieur : 20px

Frontière

Maintenant, modifiez le paramètre de bordure en conséquence.

  • Tous les coins : 100px
  • Largeur de la bordure : 2px
  • Couleur de la bordure : rgba(255,255,255,0)

Bordure de survol

Maintenant, utilisez une bordure pour le survol.

  • Couleur de la bordure de survol : #ffffff

Classe CSS

Maintenant, à partir de l'onglet avancé, ajoutez une classe CSS personnalisée.

  • Classe CSS : team-socials

Survolez avant l'élément

Maintenant, terminez les paramètres du module en appliquant le code CSS suivant à l'élément before. Assurez-vous de le mettre en survol.

content: "Say Hello To Me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;
padding-left: 30px;

Colonne 1 : Module Personne

Ajouter du contenu

Le dernier module que nous utiliserons dans cette colonne est un module de personne. ajoutez les informations du module et de la moue à l'intérieur.

Paramètres de texte

Depuis l'onglet conception du module personne et modifiez les paramètres de texte comme suit :

  • Alignement du texte : Centre
  • Couleur du texte : clair

Paramètres du texte du titre

Modifiez maintenant la zone de texte du titre.

  • Police du titre : Alata
  • Taille du texte du titre : ordinateur de bureau : 27 pixels, tablette : 25 pixels et téléphone : 22 pixels

Paramètres de texte de position

Modifiez les paramètres du texte de position .

  • Police du poste : Alata
  • Taille du texte de la position : ordinateur de bureau : 17 pixels et tablette et téléphone : 15 pixels

Espacement

Appliquez un rembourrage supérieur et inférieur personnalisé aux paramètres d'espacement.

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

Frontière

Appliquez maintenant les paramètres de bordure suivants et terminez la colonne.

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

Supprimer d'autres colonnes

Supprimez maintenant les colonnes de la section.

Cloner la colonne deux fois

Dupliquez maintenant la colonne une deux fois.

Cloner la ligne entière

Maintenant, dupliquez la ligne entière autant que vous en avez besoin. Ici, nous allons le dupliquer une fois.

Modifier le contenu dupliqué

Maintenant, nous allons changer les images, les liens vers les réseaux sociaux, les informations personnelles pour chaque individu.

Partie 2 : Module de code

Module de code dans la section 1

Maintenant, ajoutez un module de code sous le module de texte de la section un.

Ajouter un code CSS

Copiez maintenant les lignes de code CSS suivantes et collez-les dans le module de code et vous avez terminé. N'oubliez pas de les mettre dans la balise Style .


.team-socials:hover li a.icon:before {
  color: black !important;
}
 
.team-socials:hover li a.icon {
  background-color: white;
}

Résultat final

Dans la mesure où nous avons terminé toutes les étapes avec succès, voici à quoi ressemblent nos résultats.

Conclusion

Dans le didacticiel d'aujourd'hui, nous avons essayé de montrer avec quelle créativité nous pouvons concevoir une page de membre d'équipe. En utilisant l'effet planant du thème Divi , les liens sociaux des membres de l'équipe peuvent être montrés de manière aussi esthétique. Nous espérons que vous trouverez les tutoriels d'aujourd'hui utiles, un partage avec votre environnement nous encouragera à proposer des tutoriels Divi plus nouveaux et plus étonnants.