WordPress
time_read33mn de lecture

Gutenberg WordPress : comment utiliser le bloc Image ?

27 juillet 2023

Gutenberg WordPress : comment utiliser le bloc Image ?

Dans l’univers du contenu web, une image vaut mille mots. Elles peuvent enrichir votre contenu, rendre vos pages plus engageantes et aider vos lecteurs à mieux comprendre votre message. C’est ici que le bloc Image de l’éditeur Gutenberg de WordPress joue un rôle crucial. Le bloc Image est un outil polyvalent qui vous permet d’ajouter, d’éditer et de styliser des images dans vos pages et articles WordPress. Que vous souhaitiez ajouter une photo pour illustrer votre texte, créer une galerie d’images ou même ajouter des légendes personnalisées à vos images, le bloc Image a tout ce dont vous avez besoin.🤭

Objectif

Dans cet article, nous vous montrerons pas à pas comment utiliser le bloc Image de Gutenberg pour optimiser l’impact visuel de votre contenu. Que vous soyez débutant ou expérimenté avec WordPress, ce guide vous donnera tous les outils nécessaires pour maîtriser l’utilisation des images dans Gutenberg. Préparez-vous à donner vie à votre contenu avec le bloc Image de Gutenberg !🤫

Prérequis

Avant d’envisager quoi que ce soit, assurez-vous d’avoir un site WordPress qui fonctionne correctement. Ensuite, vous devez disposer des accès au tableau de bord d’administration de ce site en tant qu’éditeur de contenu ou auteur.

Une solution clés en main pour créer un site WordPress ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Comment ajouter le bloc Image dans l’interface d’édition de Gutenberg ?

Il existe en général deux méthodes pour ajouter rapidement un bloc Image sur Gutenberg. Voyons chacune d’entre elles.

1. Ajouter rapidement un bloc Image sur Gutenberg

Après avoir ouvert votre page/publication dans l’éditeur Gutenberg, rendez-vous à l’emplacement du bloc Paragraphe où vous souhaitez afficher l’image. Ensuite, cliquez sur l’icône « + » et rechercher le bloc Image pour l’ajouter dans votre zone d’édition.Ajouter rapidement un bloc Image sur Gutenberg

2. Insérer le bloc Image dans Gutenberg via l’outil d’insertion de blocs

Dans l’interface d’édition de Gutenberg, rendez-vous dans l’outil d’insertion de blocs puis cliquez sur le bloc « Image » afin qu’il soit ajouté à votre page/publication.Ajouter un bloc Image sur Gutenberg avec l'outil d'insertion de blocs

Insérer une image dans le bloc Image Gutenberg

L’étape suivante consiste à insérer votre image. Et pour cela, il existe 3 façons de le faire.

  • Téléverser : cette option vous redirige dans l’espace de stockage local pour choisir une image dans votre ordinateur.
  • Médiathèque : permet de choisir une image existante dans votre médiathèque
  • Insérer à partir d’une URL : avec cette troisième option, vous devez coller le lien de l’image stockée sur un emplacement externe et WordPress le chargera automatiquement sur votre site.

Charger une image sur Gutenberg WordPressUne fois que vous avez inséré votre image, vous devez passer aux étapes de personnalisation.

Personnaliser le bloc Image Gutenberg

Gutenberg offre une multitude d’outils dédiés à la personnalisation et l’optimisation de votre image. Barre d'outils du bloc Image GutenbergVoyons comment vous devez vous servir de ces différentes fonctionnalités.

Ajouter un filtre duotone à votre image

Le filtre duotone est une nouvelle fonctionnalité de Gutenberg. WordPress a introduit le filtre duotone pour ses blocs d’images et de couverture en 2021. Cet outil permet aux utilisateurs de superposer deux couleurs de leur choix sur leurs images.

Ce qui peut permettre d’adapter les images au design général d’un site ou d’un article. Ainsi, sur la barre d’outils du bloc, vous devez cliquer sur l’icône de filtre duotone et choisir la combinaison la mieux adaptée pour votre image.Filtre duotone Gutenberg

