WordPress vous permet d'ajouter des images à votre site de différentes manières. L'une des méthodes les plus efficaces consiste à ajouter des images en colonnes et en lignes. Cela vous permet de présenter vos images de manière organisée.

Dans cet article, nous allons vous montrer plusieurs façons d'afficher les images WordPress en colonnes et en rangées.

• Méthode 1 : Utilisation du bloc de colonnes (Meilleur pour un contrôle manuel complet et des mises en page personnalisées)
• Méthode 2 : Utilisation du bloc Galerie (Meilleur pour les grilles d'images simples avec un style minimal)
• Méthode 3 : Utilisation du bloc Galleryberg (Meilleur pour les mises en page avancées avec lightbox et personnalisation)
• Méthode 4 : Utilisation du plugin Tableberg (Idéal pour les grilles d'images structurées telles que les tableaux de prix, d'horaires ou de produits)

Créer de belles tables
Avec l'éditeur de blocs

Essai gratuit

Obtenir un Pro

Méthode 1 : Utilisation du bloc de colonnes

WordPress dispose d'un bloc de colonnes par défaut. Vous pouvez ajouter de nombreux autres blocs à l'intérieur de celui-ci, y compris le bloc image. Voici le guide.

Étape 01 : Ajouter le bloc Gutenberg Column

Trouver et ajouter le bloc Colonne en cliquant sur l'icône plus (+) de l'éditeur.

Sélectionnez le nombre de variations de colonnes que vous souhaitez ajouter au bloc de colonnes. Pour ce tutoriel, nous sélectionnerons la variation de colonne 50/50.

Étape 02 : ajouter le bloc d'images au bloc de colonnes

Comme nous l'avons dit, vous pouvez insérer d'autres blocs Gutenberg dans le bloc de la colonne. Maintenant, cliquez sur l'icône plus (+) dans la colonne. Rechercher et ajouter le bloc Image à elle.

Vous pouvez maintenant ajouter des images provenant de la médiathèque ou du disque local. Faites-le comme vous le souhaitez.

Étape 03 : Styliser le bloc d'images dans le bloc de colonnes

Vous pouvez voir que nous avons ajouté une image. Vous pouvez l'aligner au centre en utilisant l'option d'alignement de la barre d'outils. Redimensionnez l'image à l'aide de l'icône de cercle de bord. Enfin, vous pouvez la styliser davantage à l'aide des options de l'onglet Style.

De la même manière, ajoutez une image dans l'autre colonne.

Méthode 2 : Utilisation du bloc de la galerie

WordPress dispose d'un bloc Galerie par défaut qui vous permet d'ajouter plusieurs images dans le même bloc.

Étape 01 : Ajouter le bloc de la galerie

Comme dans la méthode précédente, il faut trouver et ajouter le bloc Galerie à l'éditeur.

Vous serez autorisé à télécharger des images à partir de votre lecteur local ou le Bibliothèque des médias. Dans ce tutoriel, nous allons télécharger des images à partir de la bibliothèque multimédia.

Étape 02 : Sélectionner et télécharger les images

Sélectionner les images que vous souhaitez télécharger dans le bloc Galerie. Vous pouvez sélectionner autant d'images que vous le souhaitez. Une fois que vous avez terminé, cliquez sur le bouton Créer une nouvelle galerie.

Vous pouvez ajouter des légendes pour chaque image si vous le souhaitez. Il n'y a pas de problème si vous n'ajoutez rien. Appuyez sur le bouton Bouton d'insertion d'une galerie à la fin.

Vous pouvez voir que des images ont été ajoutées à la galerie. Ensuite, vous pouvez personnaliser le bloc Image en utilisant les options de l'onglet Paramètres et Onglet Styles sur la barre latérale droite.

J'espère que vous pouvez le faire seul, je n'entrerai donc pas dans les détails.

Méthode 3 : Utilisation du plugin Galleryberg

Si vous recherchez un moyen plus souple et plus élégant d'afficher des images en colonnes ou en lignes, la fonction Galleryberg est un choix fantastique. Il s'agit d'un plugin de bloc de galerie natif de Gutenberg qui vous donne plusieurs options de mise en page - y compris Tiles, Masonry, Justified, et Square - tous avec des fonctions intégrées de boîte à lumière le soutien.

Étape 1 : Installer le plugin Galleryberg

Allez dans votre tableau de bord WordPress et naviguez vers Plugins > Ajouter un nouveau. Ensuite, recherchez "Galleryberg" et installez et activez le plugin.

Étape 2 : Ajouter le bloc Galleryberg

Ouvrez la page ou l'article dans lequel vous souhaitez afficher les images. Cliquez ensuite sur l'icône + et rechercher la mention "Galleryberg". Ajoutez-le à la page.

Étape 3 : Télécharger ou sélectionner des images

Utilisez la bibliothèque de médias ou téléchargez de nouvelles images. Vous pouvez réorganiser les images par glisser-déposer.

Étape 4 : Choisir une mise en page

Dans le panneau des paramètres du bloc, sélectionnez la mise en page souhaitée :

• Carreaux: Grille avec un espacement égal (idéal pour les lignes et les colonnes)
• Maçonnerie: Mise en page superposée à la manière de Pinterest
• Justifié: Des rangées bien alignées et de même hauteur
• Carré: Des carrés parfaits pour un affichage uniforme de la grille

Étape 5 : Activer l'option Lightbox

Dans la barre latérale des paramètres du bloc, activez l'option Activer la boîte à lumière option.

Vos images s'ouvriront désormais dans une fenêtre contextuelle avec des transitions fluides, des effets de zoom et une navigation par diapositives.

Étape 5 : Personnaliser et publier

• Définir le nombre de colonnes (de 1 à 8)Dans la barre latérale des paramètres du bloc, faites défiler vers le bas jusqu'à l'option Boîte à lumière section.
• Basculer le Activer la boîte à lumière option.
• Vos images s'ouvriront désormais dans une fenêtre contextuelle avec des transitions fluides, des effets de zoom et une navigation par diapositives.
• Ajuster l'espacement, les légendes, les bordures, etc.
• Activer la boîte à lumière pour des aperçus d'images interactives

Cliquez sur Publier ou Mise à jour et votre galerie apparaîtra dans des lignes et des colonnes propres et réactives.

Méthode 4 : Utilisation du plugin Tableberg

TableBerg est un plugin de construction de tableaux facile à utiliser. Il vous permet d'ajouter différents blocs personnalisés aux cellules du tableau pour créer des tableaux multifonctionnels. Dans cette section, nous vous montrerons comment ajouter des images dans WordPress en utilisant le plugin Tableberg plugin.

Étape 01 : Installer et activer le plugin Tableberg

Aller à Plugins > Ajouter un nouveau plugin. Type Tableberg dans la boîte de recherche. Installer et activer une fois que le plugin apparaît ci-dessous.

Étape 02 : Ajouter le bloc Tableberg à votre article ou page

Le plugin est livré avec un bloc Gutenberg nommé TableBerg. Trouvez et ajoutez le bloc Bloc TabelBerg à votre éditeur.

Définissez les numéros de ligne et de colonne du tableau. Le processus est similaire au bloc de tableau par défaut. Faites-le vous-même.

Étape 03 : Recherche et ajout du bloc d'images au tableau

J'espère que votre tableau est prêt. Sélectionnez la cellule dans laquelle vous souhaitez ajouter une image. Une fois que vous avez sélectionné une cellule, le bouton icône plus (+) apparaîtra.

Cliquez sur l'icône plus (+). Vous obtiendrez le bloc d'images. Cliquez sur le bloc Image.

Vous aurez la possibilité de télécharger des images à partir du disque local ou de la médiathèque. Cliquez sur l'option de votre choix et téléchargez l'image.

Étape 04 : Styliser l'image téléchargée

Si tout va bien, votre image est déjà téléchargée dans la table. Passez à l'onglet Styles dans la barre latérale droite. Vous y trouverez des options telles que Duotone, Border et Radius pour styliser votre bloc Image.

Ainsi, vous pouvez télécharger des images dans la table WordPress avec le plugin. Explorer Comment créer une section pour les membres de l'équipe dans WordPress en utilisant le bloc de colonnes.

Dernières remarques !

Pour gérer un site web avec succès, vous devez télécharger et présenter votre contenu de différentes manières. Parfois, le même contenu doit être présenté de différentes manières dans différents articles et pages. Il en va de même pour le bloc d'images.

Nous espérons qu'après avoir lu ce tutoriel, vous serez en mesure d'ajouter votre bloc d'images de différentes manières dans WordPress et d'apporter des variations au contenu.

<p>The post How to Display WordPress Images in Columns & Rows first appeared on Tableberg.</p>

Les images sont l'un de ces contenus graphiques importants. De nombreux utilisateurs ne savent pas encore comment ajouter des images aux tableaux WordPress. Mais en ajoutant des images au tableau, vous pouvez facilement créer différents types de tableaux tels que comparaison, spécification du produit, tableaux de tarification, etc.

Dans cet article, nous allons vous montrer deux méthodes simples pour ajouter une image à un tableau dans WordPress. Commençons par le commencement !

• Méthode 1 : Utilisation du bloc de tableaux par défaut
• Méthode 2: Utilisation du bloc Tableberg

Créer de belles tables
Avec l'éditeur de blocs

Essai gratuit

Obtenir un Pro

Méthode 1 : Utilisation du bloc de tableaux par défaut

La valeur par défaut Éditeur de blocs Gutenberg dispose de l'option Inline Image que vous trouverez dans la barre d'outils. L'utilisation de l'option Option d'image en ligneVous pouvez facilement ajouter des images à vos tableaux WordPress.

Voici comment procéder.

Étape 1 : Ajouter le bloc tableau à l'éditeur

Ouvrez un article ou une page où vous souhaitez ajouter le tableau. Ajoutez le tableau Bloc de table à l'éditeur.

Définir le nombre de lignes et de colonnes.

La table sera créée dans quelques secondes.

Étape 2 : Utiliser l'option "Inline Image" pour le tableau

Placez votre curseur sur la cellule où vous souhaitez ajouter une image. La barre d'outils s'affiche.

Cliquez sur le bouton Plus d'options dans la barre d'outils. Recherchez et cliquez sur Image en ligne sur la liste.

Étape 3 : Sélectionner et ajouter une image

Vous pourrez ajouter une image, soit à partir de la bibliothèque multimédia, soit en la téléchargeant à partir de votre disque local. Choisissez l'image que vous souhaitez. Cliquez sur l'icône Bouton de sélection à la fin.

L'image sera ajoutée dans une seconde. Vous pouvez maintenant augmenter sa taille en modifiant sa largeur.

De même, ajoutez une nouvelle image à l'autre colonne en utilisant la même option Inline Image.

Méthode 2 : Utilisation du bloc Tableberg

Tableberg est un plugin de construction de tableaux riche en fonctionnalités et convivial pour les débutants. Avec ce plugin, vous pouvez également construire des tableaux et ajouter des images à leurs cellules. Nous avons expliqué le processus ci-dessous.

Note: Assurez-vous que vous avez installé et activé le plugin Tableberg.

Étape 01 : Ajouter le bloc Tableberg à l'éditeur

Recherchez et ajoutez le Bloc Tableberg dans l'éditeur. Le bloc fonctionne de la même manière que le bloc Table par défaut, comme indiqué ci-dessus.

Définir le numéro de la ligne et de la colonne.

Le plan du tableau est prêt.

Étape 2 : Ajouter le bloc d'images au tableau

Tableberg comprend Bloc d'images. Son fonctionnement est similaire à celui de la fonction Bloc d'images Gutenberg. Ajoutez le bloc Image à la cellule.

Sélectionnez l'option permettant de télécharger l'image souhaitée à partir de la source correspondante. Pour ce tutoriel, nous téléchargerons l'image à partir de la bibliothèque multimédia.

Étape 3 : Sélectionner et télécharger une image

J'espère que vous savez ce que vous devez faire ici. Choisissez une image et cliquez sur le bouton Bouton de sélection.

L'image sera instantanément ajoutée au tableau. Vous pouvez modifier la taille de l'image en faisant glisser la ligne de bordure, comme indiqué dans l'image ci-dessous.

Étape 4 : Personnaliser et styliser l'image

Venez au Onglet Paramètres dans la barre latérale droite. Vous pouvez ajouter un texte alternatif, un rapport d'aspect, une largeur, une hauteur et une résolution, ce qui n'est pas possible avec l'option Inline Image.

Aller à la page Onglet Styles. Vous pouvez ajouter une bordure et un rayon de bordure en utilisant les options de cet onglet.

Ainsi, vous pouvez ajouter des images au tableau dans WordPress.

Notes de fin d'année !

Bien que TableBerg soit un nouveau plugin, il va changer la donne. Il va très bientôt faire passer l'expérience de construction de tableaux basée sur Gutenberg à un niveau supérieur.

Avec le plugin TableBerg, vous pouvez ajouter non seulement des images mais aussi d'autres types de contenu comme des rubans, des classements, des listes à puces, des boutons CTA, du HTML personnalisé, etc.

En les utilisant, vous pouvez créer des tableaux multifonctionnels avec le plugin. Voir quelques articles :

• Comment afficher les images WordPress en colonnes et en lignes
• Comment essayer TableBerg sans l'installer sur votre site
• Comment créer un tableau de comparaison des produits
• Comment créer un tableau de spécification des produits

<p>The post How to Add an Image to a Table in WordPress first appeared on Tableberg.</p>