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

Dans le didacticiel Divi d'aujourd'hui, nous allons vous montrer comment ajouter des icônes sociales au menu principal de votre site Web Divi. En suivant ce didacticiel étape par étape, vous pourrez ajouter des icônes sociales à n'importe quel site Web que vous créez, que ce soit pour vous-même ou pour un client.

Nous avons déjà la possibilité d'ajouter des icônes sociales directement dans l'en-tête et le pied de page d'un site Web avec le personnalisateur de thème Divi. Mais si ce n'est pas ce que vous recherchez, ce tutoriel pourrait vous aider car dans de nombreux cas ; les gens préfèrent avoir les icônes sociales dans leur menu principal au lieu de l'en-tête ou du pied de page de leur site Web.

Nous vous montrerons exactement comment vous pouvez les ajouter, comment les personnaliser et comment les ouvrir dans un nouvel onglet. Ce sont toutes les choses que vous devez vraiment savoir pour que les icônes sociales de votre menu principal puissent apporter une valeur ajoutée à l'ensemble de votre site Web.

Pourquoi ajouter des icônes sociales au menu principal ?

Les sites Web et les canaux de médias sociaux sont dans de nombreux cas complémentaires. Tout le contenu partagé sur un site Web n'apparaît pas sur les canaux de médias sociaux et vice versa. C'est pourquoi la promotion de votre site Web sur vos canaux de médias sociaux et vos canaux de médias sociaux sur votre site Web ne sont pas rares et franchement ; fortement encouragé.

Vous voulez que les gens interagissent avec votre entreprise ou votre marque de la manière qu'ils connaissent le mieux. Votre site Web est généralement un « territoire inconnu » pour eux. La barrière de vous contacter directement via votre site Web pourrait donc être plus grande que pour les canaux de médias sociaux. La plupart des personnes qui visitent votre page Facebook ou votre page Twitter sont déjà intégrées aux plateformes et le sentiment de confort peut influencer positivement leur comportement.

C'est pourquoi, dans l'ensemble, mettre des icônes de réseaux sociaux sur votre site Web est très recommandable. Mais pourquoi les partager explicitement dans votre menu principal ? Nous avons énuméré deux des principales raisons.

Facile à trouver/le menu suit le visiteur pendant sa visite

Lorsque vous ajoutez des icônes sociales à votre site Web, vous voulez qu'elles soient aussi visibles que possible. Les gens ne devraient pas avoir à faire des efforts pour trouver les icônes sociales sur votre site Web. C'est là que mettre les icônes sociales dans le menu principal peut faire la différence. Le menu principal suit une personne tout au long de son séjour sur votre site Web. Inutile d'aller chercher les icônes, les icônes viennent à vous. La seule chose que la personne a à faire est de cliquer et elle y arrivera.

Le menu principal suit une personne tout au long de son séjour sur votre site Web. Inutile d'aller chercher les icônes, les icônes viennent à vous. La seule chose qu'un visiteur a à faire est de cliquer dessus et il y arrivera.

Action de déclenchement

Comme mentionné précédemment; les canaux de médias sociaux et les sites Web sont complémentaires. Ils travaillent ensemble et ont généralement les mêmes objectifs, comme informer les prospects potentiels et les attirer vers les services ou produits proposés. Plus ils y sont confrontés, plus leur curiosité est susceptible de s'éveiller

Pour favoriser la connexion entre le site Web et les canaux de médias sociaux, il est bon de confronter les visiteurs aux icônes sociales aussi souvent que possible. Plus ils y sont confrontés, plus leur curiosité sera déclenchée et plus ils finiront par cliquer dessus.

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

Abonnez-vous à notre chaîne Youtube

Installer Font Awesome

Tout d'abord, nous devons installer Font Awesome sur notre site WordPress. Nous allons le faire en ajoutant du code CSS dans les options du thème de Divi.

Ouvrez votre site WordPress, allez dans Divi > Options du thème > Intégration et collez le code suivant dans la section <head> :

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css" />

Font Awesome devrait maintenant être ajouté aux polices utilisées sur votre site Web. Vous pouvez maintenant ajouter ces icônes à votre menu principal en suivant pas à pas la prochaine partie de notre article.

Commencer à créer le menu principal

Très probablement, vous avez déjà créé votre propre menu principal personnalisé dans lequel vous avez répertorié toutes les pages que vous souhaitez voir apparaître dans le menu principal de votre site Web. Si vous ne l'avez pas encore fait, accédez à la page "Menus" dans Apparence et créez un nouveau menu.

Ensuite, nommez le menu, ajoutez les pages que vous souhaitez voir apparaître dans votre menu principal et sélectionnez l'option "Menu principal" ci-dessous.

Ajouter des icônes sociales

