Comment créer des effets de survol de bouton de suivi de médias sociaux uniques avec Divi

Le module de suivi des médias sociaux de Divi vous permet de styliser et d'ajouter facilement ces liens importants à vos réseaux sociaux n'importe où sur votre site Web. Et si vous voulez vous salir les mains avec certains des puissants effets de survol intégrés de Divi, vous pouvez également concevoir des effets de survol créatifs pour vos boutons de suivi des médias sociaux.

Dans ce didacticiel, je vais vous montrer quelques effets uniques de survol du bouton de suivi des médias sociaux qui pourraient vous surprendre.

Vérifiez-le!

Aperçu

Voici un aperçu des effets de survol que nous allons créer.

Partie 1 : Déplacer les ombres de la boîte pour mettre en évidence vos boutons de suivi des médias sociaux

Bordures à points

Points aux frontières

Ombres rebondissantes 1

Ombres rebondissantes 2

Commencez à créer des effets de survol de la partie 1

Partie 2 : Modification de la couleur, de la taille et de la forme au survol

Modification de la taille et de la couleur

Modification de la taille, de la couleur et de la forme

Commencez à créer des effets de survol de la partie 2

Partie 3 : Effets de filtre

Commencer à construire l'effet de survol de la partie 3

Partie 4 : Grandes icônes avec mélange d'écran et effets de filtre

Commencer à construire l'effet de survol de la partie 4

Commencer

Abonnez-vous à notre chaîne Youtube

Pour faire avancer les choses pour ce tutoriel, tout ce dont vous avez vraiment besoin est le thème Divi installé et actif. Créez ensuite une nouvelle page et donnez un titre à votre page. Cliquez ensuite pour utiliser le Divi Builder et sélectionnez l'option Utiliser une mise en page prédéfinie. Dans le modal contextuel Charger à partir de la bibliothèque, sélectionnez le pack de mise en page du développeur d'applications. Cliquez ensuite pour utiliser le Afin de lancer la conception de nos boutons de suivi des médias sociaux, nous allons utiliser la mise en page de la page d'accueil du développeur d'applications.

Publiez votre page et cliquez sur le bouton pour Build on the Front End.

Supprimez maintenant toutes les sections de la page, à l'exception de la section contenant les boutons de suivi des médias sociaux en bas de la page.

Cela servira de modèle de démarrage pour créer nos effets de survol.

Enregistrons la section dans la bibliothèque Divi afin que nous puissions ajouter une nouvelle version de ces conceptions de boutons de suivi des médias sociaux si nécessaire.

Vous pouvez également dupliquer la section plusieurs fois sur votre page. Cela vous permettra de créer différents effets de survol en commençant par la section prédéfinie.

Vous êtes maintenant prêt à commencer à créer les effets de survol.

Commençons.

#1 Moving Box Shadows pour mettre en évidence vos boutons de suivi des médias sociaux

Bordures à points

Pour cet effet de survol, nous allons ajouter une ombre de boîte autour du bouton qui se rétrécit et passe au-dessus du bouton en survol. Pour ce faire, ouvrez le module de suivi des médias sociaux et cliquez pour ouvrir les paramètres du réseau social facebook.

