DIVI – Comment ajouter un lien social dans Personne ?
La problématique…
La problématique est la suivante :
Je veux décrire dans le module personne, deux personnes. Mais je veux que chacune d’elle possède ses liens vers ses sites personnels. Sans altérer les icônes de haut de page qui elles, sont définis pour le site Terraindigene.
En clair, Terraindigene.com a une page Facebook accessible par l’icône de haut de page (ou de pied de page), et chaque personne a sa page Facebook personnelle sur laquelle le site doit pointer. Sauf que ces nouveaux liens n’existent pas en standard dans DIVI…
Comment faire ?
La préparation
Tout d’abord, vous devez partir à la recherche des logos qui vous intéressent.
L’icône Facebook existe déjà dans Divi, nous n’avons donc rien à faire.
Pour 500px, vous pouvez aller sur le site : https://meetthenew.500px.com
ou sur le site www.iconfinder.com vous trouverez votre bonheur gratuitement,
exemple : https://www.iconfinder.com/icons/1179306/500_500px_logo_photography_icon#size=128
Pour Squarespace, vous trouverez les logos à la même adresse : https://www.iconfinder.com/search/?q=squarespace
ou encore directement sur le site : https://www.squarespace.com/brand-guidelines/
Choisissez pour chacun d’eux, une icône blanche et une icône noire en PNG.
La seconde étape sera de travailler un peu ces logos. L’objectif sera de les adapter à votre fond. Le blanc ou le noir deviennt soudain un excellent choix.
Deux contraintes majeures. premièrement il faudra définir l’icône de survol de la souris, à l’identique à celle de facebook (bleu) et deuxièment il faudra retailler les icônes à une taille acceptable pour qu’aucune ne soit plus imposante que les autres et notamment celle de facebook déjà en place. Ce travail est à faire avec Photoshop ou un logiciel similaire…
Enfin il faudra les charger sur votre site dans MEDIAS.
Nous sommes prêts.
Intervertir les icônes DIVI
Les icônes 500px et Squarespace n’existant pas dans DIVI (peut être dans DIVI 3.0 à venir ?), il va falloir subsistuer des icônes existantes par les nôtres. A ce niveau nous n’avons les icônes de Linkedin, Twitter et Google+ sont disponibles en plus de Facebook. Il faudra donc faire un choix : Facebook, pas de problème nous voulons le garder. Reste les trois autres…
Nota : Google+ n’est pas exactement un carré, il faudra donc faire attention à retailler l’icône en conséquence. Il faudra chercher car je ne connais pas les dimensions exactes de l’icône Google+.
L’objectif sera de faire croire à DIVI que l’icône 500px correspond bien à Linkdin et que Squarespace correspond à Twitter.
Voilà comment procéder…
Copiez le texte ci-dessous, modifiez son contenu :
.et_pb_member_social_links a.icon{width: 17px; height: 17px;}
.et_pb_member_social_links .et_pb_linkedin_icon:before { color: transparent!important; background-image: url(‘http://www.VOTRE_SITE.com/wp/wp-content/uploads/VOTRE_ICONE_500px.png‘); }
.et_pb_member_social_links .et_pb_linkedin_icon:hover:before { color: transparent!important; background-image: url(‘http://www.VOTRE_SITE.com/wp/wp-content/uploads/VOTRE_ICONE_SURVOL_500px.png‘); }
.et_pb_member_social_links a.icon{width: 17px; height: 17px;}
.et_pb_member_social_links .et_pb_twitter_icon:before { color: transparent!important; background-image: url(‘http://www.VOTRE_SITE.com/wp/wp-content/uploads/VOTRE_ICONE_SQUARESPACE.png‘); }
.et_pb_member_social_links .et_pb_twitter_icon:hover:before { color: transparent!important; background-image: url(‘http://www.VOTRE_SITE.com/wp/wp-content/uploads/2016/02/VOTRE_ICONE_SURVOL_SQUARESPACE.png‘); }
Et ensuite, copiez le dans la personnalisation CSS.
Dans la barre latérale, choisissez l’option du thème dans le menu DIVI et descender jusqu’à Personnaliser CSS.
Et enfin
Maintenant nous devons personnaliser le module Personne
FACEBOOK : L’icône Facebook est intégralement gérée par DIVI, il n’y a donc rien à faire sinon à rajouter l’adresse URL de votre site. Tout le reste se fera automatiquement.
La magie vient ensuite. Petit rappel, nous avons copié nos icônes dans Médias. Ensuite nous avons personnalisé le CSS DIVI pour décrire nos icônes comme étant celles de Linkedin et de Twitter. DIVI ne connait désormais que nos icônes pour le module personne uniquement. Mais attention cela est valable pour tout le ou les modules personne.
Nota : la taille des icônes (17px) a été choisie par rapport à celle e facebook déjà présente.
LINKEDIN : Vous n’avez plus qu’à ajouter l’adresse URL de votre lien 500px
TWITTER : et ici l’adresse URL de Squarespace.
Et voilà, il n’y a plus qu’à tester !
Nous avons bien nos trois icônes… et actives.
Il ne reste plus qu’à répéter le processus pour les autres personnes, pour que chaque lien pointe sur les bons sites…