{"id":1018,"date":"2025-01-27T10:22:22","date_gmt":"2025-01-27T10:22:22","guid":{"rendered":"https:\/\/tableberg.com\/?p=1018"},"modified":"2025-01-27T10:22:25","modified_gmt":"2025-01-27T10:22:25","slug":"comment-mettre-des-images-cote-a-cote-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-put-images-side-by-side-in-wordpress\/","title":{"rendered":"Comment mettre des images c\u00f4te \u00e0 c\u00f4te dans WordPress (trois fa\u00e7ons)"},"content":{"rendered":"<p>Le contenu visuel joue un r\u00f4le crucial pour capter l'attention des utilisateurs en ligne. Ce qu'une simple image peut transmettre n\u00e9cessite souvent des centaines de mots. En outre, les images peuvent susciter des \u00e9motions et am\u00e9liorer l'esth\u00e9tique g\u00e9n\u00e9rale.<\/p>\n\n\n\n<p>Une fa\u00e7on efficace de mettre en valeur les images est de les placer c\u00f4te \u00e0 c\u00f4te. Cette technique est particuli\u00e8rement utile pour comparer plusieurs produits, pr\u00e9senter des images avant et apr\u00e8s et raconter une histoire.<\/p>\n\n\n\n<p>Dans cet article, nous allons vous montrer trois fa\u00e7ons simples de placer des images c\u00f4te \u00e0 c\u00f4te dans WordPress.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>M\u00e9thode 1<\/strong>: <a href=\"#0-method-one-using-the-gallery-block\">Utilisation du bloc Galerie <\/a><\/li>\n\n\n\n<li><strong>M\u00e9thode 2<\/strong>: <a href=\"#2-method-two-using-the-columns-block\">Utilisation du bloc des colonnes<\/a><\/li>\n\n\n\n<li><strong>M\u00e9thode 3<\/strong>: <a href=\"#4-method-three-using-the-tableberg-block\">Utilisation du bloc Tableberg<\/a><\/li>\n<\/ul>\n\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Cr\u00e9er de belles tables <\/strong><br><strong>Avec l'\u00e9diteur de blocs<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Essai gratuit<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/fr\/la-tarification\/\" target=\"_blank\" rel=\"noreferrer noopener\">Obtenir un Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-one-using-the-gallery-block\">Premi\u00e8re m\u00e9thode : utiliser le bloc de la galerie<\/h2>\n\n\n\n<p>WordPress est livr\u00e9 avec le bloc Galerie par d\u00e9faut. Vous pouvez pr\u00e9senter des images c\u00f4te \u00e0 c\u00f4te avec le bloc de la mani\u00e8re suivante. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-01-add-the-gallery-block-to-wordpress\">\u00c9tape 01 : Ajouter le bloc de galerie \u00e0 WordPress<\/h3>\n\n\n\n<p>Ouvrez simplement un message ou une page. Trouvez l'ic\u00f4ne <strong><a href=\"https:\/\/tableberg.com\/fr\/comment-utiliser-le-bloc-de-galerie-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloc de galeries<\/a><\/strong> dans la biblioth\u00e8que de blocs Gutenberg en appuyant sur la touche <strong>bouton plus (+)<\/strong>. Ajoutez-le \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress.webp\" alt=\"Trouver et ajouter le bloc Gutenberg Gallery \u00e0 WordPress\" class=\"wp-image-1019\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Find-and-add-the-Gutenberg-Gallery-block-to-WordPress-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Cliquez sur le bouton <strong>Bouton de t\u00e9l\u00e9chargement<\/strong> pour ajouter sur le c\u00f4t\u00e9 des images fra\u00eeches provenant de votre espace de stockage local. Vous pouvez \u00e9galement les t\u00e9l\u00e9charger \u00e0 partir de vos fichiers existants en cliquant sur le bouton <strong>Biblioth\u00e8que des m\u00e9dias<\/strong> bouton.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library.webp\" alt=\"T\u00e9l\u00e9chargement d&#039;images \u00e0 partir d&#039;un espace de stockage local ou d&#039;une m\u00e9diath\u00e8que\" class=\"wp-image-1020\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-images-from-local-storage-or-media-library-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Pour ce tutoriel, nous allons t\u00e9l\u00e9charger des images \u00e0 partir de la biblioth\u00e8que multim\u00e9dia. S\u00e9lectionnez les images que vous souhaitez ajouter. Appuyez sur le bouton <strong>Cr\u00e9er une nouvelle galerie<\/strong> \u00e0 la fin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery.webp\" alt=\"Cr\u00e9er une nouvelle galerie\" class=\"wp-image-1021\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Create-a-new-gallery-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Une fois les images ajout\u00e9es \u00e0 l'\u00e9diteur, vous les verrez appara\u00eetre c\u00f4te \u00e0 c\u00f4te. Vous pouvez ensuite personnaliser les param\u00e8tres et les styles du bloc Galerie en utilisant les options correspondantes dans la barre lat\u00e9rale droite. <\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block.webp\" alt=\"Images affich\u00e9es c\u00f4te \u00e0 c\u00f4te \u00e0 l&#039;aide du bloc Gutenberg Gallery\" class=\"wp-image-1024\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-usign-the-Gutenberg-Gallery-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><strong>Remarque :<\/strong> Si vos images ne sont pas affich\u00e9es c\u00f4te \u00e0 c\u00f4te par d\u00e9faut, s\u00e9lectionnez le bloc entier en cliquant sur le bouton <strong>Ic\u00f4ne de la galerie<\/strong> dans la barre d'outils. Sp\u00e9cifiez les num\u00e9ros de colonne dans la barre lat\u00e9rale droite.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block.webp\" alt=\"D\u00e9finir le num\u00e9ro de colonne pour le bloc de la galerie\" class=\"wp-image-1025\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Set-columns-for-the-Gallery-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"2-method-two-using-the-columns-block\">Deuxi\u00e8me m\u00e9thode : utilisation du bloc des colonnes<\/h2>\n\n\n\n<p>Le bloc Colonne vous permet de <a href=\"https:\/\/tableberg.com\/fr\/comment-diviser-le-contenu-de-wordpress-en-deux-colonnes-ou-plus\/\" target=\"_blank\" rel=\"noreferrer noopener\">diviser votre contenu en plusieurs colonnes<\/a>. Vous pouvez ajouter d'autres blocs pour ajouter diff\u00e9rents types de contenu dans chaque colonne.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-01-add-the-column-block-to-your-site\">\u00c9tape 01 : Ajouter le bloc de colonnes \u00e0 votre site<\/h3>\n\n\n\n<p>Ajouter le <strong><a href=\"https:\/\/tableberg.com\/fr\/comment-creer-des-colonnes-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloc de colonnes<\/a><\/strong> \u00e0 votre \u00e9diteur en suivant la m\u00eame m\u00e9thode que celle d\u00e9crite ci-dessus.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp\" alt=\"Ajouter le bloc de colonnes \u00e0 votre site\" class=\"wp-image-435\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>S\u00e9lectionnez la disposition des colonnes comme vous le souhaitez. Vous pouvez afficher un nombre \u00e9gal d'images c\u00f4te \u00e0 c\u00f4te, correspondant au nombre de colonnes que vous ajoutez. Nous avons s\u00e9lectionn\u00e9 la disposition en deux colonnes pour le bloc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout.webp\" alt=\"S\u00e9lectionner une disposition de colonnes\" class=\"wp-image-436\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Select-the-column-layout-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ajouter le <strong><a href=\"https:\/\/tableberg.com\/fr\/comment-utiliser-le-bloc-dimages-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Bloc d'images<\/a><\/strong> en appuyant sur la touche <strong>bouton plus (+)<\/strong> au sein de la <strong>Bloc de colonnes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block.webp\" alt=\"Ajouter le bloc Image au bloc Colonne\" class=\"wp-image-1027\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-Image-block-to-the-Column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>T\u00e9l\u00e9chargez une image de la m\u00eame mani\u00e8re que nous vous l'avons montr\u00e9 ci-dessus.<\/p>\n\n\n\n<p><strong>Remarque :<\/strong> Comme il s'agit du bloc Image, vous pouvez <strong>ajouter une seule image<\/strong>contrairement au bloc Galerie.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above.webp\" alt=\"T\u00e9l\u00e9charger l&#039;image dans le bloc de colonnes \" class=\"wp-image-1028\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-column-block-the-same-way-we-showed-you-above-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>De la m\u00eame mani\u00e8re, ajoutez le <strong>Bloc d'images<\/strong> \u00e0 la deuxi\u00e8me colonne.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla.webp\" alt=\"Ajouter plusieurs images au bloc de colonnes\" class=\"wp-image-1029\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/SCR-20240331-npla-768x391.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que la deuxi\u00e8me image est apparue \u00e0 c\u00f4t\u00e9 de la premi\u00e8re. Vous pouvez maintenant ajouter des textes alternatifs et d'autres param\u00e8tres pour les images une par une.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block.webp\" alt=\"Plusieurs images sont affich\u00e9es \u00e0 l&#039;aide du bloc de colonnes\" class=\"wp-image-1030\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Multiple-images-are-displayed-using-the-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"4-method-three-using-the-tableberg-block\">Troisi\u00e8me m\u00e9thode : Utiliser le bloc Tableberg<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" data-type=\"link\" data-id=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tableberg<\/a> est un plugin de construction de tableaux bas\u00e9 sur des blocs. Il vous permet de cr\u00e9er des colonnes et d'afficher des images c\u00f4te \u00e0 c\u00f4te. Suivez les \u00e9tapes expliqu\u00e9es ci-dessous apr\u00e8s <strong>en installant<\/strong> et <strong>activant<\/strong> le plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1874\" height=\"604\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg.png\" alt=\"Installer et activer le plugin TableBerg\" class=\"wp-image-420\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg.png 1874w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-300x97.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-1024x330.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-768x248.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Tableberg-1536x495.png 1536w\" sizes=\"auto, (max-width: 1874px) 100vw, 1874px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-01-add-the-tableberg-block\">\u00c9tape 01 : Ajouter le bloc TableBerg<\/h3>\n\n\n\n<p>Le plugin est livr\u00e9 avec un <strong>Bloc TableBerg<\/strong>. Ajoutez-le \u00e0 votre \u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post.png\" alt=\"Ajoutez le bloc TableBerg \u00e0 votre article ou \u00e0 votre page\" class=\"wp-image-175\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-TableBerg-block-to-your-page-or-post-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez s\u00e9lectionner plusieurs lignes si vous le souhaitez. Mais nous expliquerons le tutoriel d'aujourd'hui avec une seule ligne et plusieurs colonnes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp\" alt=\"S\u00e9lectionner une ligne et des colonnes pour le tableau\" class=\"wp-image-1031\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>TableBerg vous permet d'ajouter diff\u00e9rents types de blocs aux cellules du tableau. Ajouter le bloc <strong>Bloc d'images<\/strong> aux cellules du tableau.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells.webp\" alt=\"Ajouter le bloc d&#039;images aux cellules de TableBerg\" class=\"wp-image-1032\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Add-the-image-block-to-the-TableBerg-cells-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p><strong>T\u00e9l\u00e9charger une image<\/strong> \u00e0 la cellule du tableau de la m\u00eame mani\u00e8re que nous vous l'avons montr\u00e9 dans les deux m\u00e9thodes pr\u00e9c\u00e9dentes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table.webp\" alt=\"T\u00e9l\u00e9charger l&#039;image dans le tableau\" class=\"wp-image-1033\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Upload-image-to-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Continuez \u00e0 ajouter des images \u00e0 d'autres colonnes du tableau \u00e0 l'aide de la fonction <strong>Bloc d'images<\/strong>. J'esp\u00e8re que vous y parviendrez seul.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table.webp\" alt=\"Continuez \u00e0 ajouter des images aux autres colonnes du tableau\" class=\"wp-image-1034\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Keep-adding-images-to-other-columns-of-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Voir l'image ci-dessous. Nous avons affich\u00e9 trois images c\u00f4te \u00e0 c\u00f4te dans le tableau cr\u00e9\u00e9 avec le bloc TableBerg.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table.png\" alt=\"Images affich\u00e9es c\u00f4te \u00e0 c\u00f4te avec la table TableBerg\" class=\"wp-image-1035\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Images-displayed-side-by-side-with-the-TableBerg-table-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p class=\"has-medium-font-size\"><strong># Supprimer le bord du tableau<\/strong><\/p>\n\n\n\n<p>Vous pouvez voir une bordure autour de la table. Pour l'enlever, <strong>cliquez sur l'ic\u00f4ne TableBerg<\/strong> trois fois dans la barre d'outils. Aller \u00e0 <strong>Onglet Styles &gt; Bordure<\/strong> sur la barre lat\u00e9rale droite. Mettez le <strong>valeur z\u00e9ro (0)<\/strong> pour d\u00e9finir la taille de la bordure du tableau.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border.webp\" alt=\"Supprimer la bordure du tableau\" class=\"wp-image-1036\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Remove-the-table-border-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez ainsi afficher des images c\u00f4te \u00e0 c\u00f4te sur les sites web WordPress.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity is-style-separator-thin\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-conclusion\">Conclusion<\/h3>\n\n\n\n<p>L'affichage d'images c\u00f4te \u00e0 c\u00f4te est tr\u00e8s avantageux, tandis que la comparaison visuelle entre diff\u00e9rents produits, options, caract\u00e9ristiques et variantes est essentielle. J'esp\u00e8re que vous pourrez le faire seul aujourd'hui gr\u00e2ce \u00e0 ce tutoriel.<\/p>\n\n\n\n<p>Vous pouvez faire plus sur votre site en cr\u00e9ant diff\u00e9rents types de tableaux \u00e0 l'aide du plugin TableBerg. Jetez un coup d'\u0153il \u00e0 <a href=\"https:\/\/tableberg.com\/fr\/comment-creer-un-tableau-de-comparaison-des-produits-amazon-dans-wordpress\/\" data-type=\"link\" data-id=\"https:\/\/tableberg.com\/how-to-create-amazon-product-comparison-table-in-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment cr\u00e9er un tableau de comparaison des produits Amazon dans WordPress<\/a>.<\/p>","protected":false},"excerpt":{"rendered":"<p>Visual content plays a crucial role in capturing the attention of online users. What a single image can convey often requires hundreds of words. Besides, images can evoke emotions and enhance the overall aesthetics. One effective way to showcase images is by placing them side by side. This technique is particularly helpful in comparing multiple [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":7127,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[42,41,9],"class_list":["post-1018","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-column-block","tag-image-block","tag-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/How-to-Put-Images-Side-by-Side-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/fr\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1018","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=1018"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1018\/revisions"}],"predecessor-version":[{"id":7129,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1018\/revisions\/7129"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/7127"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=1018"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=1018"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=1018"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}