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 ?

Ajouter des images côte à côte vous aide à présenter des visuels de manière plus claire et structurée. Cela améliore la compréhension de votre contenu par les utilisateurs et rend vos pages plus organisées.

• Meilleur récit visuel : Vous pouvez montrer des étapes, des progrès ou des idées connexes dans une seule vue au lieu de les séparer sur la page. Cela rend votre contenu plus facile à suivre et à comprendre d'un coup d'œil.
• Comparaison facile : Vous pouvez placer deux images ou plus ensemble afin que les utilisateurs puissent rapidement comparer les détails, les différences ou les résultats sans avoir à faire défiler la page.
• Économise de l'espace sur la page : Au lieu d'empiler les images verticalement et d'allonger la page, vous pouvez intégrer plusieurs visuels dans une seule rangée, ce qui maintient votre mise en page propre et compacte.
• Améliore la conception et la mise en page : Les images côte à côte interrompent les grandes sections de texte et rendent votre page plus équilibrée, moderne et visuellement attrayante.
• Fonctionne bien pour de nombreux cas d'utilisation : C'est particulièrement utile pour les comparaisons de produits, les images avant/après, les tutoriels et les portfolios de photographie où les visuels sont primordiaux.

Cela dit, nous allons vous montrer deux méthodes simples pour placer des images les unes à côté des autres. 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

Si vous cherchez un moyen simple d'ajouter des images côte à côte en utilisant l'éditeur de blocs Gutenberg, alors cette méthode est pour vous.

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.

Vous pouvez également sélectionner des images dans votre bibliothèque de médias WordPress en cliquant sur le bouton « Bibliothèque de médias ».

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 et les lier à différentes pages 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)

Alors que le bloc Galerie intégré est parfait pour les mises en page simples, vous aurez besoin d'un plugin pour créer des galeries photo plus avancées avec des fonctionnalités telles que les lightboxes, les albums et les options de partage social.

Pour cela, nous recommandons Envira Gallery. Il est constamment classé comme un plugin de galerie WordPress de premier plan, avec une note de 4,7/5 étoiles basée sur plus de 1 600 avis sur WordPress.org.

D'après notre expérience, il est très facile à utiliser, même pour les débutants. Le constructeur par glisser-déposer simplifie les choses, tout en vous offrant des fonctionnalités puissantes. Les modèles prédéfinis permettent également de créer plus rapidement des galeries soignées et professionnelles.

Dans l'ensemble, c'est une excellente option pour les photographes, les artistes et les entreprises qui souhaitent présenter des visuels de manière professionnelle. Pour plus de détails sur ses fonctionnalités, consultez 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 » d'une image dans 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, créez un texte alternatif concis et descriptif qui explique le contenu et le but de l'image pour l'accessibilité et le référencement.

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 : Aligner les images dans WordPress (y compris côte à côte avec le bloc Colonnes)

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.

Utiliser le bloc Colonnes pour les images côte à côte

Au-delà du bloc Galerie, le bloc Colonnes est un excellent outil pour placer des images côte à côte, surtout lorsque vous avez besoin de plus de contrôle sur la taille ou l'espacement des images individuelles.

Vous pouvez même l'utiliser pour combiner des images avec d'autres contenus.

Pour l'utiliser, ajoutez simplement un bloc Colonnes et sélectionnez la mise en page souhaitée, telle qu'une division 50/50. Ensuite, ajoutez un bloc Image qui s'aligne parfaitement avec votre contenu.

De plus, vous pouvez enrouler du texte autour de l'image, utiliser le bloc Groupe, ajouter le bloc 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 des 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 placer des images côte à côte dans WordPress. Vous voudrez peut-être également consulter notre guide sur comment modifier la hauteur et la largeur des blocs dans WordPress et notre guide sur l'ajout de tableaux dans les articles et pages WordPress.

Si vous avez aimé cet article, abonnez-vous à notre Chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous trouver sur Twitter et Facebook.