Comment ajouter et aligner des images dans l'éditeur de blocs WordPress (Gutenberg)
Les images donnent vie à vos publications et pages WordPress en les rendant plus attrayantes. Cependant, de nombreux débutants ont du mal à aligner les images comme ils le souhaitent.
Le nouvel éditeur de blocs WordPress (Gutenberg) résout ce problème en facilitant l'ajout et l'alignement d'images dans WordPress.
Dans cet article, nous allons vous montrer comment ajouter et aligner facilement des images dans WordPress pour créer de superbes mises en page de contenu.
Alignement des images dans l'éditeur WordPress
Auparavant, WordPress utilisait une zone de texte avec des boutons d'édition comme éditeur par défaut. Un problème particulier dans l’ancien éditeur était l’alignement des images. Il peut être difficile d’aligner correctement les choses sur votre site Web WordPress.
Même s’il existait des options pour aligner les images à gauche, à droite ou au centre, elles n’étaient pas toujours belles. Parfois, les images ne s’alignaient pas, n’avaient pas la taille exacte ou semblaient tout simplement étranges.
WordPress 5.0 a introduit un nouvel éditeur de publication WordPress appelé éditeur de blocs Gutenberg. Il a résolu plusieurs problèmes avec l’ancien éditeur, notamment les problèmes d’alignement des images.
Voyons comment vous pouvez facilement ajouter et aligner des images dans le nouvel éditeur pour créer de superbes mises en page pour les articles et les pages de votre blog WordPress.
Ajouter et aligner des images dans WordPress
L'éditeur est livré avec les blocs suivants que vous pouvez utiliser pour ajouter des images dans vos articles et pages WordPress.
Image
Image en ligne
Galerie
Médias et texte
Couverture
Commençons par un simple bloc d’image.
Cliquez sur le bouton « Ajouter un nouveau bloc » ou tapez /image dans l'éditeur de publication pour insérer un bloc d'image.
Vous verrez trois boutons à l’intérieur du bloc d’image vierge.
Vous pouvez télécharger une image depuis votre ordinateur, sélectionner une image déjà téléchargée dans la bibliothèque multimédia ou insérer une image en fournissant l'URL du fichier image.
Ensuite, cliquez sur le bouton « Télécharger », puis sélectionnez l'image que vous souhaitez télécharger depuis votre ordinateur.
Dès que vous sélectionnez l'image, WordPress la téléchargera dans votre médiathèque et l'insérera dans le bloc d'image.
Maintenant, vous remarquerez une barre d'outils au-dessus de votre image et certains paramètres de bloc d'image dans la colonne de droite.
Pour aligner votre image, vous utiliserez la barre d'outils qui apparaît en haut de l'image.
Le bloc d'image vous offre les options d'alignement d'image suivantes sous forme de boutons dans la barre d'outils.
Alignez à gauche
Aligner le centre
Aligner à droite
Grande largeur
Pleine largeur
Si votre image est plus petite en largeur, l'aligner à gauche ou à droite fera apparaître du texte à côté de l'image. L'aligner au centre affichera l'image sur sa propre ligne sans texte de chaque côté.
Choisir l’option grande largeur rendra votre image plus large que la zone de texte.
L'option pleine largeur le poussera vers les bords droit et gauche de l'écran du navigateur.
Comment aligner parfaitement une image à côté du texte
Souvent, vous devrez peut-être aligner parfaitement une image à côté d’un texte. L'éditeur de blocs WordPress facilite cela en ajoutant le bloc Médias et Texte.
Ce bloc ajoute essentiellement une zone à deux colonnes. Une colonne pour les images (médias) et la deuxième colonne pour le contenu textuel.
Téléchargez simplement votre image.
Ensuite, vous pouvez ajouter le texte que vous souhaitez afficher à côté.
Après avoir ajouté l'image et le texte, vous remarquerez plus d'options pour le bloc. Vous pouvez élargir ou agrandir l'ensemble du bloc, vous pouvez également changer les côtés de l'image et du texte.
L’alignement de l’image s’ajustera automatiquement à la hauteur du texte dans la colonne suivante.
Comment aligner les images de la galerie dans WordPress
L'éditeur de blocs WordPress est également livré avec un bloc pour ajouter des galeries d'images. Cela vous permet d'afficher facilement des images dans une grille de lignes et de colonnes.
Le bloc Galerie est livré avec des options d'alignement similaires dans la barre d'outils.
Vous pouvez aligner l’ensemble du bloc de galerie à gauche, au centre ou à droite. Vous pouvez également l'élargir ou le modifier en une ligne pleine largeur.
La fonctionnalité de galerie par défaut dans WordPress est plutôt bonne. Cependant, si vous ajoutez régulièrement des galeries de photos à vos publications et pages WordPress, pensez à utiliser un plugin de galerie de photos comme Envira Gallery.
Ces plugins vous offriront plus d'options pour aligner les images dans vos galeries de photos, les afficher dans la fenêtre contextuelle et les styliser différemment.
Comment ajouter deux images côte à côte dans WordPress
Le moyen le plus simple d’afficher deux images côte à côte dans une publication WordPress consiste à ajouter les deux images dans un bloc Galerie.
Sélectionnez simplement une disposition à 2 colonnes pour le bloc galerie afin d'afficher les deux images l'une à côté de l'autre. Vous pouvez également cocher l’option « Recadrer la vignette » pour vous assurer que les deux images sont de la même taille.
Plus de façons d'ajouter et d'aligner des images dans WordPress
Outre l'image, le média et le texte, ainsi que le bloc Galerie, vous pouvez également utiliser le bloc Couverture pour ajouter une image de couverture.
Dans la conception Web moderne, les images de couverture sont utilisées pour créer des mises en page de contenu très attrayantes. Ces images sont utilisées pour mettre en évidence différentes sections d’une page.
Le bloc d’image de couverture est livré avec les mêmes options d’alignement qu’un bloc d’image. Vous pouvez ajouter du texte sur l'image et choisir une couleur de superposition dans les paramètres du bloc. La meilleure partie est que vous pouvez cocher l’option « Arrière-plan fixe », qui crée un effet d’arrière-plan de parallaxe.
Pour en savoir plus sur l’utilisation des images de couverture, consultez notre article sur la différence entre les images présentées et l’image de couverture dans WordPress.
Jusqu'à présent, nous avons parlé de l'ajout d'images directement à vos publications et pages. Qu’en est-il des images provenant de sites tiers ?
L'éditeur de blocs rend cela également facile. Vous pouvez ajouter des images provenant de sites de partage social populaires, notamment Instagram, Facebook, Flickr, Imgur, Photobucket, etc.
Par exemple, si vous souhaitez ajouter une photo Instagram, ajoutez simplement le bloc Instagram à l'éditeur de publication et entrez l'URL de la publication que vous souhaitez partager.
Ensuite, vous pouvez simplement cliquer sur l'alignement souhaité dans la barre d'outils. Les blocs d'intégration vous permettent également d'intégrer facilement des vidéos dans WordPress.
Pour plus de détails, veuillez consulter notre guide sur la façon d'intégrer Instagram dans WordPress.
Nous espérons que cet article vous a aidé à apprendre à ajouter et aligner facilement des images dans l’éditeur de blocs WordPress. Vous voudrez peut-être également consulter notre guide sur la façon d’optimiser les images pour accélérer WordPress et le meilleur logiciel de conception.
Si vous avez aimé cet article, abonnez-vous à notre chaîne YouTube pour les didacticiels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.