En appliquant un filtre duotone, voici à quoi peut ressembler votre image.Application de filtre Duotone sur une image dans Gutenberg

Vous pouvez à tout moment effacer le filtre duotone quand il n’est plus utile en cliquant sur le bouton « Effacer ».

Modifier les dimensions et la position de l’image

Sur la barre d’outils du bloc, vous pouvez modifier la position de votre image, mais aussi choisir des dimensions parmi celles qui sont prédéfinies.

Pour ce qui est de la position, l’image peut être placée à droite, à gauche ou au centre de la page. Ensuite, cette dernière peut adopter une largeur de 650 px (idéale pour un chargement rapide), 1000 px (option moins recommandée) ou occuper toute la largeur de la page.Outil "Dimension" de la barre d'outils du bloc Image Gutenberg

Ajouter une légende à votre image

Il est également possible d’ajouter une légende à votre image. Ainsi, il suffit de cliquer sur l’outil « Légende » et saisir la légende dans la zone qui s’affiche sous l’image.Ajouter une légende à une image sur Gutenberg

En outre, il est aussi possible d’ajouter une légende à votre image si vous l’avez choisi depuis la médiathèque.

De plus, vous pouvez à l’occasion ajouter une description et un texte alternatif pour optimiser davantage votre image pour la référencer rapidement sur Google Image.Définir une légende et un texte alternatif sur une image Gutenberg

Besoin d’un hébergement WordPress rapide et de qualité ?

LWS vous conseille sa formule d’hébergement WordPress en promotion à -20% (offre à partir de 3,99€ par mois au lieu de 4,99 €). Non seulement les performances sont au rendez-vous mais vous profitez en plus d’un support exceptionnel.

Découvrir l’offre

Associer un lien à une image sur Gutenberg

Un des outils très important vous permet d’ajouter un lien à votre image. Le lien peut rediriger vers un fichier média, une page secondaire à votre site ou vers la page du fichier joint.

Pour ce faire, cliquez sur l’icône de lien puis choisissez une des trois options.Ajouter un lien à une image sur Gutenberg

Par ailleurs, dans la zone d’insertion de lien, vous pouvez cliquer sur la flèche pointant vers le bas pour afficher les options d’ajout des attributs à votre lien.🔗Ajouter des attributs à une image sur Gutenberg

Redimensionner une image sur Gutenberg

Gutenberg vous offre diverses fonctionnalités pour redimensionner votre image et obtenir une taille répondant aux normes du référencement naturel.

Ainsi, il existe deux façons de redimensionner votre image. Vous pouvez les afficher en cliquant sur l’outil « Redimensionner » de la barre d’outils.Outil "Redimensionner" de la barre d'outils du bloc Image Gutenberg

Une fois que vous cliquez sur l’outil indiqué, un quadrillage s’ajoute à votre image, ce qui vous permet d’utiliser facilement les options de redimensionnement.

Options de redimensionnement des images GutenbergLa première option permet de zoomer l’image pour la redimensionner.Redimensionner une image sur Gutenberg à l'aide de l'outil "Zoom" Vous pouvez également choisir des tailles de redimensionnement prédéfinies et gagner du temps.Préréglages de rédimentionnement des images Gutenberg

Par ailleurs, l’outil « Pivoter » permet de modifier l’orientation de votre image.Outil "Pivoter" pour l'orientation de l'image Gutenberg

Une fois que l’image répond à vos besoins, cliquez sur l’outil « Appliquer » pour enregistrer la nouvelle taille de l’image obtenue après redimensionnement.Appliquer un redimensionnement de l'image GutenbergEt vous pouvez annuler vos modifications à tout moment en cliquant sur l’outil « Annuler ».

Ajouter un texte en superposition sur votre image

Gutenberg vous permet également d’ajouter du texte en superposition sur votre image. Ce qui transforme automatiquement votre image en une bannière.

