Comment mettre facilement des images côte à côte dans WordPress

Lorsque nous avons commencé à bloguer, faire aligner des images était souvent plus frustrant qu'amusant.

Mais nous avons vite réalisé que placer des images côte à côte ne servait pas seulement à rendre les choses plus belles, cela aidait en fait les lecteurs à mieux comprendre et apprécier le contenu.

Au fil du temps, nous avons acquis quelques techniques simples pour faciliter ce processus, et placer des visuels les uns à côté des autres est devenu l'une de nos méthodes préférées pour créer de belles galeries de photos.

Dans ce tutoriel, nous vous présenterons deux méthodes faciles pour afficher des images côte à côte : l'une utilisant l'éditeur de blocs intégré de WordPress, et l'autre avec le plugin Envira Gallery.

À la fin, vous serez en mesure d'améliorer la mise en page de votre contenu et de créer une expérience plus engageante pour vos visiteurs.

Pourquoi ajouter des images côte à côte dans WordPress ?

L'ajout d'images côte à côte peut améliorer l'attrait visuel de votre site WordPress en créant une mise en page plus intéressante.

Les images côte à côte peuvent également aider à utiliser efficacement l'espace de votre site, vous permettant d'intégrer plus de visuels dans une zone limitée.

Par exemple, si vous avez un site web de photographie, alors organiser les images côte à côte vous aidera à tirer pleinement parti de votre page WordPress en affichant les images de manière esthétiquement agréable.

De plus, parfois, vous voudrez que les utilisateurs comparent deux images sur votre blog WordPress. Les placer côte à côte facilitera l'analyse et la compréhension des différences entre les images.

Cela dit, nous allons vous montrer deux méthodes simples pour placer des images les unes à côté des autres. La meilleure méthode dépend de ce dont vous avez besoin.

Pour la plupart des cas simples, l'éditeur de blocs intégré de WordPress fonctionne parfaitement. Si vous souhaitez créer des galeries photo plus avancées avec des fonctionnalités supplémentaires, l'utilisation d'un plugin est le meilleur choix.

Vous pouvez utiliser les liens ci-dessous pour accéder à la méthode que vous préférez :

• Method 1: Add Images Side by Side in WordPress Using the Block Editor
• Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)
• Bonus: Align Images in WordPress
• Questions fréquemment posées sur l'ajout d'images côte à côte

Method 1: Add Images Side by Side in WordPress Using the Block Editor

If you are looking for a simple way to add images side by side using the Gutenberg block editor, then this method is for you.

The block editor offers a Gallery block functionality that lets you easily display images in rows and columns.

Étape 1 : Ajouter le bloc Galerie

First, you’ll need to create a new post/page or edit an existing one to open the content editor. Once you are there, click the ‘Add Block’ (+) button at the top left corner of the screen to open up the block menu.

From here, simply locate and add the Gallery block to the page or post.

Étape 2 : Télécharger vos images

After that, you can easily add images to your gallery block from the computer by clicking the ‘Upload’ button.

You can also select images from your WordPress media library by clicking on the ‘Media Library’ button.

As you can see, we’ve added 2 images to our Gallery block, and WordPress has automatically positioned them side by side.

If you decide to add a third image, then you must click the ‘Add’ button from the block toolbar at the top.

This will open the media library from where you can add a third image to your Gallery block. Once you do that, you’ll see that WordPress has now simply resized the images to automatically place them side by side.

Étape 3 : Ajuster les colonnes de la galerie

However, if you decide to place a fourth image in the Gallery block, it will be placed under the other images.

Pour résoudre ce problème, vous pouvez modifier le nombre de colonnes de votre galerie. Ce paramètre contrôle le nombre d'images qui apparaîtront côte à côte dans chaque rangée.

Par exemple, si vous souhaitez deux images côte à côte et deux autres en dessous, vous pouvez définir les Colonnes sur 2.

Vous pouvez également recadrer les images pour qu'elles s'alignent, ajuster leurs tailles, les lier à différentes pages et modifier la couleur d'arrière-plan depuis le panneau de blocs.

Pour des instructions détaillées, consultez notre guide pour débutants sur comment créer une galerie d'images dans WordPress.

