Tutoriels WordPress de confiance, quand vous en avez le plus besoin.
Guide du débutant pour WordPress
WPB Cup
25 millions+
Sites web utilisant nos plugins
16+
Années d'expérience WordPress
3000+
Tutoriels WordPress par des experts

Comment ajouter du texte sur une image dans WordPress (3 méthodes)

Vous voulez ajouter du texte à vos images WordPress ? Ces titres et citations attrayants que vous voyez superposés sur des photos peuvent vraiment faire ressortir votre contenu. C'est ce qu'on appelle une superposition de texte, et c'est un excellent moyen de rendre vos images plus attrayantes.

Si vous vous demandiez comment créer ces superpositions de texte, vous pourriez penser que vous avez besoin d'un logiciel de conception spécial ou de compétences particulières. Bonne nouvelle : ce n'est pas le cas !

Nous avons testé toutes sortes de méthodes et trouvé plusieurs façons simples d'ajouter du texte aux images directement dans WordPress. Aucune expérience en conception nécessaire, et aucun logiciel supplémentaire à acheter.

Prêt à apprendre comment ? Nous allons vous montrer trois façons simples d'ajouter du texte sur une image dans WordPress. À la fin de ce guide, vous créerez des superpositions de texte d'aspect professionnel pour votre site Web en toute confiance.

Comment ajouter du texte par-dessus une image dans WordPress

Quand ajouter du texte sur des images dans WordPress

Les images peuvent considérablement améliorer l'attrait de votre site Web WordPress, le rendant plus intéressant visuellement tout en aidant à aérer les longs blocs de texte.

Cependant, il y a des moments où une image seule ne raconte pas toute l'histoire. Dans ces cas, l'ajout de superpositions de texte peut fournir un contexte supplémentaire, aidant votre public à comprendre pourquoi l'image est pertinente pour le contenu.

Que vous gériez un blog WordPress ou une boutique en ligne, les superpositions de texte peuvent transformer des images ordinaires en en-têtes ou bannières qui attirent l'attention.

Dans cet article, nous vous présentons trois méthodes simples pour ajouter du texte par-dessus une image dans WordPress. Si vous préférez passer directement à une méthode particulière, vous pouvez utiliser les liens ci-dessous :

Une façon d'ajouter du texte par-dessus une image dans WordPress est d'utiliser le bloc Couverture. Vous pouvez utiliser ce bloc pour afficher n'importe quelle image, puis taper du texte par-dessus. Cela rend le bloc Couverture parfait pour créer des images héros, des en-têtes et des bannières.

Pour ajouter un bloc Couverture à une page ou un article, cliquez simplement sur le bouton plus « + Ajouter un bloc » dans l'éditeur de blocs Gutenberg.

Vous pouvez maintenant taper « Couverture » et sélectionner le bon bloc lorsqu'il apparaît.

Bloc de couverture WordPress

Ici, vous pouvez choisir le bloc Couverture par défaut.

Mais vous pouvez aussi opter pour l'option de modèle avec l'image et le texte de remplacement. Avec la deuxième option, vous pouvez simplement remplacer l'image et le texte existants par les vôtres.

Pour remplacer l'image par défaut, cliquez simplement pour sélectionner l'image. Une fois que vous avez fait cela, cliquez sur le bouton « Remplacer ».

Remplacement de couverture WordPress

Si vous souhaitez utiliser une image qui se trouve déjà dans votre bibliothèque de médias WordPress, cliquez simplement sur « Ouvrir la bibliothèque de médias ». Vous pouvez ensuite choisir une image existante.

Si vous souhaitez télécharger une nouvelle image, cliquez plutôt sur « Télécharger ».

Téléchargement de remplacement de couverture

Cela ouvre une fenêtre où vous pouvez choisir n'importe quel fichier de votre ordinateur.

Après avoir choisi une image, vous pouvez utiliser les paramètres du bloc pour créer des effets intéressants et accrocheurs.