Ainsi, cliquez sur l’outil prévu puis commencez à saisir votre texte.Outil d'ajout de texte en superposition sur une image Gutenberg

Une fois que le texte est ajouté dans le bloc en superposition, vous pouvez accéder aux paramètres, définir une couleur de police et probablement une couleur d’arrière-plan. Ce qui finalement peut rendre votre image de plus en plus attrayante.

Voici à quoi cela peut ressembler visuellement.Créer une bannière sur Gutenberg à partir d'une image

Vous pouvez aussi définir une typographie et des dimensions pour le texte sur l’image depuis les paramètres.

Remplacer l’image par une autre

Parfois, vous pourriez avoir le désir de changer l’image que vous avez ajouté La barre d’outils du bloc Image prévoit l’outil « Remplacer » pour vous permettre d’atteindre ce besoin.

En un clic, vous pouvez remplacer l’image existante par une nouvelle image.Remplacer une image sur Gutenberg

Options de style du bloc Image

Gutenberg prévoit une multitude d’options de style pour rendre votre image visuellement captivante.

Pour ce faire, accédez aux paramètres du bloc Image. Dans l’onglet « Réglages », vous pouvez appliquer un arrière-plan fixe ou répété.Options de style du bloc Image Gutenberg Activez les différentes options de mise en page comme bon vous semble. Une fois que vous avez terminé, enregistrez les modifications puis basculez dans l’onglet « Style ».

Dans cette section, vous pouvez appliquer un calque de superposition, changer la couleur du texte ou modifier la couleur de votre filtre duotone.Options de style du bloc Image Gutenberg Depuis le même onglet de style, vous pouvez aussi modifier la typographie, ajuster la taille ou les marges de l’ensemble du bloc par rapport à la taille de la page. Une fois que vous êtes sûr que l’image répond à vos attentes, enregistrez/publiez votre page/article.Publier une image sur Gutenberg

Besoin d'une solution de stockage en ligne ?

LWS vous conseille sa formule de stockage Cloud Drive en promotion à -50% (offre à partir de 3,99€ par mois au lieu de 7,99 €). Non seulement vos données sont stockées en France mais vous profitez en plus d’un support exceptionnel.

Découvrir l'offre

Conclusion

Gutenberg a apporté une révolution considérable dans la manière d’aborder la création de contenu sur WordPress. Le bloc Image, en tant que l’une des outils les plus essentiels de cet éditeur, joue un rôle crucial en permettant aux utilisateurs d’intégrer des visuels de manière fluide et stylisée. En maîtrisant le fonctionnement de ce bloc, non seulement vous enrichirez l’esthétique de vos publications, mais vous offrirez également à vos lecteurs une expérience visuelle percutante. 🤗N’hésitez pas à expérimenter et à explorer toutes les fonctionnalités qu’il offre pour publier des pages et des articles avec des visuels de qualité.

Nous espérons que cet article a répondu à toutes vos questions sur la façon d’utiliser le bloc Image de Gutenberg. Si malgré cela, vous avez quelques préoccupations ou des questions, n’hésitez pas à nous écrire directement dans la section dédiée aux commentaires.

Trucs et astuces


N’oubliez pas que ce tutoriel n’est qu’un aperçu des nombreuses possibilités qu’offre WordPress. Pour d’autres astuces et conseils sur l’utilisation de WordPress et d’autres technologies web, rendez-vous sur notre blog LWS. Vous y trouverez une multitude d’articles pour vous aider à tirer le meilleur parti de votre présence en ligne.

Avatar de l'auteur

Auteur de l'article

Joseph

Bonjour, je m'appelle Joseph. Je suis rédacteur spécialisé dans WordPress, PrestaShop et d'autres CMS. Fort d'une expertise approfondie en PHP et MySQL, je partage mes connaissances à travers des tutoriels simples et accessibles. Passionné par le développement et la transmission de savoir, j'aime expliquer et rendre les concepts techniques compréhensibles pour tous

