Voici la réponse à une question relativement récurrente : comment faire pour qu’au clic sur ma section, ma ligne ou mon bloc de texte (par exemple), le visiteur soit redirigé vers une nouvelle page ou qu’une action soit déclenchée ?
Vous allez voir que la réponse tient en quelques lignes…
Ajoutez une classe à l’élément qui sera cliquable
Allez dans les paramètres de l’élément sur lequel vous souhaitez faire un lien (Paramètres -> Avancé -> Classe CSS) et ajoutez une classe dans le champ Classe CSS.
Dans mon exemple, j’ajoute le lien sur une section en utilisant la classe mon-element-cliquable, mais vous mettez bien ce que vous voulez ! 🙂
Un peu de jQuery…
Maintenant, il nous faut assigner un lien à cette classe. Collez le code ci-dessous dans Options du thème Divi -> Intégration -> Ajouter ligne de code à la < head > de votre blog en prenant bien soin de modifier le nom de votre classe en ligne 3 et de préciser l’URL de votre lien en ligne 4.
Si vous souhaitez rendre plusieurs éléments cliquables, vous devrez créer plusieurs classes et votre code ressemblera à ça :
Et un soupçon de CSS !
Pour terminer en beauté et affiner l’ergonomie, ajoutons un curseur en forme de pointeur au survol de notre élément cliquable pour signifier au visiteur qu’il s’agit d’un lien.
Voici donc quelques lignes de code CSS à insérer, soit dans Options du thème -> Personnaliser CSS, soit dans le fichier style.css de votre thème enfant.
Et si vous avez plusieurs éléments cliquables :
Pour conclure
Vous venez de voir qu’ajouter un lien sur n’importe quel élément est une petite manip vraiment très simple à mettre en place.
Vous pouvez même affiner encore un peu plus l’ergonomie en ajoutant à votre élément un effet au survol. Dans l’exemple ci-dessous, le fond de l’élément passe en rouge.
lhistoire du survol de la croix est en effet très étrange
Je ne comprends pas ton commentaire… Tu parles du pointeur ?
Où met-on “le soupçon de CSS? Merci
Je viens d’éditer l’article pour ajouter cette précision. 😉
Où l’as-tu édité SVP? Désolée, je débute (depuis un certain temps d’ailleurs)… Merci
Relis le chapitre “Et un soupçon de CSS !”… 😉
Bonjour
Merci pour ces précisions. J’aimerai uniquement que mon texte change de couleur au survol de la souris et non le fond (comme dans votre exemple).
Merci
Patrick
Bonjour Patrick,
il suffit d’ajuster les CSS de manière à cibler les paragraphes et aussi de remplacer background-color par color :
.mon-element-cliquable p:hover {
color:red;
}
Bonjour Pierre,
merci pour ce tuto qui me sert beaucoup !
J’ai un petit problème, mon élément cliquable contient une image en fond, du coup le hover changement de background ne réagis pas. Y aurait-il un moyen pour que mon image ai un “filtre” de couleur ou noir et blanc lors du survol de la souris?
Merci !
Dans ce genre-là ? Voir dans la page les blocs “Nos maisons” | “Nos réalisations”
Oui mais pour ma part c’est une image complète qui devrait changer au survol, pas seulement le texte…
Dans mon exemple, c’est la couleur d’overlay des images qui change, pas le texte…
D’accord, vu que je ne les vois pas changer au survol j’ai pensé que vous parliez du fond du texte “nos réalisations”. Du coup oui, dans ce genre-là mais au survol si possible.
Ce que j’ai fait c’est de mettre dans ma ligne, pour chaque colonne une image en fond + une couleur de fond, en sélectionnant l’effet de transparence “multiplié”.
Ensuite, en CSS je supprime la couleur de fond :
.mon-lien {
cursor: pointer;
transition:all 0.3s;
}
.mon-lien:hover {
background-color: transparent;
}
J’ai bien mis le fond (rouge) + mon image de fond, avec le css qui va avec mais rien ne change lorsque je passe la souris dessus.
Peut-être un problème dans mon CSS?
.mon-element-cliquable-1, .mon-element-cliquable-2,.mon-element-cliquable-3, .mon-element-cliquable-4, .mon-element-cliquable-5 {
cursor: pointer;
transition:all 0.3s;
}
.mon-element-cliquable-1, .mon-element-cliquable-2,.mon-element-cliquable-3, .mon-element-cliquable-4, .mon-element-cliquable-5:hover {
background-color: transparent;
}
hello,
je perd le déplacement progressif dans la page quand je remplace l’url par une ancre de ma page active. Est-ce qu’il y a un moyen d’y remedier ?
Sinon, je suis obligé de coller le code dans un module CODE car si je colle dans les CSS de l’onglet OPTION DE THEMES le code ci-dessous, j’ai une erreur de syntaxe :
jQuery(document).ready(function(){
jQuery(“.mon-element-cliquable”).on(‘click’, function(){
window.location = “URL DE VOTRE LIEN”;
});
});
Bonjour
Merci pour cette article
Mais une petite question si le lien c’est pas un URL
mais de l’HTML
Tél. +41 (0) 22 222 22 22
On peu faire cela ?
À tester, mais je pense que tu as juste à remplacer dans mon code, “URL DE VOTRE LIEN” par “tel:+4122222222”
Merci Pierre,
Ca fonctionne parfaitement.
Si jamais on peu également mettre un lien pour un email
mailto:info@exemple.ch
Autrement comment ouvrir un compte sur DIVI Community.fr
Super cite et super travail
Bravo
Bonjour,
J’ai appliqué l’effet sur le site de l’association Grainaille, mais il agit sur l’ensemble des liens qui se trouvent sur le même bloc “Autres variétés”.
https://alcc-com.fr/grainaille/maison-des-semences/legumes-racines/
Y a-t-il une solution ?
Un grand merci en tout cas pour vos articles
Gérald
Hello, depuis cet article, Elegant Themes a ajouté la fonctionnalité en native à Divi. Tu as un onglet lien sur tous les blocs pour y assigner celui que tu veux. Je pense que ça devrait régler ton problème.
Tiens nous au courant.
Bonjour,
Pourriez-vous m’indiquez quel code rajouter afin qu’un élément cliquable puisse s’ouvrir dans une nouvelle fenêtre, svp ?
Vous remerciant pour vos lumières.
Cordialement,
Bonjour, il faut ajouter l’attribut target=”_blank” dans le code du lien.
Bonjour,
Comment faire un lien vers un élément cliquable de mon site, mais depuis l’extérieur ? J’ai besoin de faire insérer un lien sur un document externe qui ramène à un certain endroit de la page (sur une ligne par exemple), comment faire ? Merci de votre aide
Il suffit d’ajouter un ID CSS dans le module de ton choix (onglet “avancé”) et de faire un lien du type : http://www.site.com/#tonIDcss
Bonjour et merci pour tout tes précieux conseils.
Néanmoins, j’ai encore une question : Comment puis mettre un lien sur un texte saisi dans la rubrique “Section” du module Optin email de Divi. En effet dans le message de succès après saisie du mail, je souhaiterais que l’utilisateur puisse cliquer sur une expression pour être redirigé sur un bloc de ma page. Est-ce possible ?
Merci beaucoup
Essaye en ciblant l’élément
.et_pb_newsletter_success h2.