Les blocs Gutenberg paraissent souvent très limités. Pourtant, on peut effectuer beaucoup de personnalisations. Sauf qu’on ignore parfois que certains fonctionnalités existent. C’est le cas pour ce qui est de changer les couleurs d’un lien au survol. Tout simplement parce que cette option est relativement cachée. Ce qui est regrettable ! Car c’est ce petit type d’option qui pousse parfois des utilisateurs à opter pour un constructeur de page WordPress !
Aussi découvrons comment ajouter une couleur en survol d’un lien via les blocs Gutenberg WordPress 🙂
Mettre une autre couleur au survol d’un lien via les blocs Gutenberg
D’abord, notons un premier point important. La personnalisation de la couleur d’un lien qu’on survole est souvent :
- portée par une configuration à effectuer sur le thème WordPress choisi, installé et activé sur un site web.
- portée par des customisations directement effectuées dans le code CSS
Ou comme dans le cas d’aujourd’hui, via les blocs Gutenberg pour ce qui concerne le contenu textuel au sein duquel on souhaité intégrer un ou plusieurs liens.
Bref, si vous voulez ajouter une couleur au survol sur vos liens via les blocs Gutenberg WP ou changer la couleur par défaut des liens on « hover » (= au survol), c’est maintenant que ça se passe 🙂
D’abord avec le petit tuto vidéo :
Puis maintenant par écrit :
Si vous voulez changer la couleur d’un lien via par exemple le plus simple bloc qui soit à savoir le bloc « Paragraphe », rendez-vous dans les réglages à gauche ici :
D’abord, cliquez sur l’icône avec les 3 petits points verticaux comme dans la capture ci-dessus, action numéro 1 🙂 Ensuite, cliquez sur « Lien » (action 2 de la capture d’écran). Cela va vous ouvrir un sélecteur de couleur en en haut 2 onglets :
- par défaut : pour choisir la couleur par défaut de votre lien
- au survol : pour définir la couleur de votre lien au survol
Il ne vous reste donc plus qu’à définir vos couleurs ici pour chaque onglet (par défaut et au survol) :
Exemples de liens dont les couleurs sont personnalisées en brut et au survol (on hover) :
« Texte sur lequel je vais ajouter un lien avec couleur et de surcroît une autre couleur au survol du lien. »
Notez que cette modif est valable pour tous les blocs qui intègrent une partie textuelle. Et il faut copier les styles pour les appliquer à chaque paragraphe ou à chaque blocs. C’est clairement l’aspect négatif pour une personnalisation qu’on imaginerait être valable pour toute une page, par exemple.
Autre aspect moins positif de cette possibilité de customiser ses couleurs de liens dans les blocs : l’option de couleur des liens est relativement planquée par défaut dans les réglages de bloc à gauche de l’écran. Pourquoi ne pas afficher cet élément par défaut avec les deux autres que sont « texte » et « arrière plan’ ?
Couleurs et contraste
Histoire de rendre service à votre lectorat niveau lisibilité et de ne pas avoir de feedbacks négatifs sur l’accessibilité d’une page via des outils comme Pagespeed Insights, optez plutôt pour des vrais bons contrastes de couleurs. En l’occurrence, si l’outil de réglages des couleurs détecte que votre combinaison de couleurs n’est pas assez contrastée, il vous le signalera avec le message suivant :
« Cette combinaison de couleurs est difficilement lisible. Essayez d’utiliser une couleur d’arrière-plan plus claire et/ou une couleur du lien plus sombre. »
Notez que cette recommandation est valable pour tous les blocs dont :
Bonne customisation de couleurs ! Et n’oubliez pas d’utiliser le copiage de vos styles d’un bloc à l’autre si vous voulez répétez votre custo sans la saisir à chaque fois ! Vous gagnerez évidemment un temps de fou.