Copiez ensuite la couleur d'arrière-plan utilisée pour l'icône dans votre presse-papiers (#3b5998). Cette couleur sera utilisée pour l'ombre de la boîte.

Ouvrez maintenant l'onglet Conception et mettez à jour les éléments suivants :

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px (par défaut), -46px (survol)
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 5px (par défaut), -16px (survol)

Pour la couleur de l'ombre, collez la couleur d'arrière-plan (#3b5998) et diminuez l'opacité de 50%. Cela vous donnera une version plus claire de la couleur d'arrière-plan du bouton.

Couleur de l'ombre : rgba (59,89,152,0,5)

Maintenant, faites un clic droit sur la catégorie de style Box Shadow et sélectionnez Copy Box Shadow Styles.

Enregistrez les paramètres du réseau social Facebook, puis faites un clic droit sur chacun des réseaux sociaux et sélectionnez Coller les styles d'élément pour chacun. Cela appliquera les mêmes styles d'ombre de boîte au reste des boutons.

Cependant, vous devrez tout de même mettre à jour la couleur de l'ombre de la boîte qui est spécifique à chacune. Pour ce faire, répétez le même processus que nous avons fait pour le réseau social Facebook. Ouvrez les paramètres spécifiques du réseau social, copiez la couleur d'arrière-plan utilisée, collez-la en tant que nouvelle couleur d'ombre de la boîte, puis réduisez l'opacité de 50 %.

Voici les couleurs de l'ombre de la boîte pour chacun des réseaux sociaux restants :

Couleur de l'ombre de la boîte Twitter : rgba (0,172,237,0,5)
Couleur de l'ombre de la boîte Instagram : rgba (234,44,89,0,5)
Couleur de l'ombre de la boîte de dribble : rgba (234,76,141,0,5)
Couleur de l'ombre de la boîte Youtube : rgba (168,36,0,0,5)

Une fois les couleurs de l'ombre de la boîte mises à jour, vérifiez le résultat final.

Points aux frontières

Vous pouvez facilement inverser l'effet de survol en désactivant les valeurs par défaut et de survol pour la position verticale de l'ombre de la boîte et la force de propagation.

Dupliquez la section (si vous souhaitez conserver la conception «bordures à points»), puis ouvrez les paramètres du module de suivi des médias sociaux. Ouvrez ensuite les paramètres du réseau social Facebook et mettez à jour les éléments suivants :

Position verticale de l'ombre de la boîte : -46px (par défaut), 0px (survol)
Force de propagation de l'ombre de la boîte : -16px (par défaut), 5px (survol)

Vous devrez mettre à jour ces nouveaux paramètres d'ombre de boîte pour chacun des réseaux sociaux restants. Vous pouvez le faire manuellement ou vous pouvez utiliser un clic droit pour copier la position verticale de l'ombre de la boîte et répartir la force, puis les coller sur chacun des réseaux.

Une fois terminé, votre conception finale ressemblera à ceci.

Effet d'ombres rebondissantes

Pour la prochaine version de cet effet de conception et de survol, nous allons faire en sorte que l'ombre de la boîte (point) de chacun des boutons commence au même endroit par défaut. Cela créera une sorte d'effet de rebond.

Pour commencer, vous pouvez dupliquer le design « points aux bordures » que nous avons précédemment construit. Ouvrez les paramètres du module de suivi des médias sociaux, puis ouvrez les paramètres du réseau social Facebook. Mettez à jour les styles d'ombre de boîte suivants :

Position horizontale de l'ombre de la boîte : 140 px (par défaut), 0 px (survol)
Position verticale de l'ombre de la boîte : -70px (par défaut), 0px (survol)

Pour le réseau social Twitter, mettez à jour les éléments suivants :

Position horizontale de l'ombre de la boîte : 70 px (par défaut), 0 px (survol)
Position verticale de l'ombre de la boîte : -70px (par défaut), 0px (survol)

Pour le réseau social Instagram, mettez à jour les éléments suivants :

Position horizontale de l'ombre de la boîte : 70 px (par défaut), 0 px (survol)
Position verticale de l'ombre de la boîte : -70px (par défaut), 0px (survol)

Pour le réseau social Dribble, mettez à jour les éléments suivants :

Position horizontale de l'ombre de la boîte : -70px (par défaut), 0px (survol)
Position verticale de l'ombre de la boîte : -70px (par défaut), 0px (survol)

Pour le réseau social Youtube, mettez à jour les éléments suivants :

Position horizontale de l'ombre de la boîte : -140px (par défaut), 0px (survol)
Position verticale de l'ombre de la boîte : -70px (par défaut), 0px (survol)

Découvrez le résultat final.

Si vous ne voulez pas que le point s'affiche initialement, vous pouvez définir la couleur d'ombre de la boîte par défaut sur transparent, puis ajouter une couleur d'ombre de la boîte au survol. Cela vous donnerait un design qui ressemble à ce qui suit :

#2 Modification de la couleur, de la taille et de la forme au survol

Pour cette prochaine série d'effets de survol, je vais vous montrer comment changer facilement la couleur, la taille et/ou la forme des boutons de médias sociaux en survol. Pour commencer, assurez-vous d'utiliser une nouvelle version de la section du bouton de suivi des médias sociaux à partir de la disposition de la page d'accueil du développeur d'applications. Si vous l'avez enregistré dans votre bibliothèque Divi, ce serait le bon moment pour l'ajouter à votre page.

Changer de couleur

Changer la couleur d'un bouton de réseau social en survol est assez simple. Pour cet exemple, commençons par une couleur de fond gris foncé par défaut qui se transforme en couleur de réseau social.

Pour ce faire, ouvrez le module de suivi des médias sociaux, puis ouvrez les paramètres du réseau Facebook. Mettez à jour les éléments suivants :

Couleur d'arrière-plan : #333333 (par défaut), #3b5998 (survol)

Continuez ensuite ce processus pour mettre à jour les quatre couleurs d'arrière-plan de réseau social restantes comme suit :

Couleur d'arrière-plan Twitter : #333333 (par défaut), #00aced (survol)
Couleur d'arrière-plan Instagram : #333333 (par défaut), #ea2c59 (survol)
Couleur d'arrière-plan du dribble : #333333 (par défaut), #ea4c8d (survol)
Couleur d'arrière-plan Youtube : #333333 (par défaut), a82400 (survol)

Voici le résultat.

Modification de la taille

Pour modifier la taille du bouton, nous pouvons ajouter une ombre de boîte au survol. Cela permet au bouton de s'agrandir sans ajouter d'espace réel au bouton qui repousserait les boutons adjacents au survol.

Pour ce faire, ouvrez les paramètres du réseau Facebook et ajoutez les styles d'ombre de boîte suivants :

Box Shadow : voir capture d'écran
Position verticale de l'ombre de la boîte : 0px
Force du flou de l'ombre de la boîte : 0px
Force de propagation de l'ombre de la boîte : 0px (par défaut), 10px (survol)
Couleur de l'ombre : #3b5998 (cela doit être de la même couleur que la couleur d'arrière-plan du survol du bouton)

Pour accélérer le processus d'ajout de la même conception d'ombre de boîte au reste des boutons de réseau social, faites un clic droit sur la catégorie d'ombre de boîte du réseau Facebook et cliquez sur "Enregistrer les styles d'ombre de boîte".

Enregistrez les paramètres, puis faites un clic droit sur chacun des réseaux sociaux et sélectionnez « Coller les styles d'élément ».

Il ne vous reste plus qu'à mettre à jour la couleur de l'ombre de la boîte avec la bonne couleur de réseau social qui correspond à la couleur d'arrière-plan du survol.

Pour effectuer cette mise à jour, procédez comme suit :

Couleur de l'ombre de la boîte Twitter : #00aced
Couleur de l'ombre de la boîte Instagram : #ea2c59
Couleur de l'ombre de la boîte de dribble : #ea4c8d
Youtube Box Shadow couleur: #a82400

Voici le résultat final.

Changer de forme

Pour modifier la forme du bouton au survol, il vous suffit d'ajuster l'option "Coins arrondis". Ce module de suivi des médias sociaux a actuellement les coins arrondis réglés sur 40px, ce qui rend les boutons circulaires. Si nous voulons le changer en carré, tout ce que vous avez à faire est d'ajuster les coins arrondis à 0px au survol.

Pour ce faire, ouvrez les paramètres du réseau Facebook et mettez à jour les éléments suivants :

Coins arrondis (survol): 4px sur les quatre coins

Copiez ensuite les styles de bordure et collez-les dans chaque réseau restant.

Voici la conception finale.

#3 Effets de filtre

Pour ce prochain effet de survol, je vais vous montrer comment utiliser quelques effets de filtre pour changer les couleurs des boutons de médias sociaux en survol. Pour commencer, assurez-vous d'utiliser une nouvelle version de la section du bouton de suivi des médias sociaux à partir de la disposition de la page d'accueil du développeur d'applications. Si vous l'avez enregistré dans votre bibliothèque Divi, ce serait le bon moment pour l'ajouter à votre page.

Effets de saturation et d'inversion de filtre au survol

L'utilisation des effets de saturation et de filtre inversé est un moyen simple et puissant de modifier le style de vos boutons de médias sociaux en survol. Dans cet exemple, je vais vous montrer comment combiner la saturation et l'inversion pour créer des boutons gris avec des icônes noires qui reviennent à leur couleur d'origine au survol.

Pour ce faire, ouvrez les paramètres du module de suivi des médias sociaux, puis ouvrez chacun des paramètres de réseau social individuels et mettez à jour les options de filtre suivantes :

Saturation : 0% (par défaut), 100% (survol)
Inverser : 100 % (par défaut), 0 % (survol)

Découvrez le résultat.

#4 Grandes icônes colorées avec mélange d'écran et effets de filtre

Pour cette conception finale de survol de bouton de médias sociaux, nous allons recommencer complètement à partir de zéro. Créez donc une nouvelle section avec une ligne à une colonne et ajoutez un module de suivi des médias sociaux à la ligne.

Ensuite, ouvrez les paramètres de suivi des médias sociaux et supprimez le réseau social twitter par défaut en ne laissant que l'élément de réseau social facebook.

Ensuite, mettez à jour les paramètres de suivi des médias sociaux comme suit :

Couleur d'arrière-plan : #ffffff
Alignement de l'élément : centre
Mode de fusion : écran

Ensuite, ouvrez les paramètres de l'élément de réseau social Facebook et mettez à jour les éléments suivants :

Couleur d'arrière-plan : #000000
Marge personnalisée : 10 pixels à gauche, 10 pixels à droite
Rembourrage personnalisé : 10 pixels en haut, 10 pixels en bas, 10 pixels à gauche, 10 pixels à droite
Saturation : 0% (par défaut), 100% (survol)
Inverser : 100 % (par défaut), 0 % (survol)

Enregistrer les paramètres.

Dupliquez ensuite l'élément de réseau social facebook 4 fois pour avoir un total de 5 boutons de réseaux sociaux.

Ouvrez maintenant chacun des éléments de réseau social dupliqués et mettez à jour le réseau social et la couleur d'arrière-plan sur # 000000.

Enregistrer les paramètres.

Maintenant que nous avons activé le mode de fusion d'écran, nous pouvons ajouter une couleur d'arrière-plan à la colonne de ligne qui contient notre module de suivi des médias sociaux. Quelle que soit la couleur d'arrière-plan que nous utilisons, celle-ci déterminera la couleur de nos icônes de médias sociaux et la couleur d'arrière-plan du survol.

Pour ce faire, ouvrez les paramètres de ligne et mettez à jour les éléments suivants :

Couleur d'arrière-plan de la colonne 1 : #0c71c3

Remarquez comment les couleurs des icônes ont changé pour cette couleur d'arrière-plan.

Maintenant, vérifiez le résultat jusqu'à présent.

Pour agrandir les icônes/boutons, nous pouvons utiliser un extrait de CSS personnalisé. Pour ce faire, nous devons d'abord ajouter un identifiant CSS au module de suivi des médias sociaux, puis ajouter du CSS aux paramètres de notre page.

Ouvrez le module de suivi des médias sociaux et ajoutez l'ID CSS suivant sous l'onglet avancé.

ID CSS : grandes icônes

Ensuite, ouvrez les paramètres de votre page et ajoutez le css personnalisé suivant.

@media (min-width: 980px){
#large-icons.et_pb_social_media_follow li a.icon::before {
  font-size: 50px;
 line-height: 100px;
  width: 100px;
  height: 100px;
}
}

Ce code augmente la taille des icônes à 50px et la hauteur et la largeur des boutons à 100px. La requête multimédia garantit que ce style ne s'applique qu'au bureau.

Découvrez le résultat final.

Dernières pensées

J'espère que ces effets de survol du bouton de suivi des médias sociaux vous donneront de nouvelles idées sur la façon de capturer vos visiteurs avec des designs uniques. La plupart de ces exemples sont faciles à créer, surtout si vous vous familiarisez avec le fonctionnement des effets de survol dans Divi. En attendant la prochaine fois, continuez à maîtriser vos compétences Divi et créez quelque chose de beau pour votre prochain projet.

J'ai hâte de vous entendre dans les commentaires.

À votre santé!