Par exemple, vous pouvez rendre l'image fixe pendant que le visiteur fait défiler la page ou ajouter une superposition de couleur à l'image.

Superposition de couleur de couverture

Si vous utilisez une superposition, vous pouvez modifier son opacité à l'aide du curseur « Opacité ». Le réglage d'opacité contrôle la transparence de l'image d'arrière-plan.

Lorsque vous êtes satisfait de l'apparence de l'image, vous êtes prêt à ajouter du texte.

Par défaut, le bloc Couverture contient un bloc Titre et un bloc Paragraphe où vous pouvez ajouter du texte par-dessus l'image.

Comment ajouter du texte par-dessus une image dans WordPress

Pour ajouter du texte, cliquez simplement pour sélectionner le bloc Titre ou Paragraphe. Ensuite, tapez le texte que vous souhaitez utiliser.

Lorsque vous ajoutez du texte sur des images, assurez-vous que votre texte est lisible pour tous les visiteurs. Un bon contraste entre le texte et l'arrière-plan aide tout le monde à lire votre contenu plus facilement. Pour en savoir plus, veuillez consulter notre guide sur comment améliorer l'accessibilité sur votre site WordPress.

Cela dit, vous voudrez peut-être styliser votre texte pour qu'il soit plus facile à lire.

Si vous travaillez avec un bloc Titre, vous pouvez également essayer les différents styles de titre pour voir lequel est le plus facile à lire.

Styliser le texte par-dessus une image WordPress

Vous pouvez également aider votre texte à ressortir en utilisant une couleur contrastée.

Pour choisir une couleur différente, sélectionnez l'onglet « Bloc » dans le menu de droite. Ensuite, cliquez sur « Couleur » pour développer cette section.

Une fois que vous avez fait cela, cliquez sur « Texte ». Cela ouvre une fenêtre contextuelle où vous pouvez choisir une nouvelle couleur pour tout le texte du bloc.

Changer la couleur du texte par-dessus une image

Généralement, un texte plus grand est plus facile à lire.

Pour agrandir votre texte, cliquez sur le champ à côté de « Taille », puis tapez un nombre plus grand dans ce champ.

Ajouter du texte par-dessus une image dans WordPress

Une fois que vous êtes satisfait de l'apparence de votre bloc Couverture, vous pouvez publier ou mettre à jour votre page normalement. Maintenant, si vous visitez votre site Web WordPress, vous verrez votre texte sur l'image.

Méthode 2 : Ajouter du texte par-dessus une image à l'aide du bloc Image

Le bloc Couverture est idéal pour créer des bannières et des en-têtes. Cependant, vous pouvez également ajouter du texte sur un bloc Image WordPress standard.

Pour commencer, vous devrez ajouter un bloc Image à votre page ou article. Pour ce faire, cliquez simplement sur le bouton « + Ajouter un bloc » dans l'éditeur de blocs WordPress.

Vous pouvez ensuite taper « Image » et sélectionner le bon bloc pour l'ajouter à votre article.

Bloc d'image WordPress

Vous pouvez ensuite télécharger une image depuis votre ordinateur ou cliquer sur « Bibliothèque des médias » pour choisir une image dans la bibliothèque des médias WordPress.

Après avoir choisi votre image, vous pouvez modifier son point focal, ajouter une superposition et modifier l'opacité en suivant le même processus décrit ci-dessus.

Vous pouvez également essayer les différents curseurs « Arrière-plan fixe » et « Arrière-plan répété » pour voir ce qui convient le mieux à votre bloc d'image.

Lorsque vous êtes satisfait de l'apparence de votre image, cliquez simplement sur le bouton « Ajouter du texte sur l'image ».

Ajouter une image avec texte

Cela ajoute une zone où vous pouvez taper votre texte.

