Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Coupe WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

Comment ajouter du texte au-dessus d’une image dans WordPress (3 méthodes)

Note éditoriale : Nous percevons une commission sur les liens des partenaires sur WPBeginner. Les commissions n'affectent pas les opinions ou les évaluations de nos rédacteurs. En savoir plus sur Processus éditorial.

Voulez-vous ajouter du texte au-dessus d’une image dans WordPress ?

Une superposition de texte est un excellent moyen de fournir des informations supplémentaires sur une image. C’est aussi un moyen rapide et facile de créer des bannières, des en-têtes et même des annonces en ligne.

Dans cet article, nous allons vous afficher comment vous pouvez ajouter du texte au-dessus d’une image dans WordPress.

How to add text on top of an image in WordPress

Quand ajouter du texte sur les images dans WordPress

Les images peuvent donner à votre site WordPress un aspect plus intéressant et aider à rompre les grands paragraphes de texte.

Cependant, vos images peuvent parfois nécessiter plus d’explications. Par exemple, vous pouvez ajouter un texte au-dessus d’une image pour expliquer ce qu’elle affiche et pourquoi vous l’avez ajoutée à votre publication.

De nombreux blogs WordPress ajoutent également du texte au-dessus d’une image pour créer des bannières et des en-têtes accrocheurs et informatifs.

Dans cette publication, nous avons trois façons conviviales pour les débutants d’ajouter du texte au-dessus d’une image dans WordPress. Si vous préférez passer directement à une méthode particulière, alors vous pouvez utiliser les liens ci-dessous :

L’une des façons d’ajouter du texte au-dessus d’une image dans WordPress est d’utiliser le bloc Couverture. Vous pouvez utiliser ce bloc pour afficher n’importe quelle image et ensuite taper du texte par-dessus l’image. Le bloc Couverture est donc parfait pour créer des images bannières d’accroche, des en-têtes et des bannières.

Pour ajouter un bloc Cover à une page ou à une publication, il suffit de cliquer sur le bouton plus  » + Ajouter un bloc  » dans l’éditeur de blocs de Gutenberg.

Vous pouvez maintenant taper « Couverture » et sélectionner le bloc adéquat lorsqu’il apparaît.

The WordPress Cover block

Par défaut, le bloc Couverture comporte une image et un texte fictifs.

Pour remplacer l’image par défaut, il suffit de cliquer pour sélectionner l’image. Cliquez ensuite sur le bouton « Remplacer ».

How to add text on top of an image in WordPress

Si vous souhaitez utiliser une image qui se trouve déjà dans votre médiathèque WordPress, il vous suffit de cliquer sur  » Ouvrir la bibliothèque des médias « . Vous pouvez alors choisir une image existante.

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

Uploading an image to the WordPress Cover block

Une fenêtre s’ouvre, dans laquelle vous pouvez choisir n’importe quel fichier de votre ordinateur.

Après avoir choisi une image, vous pouvez utiliser les Réglages du bloc pour créer des effets intéressants et accrocheurs. Par exemple, vous pouvez faire en sorte que l’image soit corrigée lorsque l’internaute défile la page ou ajouter une superposition de couleurs à l’image.

A colored cover overlay

Si vous utilisez une superposition, vous pouvez modifier son opacité en utilisant le Diaporama « Opacité ». Le réglage de l’opacité permet de contrôler la transparence de l’image d’arrière-plan.

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

Par défaut, le bloc Couverture comporte un Titre et un Paragraphe dans lesquels vous pouvez ajouter du texte au-dessus de l’image.

How to add text on top of an image in WordPress

Pour ajouter du texte, il suffit de cliquer pour sélectionner le bloc Titre ou le bloc Paragraphe. Saisissez ensuite le texte que vous souhaitez utiliser.

Lorsque vous ajoutez du texte au-dessus d’une image, ce texte peut parfois être difficile à lire. Cela est particulièrement vrai pour tous les internautes qui ont une mauvaise vision. Pour en savoir plus, veuillez consulter notre guide sur la manière d’améliorer l’accessibilité de votre site WordPress.

Ceci étant dit, vous pouvez souhaiter 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.

Styling the text on top of a WordPress image

Vous pouvez également aider votre texte à se démarquer en utilisant une couleur contrastée.

Pour choisir une autre couleur, sélectionnez l’onglet « Bloc » dans le menu de droite. Cliquez ensuite sur « Couleur » pour déplier cette section.

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

Changing the color of text on top of an image

En règle générale, un texte plus grand est plus facile à lire.

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

Adding text on top of an image in WordPress

Une fois que vous êtes satisfait de l’aspect de votre bloc Couverture, vous pouvez publier ou mettre à jour votre page comme d’habitude. Maintenant, si vous visitez votre site WordPress, vous verrez votre texte au-dessus de l’image.

