Comment ajouter du texte sur une image dans WordPress 3 façons

Voulez-vous apprendre à ajouter du texte sur une image dans WordPress ?

L'ajout de texte au-dessus d'une image est un excellent moyen d'afficher plus d'informations sur les photos ou les graphiques. Vous pouvez également utiliser une zone de texte sur des images pour créer rapidement des en-têtes, des bannières et des publicités en ligne.

Dans cet article, nous allons vous montrer comment ajouter du texte à une image dans WordPress de plusieurs manières différentes.

Comment ajouter du texte sur une image dans WordPress

Ci-dessous, vous trouverez 3 façons différentes d'ajouter du texte sur une image dans WordPress. Nous commencerons par utiliser un puissant plugin WordPress, puis expliquerons comment créer des superpositions de texte avec l'éditeur de blocs WordPress.

Plongeons dedans.

Méthode 1. Ajouter du texte sur une image à l'aide du bloc de galerie SeedProd

Le plugin WordPress avec lequel nous allons commencer 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 visuellement votre conception avec des blocs WordPress. Par exemple, les blocs Galerie vous permettent d'activer une superposition colorée et d'afficher les titres, descriptions et légendes de vos photos au survol.

SeedProd est également livré avec les fonctionnalités puissantes suivantes :

• Prochainement et mode maintenance
• Générateur de thème WordPress
• 404 et pages de connexion
• Tableau de bord de gestion des abonnés
• Intégrations de marketing par e-mail
• Intégration des médias sociaux
• Contrôles d'accès des utilisateurs
• Remplacement de texte dynamique
• Mappage de domaine
• Et plus.

Suivez le guide ci-dessous pour savoir 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échargez 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 Web 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 espace 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. 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 landing page dans WordPress avec SeedProd.

Les deux didacticiels 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 sélectionnerons 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 thème Portfolio de photographie et prévoyons de personnaliser la page Portfolio.

Pour modifier la page Portfolio, accédez à Pages » Toutes les pages , recherchez la page souhaitée 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 dans 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, à gauche se trouvent des blocs et des sections WordPress 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 le ferons pour le bloc Galerie fourni avec notre modèle car nous le remplacerons par la Galerie avancée.

Le bloc Advanced Gallery de SeedProd est livré avec 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 de bloc s'ouvriront dans la barre latérale gauche. Dans ce panneau, choisissez d'abord Unique 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 "Single" 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 à partir de votre ordinateur ou de votre médiathèque WordPress.

Vous pouvez ajouter n'importe quelle photo, 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 format d'image, 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 pop-up lightbox.

Cliquez maintenant sur le menu Superposition et tournez la bascule de superposition d' arrière -plan sur la position "Oui".

Ci-dessous, vous pouvez choisir le texte à afficher lorsque vous survolez chaque photo. Pour les deux options, vous pouvez afficher les éléments suivants :

• Titre
• Légende
• Autre
• La description

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

Si vos sous-titres 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é propose de nombreuses autres options de personnalisation, notamment les styles d'ombre, de bordure, d'espacement et de visibilité mobile.

Par exemple, avec Device Visibility, vous pouvez afficher et masquer des éléments spécifiques sur différentes tailles d'appareils, comme les tablettes Android, les iPhones, les iPad Apple, les ordinateurs portables Mac iOS et les ordinateurs de bureau Microsoft.

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

Étape 4. Publiez vos modifications

Il ne reste plus qu'à mettre en ligne les personnalisations WordPress 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 générateur de thèmes de SeedProd, vous devrez accéder à SeedProd » Générateur de thèmes et activer la bascule Activer le thème SeedProd .

Vous pouvez maintenant prévisualiser votre page et voir vos superpositions de texte d'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 consiste à utiliser les sections prédéfinies de SeedProd. Lorsque vous modifiez un modèle avec le générateur de page de SeedProd, vous verrez un onglet Sections sur le côté gauche de votre écran.

Cliquer sur cet onglet affichera 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 de la bibliothèque Call to Action et cliquer sur l'icône plus pour l'intégrer.

La section apparaîtra au bas de votre conception, où vous pourrez la personnaliser en fonction de 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 de l'en-tête et les boutons d'appel à l'action.

N'oubliez pas d'enregistrer et de publier vos modifications lorsque vous avez terminé. Ensuite, vous pouvez prévisualiser votre design en direct sur votre site Web.

Méthode 3. Ajouter du texte sur une image avec le bloc de couverture 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 sur l'image.

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 Couverture à un article ou à une page, cliquez sur l'icône plus (+) dans l'éditeur de blocs WordPress. Ensuite, vous pouvez taper "Cover" et choisir le bloc Cover lorsqu'il apparaît.

Ensuite, cliquez sur le bouton "Télécharger" ou "Bibliothèque multimédia" 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.

Cliquer sur le texte superposé ouvrira des outils de texte dans lesquels vous pourrez modifier la couleur du texte et la couleur d'arrière-plan et jouer avec les différents styles de police.

Par exemple, la modification de la casse des lettres, 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 Couverture, vous pouvez publier ou mettre à jour votre page. Lorsque vous visitez votre site Web, vous verrez votre texte au-dessus de l'image.

Voilà!

Nous espérons que cet article vous a aidé à apprendre à ajouter du texte sur une image dans WordPress. Prêt à plonger et à essayer SeedProd par vous-même ?

Vous pourriez également aimer les tutoriels WordPress suivants :

• Comment créer des onglets dans WordPress pour le contenu à onglets
• Comment personnaliser les extraits de publication WordPress (sans code)
• Comment créer des animations de texte dans WordPress (étapes faciles)

Merci d'avoir lu. Veuillez nous suivre sur YouTube, Twitter et Facebook pour plus de contenu utile pour développer votre entreprise.