Comment empêcher les liens Elementor d'être soulignés (3 façons)

Par défaut, Elementor (comme la plupart des créateurs de sites web) applique un style de soulignement aux liens afin qu'ils soient immédiatement reconnaissables par les utilisateurs. Bien que cela fonctionne bien pour la convivialité de base, cela ne correspond pas toujours aux objectifs de conception web moderne. 

Dans de nombreux cas, il est préférable de ne pas souligner les liens afin de conserver un aspect plus propre et plus professionnel. 

"Pour empêcher les liens Elementor d'être soulignés, accédez à vos Tableau de bord WordPress >> Naviguer vers Apparence >> Personnaliser>>CSS supplémentaire. Coller le code CSS a { text-decoration : none}. Cliquez ensuite sur Publié.

Dans ce blog, j'examinerai trois méthodes pour empêcher les liens Elementor d'être soulignés ou pour les supprimer.

Alors, commençons !

Empêcher les liens Elementor d'être soulignés (à l'aide d'un paramètre global)

Si vous souhaitez désactiver les liens soulignés sur l'ensemble de votre site, cette méthode est parfaite pour vous. Avec cette méthode, vous n'avez pas besoin de modifier chaque page individuellement. Vous pouvez le faire avec un petit code CSS en utilisant le Customizer de WordPress. Mais ne vous inquiétez pas, c'est vraiment facile. 

Voici comment procéder :

1. Accédez à votre Tableau de bord WordPress.

2. Naviguez jusqu'à Apparence >> Personnaliser.

3. Faites défiler vers le bas et cliquez sur CSS supplémentaire.

4. Collez les éléments suivants souligner arrêter le texte CSS code :

a {
    text-decoration : none ;
}

5. Cliquez maintenant sur Publié.

Cela empêchera le soulignement de tous les liens sur l'ensemble du site, sans qu'il soit nécessaire de modifier chaque page individuellement. C'est un moyen rapide et efficace de maintenir un style cohérent.

Comment supprimer le soulignement des liens textuels dans Elementor

Que faire si vous souhaitez supprimer le soulignement des liens dans le contenu d'une section ou d'un widget spécifique, et non de l'ensemble du site web ? 

Je vais maintenant vous montrer comment supprimer le soulignement des liens textuels dans une section ou un widget spécifique de Elementor.

Vous pouvez alors suivre les deux méthodes ci-dessous :

Méthode 1 : Ajout d'une feuille de style CSS personnalisée dans Elementor (nécessite Elementor PRO)

Vous pouvez modifier tous les liens de texte d'une section ou d'un widget spécifique à l'aide d'une feuille de style CSS personnalisée. Cette méthode est très simple. Cependant, elle est réservée aux utilisateurs de Elementor Pro. 

Dans cette méthode, il vous suffit d'ajouter un peu de code. Dans cette méthode, il vous suffit d'ajouter un peu de code. Ne vous inquiétez pas, c'est très facile. Il suffit de suivre les étapes suivantes :

• Ouvrez votre page dans Elementor.

• Sélectionnez votre section et accédez à la page Avancé tabulation.

• Faites défiler vers le bas et cliquez sur CSS personnalisé.

• Collez le code suivant :

a {
    text-decoration : none ;
}

• Cela supprime le soulignement de tous les liens dans ce widget ou cette section.

Ce code empêchera que tous les liens soient soulignés. Vous pouvez également ajouter d'autres styles si vous le souhaitez. Par exemple, vous pouvez changer la couleur, changer le style de police. Pour cela, il vous suffit d'ajouter un peu plus de code CSS.

Si vous n'aimez pas du tout cette méthode de codage CSS, vous pouvez également essayer la méthode suivante.

Méthode 2 : Utilisation des paramètres de style de Elementor

Si vous utilisez Elementor Free et que vous n'aimez pas coder, cette méthode est faite pour vous. Elementor vous permet de personnaliser facilement les styles de liens. Pour supprimer les soulignements des liens, suivez ces étapes simples :

• Ouvrez votre page dans Elementor.

• Cliquez ensuite sur le bloc de texte contenant le lien.

• Accédez maintenant à l'onglet Style.

• Cliquez sur l'icône du crayon typographique.

• Ensuite, faites défiler vers le bas et trouvez le Décoration option. Et le régler sur Aucun.

• Votre lien apparaîtra désormais sans soulignement. 

Vous pouvez répéter cette opération manuellement pour chaque lien. 

