Comment concevoir une barre de boutons de suivi des médias sociaux pop-out vers votre modèle de page dans Divi

Les boutons de suivi des médias sociaux continuent d'être un ajout populaire à tout site Web. Les entreprises et les particuliers utilisent ces liens pour rediriger les utilisateurs vers leurs pages de réseaux sociaux dans l'espoir que les visiteurs les suivront ou s'abonneront à leur chaîne. Normalement, vous voyez ces boutons dans une page de contact, une barre latérale ou au pied de page d'un site Web.

Dans ce didacticiel, nous allons vous montrer comment concevoir une barre de boutons de suivi des médias sociaux contextuelle sur un modèle de page dans Divi. Cela donnera à ces boutons de suivi des médias sociaux une plus grande visibilité sur votre site sans être une distraction. De plus, avec le générateur de thèmes de Divi, vous créez facilement un modèle de page qui inclut ces boutons pour n'importe quelle (ou toutes) les pages de votre site.

Allons-y et commençons !

Aperçu

Voici un aperçu des boutons de suivi des médias sociaux créés dans ce didacticiel.

Téléchargez GRATUITEMENT le modèle de page de barre de boutons de suivi des médias sociaux Pop Out

Pour mettre la main sur le modèle de page de barre de boutons de suivi des médias sociaux de ce didacticiel, vous devez d'abord le télécharger à l'aide du bouton ci-dessous. Pour accéder au téléchargement, vous devrez vous inscrire à notre liste de diffusion Divi Daily en utilisant le formulaire ci-dessous. En tant que nouvel abonné, vous recevrez chaque lundi encore plus de bienfaits Divi et un pack Divi Layout gratuit ! 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 pas « réinscrit » ni ne recevrez d'e-mails supplémentaires.

Télécharger les fichiers

Télécharger gratuitement

Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.

TÉLÉCHARGER

Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !

Pour importer la mise en page sur votre page, extrayez simplement le fichier zip et ajoutez l'un des fichiers json dans le générateur de thème Divi à l'aide de l'option Portabilité du générateur de thème.

Passons au tutoriel, voulez-vous ?

Ce dont vous avez besoin pour commencer

Pour commencer, vous devrez installer et activer le thème Divi. Assurez-vous d'avoir la dernière version de Divi.

Vous aurez également besoin d'au moins une page créée avec le Divi Builder à des fins de test afin d'attribuer le nouveau modèle à cette page pour afficher le résultat.

Après cela, vous êtes prêt à partir.

Création d'une barre de boutons de suivi de médias sociaux contextuelle pour un modèle de page dans Divi

Création d'un nouveau modèle

Depuis le tableau de bord WordPress, accédez à Divi > Générateur de thèmes. Cliquez ensuite sur la case « Ajouter un nouveau modèle » pour créer un nouveau modèle.

Attribuez le modèle à la ou aux pages sur lesquelles vous souhaitez afficher la barre de promotion.

Sur le nouveau modèle, cliquez sur la zone « Ajouter un corps personnalisé » puis sélectionnez « Créer un corps personnalisé ».

Sélectionnez ensuite l'option « Construire à partir de zéro ».

Création de la barre de boutons de suivi des médias sociaux

Créer une nouvelle ligne

Pour commencer, ajoutons une ligne à une colonne au modèle.

Ajouter un module de boutons de suivi des médias sociaux

Dans la rangée à une colonne, ajoutez un module de suivi des médias sociaux.

Ajouter des réseaux sociaux

Sous les paramètres de suivi des médias sociaux, ajoutez tous les réseaux sociaux que vous souhaitez afficher. Pour ajouter un nouveau réseau, cliquez sur l'icône Ajouter un nouveau réseau social grise plus puis sélectionnez le réseau dans la liste.

Vous devrez également ajouter l'URL du lien vers la page de réseau social vers laquelle vous souhaitez rediriger les visiteurs. Pour ce faire, cliquez sur l'icône des paramètres sur le réseau de médias sociaux et mettez à jour l'URL du lien de compte.

Ajouter un module de boutons