Méthode 2 : Ajouter du texte au-dessus d’une image à l’aide du bloc d’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 au-dessus d’un bloc d’image WordPress standard.

Pour commencer, vous devrez ajouter un bloc Image à votre page ou publication. Pour ce faire, il vous suffit de cliquer sur le bouton plus ‘+ Ajouter un module’ dans l’éditeur de blocs de WordPress.

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

The WordPress Image block

Vous pouvez ensuite soit téléverser une image depuis votre ordinateur, soit cliquer sur  » Bibliothèque des médias  » pour choisir une image dans la médiathèque de WordPress.

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

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

Lorsque vous êtes satisfait de l’aspect de votre image, il vous suffit de cliquer sur le bouton « Ajouter du texte sur l’image ».

Adding text on top of an image in WordPress

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

En fonction de votre image, les internautes peuvent avoir du mal à lire votre texte de superposition. Dans ce cas, il peut être utile de mettre le texte en gras ou de modifier sa couleur en suivant le même processus que celui décrit ci-dessus.

Changing the text color in WordPress

Vous pouvez également agrandir votre texte.

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

Increasing the text size

Lorsque vous êtes satisfait de l’aspect de votre texte et de votre image, allez-y et prévisualisez votre site. Cliquez ensuite sur « Enregistrer le brouillon », « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Si vous utilisez un thème WordPress à blocs, vous pouvez utiliser les méthodes 1 et 2 pour ajouter du texte au-dessus d’une image dans n’importe quelle partie de votre thème à l’aide de l’Éditeur de site (Éditeur de site) de WordPress.

Vous pouvez en savoir plus sur l’Éditeur de site dans notre guide complet pour débutants sur l’édition complète de site WordPress.

Méthode 3 : Créer une mise en page personnalisée avec du texte au-dessus d’une image

Les blocs WordPress intégrés sont un moyen rapide et facile d’ajouter du texte au-dessus d’une image dans WordPress. Cependant, si vous voulez avoir la liberté de créer des designs de page complètement personnalisés, alors vous aurez besoin d’un plugin de constructeur de page.

SeedProd est la meilleure extension de constructeur de page WordPress sur le marché. Il vous permet d’ajouter du texte au-dessus de n’importe quelle image sur l’ensemble de votre site.

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

Vous pouvez lire notre Avis terminé sur SeedProd pour plus de détails.

Tout d’abord, vous devez installer et activer l’extension SeedProd. Pour plus de détails, consultez notre guide étape par étape sur l ‘installation d’une extension WordPress.

Lors de 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 ».

The SeedProd Downloads page

Vous pouvez maintenant coller cette clé dans votre zone d’administration WordPress en allant sur la page  » Réglages  » de SeedProd.

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

Verifying your SeedProd license

Il vous suffit ensuite de cliquer sur « Vérifier la clé ».

Après cela, nous allons nous diriger vers SeedProd «  Landing Pages et cliquer sur ‘Add New Landing Page’.

SeedProd's page design templates

Votre prochaine tâche consiste à choisir un Modèle, qui sera le point de départ de votre page. Aucun des modèles de SeedProd que vous choisissez ne vous empêche de personnaliser chaque élément du modèle pour qu’il corresponde parfaitement à votre site et à votre marque.

Si vous préférez partir d’une toile vierge, vous pouvez cliquer sur « Modèle vierge ».

The SeedProd ready-made templates

Dans toutes nos images, nous utilisons le modèle de page Squeeze Tasty, qui est parfait pour obtenir plus de campagnes d’abonnés/abonnés.

Lorsque vous avez trouvé un Modèle que vous souhaitez utiliser, survolez-le avec votre souris. Vous pouvez alors cliquer sur l’icône « Prévisualisation ».

SeedProd's professionally-designed templates

Ceci affichera une prévisualisation du Modèle.

Si vous êtes satisfait de l’aspect de ce modèle, cliquez sur le bouton « Choisissez ce modèle ».

A lead generation and squeeze template

Dans le champ « Nom de l’expéditeur », saisissez 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, il vous suffit de modifier le texte dans le champ ‘Page URL’.

Creating a custom page layout with SeedProd

Lorsque vous êtes satisfait des modifications saisies, cliquez sur le bouton  » Enregistrer et commencer à modifier la page « . Cela ouvrira le Modèle dans les éditeurs/éditrices de SeedProd.

Dans la colonne latérale de gauche, vous verrez tous les blocs et sections que vous pouvez ajouter à votre page par glisser-déposer.

Adding blocks to your SeedProd design