Avis client de l'hébergeur LWS

Nos avis Trustpilot Nos avis Hostadvice Nos avis sur avis.lws.fr
Avis trustpilot 30/04/2022

LWS l'hébergeur par excellence !

LWS est pour moi l'hébergeur par excellence, que cela soit au niveau de l'hébergement qui est très performant, les mails qui sont d'une qualité professionnelle et de la gestion du domaine facile à comprendre.

PauseGreen

Avis hostadvice 27/04/2022

Super, au top !

Au top, prix attractif. Service très rapide et réactif. Je l'ai même personnellement recommandé à des proches. La vie est bien plus facile avec LWS

Masset Eliot

Avis avislws 26/04/2022

Support

Clair, efficace, rapide et à tarif abordable. J'ai maintenant un site superbe à mon image, puisque je le fais moi-même. L'équipe technique est au top, j'ai une réponse en 20 minutes, cela change d'autres hébergeurs pourtant plus connu.

Lady Whip

Avis hostadvice 24/04/2022

Bravo et merci

Bravo et merci aux équipes techniques pour leur réactivité et leur professionnalisme depuis plus de 10 ans chez eux et de nombreux sites !!! Merci

Olivier Delmas

Avis trustpilot 23/04/2022

Je suis très satisfait.

J'ai commandé un hébergement pour le site d'une association. Tout s'est passé très rapidement et sans la moindre embuche. La tarification est attractive et me parait très claire. Le panneau d'administration de l'hébergement est facile à utiliser et à comprendre. Je n'ai pas encore installé Wordpress car le contenu n'est pas prêt mais ce sera la prochaine étape et je suis très confiant. Merci !

Pierre-André Liné

Avis avislws 20/04/2022

Un service technique excellent

Je suis client chez LWS depuis 2011 avec une boutique OSCommerce qui tourne comme une horloge depuis cette date sur un hébergement mutualisé. La disponibilité de la boutique est très proche de 100%. Concernant les rares problèmes rencontrés en huit ans, j’ai eu à chaque fois un technicien compétent qui a résolu le problème très rapidement et efficacement. Je suis en train de migrer sur une plateforme Pretashop sur un VPS, avec l’offre LWS Debian 9 et Prestashop. Un technicien m’a grandement aidé pour finaliser l’installation de la boutique lors de la mise à jour vers la dernière version de Prestashop 1.7 qui posait problème. Je suis très satisfait de LWS, et ce sur la durée : réponses et réactions rapides et efficaces. Je recommande cet hébergeur et encore merci.

Alain

Avis trustpilot 16/04/2022

Une expérience jamais égalée !

Étant Développeur Web & Mobile Full-Stack depuis plus de 5 ans déjà, j'ai rarement eu un service client aussi rapide et efficace. Sans compter la qualité du service en ligne. Je recommande VIVEMENT LWS !

Chris KOUAKAM

Avis hostadvice 12/04/2022

Très bon hébergeur

J'ai un serveur VPS chez eux et je n'ai aucun problème, dès qu'il y a un problème le service technique est la pour vous aider et répond assez rapidement à votre demande. Je recommande vivement cet hébergeur.

Vanden Cruyce

Avis avislws 09/04/2022

Je suis ravie

Je suis ravie d'être avec LWS sur tous les plans, je remercie les Techniciens (Fabrice, Omar, Sandy-Mahitsison) depuis plus de 8 ans j'ai évolué avec LWS et toujours soutenue. Une véritable relation humaine même si les questions ou nos inquiétudes ne correspondent pas à leurs missions, ils sont là pour nous répondent et nous rassurent. Mon site c'est mon travail ma source de revenue donc il sont mes partenaires ! les travailleurs de l'ombre merci à eux ! Merci LWS

L'atelier-and-Co

Commentaires (2)

Robert
10/07/2024 - 09:11
Karen
2024-07-15 15:11:43

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée.