Comment mettre des Images Côte à Côte dans WordPress (Facilement)

Voulez-vous mettre des images côte à côte dans votre contenu WordPress?

Souvent, les débutants ont du mal à trouver comment mettre deux images l’une à côté de l’autre dans leurs publications et pages WordPress.

Dans ce guide étape par étape, nous allons montrer comment mettre facilement des images côte à côte dans WordPress (sans écrire de code).

 Mettre des images côte à côte dans WordPress

 Mettre des images côte à côte dans WordPress

Utilisation de l’Éditeur de blocs pour mettre des images Côte à côte

Le moyen le plus simple d’obtenir vos images côte à côte est d’utiliser l’éditeur de blocs WordPress.

L’éditeur de blocs dispose d’un bloc « Galerie » spécial qui vous permet d’afficher des images en lignes et en colonnes.

Tout d’abord, vous devrez créer une nouvelle publication / page ou en modifier une existante pour ouvrir l’éditeur de contenu. Une fois à l’intérieur, cliquez sur le symbole (+) pour ajouter un nouveau bloc.

 Création d'une publication et ajout d'un bloc

 Créer une publication et y ajouter un bloc

Ensuite, vous devez sélectionner le bloc de galerie et l’ajouter à votre page. Vous pouvez trouver le bloc Galerie dans la section Blocs communs, ou vous pouvez utiliser la barre de recherche pour le localiser rapidement.

 Sélection du bloc Galerie à ajouter à votre publication

 En sélectionnant le bloc Galerie à ajouter à votre publication

Maintenant, vous pouvez facilement ajouter des images à votre bloc galerie, en les faisant glisser dedans ou en utilisant le bouton Télécharger. Vous pouvez également sélectionner des images dans votre médiathèque WordPress.

Comme vous pouvez le voir, nous avons ajouté 2 images à notre bloc Galerie. WordPress les a automatiquement positionnés côte à côte.

 Deux images dans la galerie (papillons et pomme)

 Deux images dans la galerie (papillons et pomme)

Et si vous voulez 3 images côte à côte? Voici ce qui se passe si nous ajoutons une troisième image. WordPress redimensionne simplement les autres pour s’adapter aux 3 côte à côte:

 Trois images dans la galerie (papillons, pomme et fleurs bleues)

 Trois images dans la galerie (papillons, pomme et fleurs bleues)

Si vous téléchargez une quatrième image, WordPress la placera sous les autres.

 Quatre images dans la galerie (papillons, pomme, fleurs bleues et robin)

 Quatre images dans la galerie (papillons, pomme, fleurs bleues et robin)

Vous pouvez modifier le nombre d’images que WordPress doit inclure côte à côte dans une seule colonne.

Tout d’abord, cliquez sur le bloc Galerie, s’il n’est pas déjà sélectionné. Sur le côté droit de l’écran, vous verrez les paramètres de blocage de la Galerie.

 Modification des paramètres du bloc galerie

 Modification des paramètres du bloc de galerie

Vous pouvez ajuster le nombre de colonnes ici à n’importe quel nombre compris entre 1 et 4. Par exemple, si vous voulez deux images côte à côte, et deux autres en dessous, vous pouvez définir les colonnes sur 2.

 Définir la galerie pour qu'elle ait 2 colonnes plutôt que 3

 Définir la galerie pour avoir 2 colonnes plutôt que 3

C’est aussi simple que ça !

Si vous souhaitez modifier l’emplacement d’une image dans votre galerie, cliquez dessus. Vous verrez alors des flèches que vous pouvez utiliser pour le déplacer vers l’avant ou vers l’arrière dans la galerie.

 Déplacement d'une image vers l'avant ou vers l'arrière dans la galerie

 Déplacement d'une image vers l'avant ou vers l'arrière dans la galerie

Voici une démo de galerie terminée de notre exemple de post:

 La galerie de 2 colonnes dans un post en direct

 La galerie à 2 colonnes dans un post en direct

En utilisant un Plugin pour mettre des Images Côte à côte dans WordPress

Si vous utilisez l’ancien éditeur WordPress classique, ou si vous souhaitez créer des galeries plus complexes que le bloc de galerie par défaut, vous aurez besoin d’un plugin de galerie WordPress.

Nous vous recommandons d’utiliser Envira Gallery car c’est le meilleur plugin de galerie WordPress

Pour les besoins de ce tutoriel, nous utiliserons la version gratuite d’Envira, mais vous voudrez peut-être obtenir la version Pro pour obtenir des fonctionnalités puissantes comme des albums, des diaporamas d’images, etc.

Tout d’abord, vous devrez installer et activer le plugin Envira Gallery. Si vous ne savez pas comment, consultez notre guide étape par étape sur l’installation d’un plugin WordPress.

Ensuite, vous pouvez aller à la galerie Envira « Ajouter du nouveau dans votre tableau de bord WordPress.

 Ajouter une nouvelle galerie dans Envira Gallery

 Ajouter une nouvelle galerie dans Envira Gallery

Vous devrez donner un titre à votre galerie. Nous avons appelé la nôtre ‘Galerie d’exemples’. Ensuite, téléchargez les images que vous souhaitez utiliser.

Vous pouvez soit les faire glisser et les déposer dans la zone de téléchargement, soit utiliser l’un des boutons « Sélectionner des fichiers ».

 Donnez un nom à votre nouvelle galerie

 Donnez un nom à votre nouvelle galerie

Voici à quoi ressemblent les images une fois qu’elles ont été téléchargées:

 Images téléchargées dans la galerie Envira

 Images téléchargées dans la galerie Envira

Vous pouvez donner à vos images un titre et un texte alternatif ici. Le titre apparaît sous votre image lorsque l’utilisateur place le curseur de sa souris dessus.

Le titre apparaît également sous l’image en mode popup lightbox, que nous allons examiner dans un instant.

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

 Cliquez sur le bouton Modifier pour modifier une image dans votre galerie

 Cliquez sur le bouton Modifier pour modifier une image dans votre galerie

Vous pouvez ensuite modifier le titre de votre image. Il est par défaut le nom de fichier de l’image.

Vous devez également entrer du texte alternatif, car cela est utile pour le référencement de votre site WordPress. Si votre titre décrit l’image, vous pouvez simplement la répéter pour le texte alternatif.

 Réglage du titre et du texte alternatif de l'image

 Définir le titre et le texte alternatif de l'image

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

 Cliquez sur le bouton Enregistrer les métadonnées pour enregistrer vos modifications

 Cliquez sur le bouton Enregistrer les métadonnées pour enregistrer vos modifications

Pour ajouter votre galerie sur le site, vous devez d’abord la publier. Allez-y et cliquez sur le bouton Publier sur le côté droit de l’écran.

 Cliquez sur le bouton Publier pour publier votre galerie, afin de pouvoir l'utiliser sur votre site

 Cliquez sur le bouton Publier pour publier votre galerie, afin que vous puissiez l'utiliser sur votre site

Maintenant, modifier un article ou une page, ou en créer un nouveau. Dans l’éditeur de contenu, cliquez sur (+) pour ajouter un bloc à votre publication, puis sélectionnez le bloc Galerie Envira. Vous pouvez le trouver dans la section Blocs communs ou utiliser la barre de recherche.

 Ajoutez le bloc Galerie Envira à votre publication ou page

 Ajoutez le bloc Galerie Envira à votre publication ou page

Vous devrez ensuite cliquer sur la liste déroulante pour sélectionner votre galerie.

 Sélectionnez votre galerie dans le bloc Galerie Envira

 Sélectionnez votre galerie dans le bloc Galerie Envira

Vous devriez voir votre galerie en place dans votre publication.

Vous pouvez régler les paramètres sur le côté droit de l’écran. Par exemple, vous pouvez modifier la disposition des colonnes ou la taille de la marge entre les images.

 La galerie Envira affichée dans l'éditeur de publication

 La galerie Envira affichée dans l'éditeur de publication

Nous avons décidé de configurer notre galerie pour qu’elle s’affiche toujours sur deux colonnes. Nous avons également ajouté une marge plus large entre les images.

L’utilisateur peut cliquer sur une image pour voir la version en taille réelle dans une lightbox. Ils peuvent également faire défiler les images à l’aide de la lightbox.

 Affichage d'une image de la galerie Envira dans une lightbox

 Affichage d'une image de la galerie Envira dans une lightbox

Si vous souhaitez ajouter plus d’images à votre galerie, vous pouvez y revenir en visitant Envira Gallery « Toutes les galeries de votre tableau de bord WordPress. Cliquez simplement sur le nom de votre galerie pour l’éditer.

 Modification d'une galerie que vous avez déjà créée dans Envira Gallery

 Modification d'une galerie que vous avez déjà créée dans Envira Gallery

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

Astuce: Si vous utilisez l’éditeur classique au lieu de l’éditeur de blocs, vous pouvez toujours utiliser Envira Gallery.

Vous verrez un bouton « Ajouter une galerie » au-dessus de l’éditeur classique que vous pouvez utiliser pour ajouter une galerie existante à votre publication.

 Ajout d'une galerie Envira dans l'éditeur classique

 Ajout d'une galerie Envira dans l'éditeur classique

Vous pouvez également créer une nouvelle galerie en cliquant sur le bouton « Ajouter un média » puis sur « Créer une galerie ».

 Création d'une nouvelle galerie à l'aide de la Médiathèque dans l'Éditeur Classique

 Création d'une nouvelle galerie à l'aide de la médiathèque dans l'éditeur classique

Nous espérons que ce tutoriel vous a aidé à apprendre à mettre des images côte à côte dans WordPress. Vous voudrez peut-être également consulter notre guide sur la façon d’aligner les images dans l’éditeur de blocs WordPress, et notre liste complète des plugins WordPress indispensables (choix d’experts).

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.

Leave a Reply

Votre adresse e-mail ne sera pas publiée.