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

Vous souhaitez mettre en avant une promotion, ajouter un appel à l’action ou rendre vos photos plus attrayantes ? Ajouter du texte sur une image dans WordPress est le moyen le plus rapide de le faire, et vous pouvez tout faire directement sur votre site sans Photoshop ni outil externe en ligne. Vous pouvez transformer une simple image en bannière, en en-tête principal, ou même en mini-publicité en quelques clics.

Dans ce guide, je vais vous présenter trois méthodes simples pour placer du texte sur des images dans WordPress, de l’éditeur de blocs intégré à un constructeur par glisser-déposer qui vous offre plus de contrôle sur la conception.

Pourquoi ajouter du texte sur une image dans WordPress ?

Ajouter du texte sur une image la rend plus utile. Vous pouvez mettre en évidence les caractéristiques d’un produit, ajouter des appels à l’action sur des bannières ou placer des étiquettes directement sur les photos afin que les visiteurs comprennent instantanément ce qu’ils regardent.

Vous n’avez besoin ni de Photoshop ni de compétences en conception graphique pour tout cela. WordPress vous offre plusieurs méthodes intégrées pour ajouter des superpositions de texte directement sur votre site, d’où les trois méthodes ci-dessous.

Comment ajouter du texte sur une image dans WordPress

Ci-dessous, vous trouverez 3 méthodes différentes pour ajouter du texte sur une image dans WordPress. Nous commencerons par un plugin WordPress, puis nous vous montrerons comment créer des superpositions de texte avec l’éditeur de blocs WordPress.

Méthode 1. Ajouter du texte sur une image à l’aide du bloc Galerie SeedProd

Le plugin avec lequel nous commencerons est SeedProd, le meilleur constructeur de sites Web pour WordPress. SeedProd vous permet de créer des mises en page avec du texte sur image visuellement, en faisant glisser les blocs en place sans toucher au code.

Vous pouvez commencer avec un kit de site Web complet ou un modèle de page de destination, puis personnaliser votre conception avec les blocs WordPress. Le bloc Galerie, par exemple, vous permet d'activer une superposition de couleurs et d'afficher les titres, descriptions et légendes de vos photos au survol.

Suivez le guide ci-dessous pour apprendre à ajouter du texte sur une image avec SeedProd.

Étape 1. Installer et activer SeedProd

Tout d'abord, cliquez sur le bouton ci-dessous pour créer votre compte SeedProd et télécharger le fichier du plugin sur votre ordinateur.

Commencez avec SeedProd dès aujourd'hui

Ensuite, dans le tableau de bord de votre compte, cliquez sur l'onglet Téléchargements et copiez votre clé de licence SeedProd.

Ensuite, téléchargez le fichier .zip du plugin sur votre site WordPress. Si vous avez besoin d'aide pour cette étape, suivez ces instructions sur l'installation et l'activation d'un plugin WordPress.

Après avoir activé SeedProd, allez dans SeedProd » Paramètres depuis votre zone d'administration WordPress et collez la clé de licence que vous avez copiée précédemment.

Cliquez maintenant sur le bouton Vérifier la clé et passez à l'étape suivante.

Étape 2. Créer une nouvelle mise en page WordPress

Pour cette étape, vous devrez décider quel type de mise en page WordPress vous souhaitez créer avec SeedProd. Vous pouvez créer un thème WordPress à partir de zéro en utilisant l'un des kits de site Web complets, ou choisir un modèle de page de destination pour créer une page de destination autonome.

L'option Theme Builder est idéale si vous souhaitez remplacer complètement votre thème WordPress existant. Si vous souhaitez uniquement créer ou personnaliser une page et conserver votre thème actuel, le Landing Page Builder est une meilleure option.

Nous avons des tutoriels pour les deux voies. Suivez ce guide pour créer un thème WordPress ou ces étapes pour créer une page de destination dans WordPress avec SeedProd.

Les deux tutoriels vous guident dans le choix d'un modèle prédéfini et la configuration de votre mise en page de base. Pour ce guide, nous choisirons l'option Theme Builder.