En continuant, nous voulons ajouter les icônes sociales. Lors de la création du menu principal, vous pouvez choisir où vous souhaitez que vos icônes sociales s'affichent. Dans la plupart des cas, ils viendront juste après les pages, mais vous pouvez également les mettre en premier. Des icônes de réseaux sociaux sont disponibles pour tous les sites Web les plus importants et les plus populaires ; de Facebook à Twitter, Instagram, LinkedIn et plus encore.

Commencez par ouvrir le lien suivant sur le site Web de Font Awesome. Nous aurons besoin de ce site Web pour la prochaine partie de cet article où nous ajouterons les icônes manuellement.

Ajouter des icônes manuellement

La même façon de travailler s'applique pour chaque icône sociale que vous ajoutez à votre menu principal. À titre d'exemple, nous allons vous montrer comment ajouter l'icône Instagram. Pour toutes les autres icônes que vous souhaitez également ajouter ; sachez que c'est la même façon de travailler (seuls l'icône, le code HTML et l'URL diffèrent en conséquence).

Ouvrez l'option « Liens personnalisés » et vous verrez apparaître deux champs : URL et Étiquette de navigation. De toute évidence, le champ URL est l'endroit où vous tapez l'URL qui mène un visiteur vers l'un des canaux de médias sociaux. Dans cet exemple, nous voulons que l'icône mène à Instagram, alors tapez simplement votre URL Instagram.

Ensuite, accédez au site Web de Font Awesome dans votre navigateur et recherchez l'icône Instagram dans la barre de recherche. De même, vous pouvez rechercher le Facebook, LinkedIn et toute autre icône.

Une fois que vous avez cliqué sur l'icône Instagram, vous verrez que le site Web fournit le code HTML suivant :

<i class="fa fa-instagram" aria-hidden="true"></i>

C'est le code exact que nous devons utiliser dans le champ Étiquette de navigation, alors allez-y et complétez le lien personnalisé en copiant et en collant le code dans le champ.

Répétez le même processus pour chacune des icônes sociales que vous souhaitez voir apparaître dans votre menu principal et regardez à quoi cela ressemble sur le front-end de votre site Web.

Changer l'apparence des icônes sociales

Modifications collectives du menu principal (y compris les icônes sociales)

Le personnalisateur de thème vous permet d'apporter toutes les modifications d'apparence que vous souhaitez apporter à votre menu principal en un seul endroit.

Les modifications que vous pouvez apporter au menu principal avec les options Divi s'appliquent également aux icônes sociales. Lorsque vous donnez une certaine couleur à votre menu principal, par exemple, les icônes sociales auront la même couleur. C'est parce que nous utilisons une police au lieu d'une image pour que cela fonctionne.

Vous pouvez apporter toutes les modifications que vous souhaitez apporter à l'apparence dans le personnalisateur de thème en allant dans En-tête et navigation > Barre de menu principale. Les modifications que vous apportez s'appliquent en temps réel et vous donnent une bonne idée de l'apparence que vous voulez donner à votre menu principal.

Ouvrir les icônes sociales dans un nouvel onglet

Cette partie de la publication est quelque chose de plus que vous pouvez faire avec les icônes sociales. Vous ne voulez probablement pas éloigner vos visiteurs du site Web, même s'ils se rendent sur vos réseaux sociaux. Vous souhaitez conserver les deux interactions aussi longtemps que possible en ouvrant les liens des réseaux sociaux dans un nouvel onglet chaque fois que quelqu'un clique dessus.

Nous pouvons facilement faire fonctionner l'option « Ouvrir dans un nouvel onglet » sur toutes les icônes de médias sociaux en revenant au menu que nous avons créé auparavant. Nous devons effectuer tous les réglages manuellement sur chacune des icônes. Dans cet exemple, nous allons apporter les modifications à l'icône Instagram.

Allez-y, supprimez l'URL que vous avez fournie dans le champ URL et collez plutôt le code suivant dans l'URL de navigation :

<a href="http://www.instagram.com" target="_blank"><i class="fa fa-instagram" aria-hidden="true"></i></a>

Faites la même chose pour chacune des icônes si vous souhaitez qu'elles s'ouvrent dans un nouvel onglet. Chaque fois qu'un visiteur clique dessus, ils s'ouvrent dans un nouvel onglet qui vous permet de garder vos visiteurs le plus longtemps possible.

Dernières pensées

Ce tutoriel vous aidera sûrement à intégrer les icônes sociales dans votre propre site Web Divi comme vous le souhaitez. Vous pouvez les personnaliser et les adapter au reste de votre menu principal. Si vous avez des questions ou des suggestions ; assurez-vous de laisser un commentaire dans la section des commentaires ci-dessous. Nous resterons en contact et essaierons de répondre à toutes vos questions ou suggestions.

Assurez-vous de vous abonner à notre newsletter par e-mail et à notre chaîne YouTube pour ne jamais manquer une grande annonce, un conseil utile ou un cadeau Divi !

Image en vedette via Oceans / shutterstock.com