Je souhaite obtenir des informations sur une formation complète concernant le thème DIVI dispensé
par un organisme de formation certifié par l’état.
Que la formation soit finançable par mon CPF (idéalement) ou autre


Lors de la création de votre page À propos, vous pouvez envisager de mettre les différents membres de l’équipe de votre entreprise dans une vitrine. Lorsque vous démarrez ce processus de conception, vous constaterez que trois choses ne devraient pas manquer la première fois: une image, un nom et une position. Cependant, si vous souhaitez que les membres de votre équipe se démarquent encore plus, vous pouvez également ajouter leurs liens de réseau social à la conception. Bien sûr, vous pouvez le faire à l’ancienne et ajouter un module de suivi des médias sociaux sous le nom et la position de la personne. Cependant, vous pouvez également ajouter une petite interaction en déclenchant les icônes sociales dès que quelqu’un survole l’une des photos de la personne. Dans le tutoriel d’aujourd’hui, nous allons vous montrer exactement comment faire cela avec Divi. Vous pouvez également télécharger le fichier JSON gratuitement!

Commençons.

Aperçu

Avant d’entrer dans le didacticiel, examinons rapidement le résultat sur différentes tailles d’écran.

Bureau

flotter des symboles sociaux

Téléphone portable, téléphone portable

flotter des symboles sociaux

Téléchargez la mise en page GRATUITEMENT

Pour mettre la main sur la mise en page gratuite, vous devez d’abord la télécharger en utilisant le bouton ci-dessous. Pour accéder au téléchargement, vous devez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez encore plus de bonté Divi et un pack de mise en page Divi gratuit tous les lundis! 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 plus abonné et ne recevrez aucun e-mail supplémentaire.

Commençons à reconstruire!

Ajouter la section 1

Couleur de l’arrière plan

Tout d’abord, ajoutez une nouvelle section à 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

flotter des symboles sociaux

distance

Accédez à l’onglet Conception de la section et ensuite, modifiez les paramètres d’espacement.

  • Rembourrage supérieur
    • Bureau et tablette: 100px
    • Téléphone: 50px
  • Rembourrage au sol:
    • Bureau et tablette: 100px
    • Téléphone: 50px

flotter des symboles sociaux

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne avec la structure de colonnes suivante:

flotter des symboles sociaux

Ajouter le module de texte n ° 1 à la colonne

Ajouter du contenu H1

Ajoutez un premier module de texte avec un contenu H1 de votre choix dans la colonne de la ligne.

flotter des symboles sociaux

Paramètres de texte H1

Accédez à l’onglet Conception du module et modifiez les paramètres de texte H1 en conséquence:

  • Titre: Alata
  • Couleur du texte de l’en-tête: #ffffff
  • Taille du texte de l’en-tête:
    • Bureau: 50px
    • Tablette: 45px
    • Téléphone: 35px
  • Hauteur du titre: 1.2em

flotter des symboles sociaux

Ajouter le module diviseur à la colonne

Visibilité

Ensuite, nous ajoutons un module de division. Assurez-vous que l’option Afficher les diviseurs est cochée.

flotter des symboles sociaux

ligne

Allez dans l’onglet Conception du module et changez la couleur de la ligne.

flotter des symboles sociaux

Dimensionnement

Modifiez également les paramètres de taille.

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

flotter des symboles sociaux

Ajouter le module de texte n ° 2 à la colonne

Ajouter du contenu de description

Le prochain et dernier module dont nous avons besoin dans cette ligne est un autre module de texte avec une description de votre choix.

flotter des symboles sociaux

Paramètres de texte

Accédez à l’onglet Conception du module et modifiez les paramètres de texte comme suit:

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

flotter des symboles sociaux

distance

Supprimez également la marge inférieure standard.

flotter des symboles sociaux

Ajouter la section 2

Fond dégradé

Ajoutez une autre section juste en dessous de la précédente en utilisant un arrière-plan dégradé pour cela.

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

flotter des symboles sociaux

distance

Ensuite, modifiez les paramètres d’espacement.

  • Rembourrage supérieur: 0px
  • Rembourrage au sol: 200px

flotter des symboles sociaux

Ajouter une nouvelle ligne

Structure de la colonne

Allez-y en ajoutant une nouvelle ligne à la section avec la structure de colonnes suivante:

flotter des symboles sociaux

Dimensionnement

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

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

flotter des symboles sociaux

Ajout du module de suivi des médias sociaux à la colonne 1

Ajoutez les réseaux sociaux de votre choix

Le premier module dont nous avons besoin dans notre rangée est un module de suivi des médias sociaux dans la colonne 1. Ajoutez les réseaux sociaux de votre choix.

flotter des symboles sociaux

Supprimez les couleurs d’arrière-plan des réseaux sociaux une par une

Ensuite, ouvrez chaque réseau social un par un et supprimez la couleur d’arrière-plan.

flotter des symboles sociaux

Ajouter un lien vers chaque réseau social individuellement

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

flotter des symboles sociaux

Couleur d’arrière-plan standard

Revenez ensuite aux paramètres généraux du module et appliquez la couleur d’arrière-plan suivante:

  • Couleur de fond: rgba (0,0,0,0)

flotter des symboles sociaux

Couleur d’arrière-plan du survol