Une fois que vous avez choisi un modèle pour votre conception, vous pouvez le modifier et ajouter vos personnalisations. Dans ce cas, nous utilisons le Portfolio Theme de Photography et prévoyons de personnaliser la page Portfolio.

Pour modifier la page Portfolio, allez dans Pages » Toutes les pages, trouvez la page que vous souhaitez et cliquez sur le lien Modifier avec SeedProd.

Étape 3. Intégrer et personnaliser le bloc Galerie

Lorsque vous ouvrirez votre conception, vous verrez une mise en page comme l'exemple ci-dessous.

Sur la droite se trouve un aperçu en direct de votre page que vous pouvez cliquer et modifier en temps réel. Sur la gauche se trouvent des blocs WordPress et des sections que vous pouvez glisser-déposer sur votre conception.

Vous pouvez également supprimer des éléments en les survolant et en cliquant sur l'icône de la poubelle. Nous allons le faire pour le bloc Galerie qui accompagnait notre modèle, car nous le remplaçons par la Galerie Avancée.

Le bloc Galerie Avancée de SeedProd vous permet de définir la couleur de la superposition, la police, l'alignement et le texte de légende qui s'affiche au survol. Nous l'utiliserons pour ajouter du texte sur les images du portfolio, alors trouvez le bloc Galerie Avancée et faites-le glisser sur votre page.

Les paramètres du bloc s'ouvrent dans la barre latérale gauche. Dans ce panneau, choisissez d'abord Simple ou Multiple dans le menu déroulant « Type ».

L'option « Multiple » vous permet d'ajouter plus d'une galerie à votre page avec un filtre sur lequel vous pouvez cliquer pour voir chaque galerie. L'option « Simple » affiche une seule galerie sans les filtres.

Après avoir choisi le type de galerie, vous pouvez commencer à ajouter vos photos. Cliquez sur le bouton Ajouter des images de galerie et sélectionnez des images sur votre ordinateur ou dans la médiathèque WordPress.

Vous pouvez ajouter n'importe quelles photos, y compris JPEG/JPG, PNG, GIF et d'autres types de fichiers.

Une fois que vous avez téléchargé vos photos, vous pouvez ouvrir le menu Paramètres et choisir le nombre de colonnes, l'espacement, le rapport d'aspect, la taille de l'image et le lien.

Ci-dessous, vous pouvez choisir quel texte afficher lorsque vous survolez chaque photo. Pour les deux options, vous pouvez afficher ce qui suit :

• Titre
• Légende
• Alt
• Description

Voici à quoi cela ressemble avec la légende de l'image affichée au survol.

Si vos légendes sont difficiles à lire, vous pouvez ajuster la couleur d'arrière-plan de la superposition et modifier la police du texte, l'alignement du texte et le style du texte.

L'onglet Avancé contient de nombreuses autres options de personnalisation, notamment les styles d'ombre, de bordure, d'espacement et de visibilité mobile.

Avec la Visibilité des appareils, vous pouvez afficher et masquer des éléments spécifiques sur différentes tailles d'appareils, tels que les tablettes Android, les iPhones, les iPads Apple, les ordinateurs portables Mac iOS et les ordinateurs de bureau Microsoft.

Lorsque vous êtes satisfait de votre conception, n'oubliez pas de sauvegarder vos modifications en cliquant sur le bouton Enregistrer dans le coin supérieur droit.

Étape 4. Publiez vos modifications

Maintenant, il ne reste plus qu'à mettre en ligne les personnalisations WordPress sur votre site web. Si vous créez une page de destination, cliquez sur Publier dans le menu déroulant Enregistrer.

Si vous utilisez le Theme Builder de SeedProd, vous devrez aller dans SeedProd » Theme Builder et activer le bouton Activer le thème SeedProd.

Vous pouvez maintenant prévisualiser votre page et voir vos superpositions de texte sur image en action.