À moins que vous n’utilisiez le Modèle vierge, votre page SeedProd comportera déjà quelques blocs et sections. Pour modifier ce contenu, il suffit de cliquer pour sélectionner le bloc ou la section.

Le menu de gauche de SeedProd affichera maintenant tous les Réglages que vous pouvez utiliser pour personnaliser ce bloc ou cette section. Comme vous pouvez le voir dans l’image suivante, si vous cliquez sur un bloc Titre, vous pouvez modifier le texte qui s’affiche dans ce bloc.

Customizing a ready-made SeedProd page design

La manière la plus simple d’ajouter du texte au-dessus d’une image est d’utiliser l’une des bannières d’accroche prêtes à l’emploi de SeedProd.

Ces sections sont dotées d’une image d’arrière-plan pleine largeur et d’un module de texte ajouté. Vous pouvez simplement remplacer l’image d’arrière-plan et le texte par défaut par votre propre contenu.

Pour Premiers pas, cliquez sur l’onglet « Sections » dans le menu de gauche de SeedProd.

Vous pouvez ensuite cliquer sur « Hero » pour voir toutes les sections de héros prêtes à l’emploi que vous pouvez ajouter à votre page.

A SeedProd section template

Pour prévisualiser l’un de ces modèles de section, il suffit de survoler le modèle et de cliquer sur l’icône de la loupe.

Pour ajouter cette bannière d’accroche à votre modèle, il vous suffit de cliquer sur « Choisissez cette section ».

A SeedProd hero template

Ensuite, vous devez remplacer l’image de base du Modèle par votre propre image. Pour ce faire, il vous suffit de cliquer sur l’image de base pour la sélectionner.

Ensuite, dans le menu de gauche de SeedProd, survolez la Prévisualisation 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 de remplacement.

Deleting a background image in SeedProd

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

SeedProd vous permet d’accéder facilement à des milliers d’images en stock libres de droits. Pour jeter un coup d’œil à la bibliothèque d’images de SeedProd, cliquez sur « Utiliser une image de stock ».

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

Choosing a SeedProd stock image

SeedProd affiche alors toutes les images de stock correspondant à votre terme de recherche.

Lorsque vous trouvez une image que vous souhaitez ajouter à votre dessin, il vous suffit de cliquer dessus.

SeedProd's stock image library

Une fois l’image ajoutée, vous êtes prêt à remplacer le texte indicatif.

Pour ce faire, cliquez sur pour sélectionner le bloc Sélectionné. Dans la zone « Texte », tapez simplement le texte que vous souhaitez utiliser.

Add text on top of an image using SeedProd

Certains modèles de bannière d’accroche de SeedProd ont un contenu supplémentaire, comme des boutons d’appel à l’action.

Vous souhaitez modifier ce contenu ? Dans ce cas, il vous suffit de cliquer pour sélectionner le bloc, puis d’effectuer vos modifications dans le menu de gauche de SeedProd.

Editing your SeedProd text

Une autre option consiste à supprimer le bloc du modèle de bannière d’accroche.

Pour ce faire, il suffit de cliquer pour sélectionner le bloc, puis de cliquer sur l’icône de la corbeille.

Deleting SeedProd sections and blocks

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.

Publishing a SeedProd design

Pour plus de détails sur la création de mises en page personnalisées avec SeedProd, vous pouvez consulter notre guide sur la création d’une page d’atterrissage dans WordPress.

Nous espérons que cet article vous a aidé à apprendre comment ajouter du texte au-dessus d’une image sur WordPress. Vous pouvez également consulter notre guide sur la façon de modifier en masse les images mises en avant et nos choix d’experts pour le meilleur logiciel de conception de sites Web.

Si vous avez aimé cet article, veuillez alors vous abonner à notre chaîne YouTube pour obtenir des tutoriels vidéo sur WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.

Divulgation : Notre contenu est soutenu par les lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Consultez comment WPBeginner est financé, pourquoi cela compte et comment vous pouvez nous soutenir. Voici notre processus éditorial.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

L'ultime WordPress Toolkit

Accédez GRATUITEMENT à notre boîte à outils - une collection de produits et de ressources liés à WordPress que tous les professionnels devraient avoir !

Reader Interactions

5 commentairesLaisser une réponse

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

    • WPBeginner Support says

      For what it sounds like you’re wanting, you would want to use method 2 and add a link to that block.

      Administrateur

  2. Trish says

    Hi Editorial Staff,

    Am a bit disappointed with the WordPress Cover Block in that the text overlay is NOT responsive in Mobile view, sadly, making the text totally unreadable.

    Thought you should know of this issue.

Laisser une réponse

Merci d'avoir choisi de laisser un commentaire. Veuillez garder à l'esprit que tous les commentaires sont modérés selon 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.