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 belles mises en page de contenu.
Alignement d’images dans WordPress Editor
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.
Même s’il y avait des options pour aligner les images à gauche, à droite ou au centre, elles n’avaient pas toujours l’air bien. Parfois, les images ne s’alignaient pas, n’avaient pas la taille exacte ou semblaient 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 d’images.
Voyons comment vous pouvez facilement ajouter et aligner des images dans le nouvel éditeur pour créer de superbes mises en page pour vos articles et pages.
Ajouter et aligner des images dans WordPress
Le nouvel éditeur est livré avec les blocs suivants que vous pouvez utiliser pour ajouter des images dans vos publications et pages WordPress.
- Image
- Image en ligne
- Galerie
- Médias et texte
- Couverture
Commençons d’abord 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écharge dans votre médiathèque et l’insère 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 au centre
- Aligner à droite
- Grande largeur
- Pleine largeur
Si votre image est plus petite en largeur, alors 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é.
Le choix de l’option grande largeur rendra votre image plus large que la zone de texte, et l’option pleine largeur la 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 rend cela facile en ajoutant le bloc Media & Text.
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, puis ajoutez 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 élargir le bloc entier, 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 publication 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 tout le bloc de la galerie à gauche, au centre ou à droite. Vous pouvez également le rendre large ou le changer en une rangée pleine largeur.
La fonctionnalité de galerie par défaut dans WordPress est assez bonne. Cependant, si vous ajoutez régulièrement des galeries de photos à vos publications et pages WordPress, envisagez d’utiliser un plugin de galerie de photos comme Envira Gallery.
Ces plugins vous donneront 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 un article WordPress est d’ajouter les deux images dans un bloc Galerie.
Sélectionnez simplement une disposition à 2 colonnes pour le bloc de galerie afin d’afficher les deux images l’une à côté de l’autre. Vous pouvez également cocher l’option « rogner 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, les médias et le texte, et 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 de bloc. La meilleure partie est que vous pouvez cocher l’option ‘Fixed Background’ qui crée un effet de fond de parallaxe.
Pour en savoir plus sur l’utilisation des images de couverture, consultez notre article sur la différence entre les images en vedette et l’image de couverture dans WordPress.
Jusqu’à présent, nous avons parlé d’ajouter des images directement à vos articles et pages. Qu’en est-il des images provenant de sites tiers ?
L’éditeur de blocs facilite également les choses. Il est livré avec des blocs d’intégration pour les sites de partage social populaires, notamment Instagram, 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.
WordPress récupérera automatiquement la publication Instagram et l’intégrera pour vous. Après cela, vous pourrez utiliser les options d’alignement dans la barre d’outils.
Les blocs d’intégration vous permettent également d’intégrer facilement des vidéos dans WordPress. Après cela, vous pouvez utiliser les mêmes options dans la barre d’outils pour aligner les vidéos dans WordPress.
Nous espérons que cet article vous a aidé à apprendre comment ajouter et aligner facilement des images dans l’éditeur de blocs WordPress. Vous pouvez également consulter notre guide sur la façon d’optimiser les images pour accélérer WordPress.