Méthode 2. Ajouter du texte sur une image à l’aide des sections SeedProd

Une autre façon d'ajouter du texte sur une image dans WordPress est d'utiliser les sections prédéfinies de SeedProd. Lorsque vous modifiez un modèle avec l'éditeur glisser-déposer de SeedProd, vous verrez un onglet Sections sur le côté gauche de votre écran.

Cliquer sur cet onglet affiche plusieurs sections pour votre En-tête, Pied de page, Héros, Appel à l'action, Fonctionnalités et FAQ. Ce sont des collections de blocs WordPress dans une mise en page prête à l'emploi que vous pouvez ajouter à votre page en un clic.

Si vous souhaitez afficher une image avec un bouton d'appel à l'action, vous pouvez choisir une section dans la bibliothèque d'appels à l'action et cliquer sur l'icône plus pour l'intégrer.

La section apparaît en bas de votre conception, où vous pouvez la personnaliser selon vos besoins.

Dans ce cas, nous avons modifié l'image d'arrière-plan, ajouté une couleur de superposition pour assombrir l'arrière-plan, et personnalisé le texte du titre et les boutons d'appel à l'action.

N'oubliez pas d'enregistrer et de publier vos modifications une fois que vous avez terminé. Vous pourrez ensuite prévisualiser votre conception en direct sur votre site Web.

Méthode 3. Ajouter du texte sur une image avec le bloc Couverture WordPress

La méthode suivante vous montre comment ajouter du texte sur une image dans WordPress sans plugin. Vous pouvez utiliser le bloc Couverture de WordPress pour afficher n'importe quelle image et y taper du texte.

Cette méthode n'offre pas autant d'options de personnalisation que la précédente. C'est toujours un moyen pratique d'ajouter du texte aux images si vous ne souhaitez pas ajouter un autre plugin WordPress à votre site web.

Pour ajouter le bloc Couverture à un article ou une page, cliquez sur l'icône plus (+) dans l'éditeur de blocs WordPress. Ensuite, tapez "Couverture" et choisissez le bloc Couverture lorsqu'il apparaît.

Ensuite, cliquez sur le bouton « Télécharger » ou « Bibliothèque de médias » pour choisir une image pour votre couverture.

Après avoir choisi une image, vous pouvez taper directement sur la photo pour ajouter un titre ou une description.

Vous pouvez personnaliser votre image d'arrière-plan dans le panneau de droite en activant un arrière-plan fixe ou répétitif. Vous pouvez également modifier la mise au point de l'image en faisant glisser le marqueur sur l'aperçu.

Le panneau Paramètres de superposition vous permet de choisir une superposition de couleur ou de dégradé pour votre image. Dans le même panneau, vous pouvez définir l'opacité, le remplissage et les dimensions de la superposition.

Cliquer sur le texte de superposition ouvre les outils de texte où vous pouvez changer la couleur du texte et la couleur d'arrière-plan et jouer avec les différentes polices.

Changer la casse des lettres, l'espacement des lettres et la taille de la police nous permet de créer cet effet d'étiquette.

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

Comment garder le texte lisible sur une image ?

L'astuce pour un texte lisible sur une image est le contraste, de sorte que les mots ne rivalisent jamais avec la photo qui se trouve derrière eux. Une image chargée ou lumineuse est la raison la plus courante pour laquelle le texte de superposition disparaît, et quelques petits ajustements le règlent.

• Utilisez un texte à fort contraste : Un texte clair sur une photo sombre, ou un texte sombre sur une photo claire, reste lisible d'un coup d'œil.
• Ajoutez une superposition pour atténuer l'arrière-plan : Une couche de couleur semi-transparente calme une image chargée, de la même manière que vous atténuez une image d'arrière-plan derrière une section héros.
• Ajustez la taille de la police pour l'appareil : Le texte qui se lit bien sur ordinateur peut devenir minuscule sur mobile, alors vérifiez les deux avant de publier.
• Évitez les zones chargées de la photo : Placez vos mots sur une zone calme du ciel, du mur ou de l'ombre plutôt que sur un sujet détaillé.