Remarque : S'il n'y a que quelques liens, vous pouvez utiliser cette méthode pour empêcher les liens d'être soulignés. Mais si vous travaillez avec plusieurs liens et que vous souhaitez modifier plusieurs pages, vous devez suivre cette méthode.

Quand il faut empêcher les liens Elementor d'être soulignés et quand il ne faut pas le faire

Dans Elementor, le soulignement des liens peut soit améliorer la clarté, soit encombrer votre conception, selon l'endroit où il apparaît. Ainsi, avant d'empêcher les liens d'être soulignés, vous devez savoir quand les empêcher de l'être, afin d'assurer un équilibre entre des visuels clairs et une grande facilité d'utilisation.

En règle générale, vous supprimez les soulignements dans les cas suivants

1. Vous concevez des boutons ou des CTA

Les boutons doivent ressembler à des boutons, et non à des liens textuels. Les soulignements créent un encombrement. Par exemple : "Acheter maintenant avec une couleur d'arrière-plan, un effet de survol et pas de soulignement.

2. Menus de navigation ou liens d'en-tête

Les éléments de menu suivent généralement une conception propre et minimale (stylisée avec des effets de survol ou des mises en évidence de l'arrière-plan au lieu de soulignements).

3. Lorsque les liens sont stylisés différemment (couleur, gras, effets de survol)

Si votre lien présente déjà un contraste de couleur distinct (comme un texte bleu sur fond noir) et un style de survol (comme un soulignement au survol), vous pouvez sans risque supprimer le soulignement par défaut.

4. Pour des mises en page modernes et minimales

Certaines conceptions (comme les sites d'entreprise ou les portfolios) visent un aspect épuré et minimal, où les soulignements peuvent sembler démodés ou gênants.

Quand il ne faut pas arrêter les soulignements :

Voici les cas où vous pouvez conserver les soulignements :

1. Dans le contenu long ou les articles de blog

Les utilisateurs s'attendent à ce que les liens soient soulignés dans le contenu. En le supprimant, ils risquent de ne pas les voir. C'est le cas, par exemple, des articles, des études de cas ou des blogs d'affiliation : Articles, études de cas ou blogs d'affiliés. Là encore, les liens (comme "Politique de confidentialité" ou "Conditions d'utilisation") doivent être faciles à identifier rapidement.

2. Pour l'accessibilité et la lisibilité

Les utilisateurs daltoniens ou malvoyants peuvent ne pas remarquer les liens non soulignés. Les lignes directrices des WCAG recommandent de souligner les liens à moins que la couleur du lien ait au moins Contraste 3:1 par rapport à un texte normal.

3. Quand le style des liens est trop subtil

Si votre site utilise des couleurs similaires pour le texte et les liens, la suppression du soulignement nuit à la convivialité.

Lire aussi : Comment souligner dans WordPress

FAQ

Conclusion

L'arrêt ou la suppression du soulignement des liens dans Elementor n'est pas seulement une question de style. Il s'agit de donner à votre site Web un aspect propre, moderne et facile à utiliser. Dans ce guide, nous avons exploré trois façons simples d'empêcher les liens d'être soulignés :

• Si vous souhaitez supprimer les soulignements sur l'ensemble de votre site web, vous pouvez utiliser un petit code CSS dans le Customizer de WordPress.
• Si vous utilisez Elementor Pro, vous pouvez ajouter des feuilles de style CSS personnalisées directement à une section ou à un widget.
• Et si vous utilisez la version gratuite de Elementor, vous pouvez utiliser les paramètres de style pour supprimer manuellement les soulignements de chaque lien.

Chaque méthode a son propre cas d'utilisation. Par exemple, le CSS global permet de gagner du temps et d'assurer la cohérence de l'ensemble. Mais si vous ne souhaitez modifier que quelques liens, la méthode manuelle convient parfaitement.

Toutefois, il est important de penser à vos visiteurs. Les liens soulignés permettent aux gens de savoir qu'ils sont cliquables. En particulier dans les articles de blog ou les articles longs. 

Lire aussi :

• Sortie de la version 9 de Element Pack Pro : Qu'y a-t-il de passionnant ?
• Comment ajouter un Testimonial Slider dans WordPress en utilisant Elementor
• Comment faire pour que l'accordéon reste fermé par défaut dans Elementor ?
• Comment empêcher les liens Elementor d'être soulignés (3 façons)
• Guide facile : Comment ajouter du code à une page sur Elementor | 5 étapes faciles