Étape 4 : Publier vos modifications

Une fois que vous avez terminé, n'oubliez pas de cliquer sur le bouton « Mettre à jour » ou « Publier » pour enregistrer vos modifications.

Maintenant, visitez simplement votre site Web pour voir les images côte à côte.

Method 2: Place Images Side by Side in WordPress Using a Plugin (Easy Way)

Bien que le bloc Galerie intégré soit parfait pour les mises en page simples, vous aurez besoin d'un plugin si vous souhaitez créer des galeries de photos plus avancées avec des fonctionnalités telles que de magnifiques lightboxes, des albums et des options de partage sur les réseaux sociaux.

Pour cela, nous recommandons Envira Gallery. C'est le meilleur plugin de galerie WordPress du marché, et selon notre expérience, il est incroyablement facile à utiliser tout en offrant des fonctionnalités puissantes.

Pour plus de détails sur ses fonctionnalités, vous pouvez consulter notre avis sur Envira Gallery.

Étape 1 : Installer et activer Envira Gallery

Tout d'abord, vous devrez installer et activer le plugin Envira Gallery. Pour plus de détails, consultez notre guide étape par étape sur comment installer un plugin WordPress.

Étape 2 : Créer une nouvelle galerie et télécharger des images

Après l'activation, rendez-vous sur la page Envira Gallery » Ajouter une nouvelle depuis votre tableau de bord WordPress.

Une fois que vous y êtes, vous devrez donner un titre à votre nouvelle galerie. Nous avons appelé la nôtre « Galerie d'exemple ».

Après cela, téléchargez les images que vous souhaitez utiliser depuis votre ordinateur en cliquant sur le bouton « Sélectionner des fichiers depuis votre ordinateur ».

Pour télécharger des images depuis la médiathèque, cliquez sur le bouton « Sélectionner des fichiers depuis d'autres sources ».

Étape 3 : Modifier les métadonnées des images (facultatif)

Une fois que vous avez téléchargé les images, faites défiler vers le bas jusqu'à la section Galerie pour les afficher.

À partir d'ici, vous pouvez donner un titre et un texte alternatif à vos images.

Le titre apparaît lorsque l'utilisateur survole l'image et s'affiche également sous l'image dans la lightbox, qui est la vue en plein écran avec pop-up.

Pour modifier le titre et le texte alternatif, cliquez sur le bouton « Modifier » sur une image de la galerie.

Vous pouvez ensuite modifier le titre de votre image et saisir un texte alternatif, ce qui est utile pour le SEO de votre site WordPress.

Si votre titre décrit l'image, vous pouvez simplement le répéter pour le texte alternatif.

Une fois que vous avez terminé, assurez-vous de cliquer sur le bouton « Enregistrer les métadonnées » avant de fermer la fenêtre.

Si vous ne le faites pas, les modifications que vous avez apportées ne seront pas enregistrées dans la galerie.

Étape 4 : Publier votre galerie

Enfin, faites défiler jusqu'en haut de la page et cliquez sur le bouton « Publier » pour enregistrer la galerie d'images que vous venez de créer.

Ensuite, rendez-vous sur la page ou l'article WordPress où vous souhaitez l'ajouter.

Étape 5 : Ajouter le bloc Envira Gallery à un article ou une page

Une fois que vous y êtes, cliquez sur le bouton « Ajouter un bloc » (+) en haut à gauche de l'écran pour ouvrir le menu des blocs.

À partir de là, localisez et ajoutez le bloc Envira Gallery à la page/l'article.

Ensuite, vous devrez sélectionner la galerie que vous avez créée dans le menu déroulant du bloc lui-même.

Étape 6 : Configurer la mise en page et publier

Pour afficher les images de la galerie côte à côte, accédez au panneau de blocs dans le coin droit de l'écran.

À partir de là, faites défiler vers le bas jusqu'à la section « Sélectionner la mise en page » et choisissez le nombre de colonnes dans le menu déroulant. Vos images seront alors affichées côte à côte sur la page WordPress.

