#13 Responsive lien sans ancre Webflow

Si vous ajoutez des liens sans ancres sur votre site (par exemple dans un article de blog), il se peut qu’il y ait un problème de responsive sur votre page. En effet, l’URL d’une page web peut s’avérer être longue et donc créer un scroll horizontal non voulu.

Comment régler ce problème ?

Option 1 (Recommandée) : Ajouter une ancre de lien

Une solution toute simple, mais très utile et optimisée pour le SEO est d’ajouter des ancres à vos liens. Plutôt que de copier-coller une URL et la mettre dans votre page, vous pouvez ajouter un mot ou une partie de phrase (l’ancre) qui renverra vers votre URL.

Ce texte est très important pour le référencement naturel car il permet de donner une indication aux robots des moteurs de recherche sur ce qu’il y a derrière le lien. Une URL simple n’est pas forcément très descriptive et compréhensible.

De plus, un lien avec une ancre à plus de chances d’être visité qu’une URL basique car il est plus persuasif.

Option 2 : Ajouter un petit bout de code

Cependant, dans certaines situations, il peut arriver de devoir ajouter une URL complète (par exemple dans les mentions légales).

Dans ce cas-là, pour être sûr de ne pas avoir de problème de responsive, vous pouvez ajouter le bout de code CSS suivant dans les paramètres de votre page (dans la balise head) ou en ajoutant un embed sur votre page (Tips n°1 : Page Styles) :

<style>

a {

 word-break: break-all;

}

</style>

Tous les liens de votre page seront coupés pour garder un affichage correct quelle que soit la taille de l’écran.

Si vous ajoutez le code dans les paramètres de la page, vous ne verrez la modification qu’une fois le projet publié.

Si vous souhaitez que cette propriété CSS ne s’applique qu’à un lien, vous pouvez lui donner une classe spécifique et remplacer ‘a’ par ‘.votre-classe’.

Avec cette méthode, vos liens ne vous poseront plus de problèmes sur mobiles.

‍

‍