Selon votre image, les visiteurs peuvent avoir du mal à lire votre texte de superposition. Ici, il peut être utile de mettre le texte en gras ou de changer sa couleur en suivant le même processus décrit ci-dessus.

Couleur du bloc image

Vous pouvez également agrandir votre texte.

Pour ce faire, trouvez la section « Taille » dans le menu de droite. Vous pouvez ensuite cliquer sur les différents nombres pour agrandir ou réduire votre texte.

Petit grand texte

Lorsque vous êtes satisfait de l'apparence de votre texte et de votre image, prévisualisez votre site Web. Ensuite, cliquez sur « Enregistrer le brouillon », « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Si vous utilisez un thème WordPress de type bloc, vous pouvez utiliser les méthodes 1 et 2 pour ajouter du texte par-dessus une image dans n'importe quelle partie de votre thème à l'aide de l'éditeur complet de site WordPress (FSE).

Vous pouvez en apprendre davantage sur le FSE dans notre guide complet pour débutants sur l'édition complète du site WordPress.

Méthode 3 : Créer une mise en page de page personnalisée avec du texte par-dessus une image

Les blocs WordPress intégrés sont un moyen rapide et facile d'ajouter du texte par-dessus une image dans WordPress. Cependant, si vous souhaitez la liberté de créer des conceptions de page entièrement personnalisées, vous aurez besoin d'un plugin de création de pages.

SeedProd est le meilleur plugin de création de pages WordPress sur le marché. Il vous permet d'ajouter du texte par-dessus n'importe quelle image sur l'ensemble de votre site Web.

Remarque : Il existe une version gratuite de SeedProd, mais pour ce guide, nous utiliserons la version Pro car elle offre plus de fonctionnalités.

Vous pouvez lire notre avis complet sur SeedProd pour plus de détails.

Tout d'abord, vous devez installer et activer le plugin SeedProd. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Après l'activation, vous devrez saisir votre clé de licence SeedProd. Vous pouvez obtenir cette clé en vous connectant à votre compte SeedProd. Ensuite, cliquez sur l'onglet « Téléchargements ».

Une fois que vous avez fait cela, vous pouvez copier la clé dans la section « Clé de licence ».

La page Téléchargements de SeedProd

Vous pouvez maintenant coller cette clé dans votre espace d'administration WordPress en allant sur la page SeedProd » Paramètres.

Une fois que vous êtes ici, collez votre clé dans le champ « Clé de licence ».

Vérification de votre licence SeedProd

Ensuite, il vous suffit de cliquer sur « Vérifier la clé ».

Après cela, nous allons aller sur SeedProd » Pages de destination et cliquer sur « Ajouter une nouvelle page de destination ».

Les modèles de conception de page de SeedProd

Cette première étape est nécessaire avant de pouvoir ajouter du texte sur vos images.

Votre prochaine tâche consiste à choisir un modèle, qui sera le point de départ de votre page.

Quel que soit le modèle SeedProd que vous choisissez, vous pouvez personnaliser chaque partie du modèle pour qu'il corresponde parfaitement à votre site Web et à votre image de marque. Si vous préférez commencer avec une toile vierge, vous pouvez cliquer sur « Modèle vierge ».

SeedProd choisir modèle

Dans toutes nos images, nous utilisons le modèle Tasty Squeeze Page, qui est parfait pour les campagnes de collecte d'abonnés.

Une fois que vous avez trouvé un modèle que vous souhaitez utiliser, placez votre souris dessus. Vous pouvez ensuite cliquer sur l'icône « Aperçu ».

Les modèles de SeedProd conçus par des professionnels

Cela affichera un aperçu du modèle.

Si vous êtes satisfait de l'apparence de ce modèle, cliquez sur le bouton « Choisir ce modèle ».

Un modèle de génération de prospects et de squeeze page

Dans le champ « Nom de la page », tapez un nom pour la page.

Par défaut, SeedProd utilisera ce nom comme URL de la page. Si vous souhaitez modifier cette URL créée automatiquement, modifiez simplement le texte dans le champ « URL de la page ».