Une fois que vous avez terminé les réseaux de modules de suivi des médias sociaux, nous sommes prêts à ajouter un module de boutons. Ce bouton sera sur lequel l'utilisateur survolera pour révéler la barre contextuelle. Allez-y et ajoutez le module de boutons, puis faites-le glisser au-dessus du module de suivi des médias sociaux.

Contenu du bouton

Mettez ensuite à jour le contenu du bouton comme suit :

• Texte du bouton : Suivre
• URL du lien du bouton : #

Styles et positionnement des boutons

Mettez ensuite à jour les paramètres de conception des boutons comme suit :

• Taille du texte du bouton : 16px
• Couleur du texte du bouton :
• Largeur de la bordure du bouton : 0px
• Espacement des lettres des boutons : 1px
• Police des boutons : Montserrat
• Police du bouton Poids : gras
• Icône du bouton : flèche vers la droite (voir capture d'écran)
• Marge : 100 % restant
• Remplissage : 100px en bas

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal :

position: absolute;

Paramètres de ligne

Une fois que le bouton est stylisé et prêt à être utilisé, mettez à jour les paramètres de ligne comme suit :

• Couleur d'arrière-plan : #ffffff
• Largeur de gouttière : 1
• Largeur : 100 %
• Largeur maximale : 64 pixels
• Remplissage : 24px en haut, 16px en bas, 16px à gauche

Ombre de la boîte de rangée

• Box Shadow : voir capture d'écran
• Force du flou de l'ombre de la boîte : 0px
• Force du flou d'ombre de la boîte : 30px
• Couleur de l'ombre (bureau) : transparent
• Couleur de l'ombre (survol): rgba(0,0,0,0.2)

Positionnement des lignes

Ajoutez ensuite le CSS personnalisé suivant à l'élément principal de la ligne :

position: fixed;
top: calc(33.33vh - 55px);
left: 0;

Cela positionnera la ligne dans une position fixe à un tiers du haut du navigateur.

Pop Out sur l'effet de survol avec des marges personnalisées

Ajoutez maintenant les valeurs de marge suivantes pour ajouter la fonctionnalité de survol.

• Marge (bureau): -64px à gauche
• Marge (survol): 0px à gauche

Cela prend en charge la barre de boutons de suivi des médias sociaux. Mais nous devons encore terminer le modèle en créant le module de contenu de publication nécessaire.

Ajout du module de contenu de publication au modèle

À ce stade, la barre de boutons de suivi des médias sociaux est prête à fonctionner. Mais puisqu'il s'agit d'un modèle, nous devons nous assurer et ajouter le module de contenu de publication pour afficher le contenu de la ou des pages utilisant ce modèle.

Ajouter une nouvelle ligne avec le module de contenu de publication

Sous la ligne contenant votre barre de boutons de suivi des médias sociaux, ajoutez une nouvelle ligne à une colonne.

Ajoutez ensuite le module de contenu de publication à la ligne.

Actuellement, le module de contenu de publication sera limité à la largeur par défaut de la ligne parente. Nous devons modifier la largeur et le remplissage de la ligne afin qu'elle s'étende sur toute la largeur du navigateur sans aucun espace. Ceci est important car le module de contenu de publication détermine la zone dont vous disposez pour créer une page à l'aide de Divi Builder.

Mettez à jour les éléments suivants :

• Largeur : 100 %
• Largeur maximale : 100 %
• Remplissage : 0px en haut, 0px en bas

Mettez maintenant à jour les paramètres de la section comme suit :

• Remplissage : 0px en haut, 0px en bas

C'est à peu près le cas. Assurez-vous maintenant et enregistrez la mise en page avant de quitter l'éditeur. Ensuite, enregistrez également les modifications pour le générateur de thème.

Résultat final

Pour voir les résultats finaux, visitez la page qui a le modèle qui lui est attribué. Voici à quoi ressemblera la barre de boutons de suivi des médias sociaux.

Dernières pensées

Cette barre de boutons de suivi des médias sociaux aidera certainement à mettre ces réseaux sociaux importants au premier plan. La fonctionnalité pop-out garantira que les icônes ne seront pas une distraction pour les utilisateurs. Et vous pouvez ajouter la barre à n'importe quel modèle de page à l'aide de Theme Builder. J'espère que ce sera un excellent ajout à votre prochain projet!

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

À votre santé!