Voulez-vous montrer vos images WordPress côte à côte? Parfois, vous voudrez peut-être aligner vos photos d’affilée sur votre site Web. Dans cet article, nous allons vous montrer comment afficher des images WordPress les unes à côté des autres.
Affichage d’images WordPress Les unes à côté des autres
Il existe plusieurs façons d’afficher des images côte à côte dans WordPress. Jetons un coup d’œil à trois méthodes simplesMethod
Méthode 1: Alignez à gauche
Tout d’abord, ajoutez vos photos à votre publication ou page WordPress. Cliquez simplement sur le bouton Ajouter un média dans le coin supérieur gauche de l’éditeur pour sélectionner les images que vous souhaitez insérer.
Une fois que vous avez sélectionné vos images, cliquez sur le bouton Insérer dans la publication.
Maintenant, cliquez sur chaque image et sélectionnez Aligner à gauche pour aligner les images les unes à côté des autres (vous devez être dans l’onglet Visuel pour ce faire).
Vous pouvez également sélectionner « Gauche » dans l’option d’alignement (sous « Paramètres d’affichage des pièces jointes ») à l’intérieur de l’écran Insérer un support avant de cliquer sur le bouton Insérer dans la publication.
Maintenant, vos images s’afficheront automatiquement côte à côte. Voici le résultat:
Il y a un inconvénient à cette méthode. Si vous avez du texte sur la même page que vos images, il remplira n’importe quelle zone vide à droite des images:
Méthode 2: Ajoutez du CSS personnalisé
En ajoutant votre propre code CSS personnalisé à vos images, vous pouvez avoir un contrôle total sur la façon dont elles sont affichées sur votre site Web.
Tout d’abord, assurez-vous de modifier votre page ou votre publication en mode texte (pas en mode visuel).
Dans la balise <img > pour vos images, ajoutez le code suivant:
style= "float: left; margin-right: 15px;"
Cela rendra vos images alignées les unes à côté des autres avec un espace de 15 pixels à droite de chaque image. Vous devrez ajouter ce code à toutes les images que vous souhaitez afficher les unes à côté des autres, comme indiqué ci-dessous:
Voici à quoi il ressemble:
Si vous souhaitez empêcher l’affichage du texte à droite des images, utilisez ce code à la place:
style= "display: inline-block; margin-right: 15px;"
Maintenant, votre texte ne s’enroulera pas autour de vos images. Au lieu de cela, cela ressemblera à ceci:
Le seul inconvénient de cette méthode est qu’elle nécessite l’ajout de code manuellement, ce qui peut être un peu déroutant et prendre du temps.
Méthode 3: Utiliser Envira Gallery
Envira Gallery est la méthode la plus simple pour afficher vos images côte à côte dans WordPress. Il transforme même automatiquement des photos plus grandes en vignettes plus petites afin que toutes vos images soient parfaites lorsqu’elles sont affichées les unes à côté des autres.
Pour commencer, vous devrez installer et activer le plugin Envira Gallery.
Ensuite, allez simplement dans Envira Gallery « Ajouter Nouveau pour ajouter une nouvelle galerie d’images dans WordPress.
Ajoutez simplement un nom pour votre galerie d’images et ajoutez les photos que vous souhaitez dans la section Images sous Paramètres de la galerie Envira.
Assurez-vous d’appuyer sur le bouton Publier pour enregistrer vos modifications.
Maintenant, vous verrez une boîte de dialogue avec les shortcodes et d’autres informations. Copiez et collez simplement l’un de ces shortcodes dans la page ou le message où vous souhaitez afficher vos images côte à côte.
( Pour un tutoriel détaillé, découvrez comment créer une galerie d’images avec des vignettes dans WordPress.)
C’est tout! Voici un exemple de la façon dont vos images apparaîtront sur votre site Web:
Vous pouvez également utiliser Envira pour afficher des images de hauteurs variables les unes à côté des autres. Pour notre tutoriel à ce sujet, découvrez comment créer une galerie d’images de maçonnerie dans WordPress.
Nous espérons que cet article vous a aidé à apprendre à afficher des images WordPress les unes à côté des autres. Vous pouvez également consulter notre guide sur la création d’un curseur d’image pour vos galeries WordPress.
Si vous aimez cet article, suivez-nous sur Facebook et Twitter pour plus de tutoriels WordPress gratuits.
Utilisez WordPress et souhaitez obtenir Envira Gallery gratuitement?
Envira Gallery aide les photographes à créer de belles galeries de photos et de vidéos en quelques clics afin qu’ils puissent présenter et vendre leur travail.