De plus en plus d’utilisateurs de WordPress commencent vraiment à se rallier à l’idée de l’éditeur de blocs WordPress Gutenberg. Mis à part le fait que vous pouvez facilement mettre à jour le contenu existant de WordPress en utilisant l’éditeur Gutenberg, Gutenberg continue de montrer pourquoi il est meilleur.

Cela s’explique notamment par la facilité d’ajout et d’alignement des images.

L’ajout d’images dans l’éditeur classique n’a jamais été un problème, mais l’alignement des images l’a été. Entre l’espacement du texte et la taille des images, la plupart des débutants avaient du mal à aligner les images comme ils le souhaitaient.

L’éditeur de blocs Gutenberg a vraiment fait des progrès pour l’ajout et l’alignement des images. Grâce au style de l’éditeur de blocs de WordPress, un utilisateur peut très facilement ajouter et aligner des images dans Gutenberg.

Le nouvel éditeur de bloc WordPress a facilité l’ajout et l’alignement des images et vous permet de créer du beau contenu d’une manière beaucoup plus facile. Voyons comment ajouter et aligner facilement des images dans l’éditeur de blocs WordPress Gutenberg.

Images et alignement dans WordPress

L’éditeur WordPress classique offrait la possibilité d’aligner les images à gauche, à droite ou au centre. L’option était donc disponible, mais il était parfois difficile d’obtenir l’apparence souhaitée en raison de la taille de l’image.

Les mises en page étaient erronées, la taille des images était incorrecte et parfois le texte se trouvait là où il ne devait pas être. La correction pouvait prendre des heures, si tant est que vous puissiez la faire.

En relation  Comment utiliser GTMetrix avec WordPress pour améliorer les performances du site.

L’éditeur de blocs WordPress Gutenberg a corrigé un certain nombre de ces problèmes. Non seulement vous pouvez maintenant très facilement ajouter une image de couverture ou une image à la une dans l’éditeur de bloc WordPress, mais prendre soin des problèmes d’alignement d’image est devenu plus facile que jamais.

Ajouter des images

Avant de pouvoir aligner des images dans Gutenberg, vous devez les ajouter à un article ou une page. Commençons donc par là. Ouvrez un article ou une page WordPress nouvelle ou existante et cliquez sur le bouton ” Ajouter un nouveau bloc ” pour sélectionner le type de bloc que vous souhaitez ajouter.

L’éditeur de blocs WordPress Gutenberg est livré complet avec les types de blocs d’images suivants parmi lesquels vous pouvez choisir :

  • Image
  • Image en ligne
  • Galerie
  • Médias et texte
  • Couverture

Pour ce tutoriel, je vais utiliser uniquement le bloc image. Sélectionnez le bloc “Image” pour le faire apparaître.

Lorsque le bloc image est placé dans votre éditeur, vous remarquerez que vous avez le choix entre trois options.

  • Télécharger
  • Médiathèque
  • Insérer de l’URL

Vous pouvez ajouter votre fichier image via l’un de ces trois choix. Une fois sélectionné, WordPress l’ajoutera automatiquement au bloc d’image de votre article ou page, et vous pourrez l’aligner et le manipuler comme vous le souhaitez.

Aligner les images

Maintenant que vous avez inséré l’image dans l’éditeur de bloc WordPress, vous pouvez commencer le processus d’alignement de l’image. Avec l’image, ajoutée vous voyez une barre d’outils en haut du bloc image.

Utilisez les options d’alignement de l’image pour aligner l’image comme vous le souhaitez.

En relation  Comment corriger l'erreur HTTP 500 dans WordPress ?

Vous pouvez choisir parmi les options d’alignement d’image suivantes :

  • Aligner à gauche
  • Aligner au centre
  • Aligner à droite
  • Grande largeur
  • Pleine largeur

Je suis sûr que vous avez un style d’alignement en tête. Cependant, voici quelques éléments à considérer lorsque vous alignez des images dans Gutenberg.

Si vous avez téléchargé une image dans l’éditeur de bloc WordPress Gutenberg qui est un peu plus petite en largeur, alors vous pouvez voir du texte apparaître à côté de l’image si vous utilisez l’alignement à gauche ou à droite.

Si vous utilisez l’alignement central, l’éditeur de bloc WordPress va automatiquement centrer l’image sur sa propre ligne, sans aucun texte à côté.

L’éditeur de blocs WordPress propose également deux autres styles d’alignement. Vous pouvez choisir d’utiliser l’option de grande largeur, qui rendra l’image plus large que la zone de texte.

Ou vous pouvez choisir d’utiliser l’option pleine largeur. Cette option pousse l’image jusqu’aux bords du navigateur lorsqu’elle est affichée en direct.

Aligner les images à côté du texte dans l’éditeur de blocs de Gutenberg.

L’éditeur de blocs de WordPress Gutenberg donne toujours aux utilisateurs la possibilité d’aligner les images à côté du texte sur la même ligne. Cependant, vous pouvez être plus précis et propre avec la mise en page maintenant en utilisant le combo colonne et bloc.

Pour aligner parfaitement les images dans Gutenberg à côté du texte, cliquez sur le bouton “Add New Block” et sélectionnez le bloc “Media and Text”.

Il s’agit d’un bloc à deux colonnes qui vous permet d’ajouter facilement une image et du texte dans la même colonne. Une colonne est réservée aux médias et l’autre au texte.

En relation  Comment analyser le comportement des visiteurs avec WP Search Insights pour WordPress

Note :Vous trouverez ce bloc sous “Éléments de mise en page”.

Une fois le bloc à deux colonnes ajouté, vous pouvez vous mettre au travail. Il suffit d’ajouter le texte que vous voulez dans le champ de texte et de télécharger l’image que vous voulez dans le champ du média.

Une fois les deux éléments ajoutés, vous pouvez jouer avec l’alignement et l’espacement en utilisant la barre d’outils.

Aligner les images de la galerie dans l’éditeur de bloc Gutenberg de WordPress.

Il existe également une fonction dans l’éditeur de bloc WordPress Gutenberg pour ajouter et aligner facilement des galeries d’images complètes. Vous pouvez ajouter un bloc ” Galerie ” et de là, ajouter des images.

Une fois la galerie ajoutée, vous avez toutes les options d’alignement et de style d’image situées à droite de l’éditeur de bloc WordPress. Choisissez les styles que vous souhaitez publier et vous êtes prêt.

Voici quelques exemples différents dans les captures d’écran ci-dessous.

Deux colonnes, trois images en largeur.

Deux colonnes, quatre images en face, deux images en dessous.

L’éditeur de blocs WordPress Gutenberg a mis en place des blocs très faciles à gérer qui vous permettent d’ajouter et d’aligner des images plus facilement que jamais. Vous pouvez même enregistrer ces blocs d’alignement d’images pour les exporter et les importer afin de les utiliser sur d’autres sites.

J’espère que cet article vous a montré comment vous pouvez rapidement et facilement ajouter et aligner des images dans l’éditeur de blocs WordPress Gutenberg.

Avez-vous trouvé que la manipulation des images dans l’éditeur de blocs WordPress est plus facile que dans l’éditeur de texte classique ? Préférez-vous tout de même l’éditeur classique ?