Vous pouvez également modifier les marges de la galerie, activer un bel effet de filtrage animé (connu sous le nom d'Isotope) et configurer les paramètres de la lightbox depuis le panneau du bloc.

Once you are done, don’t forget to click the ‘Publish’ or ‘Update’ button to store your settings.

Now, you can visit your website to view the images displayed side by side.

The user can now click on any image to see the full-sized version in a lightbox.

De plus, ils peuvent également parcourir les images à l'aide de la lightbox.

Si vous souhaitez ajouter d'autres images à votre galerie, vous pouvez y revenir en visitant la page Envira Gallery » Toutes les galeries dans votre tableau de bord WordPress.

Une fois sur place, cliquez simplement sur le nom de votre galerie pour la modifier.

Toutes les modifications que vous apportez à votre galerie apparaîtront partout où vous l'avez placée dans vos articles, pages ou barres latérales. Vous n'avez pas besoin de les ajouter à nouveau.

Bonus: Align Images in WordPress

Lorsque vous placez deux images côte à côte, elles doivent s'aligner pour créer un aspect cohérent et visuellement attrayant.

Même si vous ajoutez une seule image à votre blog WordPress, vous voudrez toujours l'aligner avec votre contenu pour créer un équilibre visuel.

Vous pouvez facilement aligner les images dans l'éditeur de blocs WordPress en cliquant sur le bouton « Aligner » dans la barre d'outils au-dessus du bloc.

Cela ouvrira des options à partir desquelles vous pourrez déplacer votre image vers la droite ou la gauche, la rendre de la même largeur que le conteneur, ou utiliser l'option pleine largeur afin que la largeur de l'image soit la même que celle du reste de la page.

En dehors de cela, vous pouvez également utiliser le bloc Colonne pour aligner votre image avec le contenu. Pour ce faire, vous devrez sélectionner la variation 50/50.

Une fois que vous avez fait cela, vous pouvez ajouter un bloc d'image qui s'aligne parfaitement avec votre contenu.

De plus, vous pouvez également faire en sorte que le texte s'enroule autour de l'image, utiliser le bloc de groupe, ajouter le bloc de couverture, ou faire bien plus encore pour aligner les images ensemble ou séparément.

Pour plus d'informations, consultez notre guide pour débutants sur comment aligner les images dans l'éditeur de blocs WordPress.

Questions fréquemment posées sur l'ajout d'images côte à côte

Voici quelques questions que nos lecteurs nous ont fréquemment posées sur l'ajout d'images côte à côte dans WordPress :

Comment puis-je placer une image et du texte côte à côte dans WordPress ?

La meilleure façon de placer une image à côté du texte est d'utiliser le bloc Colonnes.

Tout d'abord, ajoutez le bloc Colonnes et choisissez une mise en page, comme 50/50. Ensuite, vous pouvez ajouter un bloc Image dans une colonne et un bloc Paragraphe dans l'autre. Cela vous donne une mise en page nette, côte à côte.

Quelle est la meilleure façon d'aligner des images de différentes tailles côte à côte ?

Bien que le bloc Galerie soit idéal pour les images uniformes, le bloc Colonnes offre plus de flexibilité pour différentes tailles. Vous pouvez l'utiliser pour créer une disposition 70/30 ou d'autres dispositions personnalisées.

Pour un contrôle plus avancé, un plugin comme Envira Gallery vous permet de créer des grilles personnalisées qui peuvent gérer gracieusement diverses dimensions d'images.

Mes images côte à côte resteront-elles les unes à côté des autres sur les appareils mobiles ?

Généralement, non. La plupart des thèmes WordPress modernes sont réactifs, ce qui signifie que les blocs d'images placés côte à côte sur un ordinateur de bureau s'empileront automatiquement verticalement sur les écrans plus petits.

Ceci est fait pour s'assurer que les images sont suffisamment grandes pour être vues clairement sur un téléphone, offrant une meilleure expérience utilisateur.

Nous espérons que ce tutoriel vous a aidé à apprendre comment mettre des images côte à côte dans WordPress. Vous voudrez peut-être également consulter notre guide sur comment changer la hauteur et la largeur des blocs dans WordPress et notre guide sur l'ajout de tableaux dans les articles et les pages WordPress.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.