Créer une mise en page personnalisée avec SeedProd

Lorsque vous êtes satisfait des informations que vous avez saisies, cliquez sur le bouton « Enregistrer et commencer à modifier la page ». Cela ouvrira le modèle dans l'éditeur glisser-déposer de SeedProd.

Dans la barre latérale gauche, vous verrez tous les blocs et sections que vous pouvez faire glisser et déposer sur votre page.

Ajouter des blocs à votre conception SeedProd

Sauf si vous utilisez le modèle vierge, votre page SeedProd aura déjà des blocs et des sections. Pour modifier l'un de ces contenus, cliquez simplement pour sélectionner le bloc ou la section.

Le menu de gauche de SeedProd affichera désormais tous les paramètres que vous pouvez utiliser pour personnaliser ce bloc ou cette section. Comme vous pouvez le voir dans l'image suivante, vous pouvez modifier le texte qui s'affiche dans le bloc Titre.

Personnaliser une conception de page SeedProd prête à l'emploi

La façon la plus simple d'ajouter du texte par-dessus une image est d'utiliser l'une des sections Héros prêtes à l'emploi de SeedProd.

Ces sections ont une image d'arrière-plan d'espace réservé, pleine largeur, avec du texte d'espace réservé ajouté par-dessus. Vous pouvez simplement remplacer l'image d'arrière-plan et le texte par défaut par votre propre contenu.

Pour commencer, cliquez sur l'onglet « Sections » dans le menu de gauche de SeedProd.

Vous pouvez ensuite cliquer sur « Héros » pour voir tous les modèles de sections héros prêts à l'emploi que vous pouvez ajouter à votre page.

Un modèle de section SeedProd

Pour prévisualiser l'un de ces modèles de section, survolez simplement le modèle, puis cliquez sur l'icône de la loupe.

Pour ajouter cette section héros à votre design, cliquez simplement sur « Choisir cette section ».

Un modèle de héros SeedProd

Ensuite, vous voudrez remplacer l'image d'origine du modèle par votre propre image. Pour ce faire, cliquez simplement sur l'image d'origine pour la sélectionner.

Ensuite, dans le menu de gauche de SeedProd, survolez l'aperçu de l'image d'arrière-plan jusqu'à ce qu'une icône de corbeille apparaisse.

Vous pouvez ensuite cliquer sur cette icône pour supprimer l'image d'espace réservé.

Supprimer une image d'arrière-plan dans SeedProd

Ensuite, cliquez sur « Utiliser votre propre image ». Vous pouvez alors choisir une image dans la médiathèque WordPress ou utiliser une image de stock.

SeedProd vous donne un accès facile à des milliers d'images d'archives libres de droits. Pour parcourir la bibliothèque d'images d'archives de SeedProd, cliquez sur « Utiliser une image d'archive ».

Dans la barre de recherche, tapez un mot ou une phrase décrivant l'image que vous recherchez et cliquez sur le bouton « Rechercher ».

Choisir une image d'archive SeedProd

SeedProd affichera désormais toutes les images d'archives qui correspondent à votre terme de recherche.

Lorsque vous trouvez une image que vous souhaitez ajouter à votre conception, cliquez simplement dessus.

La bibliothèque d'images d'archive de SeedProd

Une fois que vous avez ajouté une image, vous êtes prêt à remplacer le texte de l'espace réservé.

Pour ce faire, cliquez pour sélectionner le bloc de texte. Ensuite, dans la zone « Texte », tapez simplement le texte que vous souhaitez utiliser.

Ajouter du texte par-dessus une image avec SeedProd

Certains des modèles de héros de SeedProd contiennent du contenu supplémentaire, tel que des boutons d'appel à l'action.

Vous souhaitez modifier ce contenu ? Cliquez simplement pour sélectionner le bloc, puis apportez vos modifications dans le menu de gauche de SeedProd.

