fbpx

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.

<script>
jQuery(document).ready(function(){
jQuery(".mon-element-cliquable").on('click', function(){
     window.location = "URL DE VOTRE LIEN";    
});
});
</script>

 

Si vous souhaitez rendre plusieurs éléments cliquables, vous devrez créer plusieurs classes et votre code ressemblera à ça :

<script>
jQuery(document).ready(function(){
  jQuery(".mon-element-cliquable-1").on('click', function(){
       window.location = "URL DE VOTRE PREMIER LIEN";
  });
  jQuery(".mon-element-cliquable-2").on('click', function(){
     window.location = "URL DE VOTRE SECOND LIEN";
  });
});
</script>

 

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. 

.mon-element-cliquable {
            cursor: pointer;
}

 

Et si vous avez plusieurs éléments cliquables :

.mon-element-cliquable-1, .mon-element-cliquable-2 {
            cursor: pointer;
}

 

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.

.mon-element-cliquable:hover {
background-color:red;
}