Comment ajouter du texte derrière une image dans WordPress ?

Ajouter du texte derrière une image est un effet de conception en couches, où un mot se trouve derrière le sujet afin que la photo semble le chevaucher. WordPress n'a pas de bouton unique "texte derrière image", mais vous pouvez simuler l'apparence avec des blocs qui se chevauchent.

La méthode la plus simple est le bloc Couverture. Définissez un titre large comme texte de superposition, puis réduisez l'opacité de l'image dans les Paramètres de superposition afin que le texte apparaisse comme s'il était derrière la photo plutôt que dessus.

Pour un effet plus marqué, utilisez des blocs Groupe superposés. Placez un titre dans un groupe et une image avec un fond transparent (une découpe PNG) dans un autre, puis utilisez des marges négatives ou du rembourrage pour faire passer l'image sur une partie du texte.

Comment faire en sorte que le texte entoure une image dans WordPress ?

Entourer un texte autour d'une image signifie que le paragraphe s'écoule à côté de la photo au lieu de s'arrêter au-dessus et en dessous. L'éditeur de blocs WordPress gère cela avec l'alignement des images, sans code nécessaire.

Ajoutez d'abord votre bloc Image, puis sélectionnez-le et choisissez Aligner à gauche ou Aligner à droite dans la barre d'outils du bloc. Tapez votre paragraphe dans le bloc directement après l'image, et le texte s'enroulera autour du côté ouvert.

Gardez l'image à une largeur modeste afin qu'il y ait de la place pour que le texte se trouve à côté. Sur les écrans mobiles étroits, WordPress place automatiquement le texte enroulé sous l'image, ce qui rend la mise en page lisible.

FAQ sur l’ajout de texte sur une image WordPress

Comment ajouter du texte sur une image dans WordPress sans plugin ?

Utilisez le bloc Couverture intégré à WordPress. Ajoutez un bloc Couverture dans l'éditeur de blocs, choisissez votre image et tapez votre texte directement sur la photo. Vous pouvez ensuite définir une couleur de superposition et ajuster le style du texte dans le panneau de droite.

Comment ajouter du texte derrière une image dans WordPress ?

WordPress n'a pas de bouton unique pour cela, vous simulez donc l'aspect superposé avec des blocs qui se chevauchent. Définissez un titre comme texte de superposition du bloc Couverture et réduisez l'opacité de l'image, ou empilez deux blocs Groupe et faites passer l'image sur une partie du texte avec des marges négatives.

Comment faire en sorte que le texte entoure une image dans WordPress ?

Ajoutez un bloc Image, sélectionnez-le et choisissez Aligner à gauche ou Aligner à droite dans la barre d'outils du bloc. Tapez votre paragraphe dans le bloc juste après l'image, et le texte s'écoule autour du côté ouvert. Sur mobile, WordPress place automatiquement le texte sous l'image.

Comment garder le texte lisible sur une image chargée ?

Ajoutez une superposition semi-transparente pour assombrir la photo, puis utilisez un texte à fort contraste pour que les mots ressortent. Placez le texte sur une partie calme de l'image, comme le ciel ou un mur uni, et vérifiez la taille de la police sur mobile avant de publier.

Commencez à ajouter du texte sur vos images dès aujourd'hui

Vous pouvez maintenant ajouter du texte sur n'importe quelle image dans WordPress, d'une simple superposition de bloc Couverture à une galerie SeedProd entièrement stylisée. Choisissez la méthode qui correspond au niveau de contrôle de conception que vous souhaitez, et vous pouvez l'avoir en ligne en quelques minutes.

Commencez avec SeedProd dès aujourd'hui

Vous pourriez également aimer les tutoriels WordPress suivants :

• Comment créer des onglets dans WordPress pour du contenu par onglets
• Comment personnaliser les extraits d'articles WordPress (sans code)
• Comment créer des animations de texte dans WordPress (étapes faciles)

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTube, X et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.