Mettre du texte sur un bloc image Gutenberg WordPress

Il est fréquent de chercher à ajouter du texte sur une image sur WordPress. Sans devoir passer par un outil tiers comme Canva ou autre. En l’occurrence sur WordPress pas besoin de passer par un outil externe pour mettre du texte sur votre bloc image natif.

Découvrons aujourd’hui comment faire pour mettre un titre ou un paragraphe sur un bloc image WordPress 🙂

Comment ajouter du texte sur un bloc Gutenberg image WP ?

On pense souvent à tort que pour ajouter du texte sur une image Gutenberg WordPress, il vaut mieux passer par Canva ou un outil similaire. Ou qu’il faut utiliser un builder de page comme Elementor ou encore DIVI. Pourtant, il existe une technique simple, gratuite et qui vous évite d’ajouter un page builder. Cette technique consiste simplement à transformer en un clic votre bloc image en bloc bannière WordPress. Voyons ça ci-dessous en vidéo :

Il existe donc deux façons simples pour mettre du texte sur une image Gutenberg WP :

• Transformer l’image en bloc bannière simplement en cliquant sur l’icône en forme de A via la barre d’outils horizontale des images blocs WP
• Transformer l’image en bannière (bloc natif) en utilisant la barre d’outils horizontale et en sélectionnant le bloc bannière via la liste des blocs disponibles

Exemple concret en images :

Ajoutez une image via bloc natif à votre article ou page WordPress. Puis survolez cette image avec votre curseur de manière à afficher la barre d’outils horizontale. Et survolez cette icône en forme de A encadré :

Quand vous survolerez cette icône via la barre d’outils, vous verrez au survol la phrase qui suit : « Ajouter du texte au-dessus de l’image« . Au moins c’est parfait, clair et net car c’est ce qu’on veut !!! =)

Aussi, cliquez dessus et vous allez voir apparaître sur votre image un champ de saisie de texte ! Simple non pour enfin obtenir du texte sur une image WordPress Block sans devoir ajouter un plugin…

L’autre façon de faire est de faire apparaître cette même barre d’outils horizontale du bloc image natif, puis de cliquer sur la toute première icône à gauche via la barre d’outil, à savoir l’icône image. Cela fait apparaître une liste de blocs natifs Gutenberg. Enfin, on choisit et clique sur le bloc bannière 🙂

Que peut-on ajouter sur le bloc image natif WordPress Gutenberg donc la bannière ?

Vous pouvez ajouter du texte sur votre bloc image WordPress qui devient non plus un bloc image mais un bloc Bannière natif. Ce texte est donc un bloc paragraphe. Toutefois, quand on le voit dans la vidéo YouTube disponible plus haut dans cet article, on peut mettre aussi un Titre natif WP.

Cela permet ainsi de ne pas omettre la partie structure SEO de votre contenu. Vous pouvez tout à fait mettre un titre h2, h3 etc… Exemple en image ci-dessous avec une bannière qui contient un bloc titre h3/titre 3 et un bloc paragraphe :

Bien entendu et c’est en majeure partie ce qui fait la force du bloc bannière, dans mon exemple ci-dessus, vous pouvez voir qu’un bouton natif Gutenberg est ajouté. En effet, non seulement vous pouvez mettre du texte (paragraphe et/ou titre via blocs natifs) sur votre bannière, mais vous pouvez aussi en faire une zone clairement orientée utilisateur et faire un appel à l’action via l’ajout d’éléments comme un bouton. Et pour beaucoup d’entre vous, comme moi, les boutons aussi appelés CTA (pour call to action, à savoir appel à l’action), c’est la vie !!!

Ainsi, en cherchant à savoir comment vous pouviez ajouter du texte à un bloc image WordPress natif Gutenberg, vous avez peut-être découvert qu’on pouvait aller très loin. Sans même passer par un plugin tiers quel qu’il soit sur WP. Ou encore devoir faire un montage visuel via un tool comme Canva.

Voici donc un nouvelle très bonne raison d’utiliser les blocs WordPress natifs Gutenberg !

Texte sur image dans WordPress avec les blocs avec lisibilité et accessibilité

Maintenant que vous savez ajouter du texte sur une image native WordPress et les blocs, n’oubliez pas la lisibilité. Il faut que votre texte soit aisément lisible.

On évitera surtout :

• du texte clair sur un fond clair
• du texte foncé sur un fond dark…
• du texte sur la même teinte que l’image de fond
• du texte trop petit et/ou trop fin

On va privilégier pour la lisibilité du texte sur l’image native en bloc WordPress :

• du contraste, c’est la clé ! D’ailleurs vous avez sûrement relevé que par défaut, quand vous transformez votre image en bannière pour ajouter du texte, un filtre de superposition avec opacité se met automatiquement en place
• du texte assez gros
• du texte plus foncé ou bien plus clair que l’image de fond
• l’ajustement du filtre de superposition

La lisibilité n’est pas qu’une question d’esthétique. Si vous n’aimez que les tons clairs et que vous trouvez qu’une image très claire avec du texte très clair, c’est joli, vous faîtes pourtant probablement une erreur. Une erreur d’accessibilité. C’est à dire que vous rendrez votre bannière ne sera pas facilement lisible par certaines personnes/certains internautes.

Il n’est pas question ici des seniors uniquement qui peuvent avoir des problèmes de vue relatifs à l’âge. Il ne faut pas oublier :

• les personnes malvoyantes
• les personnes qui passées 40 ans et donc non seniors, peuvent déjà avoir un inconfort de lecture sur écran avec des éléments vraiment trop clairs ou vraiment très foncés
• la lecture sur petit écran (téléphone portable et petite tablette…)

Bref, l’accessibilité est un vrai enjeu. Ne la négligez surtout pas. Pensez à vos utilisateurs, visiteurs. Aux internautes. Notez d’ailleurs que l’accessibilité est un critère que des outils comme Pagespeed Insights vous afficheront (parfois un peu trop c’est vrai) comme moins bons ou pas bons, si vous n’avez pas assez de contraste sur des éléments d’une page web.