Modifier votre texte SeedProd

Une autre option consiste à supprimer le bloc du modèle de héros.

Pour ce faire, cliquez simplement pour sélectionner le bloc, puis cliquez sur l'icône de la corbeille.

Supprimer des sections et des blocs SeedProd

Lorsque vous êtes satisfait de la conception de votre page, vous pouvez cliquer sur le bouton « Enregistrer ».

À partir de là, vous pouvez choisir de publier la page ou de l'enregistrer en tant que modèle.

Publier une conception SeedProd

Pour plus de détails sur la création de mises en page personnalisées avec SeedProd, consultez notre guide sur comment créer une page de destination dans WordPress.

Conseils bonus pour gérer les images et les fichiers dans WordPress

L'ajout de texte aux images n'est qu'une façon d'améliorer l'apparence de votre site. Vous voulez faire plus avec vos images ? Consultez ces guides faciles :

Nous espérons que cet article vous a aidé à apprendre comment ajouter du texte par-dessus une image dans WordPress. Vous pourriez également consulter notre guide sur comment modifier en masse les images mises en avant et nos meilleurs choix d'experts pour les meilleurs plugins de slider WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.

Avis : Notre contenu est financé par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons percevoir une commission. Voir comment WPBeginner est financé, pourquoi c'est important et comment vous pouvez nous soutenir. Voici notre processus éditorial.

La boîte à outils WordPress ultime

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tout professionnel devrait posséder !

Interactions des lecteurs

9 CommentsLeave a Reply

  1. Bon tutoriel. Pour la méthode 1 où nous pouvons ajouter un texte superposé à l'image, comment rendre l'image et le texte superposé cliquables. ce qui signifie que lorsque je survole l'image, elle est cliquable. pour l'instant, nous avons essayé de nombreuses méthodes mais nous ne pouvons rendre le texte superposé cliquable. veuillez partager votre avis.

    • Le bloc de couverture n'est pas conçu avec cette fonctionnalité à l'esprit. Pour y parvenir, vous utiliseriez un bloc d'image et styliseriez l'image selon le design que vous souhaiteriez.

      Admin

  2. J'aimerais poser une question sur la réactivité des sites web. Lorsque je place du texte sur une image dans une position spécifique sur le bureau, il se retrouve dans une position complètement différente sur mobile. Comment la réactivité est-elle gérée dans ce contexte ? Il m'est assez difficile de maintenir le même design sur le bureau et sur mobile car l'image s'ajuste en raison de la taille plus petite de l'écran. Ou s'agit-il plutôt d'un problème avec le thème choisi ?

    • Cela dépendrait de la méthode que vous utilisez et du thème spécifique que vous utilisez pour ce problème et comment le résoudre.

      Admin

      • Merci pour votre réponse. J'utilise le thème GeneratePress. Je pensais qu'il pourrait y avoir une solution, peut-être en utilisant CSS ou une autre méthode, pour tout fixer en place. Je suivrai votre conseil et j'essaierai d'obtenir plus d'informations auprès des développeurs du thème. Ils répondent très rapidement et sont très serviables. Merci pour votre temps.

    • Pour ce que vous semblez vouloir, vous devriez utiliser la méthode 2 et ajouter un lien à ce bloc.

      Admin

  3. Bonjour l'équipe éditoriale,

    Je suis un peu déçu par le bloc de couverture de WordPress car la superposition de texte N'EST PAS réactive en mode mobile, ce qui rend le texte totalement illisible.

    Je pensais que vous devriez être informé de ce problème.

Laisser un commentaire

Merci d'avoir choisi de laisser un commentaire. N'oubliez pas que tous les commentaires sont modérés conformément à notre politique de commentaires, et votre adresse e-mail ne sera PAS publiée. Veuillez NE PAS utiliser de mots-clés dans le champ du nom. Ayons une conversation personnelle et significative.