Comment ajouter des icônes sociales au menu principal de Divi

Il est pratiquement impossible de gérer un site Web réussi sans avoir une présence dédiée sur les réseaux sociaux. Que vous choisissiez cela pour être Instagram, Twitter, TikTok, Facebook ou toute combinaison de ceux-ci et de toute autre chose, les gens veulent interagir directement avec vous et votre marque. S'assurer que vous avez des icônes sociales dans le menu principal de Divi est un excellent moyen de canaliser le trafic de votre site Web vers le réseau de votre choix. C'est rapide et facile, et nous allons vous guider à chaque étape.

Commençons!

Aperçu

Bureau

Mobile

Utilisez le générateur de thème Divi pour télécharger un en-tête global gratuit

Pour cet article, nous allons utiliser le pack de mise en page Tennis Club et l'en-tête/pied de page gratuit. Vous pouvez télécharger le pack de mise en page depuis votre constructeur Divi, et le pack en-tête/pied de page depuis notre blog. Lorsque vous le téléchargez, les fichiers seront sous forme d' archive .zip . Assurez-vous de les extraire pour avoir un fichier .json à télécharger dans Divi.

Maintenant, allez dans votre tableau de bord WordPress et trouvez le Divi Theme Builder sous Divi – Theme Builder . Cliquez sur l' icône de flèche haut et bas dans le coin supérieur droit de la page. Cela ouvre le modal Portabilité , sélectionnez l'onglet Importer , recherchez le fichier .json pour l'en-tête/le pied de page que vous avez téléchargé, puis cliquez sur Importer les modèles Divi Theme Builder .

Vous souhaitez ensuite accéder à la section d'en-tête de votre site. Parce qu'il s'agit d'icônes sociales, nous allons les mettre dans l'en- tête global car nous pensons qu'elles devraient figurer sur toutes les pages de votre site (sauf indication contraire).

Vous devriez être à l'intérieur du constructeur maintenant. Si vous avez suivi les instructions ci-dessus, le nouvel en-tête que vous avez téléchargé devrait déjà apparaître en place.

Vous remarquerez peut-être qu'il y a déjà des icônes sociales ici. Cependant, ces icônes sociales ne figurent pas dans le menu principal de Divi, ce vers quoi nous travaillons aujourd'hui. Alors entrons dans les mauvaises herbes, voulez-vous?

Ajouter des icônes sociales à la barre de menus principale

Tout d'abord, modifions la structure des lignes/colonnes. Nous voulons trouver la ligne dans la section #2 (celle du bas avec les liens Accueil/Contact ).

Nous sélectionnons la structure à deux colonnes pour ce didacticiel, mais c'est ce qui fonctionne le mieux pour votre site. Une fois que vous avez choisi cela, allez dans les paramètres de ligne et accédez à l'onglet Conception . Recherchez le menu Dimensionnement et activez Utiliser la largeur de gouttière personnalisée . Définissez la valeur de la largeur de gouttière sur 1. Vous pouvez entrer le nombre ou utiliser le curseur pour le faire.

Cliquez sur la coche verte pour enregistrer vos paramètres. Revenez ensuite dans les paramètres de ligne. Cette fois, sélectionnez l' engrenage des paramètres pour la colonne supérieure/première/gauche.

Ensuite, accédez à l'onglet Avancé . Recherchez la zone CSS personnalisée et cliquez dans le champ Élément principal . À l'intérieur de ce champ, vous voudrez ajouter le CSS suivant.

width:80%;

ou

width:80%!important;

Vous devrez peut-être ajouter la balise !important pour styliser cet élément. C'est bon. Cela ne devrait pas créer de problèmes de performances ou de code spaghetti à traiter car il s'agit d'un seul élément.

Ensuite, allez dans les paramètres de réactivité et utilisez le même code pour modifier la largeur de la colonne à 100 % pour les appareils mobiles.

Ensuite, répétez cette étape pour la deuxième colonne. Seulement cette fois, définissez la valeur par défaut à 20 % et conservez la valeur mobile à 100 % .