Changez la couleur d’arrière-plan lors du survol.

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

flotter des symboles sociaux

image de fond

Ensuite, téléchargez une image d’arrière-plan.

  • Taille de l’image d’arrière-plan: Couverture
  • Mélange d’image d’arrière-plan: multiplier

flotter des symboles sociaux

Alignement

Accédez à l’onglet Conception du module et modifiez l’orientation.

flotter des symboles sociaux

symbole

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

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

flotter des symboles sociaux

distance

Accédez ensuite aux paramètres d’espacement et appliquez les valeurs suivantes:

  • Marge inférieure: 0px
  • Rembourrage supérieur:
    • Bureau: 250px
    • Tablette: 450px
    • Téléphone: 200px
  • Rembourrage au sol: 20px

flotter des symboles sociaux

bord

Nous modifions également les paramètres du cadre.

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

flotter des symboles sociaux

Limite flottante

Utilisez une couleur de cadre différente lors du survol.

  • Couleur de la bordure de survol: #ffffff

flotter des symboles sociaux

Classe CSS

Passez ensuite à l’onglet Avancé et appliquez une classe CSS personnalisée.

flotter des symboles sociaux

Flotter devant l’élément

Complétez les paramètres du module en activant le paramètre de survol pour l’élément avant et en copiant les lignes suivantes de code CSS:

content: "Connect with me!";
font-family: "Alata";
color: white !important;
position: absolute;
margin-top: -30px;

flotter des symboles sociaux

Ajouter le module personne à la colonne 1

Ajouter du contenu

Le module suivant et dernier dont nous avons besoin dans la colonne 1 est un module de personne. Ajoutez le contenu de votre choix.

flotter des symboles sociaux

Paramètres de texte

Accédez à l’onglet Conception du module et modifiez les paramètres de texte comme suit:

  • Alignement du texte: centre
  • Couleur du texte: clair

flotter des symboles sociaux

Paramètres du texte du titre

Ensuite, concevez le texte du titre.

  • Police du titre: Alata
  • Taille du texte du titre:
    • Bureau: 27px
    • Tablette: 25px
    • Téléphone: 22px

flotter des symboles sociaux

Positionnez les paramètres de texte

Modifiez ensuite les paramètres de texte de position.

  • Rédaction de position: Alata
  • Taille du texte de la position:
    • Bureau: 17px
    • Tablette et téléphone: 15px

flotter des symboles sociaux

distance

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

  • Rembourrage supérieur: 40px
  • Rembourrage au sol: 40px

flotter des symboles sociaux

bord

Complétez les paramètres du module en appliquant les paramètres de cadre suivants:

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

flotter des symboles sociaux

Supprimer les colonnes de ligne restantes

Une fois que vous avez terminé les modules de la colonne 1, vous pouvez supprimer les deux colonnes restantes de la ligne.

flotter des symboles sociaux

flotter des symboles sociaux

Cloner la colonne deux fois

Réutilisez la colonne 1 en la clonant deux fois.

flotter des symboles sociaux

Cloner toute la ligne

Puis clonez la ligne entière autant de fois que nécessaire.

flotter des symboles sociaux

Modifier tout contenu en double

Liens de suivi des médias sociaux

Bien sûr, vous devez modifier tout le contenu en double, en commençant par les liens vers les réseaux sociaux dans chaque module de suivi des médias sociaux en double.

flotter des symboles sociaux

Médias sociaux Suivez les fonds d’écran

Ensuite, changez le fond d’écran dans chaque module de suivi des médias sociaux.

flotter des symboles sociaux

Contenu du module personne

Complétez les modifications en modifiant le contenu de chaque module de personne.

flotter des symboles sociaux

Ajoutez le module de code sous le dernier module de texte sur la ligne 1 de la section 1

Pour nous assurer que chaque réseau social change de style une fois que tout le module est déplacé, nous avons besoin de quelques lignes de code CSS. Nous allons coller ce code dans un nouveau module de code que nous allons ajouter à la première section juste en dessous de la description du module de texte.

flotter des symboles sociaux

Ajouter du code CSS

Copiez et collez les lignes suivantes de code CSS et vous avez terminé:

<style>
.team-socials:hover li a.icon:before {
  color: black !important;
}

.team-socials:hover li a.icon {
  background-color: white;
}
</style>

flotter des symboles sociaux

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

flotter des symboles sociaux

Téléphone portable, téléphone portable

flotter des symboles sociaux

Dernières pensées

Dans cet article, nous vous avons montré comment faire preuve de créativité avec la vitrine des membres de votre équipe. En particulier, nous vous avons montré comment déclencher des icônes sociales lorsque vous passez la souris sur l’une des photos des membres de l’équipe. Cela en fait une interaction subtile mais amusante que vous pouvez utiliser sur n’importe quel type de site Web que vous créez. Vous pouvez également télécharger le fichier JSON gratuitement! Si vous avez des questions, n’hésitez pas à laisser un commentaire dans la section commentaires ci-dessous.

Si vous voulez en savoir plus sur Divi et obtenir plus de cadeaux Divi, assurez-vous de l’avoir Abonnez-vous à notre newsletter et chaîne Youtube Vous êtes donc toujours l’un des premiers à connaître et à bénéficier de ce contenu gratuit.





Source link

Recent Posts