Vous voulez 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. Vous pouvez transformer une simple photo 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 plusieurs façons simples de superposer du texte sur des images dans WordPress, de l'éditeur intégré aux plugins qui vous donnent plus de contrôle sur la conception.
Pourquoi ajouter du texte sur des images dans WordPress ?
Ajouter du texte sur des images les rend plus utiles. Vous pouvez mettre en avant les caractéristiques d'un produit, ajouter des appels à l'action sur des bannières ou placer des étiquettes directement sur des photos afin que les visiteurs comprennent instantanément ce qu'ils regardent.
C'est également pratique pour le branding, comme l'ajout de filigranes, ou pour transformer une image ordinaire en en-tête, en image principale ou en publicité en ligne sans logiciel de conception supplémentaire.
La bonne nouvelle, c'est que vous n'avez pas besoin de Photoshop ni de compétences en conception graphique. WordPress vous offre plusieurs moyens simples d'ajouter des superpositions de texte directement sur votre site.
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 utiliser un puissant plugin WordPress, puis nous expliquerons comment créer des superpositions de texte avec l'éditeur de blocs WordPress.
Plongeons.
Méthode 1. Ajouter du texte sur une image à l'aide du bloc Galerie SeedProd
Le plugin WordPress que nous allons utiliser en premier est SeedProd, le meilleur constructeur de sites web pour WordPress. Il dispose d'un éditeur visuel par glisser-déposer qui vous permet de créer des thèmes WordPress, des pages de destination et des mises en page flexibles pour votre site sans écrire de code.
Vous pouvez commencer avec un kit de site web complet ou un modèle de page de destination, puis personnaliser votre design visuellement avec les blocs WordPress. Par exemple, les blocs Galerie vous permettent d'activer une superposition de couleur et d'afficher les titres, descriptions et légendes de vos photos au survol.
SeedProd est également doté des fonctionnalités puissantes suivantes :
- Mode "Bientôt disponible" et maintenance
- Constructeur de thèmes WordPress
- Pages 404 et de connexion
- Tableau de bord de gestion des abonnés
- Intégrations de marketing par e-mail
- Intégrations de médias sociaux
- Contrôles d'accès utilisateur
- Remplacement dynamique de texte
- Mappage de domaine
- Et plus encore.
Suivez le guide ci-dessous pour apprendre comment 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.
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 Website Kits 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. Cependant, si vous souhaitez uniquement créer ou personnaliser une page et conserver votre thème actuel, le Landing Page Builder est une meilleure option.
Heureusement, nous avons de nombreux tutoriels pour les deux solutions. 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 guideront 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 ouvrez 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 sur lequel vous pouvez cliquer et modifier en temps réel. Ensuite, sur la gauche se trouvent les blocs WordPress et les sections que vous pouvez faire glisser et déposer sur votre conception.
Vous pouvez également supprimer des éléments en les survolant et en cliquant sur l'icône de la corbeille. Nous allons le faire pour le bloc Galerie qui accompagnait notre modèle car nous allons le remplacer par la Galerie Avancée.
Le bloc Galerie Avancée de SeedProd est doté de puissantes options de personnalisation. Nous les utiliserons pour ajouter du texte sur les images du portfolio, alors trouvez le bloc Galerie Avancée et faites-le glisser sur votre page.
Comme vous pouvez le voir, les paramètres du bloc s'ouvriront 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. Alors que 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 simplement 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.
Par exemple, cliquer sur le type de lien Fichier multimédia garantira que chaque photo de la galerie s'ouvre dans une galerie lightbox pop-up.
Cliquez maintenant sur le menu Superposition et basculez le bouton Superposition d'arrière-plan sur la position « Oui ».
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.
De plus, l'onglet Avancé offre de nombreuses autres options de personnalisation, notamment les styles d'ombre, de bordure, d'espacement et de visibilité mobile.
Par exemple, avec la Visibilité de l'appareil, 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'à rendre les personnalisations WordPress visibles sur votre site Web. Si vous créez une page de destination, cliquez simplement sur Publier dans le menu déroulant Enregistrer.
Cependant, 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 à 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 le constructeur de pages de SeedProd, vous verrez un onglet Sections sur le côté gauche de votre écran.
En cliquant sur cet onglet, vous verrez 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.
Par exemple, 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îtra en bas de votre conception, où vous pourrez 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 de WordPress
La méthode suivante vous montrera comment ajouter du texte sur une image dans WordPress sans plugin. Vous pouvez utiliser le bloc de couverture de WordPress pour afficher n'importe quelle image et taper du texte par-dessus.
Cette méthode n'offre pas autant d'options de personnalisation que la précédente ; cependant, c'est un moyen utile d'ajouter du texte aux images si vous ne souhaitez pas ajouter un autre plugin WordPress à votre site Web.
Pour ajouter le bloc de couverture à un article ou une page, cliquez sur l'icône plus (+) dans l'éditeur de blocs WordPress. Ensuite, vous pouvez taper « Couverture » et choisir le bloc de 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.
De plus, 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.
En cliquant sur le texte de la superposition, vous ouvrirez les outils de texte où vous pourrez modifier la couleur du texte et la couleur d'arrière-plan et jouer avec les différentes polices.
Par exemple, la modification de la casse, de l'espacement des lettres et de la taille de la police nous a permis 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.
FAQ sur l'ajout de texte sur une image WordPress
Nous espérons que cet article vous a aidé à apprendre comment ajouter du texte sur une image dans WordPress. Prêt à vous lancer et à essayer SeedProd par vous-même ?
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.