Une fois cela fait, enregistrez vos modifications et préparez-vous à ajouter et à styliser vos icônes de réseaux sociaux.

Ajouter un module de suivi des médias sociaux

Cliquez sur l'icône noire + dans la colonne 2 pour ajouter un nouveau module et faites défiler jusqu'à ce que vous trouviez Suivi des médias sociaux . Insérez-le.

Quel que soit l'en-tête que vous utilisez, les icônes de réseaux sociaux par défaut ne correspondront probablement pas à votre style. Ils ne seront pas non plus correctement positionnés. La prochaine étape sera de les styliser et de les espacer correctement. Dans les paramètres du module Suivi des médias sociaux , accédez à Conception , puis Alignement . Choisissez où vous voulez placer le module.

Nous choisissons une justification à droite pour le bureau, puis nous entrons dans les options de réactivité et nous la centrons.

La prochaine étape consiste à faire défiler vers le bas dans le menu Icône . Choisissez la couleur de l'icône que vous voulez. C'est le f pour Facebook, l'oiseau pour Twitter, l'appareil photo pour Instagram. Ce n'est pas le fond bleu, par exemple.

Ensuite vient l'espacement. Vraiment, la principale chose qui doit être ajustée est la marge supérieure. Nous allons appliquer une marge supérieure de 1,5 vw afin qu'elle soit centrée avec le texte du menu. Si vous le souhaitez plus ou moins pour le mobile, vous pouvez également l'ajuster.

Maintenant, cliquez sur l'onglet Contenu et accédez à l'icône de réseau social que vous souhaitez personnaliser. Vous répéterez ces étapes pour chaque icône que vous choisissez pour votre site.

Faites défiler jusqu'à Arrière - plan et sélectionnez la couleur que vous voulez qui correspond à la conception de votre site. Encore une fois, rappelez-vous que cela ne changera que l'arrière-plan de cette icône particulière.

Vous pouvez également modifier la couleur de cette icône particulière. Vous pouvez le faire sous l'onglet Conception et la section Icône , tout comme dans le module global lui-même. Ce paramètre remplacera le paramètre général, vous n'avez donc pas à vous soucier d'interférer avec les autres si vous voulez des couleurs uniques.

Ensuite, faites défiler jusqu'à l'entrée Bordure sous l'onglet Conception et à l'intérieur, vous trouverez la largeur de la bordure . Définissez cette valeur sur 3px, puis sélectionnez une couleur de bordure qui se démarque de l'arrière-plan du menu principal Divi.

À ce stade, vous retournerez à l'onglet Contenu et répéterez ces étapes pour chaque icône de réseau social que vous souhaitez afficher. Si vous souhaitez que chacune des icônes de ce module partage le même design, vous pouvez simplement cliquer avec le bouton droit sur celle que vous avez conçue et sélectionner Copier les styles d'élément .

Ensuite, cliquez avec le bouton droit sur les autres réseaux que vous souhaitez styliser et sélectionnez Coller les styles d'élément .

Et c'est tout! Assurez-vous de cliquer sur le bouton Enregistrer dans le coin inférieur droit de l'écran pour enregistrer la mise en page globale. Ensuite, vous êtes en sécurité à X sur l'écran d'édition dans le coin supérieur droit.

Assurez-vous que la page Divi Theme Builder affiche Toutes les modifications enregistrées en haut à gauche. Sinon, cliquez sur Enregistrer les modifications . Une fois cela fait, votre site affichera en direct les icônes des réseaux sociaux dans votre menu principal Divi !

Résultats finaux

Et c'est à cela que vos résultats finaux devraient ressembler.

Bureau

Mobile

Emballer

Faire en sorte que votre audience puisse toujours trouver vos principaux réseaux sociaux est un jeu d'enfant avec Divi. En quelques étapes seulement, vous pouvez ajuster l'un de nos packs d'en-tête/pied de page gratuits pour inclure vos icônes de réseaux sociaux dans le menu principal (ou partout où vous le souhaitez). Bonne chance!

Que pensez-vous des icônes de réseaux sociaux dans le menu principal ? Où avez-vous tendance à les placer ?