Cette astuce permet à vos visiteurs d’identifier les liens externes dans votre contenu et de les prévenir qu’en cliquant, ils quittent votre site pour en visiter un autre.
L’icône traditionnellement utilisée pour identifier un lien externe est un rectangle dans lequel une flèche pointe vers le coin supérieur droit.
Pour automatiser le placement d’une icône sur chaque lien externe, il suffit de renseigner ce code dans la feuille de styles de votre thème-enfant
.maclasse a:not([href*='mondomaine.extension']):not([href^='#']):not([href^='/']):not([href*='facebook.com']):not([href*='twitter.com']):not([href*='linkedin.com']):not([href*='pinterest.com']):not([href*='instagram.com']):not([href*='whatsapp.com']) {
background: url("external-link.svg") center right no-repeat;
background-size: 14px;
padding-right: 16px;}
Veillez à remplacer :
.maclasse par le nom de la classe qui cible votre bloc (exemple pour Divi, je cible tous les modules « texte » en utilisant la classe .et_pb_text).
mondomaine.extension par votre propre domaine.
external-link.svg par le nom de votre icône et son chemin complet.
Résultat 👉 Découvrez l’Hôtel-restaurant La Cauquière by l’Épicurienne
Le P'tit bonus avec Divi
Si vous souhaitez que la page de destination de votre lien s'ouvre dans un nouvel onglet (je sais, ce n'est pas toujours apprécié des puristes), regardez ceci :
