<?xml version="1.0" encoding="UTF-8"?><rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Image Block &#8211; Tableberg</title>
	<atom:link href="https://tableberg.com/fr/tag/image-block/feed/" rel="self" type="application/rss+xml" />
	<link>https://tableberg.com/fr</link>
	<description></description>
	<lastbuilddate>Thu, 31 Jul 2025 08:22:00 +0000</lastbuilddate>
	<language>fr-FR</language>
	<sy:updateperiod>
	horaire	</sy:updateperiod>
	<sy:updatefrequency>
	1	</sy:updatefrequency>
	<generator>https://wordpress.org/?v=7.0</generator>

<image>
	<url>https://tableberg.com/wp-content/uploads/2023/12/Tableberg-150x150.png</url>
	<title>Image Block &#8211; Tableberg</title>
	<link>https://tableberg.com/fr</link>
	<width>32</width>
	<height>32</height>
</image> 
	<item>
		<title>Comment afficher les images WordPress en colonnes et en lignes</title>
		<link>https://tableberg.com/fr/comment-afficher-les-images-wordpress-en-colonnes-lignes/</link>
		
		<dc:creator><![CDATA[Istiak Rayhan]]></dc:creator>
		<pubdate>Thu, 31 Jul 2025 08:21:57 +0000</pubdate>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Column Block]]></category>
		<category><![CDATA[How to Add Images]]></category>
		<category><![CDATA[Image Block]]></category>
		<guid ispermalink="false">https://tableberg.com/?p=2022</guid>

					<description><![CDATA[<p>Ce n'est plus un secret pour personne : le contenu visuel, comme les images, joue un rôle important dans la transmission de concepts et de récits. Le contenu textuel seul ne parvient pas toujours à captiver les lecteurs. C'est pourquoi il est devenu obligatoire d'incorporer des images pertinentes dans les articles de blog et les pages. WordPress vous permet d'ajouter des images à votre site de plusieurs façons. L'une d'entre elles [...]</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-afficher-les-images-wordpress-en-colonnes-lignes/">How to Display WordPress Images in Columns &amp; Rows</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">Ce n'est plus un secret pour personne : le contenu visuel, comme les images, joue un rôle important dans la transmission de concepts et de récits. Le contenu textuel seul ne parvient pas toujours à captiver les lecteurs. C'est pourquoi l'intégration d'images pertinentes dans les articles de blog et les pages est devenue obligatoire.</p>



<p class="wp-block-paragraph">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.</p>



<p class="wp-block-paragraph">Dans cet article, nous allons vous montrer plusieurs façons d'afficher les images WordPress en colonnes et en rangées.</p>



<ul class="wp-block-list">
<li>Méthode 1 : <a href="#Display-Images-in-WordPress-Using-the-Column-Block">Utilisation du bloc de colonnes</a> (Meilleur pour un contrôle manuel complet et des mises en page personnalisées)</li>



<li>Méthode 2 : <a href="#Display-Images-in-WordPress-Using-the-Gallery-Block">Utilisation du bloc Galerie</a> (<em>Meilleur pour les grilles d'images simples avec un style minimal)</em></li>



<li>Méthode 3 : <a href="#Using-the-Galleryberg-Block">Utilisation du bloc Galleryberg</a> (Meilleur pour les mises en page avancées avec lightbox et personnalisation)</li>



<li>Méthode 4 : <a href="#Display-Images-in-WordPress-Using-the-TableBerg-Plugin">Utilisation du plugin Tableberg</a> (Idéal pour les grilles d'images structurées telles que les tableaux de prix, d'horaires ou de produits)</li>
</ul>



<div class="wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-03d57942 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)">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8d39b2df wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-b7737a6c wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<p class="wp-block-paragraph" style="font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);"><strong>Créer de belles tables </strong><br><strong>Avec l'éditeur de blocs</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2cc807e2 wp-block-buttons-is-layout-flex">
<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>



<div class="wp-block-button is-style-outline is-style-outline--3"><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>
</div>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<figure class="wp-block-image size-full"><img fetchpriority="high" 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="(max-width: 540px) 100vw, 540px" /></figure>
</div>
</div>
</div>



<h2 class="wp-block-heading" id="Display-Images-in-WordPress-Using-the-Column-Block">Méthode 1 : Utilisation du bloc de colonnes</h2>



<p class="wp-block-paragraph">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.</p>



<h3 class="wp-block-heading">Étape 01 : Ajouter le bloc Gutenberg Column</h3>



<p class="wp-block-paragraph">Trouver et <strong>ajouter le bloc Colonne</strong> en cliquant sur l'icône plus (+) de l'éditeur.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img 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 Gutenberg Column" 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="(max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img decoding="async" width="1280" height="653" src="https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block.webp" alt="Sélectionnez le nombre de colonnes pour le bloc de colonnes" class="wp-image-2023" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Select-the-number-of-columns-for-the-column-block-18x9.webp 18w" sizes="(max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 02 : ajouter le bloc d'images au bloc de colonnes</h3>



<p class="wp-block-paragraph">Comme nous l'avons dit, vous pouvez insérer d'autres blocs Gutenberg dans le bloc de la colonne. Maintenant, <strong>cliquez sur l'icône plus (+)</strong> dans la colonne. Rechercher et <strong>ajouter le bloc Image</strong> à elle.</p>



<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/07/Add-the-Image-Block-into-the-Column-Block.webp" alt="Ajouter le bloc d&#039;images au bloc de colonnes" class="wp-image-2024" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-Block-into-the-Column-Block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-Block-into-the-Column-Block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-Block-into-the-Column-Block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-Block-into-the-Column-Block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-Block-into-the-Column-Block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Vous pouvez maintenant ajouter des images provenant de la médiathèque ou du disque local. Faites-le comme vous le souhaitez.</p>



<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/07/Upload-image-to-the-column-block.webp" alt="Télécharger l&#039;image dans le bloc de colonnes" class="wp-image-2025" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Upload-image-to-the-column-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Upload-image-to-the-column-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Upload-image-to-the-column-block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Upload-image-to-the-column-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Upload-image-to-the-column-block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 03 : Styliser le bloc d'images dans le bloc de colonnes</h3>



<p class="wp-block-paragraph">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.</p>



<figure class="wp-block-gallery has-nested-images columns-default is-cropped wp-block-gallery-4 is-layout-flex wp-block-gallery-is-layout-flex">
<figure class="wp-block-image size-large"><img loading="lazy" decoding="async" width="1024" height="569" data-id="10296" src="https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1024x569.png" alt="" class="wp-image-10296" srcset="https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1024x569.png 1024w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-300x167.png 300w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-768x427.png 768w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1536x854.png 1536w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-2048x1139.png 2048w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-18x10.png 18w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<figure class="wp-block-image size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="522" data-id="2026" src="https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block-1024x522.webp" alt="Styliser le bloc image dans le bloc colonne" class="wp-image-2026" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block-18x9.webp 18w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Image-Block-within-the-Column-Block.webp 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>
</figure>



<p class="wp-block-paragraph">De la même manière, ajoutez une image dans l'autre colonne.</p>



<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/07/Add-image-to-the-other-column.webp" alt="Ajouter une image à l&#039;autre colonne" class="wp-image-2027" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Add-image-to-the-other-column.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Add-image-to-the-other-column-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Add-image-to-the-other-column-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Add-image-to-the-other-column-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Add-image-to-the-other-column-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_69850fb3-2d43-4c4c-b26c-9fe74710be94"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div>



<h2 class="wp-block-heading" id="Display-Images-in-WordPress-Using-the-Gallery-Block">Méthode 2 : Utilisation du bloc de la galerie</h2>



<p class="wp-block-paragraph">WordPress dispose d'un bloc Galerie par défaut qui vous permet d'ajouter plusieurs images dans le même bloc.</p>



<h3 class="wp-block-heading">Étape 01 : Ajouter le bloc de la galerie</h3>



<p class="wp-block-paragraph">Comme dans la méthode précédente, il faut trouver et <strong>ajouter le bloc Galerie à l'éditeur</strong>.</p>



<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="Ajouter le bloc Galerie" 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>



<p class="wp-block-paragraph">Vous serez autorisé à télécharger des images à partir de votre <strong>lecteur local</strong> ou le <strong>Bibliothèque des médias</strong>. Dans ce tutoriel, nous allons télécharger des images à partir de la bibliothèque multimédia. </p>



<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élécharger des images" 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>



<h3 class="wp-block-heading">Étape 02 : Sélectionner et télécharger les images</h3>



<p class="wp-block-paragraph"><strong>Sélectionner les images</strong> 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é, <strong>cliquez sur le bouton Créer une nouvelle galerie</strong>.</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1280" height="653" src="https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block.webp" alt="Sélectionner des images pour le bloc Galerie" class="wp-image-2037" srcset="https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Select-images-for-the-Gallery-block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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 <strong>Bouton d'insertion d'une galerie</strong> à la fin.</p>



<figure class="wp-block-image aligncenter size-full"><img loading="lazy" decoding="async" width="1280" height="653" src="https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery.webp" alt="Insérer une galerie" class="wp-image-2038" srcset="https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Insert-gallery-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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 <strong>Paramètres</strong> et <strong>Onglet Styles</strong> sur la barre latérale droite. </p>



<p class="wp-block-paragraph">J'espère que vous pouvez le faire seul, je n'entrerai donc pas dans les détails.</p>



<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/07/Images-added-to-the-Gallery.webp" alt="Images ajoutées à la galerie" class="wp-image-2039" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Images-added-to-the-Gallery.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Images-added-to-the-Gallery-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Images-added-to-the-Gallery-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Images-added-to-the-Gallery-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Images-added-to-the-Gallery-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_58fca9c6-3f29-42e8-8faf-ea5be1cfa98f"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div>



<h2 class="wp-block-heading" id="Using-the-Galleryberg-Block">Méthode 3 : Utilisation du plugin Galleryberg</h2>



<p class="wp-block-paragraph">Si vous recherchez un moyen plus souple et plus élégant d'afficher des images en colonnes ou en lignes, la fonction <strong><a href="https://galleryberg.com" target="_blank" rel="noreferrer noopener">Galleryberg</a></strong> est un choix fantastique. Il s'agit d'un plugin de bloc de galerie natif de Gutenberg qui vous donne <strong>plusieurs options de mise en page</strong> - y compris Tiles, Masonry, Justified, et Square - tous avec des fonctions intégrées de <strong>boîte à lumière</strong> le soutien.</p>



<h3 class="wp-block-heading">Étape 1 : Installer le plugin Galleryberg</h3>



<p class="wp-block-paragraph">Allez dans votre tableau de bord WordPress et naviguez vers <strong>Plugins &gt; Ajouter un nouveau</strong>. Ensuite, recherchez "Galleryberg" et installez et activez le plugin.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="520" src="https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-1024x520.png" alt="" class="wp-image-10294" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-1024x520.png 1024w, https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-300x152.png 300w, https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-768x390.png 768w, https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-1536x779.png 1536w, https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-2048x1039.png 2048w, https://tableberg.com/wp-content/uploads/2025/02/Installing-the-Galleryberg-Plugin-18x9.png 18w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Étape 2 : Ajouter le bloc Galleryberg</h3>



<p class="wp-block-paragraph">Ouvrez la page ou l'article dans lequel vous souhaitez afficher les images. Cliquez ensuite sur l'icône <strong>+</strong> et rechercher la mention "<strong>Galleryberg</strong>". Ajoutez-le à la page.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="569" src="https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-1024x569.png" alt="" class="wp-image-10297" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-1024x569.png 1024w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-300x167.png 300w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-768x427.png 768w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-1536x854.png 1536w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-2048x1139.png 2048w, https://tableberg.com/wp-content/uploads/2025/02/Inserting-the-Galleryberg-Block-1-18x10.png 18w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h4 class="wp-block-heading">Étape 3 : Télécharger ou sélectionner des images</h4>



<p class="wp-block-paragraph">Utilisez la bibliothèque de médias ou téléchargez de nouvelles images. Vous pouvez réorganiser les images par glisser-déposer.</p>


<div style="width: 100%" class="ub-advanced-video-container wp-block-ub-advanced-video" id="ub-advanced-video-7012e2e3-2b9f-4af2-924a-0ebbe824fa4a"><div class="ub-advanced-video-embed" style="box-shadow: 0px -0px 0px 0px rgba(0, 0, 0, 1); border-top: 1px solid ; border-left: 1px solid ; border-right: 1px solid ; border-bottom: 1px solid ; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; "><video controls loop width="undefined" height="undefined"><source src="https://tableberg.com/wp-content/uploads/2025/02/Adding-images-to-the-Gallery-using-Galleryberg.mp4"></source></video></div></div>


<h4 class="wp-block-heading">Étape 4 : Choisir une mise en page</h4>



<p class="wp-block-paragraph">Dans le panneau des paramètres du bloc, sélectionnez la mise en page souhaitée :</p>



<ul class="wp-block-list">
<li><strong>Carreaux</strong>: Grille avec un espacement égal (idéal pour les lignes et les colonnes)</li>



<li><strong>Maçonnerie</strong>: Mise en page superposée à la manière de Pinterest</li>



<li><strong>Justifié</strong>: Des rangées bien alignées et de même hauteur</li>



<li><strong>Carré</strong>: Des carrés parfaits pour un affichage uniforme de la grille</li>
</ul>


<div style="width: 100%" class="ub-advanced-video-container wp-block-ub-advanced-video" id="ub-advanced-video-b6a1e449-60d8-4ace-ad19-c6611f6b30e8"><div class="ub-advanced-video-embed" style="box-shadow: 0px -0px 0px 0px rgba(0, 0, 0, 1); border-top: 1px solid ; border-left: 1px solid ; border-right: 1px solid ; border-bottom: 1px solid ; border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-left-radius: 3px; border-bottom-right-radius: 3px; "><video muted loop autoplay controls width="undefined" height="undefined"><source src="https://tableberg.com/wp-content/uploads/2025/02/Gallery-Layout.mp4"></source></video></div></div>


<h3 class="wp-block-heading">Étape 5 : Activer l'option Lightbox</h3>



<p class="wp-block-paragraph">Dans la barre latérale des paramètres du bloc, activez l'option <strong>Activer la boîte à lumière</strong> option.</p>



<p class="wp-block-paragraph">Vos images s'ouvriront désormais dans une fenêtre contextuelle avec des transitions fluides, des effets de zoom et une navigation par diapositives.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="631" src="https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-1024x631.png" alt="" class="wp-image-10302" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-1024x631.png 1024w, https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-300x185.png 300w, https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-768x473.png 768w, https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-1536x946.png 1536w, https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-2048x1262.png 2048w, https://tableberg.com/wp-content/uploads/2025/02/Enable-the-Lightbox-Option-18x12.png 18w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Étape 5 : Personnaliser et publier</h3>



<ul class="wp-block-list">
<li>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 <strong>Boîte à lumière</strong> section.</li>



<li>Basculer le <strong>Activer la boîte à lumière</strong> option.</li>



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



<li>Ajuster l'espacement, les légendes, les bordures, etc.</li>



<li>Activer la boîte à lumière pour des aperçus d'images interactives</li>
</ul>



<p class="wp-block-paragraph">Cliquez sur <strong>Publier</strong> ou <strong>Mise à jour</strong> et votre galerie apparaîtra dans des lignes et des colonnes propres et réactives.</p>


<div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_e9064da0-d81d-4d9b-ac16-d36fcf24cafd"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div>


<h2 class="wp-block-heading" id="Display-Images-in-WordPress-Using-the-TableBerg-Plugin">Méthode 4 : Utilisation du plugin Tableberg</h2>



<p class="wp-block-paragraph">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 <a href="https://wordpress.org/plugins/tableberg/" target="_blank" rel="noreferrer noopener">Tableberg</a> plugin.</p>



<h3 class="wp-block-heading">Étape 01 : Installer et activer le plugin Tableberg</h3>



<p class="wp-block-paragraph">Aller à <strong>Plugins &gt; Ajouter un nouveau plugin</strong>. Type <strong>Tableberg</strong> dans la boîte de recherche. <strong>Installer</strong> et <strong>activer</strong> une fois que le plugin apparaît ci-dessous.</p>



<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/Install-and-activate-the-TableBerg-plugin.png" alt="Installer et activer le plugin TableBerg" class="wp-image-156" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Install-and-activate-the-TableBerg-plugin.png 1280w, https://tableberg.com/wp-content/uploads/2024/01/Install-and-activate-the-TableBerg-plugin-300x153.png 300w, https://tableberg.com/wp-content/uploads/2024/01/Install-and-activate-the-TableBerg-plugin-1024x523.png 1024w, https://tableberg.com/wp-content/uploads/2024/01/Install-and-activate-the-TableBerg-plugin-768x392.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 02 : Ajouter le bloc Tableberg à votre article ou page</h3>



<p class="wp-block-paragraph">Le plugin est livré avec un bloc Gutenberg nommé TableBerg. Trouvez et ajoutez le bloc <strong>Bloc TabelBerg</strong> à votre éditeur.</p>



<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/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp" alt="Trouvez et ajoutez le bloc TableBerg à votre éditeur Gutenberg." class="wp-image-481" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="522" src="https://tableberg.com/wp-content/uploads/2024/01/Set-the-row-and-column-number-1024x522.png" alt="Définir le numéro de la ligne et de la colonne" class="wp-image-176" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Set-the-row-and-column-number-1024x522.png 1024w, https://tableberg.com/wp-content/uploads/2024/01/Set-the-row-and-column-number-300x153.png 300w, https://tableberg.com/wp-content/uploads/2024/01/Set-the-row-and-column-number-768x392.png 768w, https://tableberg.com/wp-content/uploads/2024/01/Set-the-row-and-column-number.png 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Étape 03 : Recherche et ajout du bloc d'images au tableau</h3>



<p class="wp-block-paragraph">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 <strong>icône plus (+)</strong> apparaîtra.</p>



<p class="wp-block-paragraph"><strong>Cliquez sur l'icône plus (+)</strong>. Vous obtiendrez le bloc d'images. <strong>Cliquez sur le bloc Image</strong>.</p>



<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/07/Add-the-Image-block-to-the-table.png" alt="Ajouter le bloc Image au tableau" class="wp-image-2040" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-block-to-the-table.png 1280w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-block-to-the-table-300x153.png 300w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-block-to-the-table-1024x522.png 1024w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-block-to-the-table-768x392.png 768w, https://tableberg.com/wp-content/uploads/2024/07/Add-the-Image-block-to-the-table-18x9.png 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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.</p>



<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/07/Upload-an-image-to-the-block.webp" alt="Télécharger une image dans le bloc" class="wp-image-2041" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Upload-an-image-to-the-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Upload-an-image-to-the-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Upload-an-image-to-the-block-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Upload-an-image-to-the-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Upload-an-image-to-the-block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 04 : Styliser l'image téléchargée</h3>



<p class="wp-block-paragraph">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.</p>



<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/07/Stylize-the-Uploaded-Image.webp" alt="Styliser l&#039;image téléchargée" class="wp-image-2042" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Uploaded-Image.webp 1280w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Uploaded-Image-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Uploaded-Image-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Uploaded-Image-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/07/Stylize-the-Uploaded-Image-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Ainsi, vous pouvez télécharger des images dans la table WordPress avec le plugin. Explorer <a href="https://tableberg.com/fr/comment-creer-une-section-pour-les-membres-dune-equipe-dans-wordpress/" target="_blank" rel="noreferrer noopener">Comment créer une section pour les membres de l'équipe dans WordPress</a> en utilisant le bloc de colonnes.</p>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_4f6fde1a-4a3a-40a3-9a12-c816daa6407d"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div>



<h2 class="wp-block-heading">Dernières remarques !</h2>



<p class="wp-block-paragraph">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.</p>



<p class="wp-block-paragraph">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><p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-afficher-les-images-wordpress-en-colonnes-lignes/">How to Display WordPress Images in Columns &amp; Rows</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		<enclosure url="https://tableberg.com/wp-content/uploads/2025/02/Adding-images-to-the-Gallery-using-Galleryberg.mp4" length="2934692" type="video/mp4" />
<enclosure url="https://tableberg.com/wp-content/uploads/2025/02/Gallery-Layout.mp4" length="10706823" type="video/mp4" />

			</item>
		<item>
		<title>Comment ajouter une image à un tableau dans WordPress</title>
		<link>https://tableberg.com/fr/comment-ajouter-une-image-a-un-tableau-dans-wordpress/</link>
					<comments>https://tableberg.com/fr/comment-ajouter-une-image-a-un-tableau-dans-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Istiak Rayhan]]></dc:creator>
		<pubdate>Mon, 10 Feb 2025 15:05:10 +0000</pubdate>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[How to Add Images]]></category>
		<category><![CDATA[Image Block]]></category>
		<category><![CDATA[TableBerg]]></category>
		<guid ispermalink="false">https://tableberg.com/?p=1440</guid>

					<description><![CDATA[<p>Le contenu visuel est sans aucun doute essentiel pour susciter l'intérêt des utilisateurs. Que vous soyez blogueur, affilié, propriétaire d'un site de commerce électronique ou autre, vous pouvez avoir besoin d'ajouter du contenu graphique pour diverses raisons. 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 [...]</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-ajouter-une-image-a-un-tableau-dans-wordpress/">How to Add an Image to a Table in WordPress</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">Le contenu visuel est sans aucun doute essentiel pour susciter l'intérêt des utilisateurs. Que vous soyez blogueur, affilié, propriétaire d'un site de commerce électronique ou autre, vous pouvez avoir besoin d'ajouter du contenu graphique pour diverses raisons.</p>



<p class="wp-block-paragraph">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 <a href="https://tableberg.com/fr/comment-creer-un-tableau-comparatif-dans-wordpress/" target="_blank" rel="noreferrer noopener">comparaison</a>, <a href="https://tableberg.com/fr/comment-creer-un-tableau-de-specification-des-produits-dans-wordpress/" target="_blank" rel="noreferrer noopener">spécification du produit</a>, <a href="https://tableberg.com/fr/comment-creer-un-tableau-de-prix-dans-wordpress/" target="_blank" rel="noreferrer noopener">tableaux de tarification</a>, etc.</p>



<p class="wp-block-paragraph">Dans cet article, nous allons vous montrer deux méthodes simples pour ajouter une image à un tableau dans WordPress. Commençons par le commencement !</p>


<ul style="padding-left: 1.1em;text-align: left;--ub-list-item-icon-top: 3px;--ub-list-item-icon-size: 0.9em;);--ub-list-item-fa-li-top: 3px;--ub-list-item-spacing: 0px;column-count: 1;--ub-list-mobile-column-count: 1" class="wp-block-ub-styled-list ub_styled_list" id="ub_styled_list-c778cfdd-dcae-449c-aecb-8213a0447030">
<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-9afa66e4-add9-4608-a09d-0f0e928ad611">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="#000000" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Méthode 1 :</strong> <a href="#Using-the-Default-Table-Block">Utilisation du bloc de tableaux par défaut</a></span>
			</div>
			
		</li>

<li class="ub_styled_list_item" style="--ub-list-item-icon-top: 3px; --ub-list-item-icon-size: 0.9em; --ub-list-item-background-image: url('data:image/svg+xml;utf8,&lt;svg xmlns=&quot;http://www.w3.org/2000/svg&quot; viewBox=&quot;0 0 448 512&quot;&gt;&lt;path fill=&quot;%23000000&quot; d=&quot;M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z&quot;&gt;&lt;/path&gt;&lt;/svg&gt;'); " id="ub-styled-list-item-df660d11-266d-4a92-9091-af2bca1ea7f9">
			<div class="ub_list_item_content">
				<span class="ub_list_item_icon">
					<svg width="0.9em" height="0.9em" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 448 512"><path fill="#000000" d="M438.6 278.6c12.5-12.5 12.5-32.8 0-45.3l-160-160c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L338.8 224 32 224c-17.7 0-32 14.3-32 32s14.3 32 32 32l306.7 0L233.4 393.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0l160-160z"></path></svg>
				</span>
				<span class="ub_list_item_text"><strong>Méthode 2</strong>: <a href="#Using-the-Tableberg-Block" target="_blank" rel="noreferrer noopener">Utilisation du bloc Tableberg</a></span>
			</div>
			
		</li>
</ul>


<div class="wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-03d57942 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)">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8d39b2df wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-b7737a6c wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<p class="wp-block-paragraph" style="font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);"><strong>Créer de belles tables </strong><br><strong>Avec l'éditeur de blocs</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2cc807e2 wp-block-buttons-is-layout-flex">
<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>



<div class="wp-block-button is-style-outline is-style-outline--5"><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>
</div>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>
</div>
</div>
</div>



<h2 class="wp-block-heading" id="Using-the-Default-Table-Block">Méthode 1 : Utilisation du bloc de tableaux par défaut</h2>



<p class="wp-block-paragraph">La valeur par défaut <a href="https://tableberg.com/fr/comment-utiliser-lediteur-de-blocs-wordpress/" target="_blank" rel="noreferrer noopener">Éditeur de blocs Gutenberg</a> dispose de l'option Inline Image que vous trouverez dans la barre d'outils. L'utilisation de l'option <a href="https://tableberg.com/fr/comment-ajouter-une-image-en-ligne-dans-wordpress/" target="_blank" rel="noreferrer noopener">Option d'image en ligne</a>Vous pouvez facilement ajouter des images à vos tableaux WordPress. </p>



<p class="wp-block-paragraph">Voici comment procéder.</p>



<h3 class="wp-block-heading">Étape 1 : Ajouter le bloc tableau à l'éditeur</h3>



<p class="wp-block-paragraph">Ouvrez un article ou une page où vous souhaitez ajouter le tableau. Ajoutez le tableau <strong>Bloc de table</strong> à l'éditeur.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Table-Block-to-the-Editor.webp" alt="Ajouter le bloc tableau à l&#039;éditeur" class="wp-image-1441" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Table-Block-to-the-Editor.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Table-Block-to-the-Editor-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Table-Block-to-the-Editor-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Table-Block-to-the-Editor-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Définir le nombre de lignes et de colonnes.</p>



<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/Set-22-rows-and-columns.webp" alt="Définir le nombre de lignes et de colonnes" class="wp-image-482" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Set-22-rows-and-columns.webp 1280w, https://tableberg.com/wp-content/uploads/2024/01/Set-22-rows-and-columns-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/01/Set-22-rows-and-columns-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/01/Set-22-rows-and-columns-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">La table sera créée dans quelques secondes.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created.webp" alt="La table par défaut est créée" class="wp-image-1442" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 2 : Utiliser l'option "Inline Image" pour le tableau</h3>



<p class="wp-block-paragraph">Placez votre curseur sur la cellule où vous souhaitez ajouter une image. La barre d'outils s'affiche.</p>



<p class="wp-block-paragraph">Cliquez sur le bouton <strong>Plus d'options</strong> dans la barre d'outils. Recherchez et cliquez sur <strong>Image en ligne</strong> sur la liste.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="523" src="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Inline-Image-Option-to-the-Table-1024x523.webp" alt="" class="wp-image-1443" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Inline-Image-Option-to-the-Table-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Inline-Image-Option-to-the-Table-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Inline-Image-Option-to-the-Table-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Inline-Image-Option-to-the-Table.webp 1279w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<h3 class="wp-block-heading">Étape 3 : Sélectionner et ajouter une image</h3>



<p class="wp-block-paragraph">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 <strong>Bouton de sélection</strong> à la fin.</p>



<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/04/Image-selected-from-the-media-library.webp" alt="Sélectionner et ajouter une image" class="wp-image-1180" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library.webp 1280w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">L'image sera ajoutée dans une seconde. Vous pouvez maintenant augmenter sa taille en modifiant sa largeur.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Set-width-for-the-Inline-Image.png" alt="Définir la largeur de l&#039;image en ligne" class="wp-image-1444" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Set-width-for-the-Inline-Image.png 1280w, https://tableberg.com/wp-content/uploads/2024/05/Set-width-for-the-Inline-Image-300x154.png 300w, https://tableberg.com/wp-content/uploads/2024/05/Set-width-for-the-Inline-Image-1024x524.png 1024w, https://tableberg.com/wp-content/uploads/2024/05/Set-width-for-the-Inline-Image-768x393.png 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">De même, ajoutez une nouvelle image à l'autre colonne en utilisant la même option Inline Image.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Add-inline-image-to-a-table.webp" alt="Ajouter une image en ligne à un tableau" class="wp-image-1445" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Add-inline-image-to-a-table.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Add-inline-image-to-a-table-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Add-inline-image-to-a-table-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Add-inline-image-to-a-table-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_7a241c92-fa6f-4649-9f97-ddbc8696c721"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div>



<h2 class="wp-block-heading" id="Using-the-Tableberg-Block">Méthode 2 : Utilisation du bloc Tableberg</h2>



<p class="wp-block-paragraph"><a title="TableBerg" href="https://wordpress.org/plugins/tableberg/" target="_blank" rel="noopener nofollow">Tableberg</a> 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.</p>



<p class="has-text-align-center has-background wp-block-paragraph" style="background-color:#ffeec9"><strong>Note</strong>: Assurez-vous que vous avez <a href="https://tableberg.com/fr/documents/comment-installer-le-plugin-tableberg/" target="_blank" rel="noreferrer noopener">installé et activé le plugin Tableberg</a>. </p>



<h3 class="wp-block-heading">Étape 01 : Ajouter le bloc Tableberg à l'éditeur</h3>



<p class="wp-block-paragraph">Recherchez et ajoutez le <strong>Bloc Tableberg</strong> dans l'éditeur. Le bloc fonctionne de la même manière que le bloc Table par défaut, comme indiqué ci-dessus.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="523" src="https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp" alt="Trouvez et ajoutez le bloc TableBerg à votre éditeur Gutenberg." class="wp-image-481" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Définir le numéro de la ligne et de la colonne.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="522" src="https://tableberg.com/wp-content/uploads/2024/03/Select-a-row-and-columns-for-the-table-1024x522.webp" alt="" 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-1024x522.webp 1024w, 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-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/03/Select-a-row-and-columns-for-the-table.webp 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Le plan du tableau est prêt.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created.webp" alt="Le plan du tableau est prêt" class="wp-image-1442" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Default-table-is-created-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 2 : Ajouter le bloc d'images au tableau</h3>



<p class="wp-block-paragraph">Tableberg comprend <strong><a href="https://tableberg.com/fr/documents/comment-ajouter-des-images-a-un-tableau-dans-wordpress/" target="_blank" rel="noreferrer noopener">Bloc d'images</a></strong>. Son fonctionnement est similaire à celui de la fonction <a href="https://tableberg.com/fr/comment-utiliser-le-bloc-dimages-dans-wordpress/" target="_blank" data-type="link" data-id="https://tableberg.com/how-to-use-the-image-block-in-wordpress/" rel="noreferrer noopener">Bloc d'images Gutenberg</a>. Ajoutez le bloc Image à la cellule.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Image-Block-to-the-Table.webp" alt="Ajouter le bloc d&#039;images au tableau" class="wp-image-1446" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Add-the-Image-Block-to-the-Table.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Image-Block-to-the-Table-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Image-Block-to-the-Table-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Add-the-Image-Block-to-the-Table-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Select-the-image-uploading-option.webp" alt="Sélectionnez l&#039;option de téléchargement d&#039;images" class="wp-image-1447" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Select-the-image-uploading-option.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Select-the-image-uploading-option-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Select-the-image-uploading-option-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Select-the-image-uploading-option-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 3 : Sélectionner et télécharger une image</h3>



<p class="wp-block-paragraph">J'espère que vous savez ce que vous devez faire ici. Choisissez une image et cliquez sur le bouton <strong>Bouton de sélection</strong>.</p>



<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/04/Image-selected-from-the-media-library.webp" alt="Sélectionner et télécharger une image" class="wp-image-1180" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library.webp 1280w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/04/Image-selected-from-the-media-library-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">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.</p>



<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/05/The-image-will-be-added-to-the-table.webp" alt="L&#039;image sera ajoutée au tableau" class="wp-image-1448" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/The-image-will-be-added-to-the-table.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/The-image-will-be-added-to-the-table-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/The-image-will-be-added-to-the-table-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/The-image-will-be-added-to-the-table-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 4 : Personnaliser et styliser l'image</h3>



<p class="wp-block-paragraph">Venez au <strong>Onglet Paramètres</strong> 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.</p>



<figure class="wp-block-image aligncenter size-large has-custom-border"><img loading="lazy" decoding="async" width="1024" height="524" src="https://tableberg.com/wp-content/uploads/2024/05/Configure-the-settings-fo-the-image-block-1024x524.webp" alt="" class="wp-image-1449" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Configure-the-settings-fo-the-image-block-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Configure-the-settings-fo-the-image-block-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Configure-the-settings-fo-the-image-block-768x393.webp 768w, https://tableberg.com/wp-content/uploads/2024/05/Configure-the-settings-fo-the-image-block.webp 1280w" sizes="auto, (max-width: 1024px) 100vw, 1024px" /></figure>



<p class="wp-block-paragraph">Aller à la page <strong>Onglet Styles</strong>. Vous pouvez ajouter une bordure et un rayon de bordure en utilisant les options de cet onglet.</p>



<figure class="wp-block-image aligncenter size-full has-custom-border"><img loading="lazy" decoding="async" width="1280" height="655" src="https://tableberg.com/wp-content/uploads/2024/05/Stylize-the-image-on-the-table.webp" alt="Styliser l&#039;image sur la table" class="wp-image-1450" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/05/Stylize-the-image-on-the-table.webp 1280w, https://tableberg.com/wp-content/uploads/2024/05/Stylize-the-image-on-the-table-300x154.webp 300w, https://tableberg.com/wp-content/uploads/2024/05/Stylize-the-image-on-the-table-1024x524.webp 1024w, https://tableberg.com/wp-content/uploads/2024/05/Stylize-the-image-on-the-table-768x393.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Ainsi, vous pouvez ajouter des images au tableau dans WordPress.</p>



<figure class="wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio"><div class="wp-block-embed__wrapper">
<iframe loading="lazy" title="Comment ajouter des images au bloc tableau dans WordPress | Free Tableberg Plugin" width="500" height="281" src="https://www.youtube.com/embed/acGs-w0nk2U?feature=oembed" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
</div></figure>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_a58e77cf-4f6e-4bda-9655-f1e1f2075aea"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div>



<h3 class="wp-block-heading">Notes de fin d'année !</h3>



<p class="wp-block-paragraph">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. </p>



<p class="wp-block-paragraph">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.</p>



<p class="wp-block-paragraph">En les utilisant, vous pouvez créer des tableaux multifonctionnels avec le plugin. Voir quelques articles :</p>



<ul class="wp-block-list">
<li><a href="https://tableberg.com/fr/comment-afficher-les-images-wordpress-en-colonnes-lignes/" target="_blank" rel="noreferrer noopener">Comment afficher les images WordPress en colonnes et en lignes</a></li>



<li><a href="https://tableberg.com/fr/comment-essayer-le-tableberg/" target="_blank" rel="noopener" title="Comment essayer TableBerg sans l&#039;installer sur votre site">Comment essayer TableBerg sans l'installer sur votre site</a></li>



<li><a href="https://tableberg.com/fr/comment-creer-un-tableau-de-comparaison-des-produits-amazon-dans-wordpress/" target="_blank" rel="noopener" title="Comment créer un tableau de comparaison des produits ">Comment créer un tableau de comparaison des produits </a></li>



<li><a href="https://tableberg.com/fr/comment-creer-un-tableau-de-specification-des-produits-dans-wordpress/" target="_blank" rel="noopener" title="Comment créer un tableau de spécification des produits">Comment créer un tableau de spécification des produits</a></li>
</ul>



<div class="wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained"><div class="wp-block-ub-divider ub_divider ub-divider-orientation-horizontal" id="ub_divider_37c05b7d-201a-4949-a9a4-a539d3ba76bd"><div class="ub_divider_wrapper" style="position: relative; margin-bottom: 2px; width: 100%; height: 2px; " data-divider-alignment="center"><div class="ub_divider_line" style="border-top: 2px solid #ccc; margin-top: 2px; "></div></div></div></div><p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-ajouter-une-image-a-un-tableau-dans-wordpress/">How to Add an Image to a Table in WordPress</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
					<wfw:commentrss>https://tableberg.com/fr/comment-ajouter-une-image-a-un-tableau-dans-wordpress/feed/</wfw:commentrss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Comment mettre des images côte à côte dans WordPress (trois façons)</title>
		<link>https://tableberg.com/fr/comment-mettre-des-images-cote-a-cote-dans-wordpress/</link>
					<comments>https://tableberg.com/fr/comment-mettre-des-images-cote-a-cote-dans-wordpress/#respond</comments>
		
		<dc:creator><![CDATA[Istiak Rayhan]]></dc:creator>
		<pubdate>Mon, 27 Jan 2025 10:22:22 +0000</pubdate>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Column Block]]></category>
		<category><![CDATA[Image Block]]></category>
		<category><![CDATA[TableBerg]]></category>
		<guid ispermalink="false">https://tableberg.com/?p=1018</guid>

					<description><![CDATA[<p>Le contenu visuel joue un rôle crucial pour capter l'attention des utilisateurs en ligne. Ce qu'une simple image peut transmettre nécessite souvent des centaines de mots. En outre, les images peuvent susciter des émotions et améliorer l'esthétique générale. Une façon efficace de présenter des images est de les placer côte à côte. Cette technique est particulièrement utile pour comparer plusieurs [...]</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-mettre-des-images-cote-a-cote-dans-wordpress/">How to Put Images Side by Side in WordPress (Three Ways)</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">Le contenu visuel joue un rôle crucial pour capter l'attention des utilisateurs en ligne. Ce qu'une simple image peut transmettre nécessite souvent des centaines de mots. En outre, les images peuvent susciter des émotions et améliorer l'esthétique générale.</p>



<p class="wp-block-paragraph">Une façon efficace de mettre en valeur les images est de les placer côte à côte. Cette technique est particulièrement utile pour comparer plusieurs produits, présenter des images avant et après et raconter une histoire.</p>



<p class="wp-block-paragraph">Dans cet article, nous allons vous montrer trois façons simples de placer des images côte à côte dans WordPress.</p>



<ul class="wp-block-list">
<li><strong>Méthode 1</strong>: <a href="#0-method-one-using-the-gallery-block">Utilisation du bloc Galerie </a></li>



<li><strong>Méthode 2</strong>: <a href="#2-method-two-using-the-columns-block">Utilisation du bloc des colonnes</a></li>



<li><strong>Méthode 3</strong>: <a href="#4-method-three-using-the-tableberg-block">Utilisation du bloc Tableberg</a></li>
</ul>



<div class="wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-03d57942 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)">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8d39b2df wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-b7737a6c wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<p class="wp-block-paragraph" style="font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);"><strong>Créer de belles tables </strong><br><strong>Avec l'éditeur de blocs</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2cc807e2 wp-block-buttons-is-layout-flex">
<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>



<div class="wp-block-button is-style-outline is-style-outline--6"><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>
</div>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>
</div>
</div>
</div>



<h2 class="wp-block-heading" id="0-method-one-using-the-gallery-block">Première méthode : utiliser le bloc de la galerie</h2>



<p class="wp-block-paragraph">WordPress est livré avec le bloc Galerie par défaut. Vous pouvez présenter des images côte à côte avec le bloc de la manière suivante. </p>



<h3 class="wp-block-heading" id="1-step-01-add-the-gallery-block-to-wordpress">Étape 01 : Ajouter le bloc de galerie à WordPress</h3>



<p class="wp-block-paragraph">Ouvrez simplement un message ou une page. Trouvez l'icône <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èque de blocs Gutenberg en appuyant sur la touche <strong>bouton plus (+)</strong>. Ajoutez-le à l'éditeur.</p>



<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 à 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>



<p class="wp-block-paragraph">Cliquez sur le bouton <strong>Bouton de téléchargement</strong> pour ajouter sur le côté des images fraîches provenant de votre espace de stockage local. Vous pouvez également les télécharger à partir de vos fichiers existants en cliquant sur le bouton <strong>Bibliothèque des médias</strong> bouton.</p>



<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éléchargement d&#039;images à partir d&#039;un espace de stockage local ou d&#039;une médiathèque" 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>



<p class="wp-block-paragraph">Pour ce tutoriel, nous allons télécharger des images à partir de la bibliothèque multimédia. Sélectionnez les images que vous souhaitez ajouter. Appuyez sur le bouton <strong>Créer une nouvelle galerie</strong> à la fin.</p>



<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éer 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>



<p class="wp-block-paragraph">Une fois les images ajoutées à l'éditeur, vous les verrez apparaître côte à côte. Vous pouvez ensuite personnaliser les paramètres et les styles du bloc Galerie en utilisant les options correspondantes dans la barre latérale droite. </p>



<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ées côte à côte à 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>



<p class="wp-block-paragraph"><strong>Remarque :</strong> Si vos images ne sont pas affichées côte à côte par défaut, sélectionnez le bloc entier en cliquant sur le bouton <strong>Icône de la galerie</strong> dans la barre d'outils. Spécifiez les numéros de colonne dans la barre latérale droite.</p>



<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éfinir le numéro 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>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h2 class="wp-block-heading" id="2-method-two-using-the-columns-block">Deuxième méthode : utilisation du bloc des colonnes</h2>



<p class="wp-block-paragraph">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érents types de contenu dans chaque colonne.</p>



<h3 class="wp-block-heading" id="3-step-01-add-the-column-block-to-your-site">Étape 01 : Ajouter le bloc de colonnes à votre site</h3>



<p class="wp-block-paragraph">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> à votre éditeur en suivant la même méthode que celle décrite ci-dessus.</p>



<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 à 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>



<p class="wp-block-paragraph">Sélectionnez la disposition des colonnes comme vous le souhaitez. Vous pouvez afficher un nombre égal d'images côte à côte, correspondant au nombre de colonnes que vous ajoutez. Nous avons sélectionné la disposition en deux colonnes pour le bloc.</p>



<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électionner 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>



<p class="wp-block-paragraph">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>



<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>



<p class="wp-block-paragraph">Téléchargez une image de la même manière que nous vous l'avons montré ci-dessus.</p>



<p class="wp-block-paragraph"><strong>Remarque :</strong> Comme il s'agit du bloc Image, vous pouvez <strong>ajouter une seule image</strong>contrairement au bloc Galerie.</p>



<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élécharger 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>



<p class="wp-block-paragraph">De la même manière, ajoutez le <strong>Bloc d'images</strong> à la deuxième colonne.</p>



<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>



<p class="wp-block-paragraph">Vous pouvez voir que la deuxième image est apparue à côté de la première. Vous pouvez maintenant ajouter des textes alternatifs et d'autres paramètres pour les images une par une.</p>



<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ées à 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>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h2 class="wp-block-heading" id="4-method-three-using-the-tableberg-block">Troisième méthode : Utiliser le bloc Tableberg</h2>



<p class="wp-block-paragraph"><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é sur des blocs. Il vous permet de créer des colonnes et d'afficher des images côte à côte. Suivez les étapes expliquées ci-dessous après <strong>en installant</strong> et <strong>activant</strong> le plugin.</p>



<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>



<h3 class="wp-block-heading" id="5-step-01-add-the-tableberg-block">Étape 01 : Ajouter le bloc TableBerg</h3>



<p class="wp-block-paragraph">Le plugin est livré avec un <strong>Bloc TableBerg</strong>. Ajoutez-le à votre éditeur.</p>



<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 à votre article ou à 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>



<p class="wp-block-paragraph">Vous pouvez sélectionner plusieurs lignes si vous le souhaitez. Mais nous expliquerons le tutoriel d'aujourd'hui avec une seule ligne et plusieurs colonnes.</p>



<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électionner 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>



<p class="wp-block-paragraph">TableBerg vous permet d'ajouter différents types de blocs aux cellules du tableau. Ajouter le bloc <strong>Bloc d'images</strong> aux cellules du tableau.</p>



<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>



<p class="wp-block-paragraph"><strong>Télécharger une image</strong> à la cellule du tableau de la même manière que nous vous l'avons montré dans les deux méthodes précédentes.</p>



<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élécharger 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>



<p class="wp-block-paragraph">Continuez à ajouter des images à d'autres colonnes du tableau à l'aide de la fonction <strong>Bloc d'images</strong>. J'espère que vous y parviendrez seul.</p>



<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 à 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>



<p class="wp-block-paragraph">Voir l'image ci-dessous. Nous avons affiché trois images côte à côte dans le tableau créé avec le bloc TableBerg.</p>



<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ées côte à côte 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>



<p class="has-medium-font-size wp-block-paragraph"><strong># Supprimer le bord du tableau</strong></p>



<p class="wp-block-paragraph">Vous pouvez voir une bordure autour de la table. Pour l'enlever, <strong>cliquez sur l'icône TableBerg</strong> trois fois dans la barre d'outils. Aller à <strong>Onglet Styles &gt; Bordure</strong> sur la barre latérale droite. Mettez le <strong>valeur zéro (0)</strong> pour définir la taille de la bordure du tableau.</p>



<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>



<p class="wp-block-paragraph">Vous pouvez ainsi afficher des images côte à côte sur les sites web WordPress.</p>



<hr class="wp-block-separator has-alpha-channel-opacity is-style-separator-thin"/>



<h3 class="wp-block-heading" id="6-conclusion">Conclusion</h3>



<p class="wp-block-paragraph">L'affichage d'images côte à côte est très avantageux, tandis que la comparaison visuelle entre différents produits, options, caractéristiques et variantes est essentielle. J'espère que vous pourrez le faire seul aujourd'hui grâce à ce tutoriel.</p>



<p class="wp-block-paragraph">Vous pouvez faire plus sur votre site en créant différents types de tableaux à l'aide du plugin TableBerg. Jetez un coup d'œil à <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éer un tableau de comparaison des produits Amazon dans WordPress</a>.</p><p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-mettre-des-images-cote-a-cote-dans-wordpress/">How to Put Images Side by Side in WordPress (Three Ways)</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
					<wfw:commentrss>https://tableberg.com/fr/comment-mettre-des-images-cote-a-cote-dans-wordpress/feed/</wfw:commentrss>
			<slash:comments>0</slash:comments>
		
		
			</item>
		<item>
		<title>Comment ajouter du texte au-dessus d'une image dans WordPress</title>
		<link>https://tableberg.com/fr/comment-ajouter-du-texte-au-dessus-dune-image-dans-wordpress/</link>
		
		<dc:creator><![CDATA[Istiak Rayhan]]></dc:creator>
		<pubdate>Sat, 21 Sep 2024 00:24:00 +0000</pubdate>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Add Text]]></category>
		<category><![CDATA[Image Block]]></category>
		<guid ispermalink="false">https://tableberg.com/?p=3692</guid>

					<description><![CDATA[<p>Adding text on top of an image allows you to overlay text directly on top of visuals. This feature can enhance the appeal of your posts and pages by combining texts and images to convey messages in easily digestible ways. There are numerous use cases where you can use this feature. For example, travel photographs, [&#8230;]</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-ajouter-du-texte-au-dessus-dune-image-dans-wordpress/">How to Add Text on Top of an Image in WordPress</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">L'ajout de texte au-dessus d'une image vous permet de superposer du texte directement sur des éléments visuels. Cette fonction peut renforcer l'attrait de vos messages et de vos pages en combinant textes et images pour faire passer des messages de manière facilement compréhensible.</p>



<p class="wp-block-paragraph">Cette fonctionnalité peut être utilisée dans de nombreux cas. Par exemple, des photos de voyage, des bannières, des appels à l'action, des portfolios, des légendes pour des lieux particuliers, etc. Dans cet article, nous allons vous montrer comment ajouter du texte au-dessus d'une image dans WordPress.</p>



<h2 class="wp-block-heading">Comment ajouter du texte au-dessus d'une image dans WordPress</h2>



<p class="wp-block-paragraph">Ajouter le <strong>Bloc d'images</strong> dans l'éditeur. Il s'agit d'un bloc par défaut que vous trouverez dans la bibliothèque de blocs. </p>



<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/09/Add-the-Image-Block-to-the-editor.webp" alt="Ajouter le bloc d&#039;images à l&#039;éditeur" class="wp-image-3693" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-editor.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-editor-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-editor-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-editor-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-editor-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Cela vous permettra d'ajouter une image à l'éditeur. Vous pouvez le faire à partir de votre disque local ou de la bibliothèque de médias.</p>



<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/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library.webp" alt="Ajouter une image à l&#039;éditeur à partir de votre disque local ou de la bibliothèque multimédia" class="wp-image-3694" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-an-image-to-the-editor-from-your-local-drive-or-from-the-media-library-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Allez dans la barre d'outils et <strong>cliquer</strong> les <strong>Ajouter du texte sur l'image</strong> caractéristiques.</p>



<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/09/Select-the-add-text-over-an-image-feature.webp" alt="Sélectionnez la fonction d&#039;ajout de texte sur une image" class="wp-image-3695" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Select-the-add-text-over-an-image-feature.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-add-text-over-an-image-feature-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-add-text-over-an-image-feature-1024x522.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-add-text-over-an-image-feature-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-add-text-over-an-image-feature-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Vous aurez la possibilité d'écrire le texte de votre choix sur l'image. Écrivez comme vous le souhaitez.</p>



<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/09/Add-text-on-top-of-an-image-in-WordPress.webp" alt="Ajouter du texte sur une image dans WordPress" class="wp-image-3696" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-text-on-top-of-an-image-in-WordPress.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-text-on-top-of-an-image-in-WordPress-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-text-on-top-of-an-image-in-WordPress-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-text-on-top-of-an-image-in-WordPress-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-text-on-top-of-an-image-in-WordPress-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Une fois le texte ajouté, vous pouvez modifier son alignement et sa stylisation. J'espère que vous pourrez faire le reste vous-même.</p>



<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/09/Set-text-alignment-on-an-image-in-WordPress.webp" alt="Définir l&#039;alignement du texte sur une image dans WordPress" class="wp-image-3697" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Set-text-alignment-on-an-image-in-WordPress.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Set-text-alignment-on-an-image-in-WordPress-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Set-text-alignment-on-an-image-in-WordPress-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Set-text-alignment-on-an-image-in-WordPress-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Set-text-alignment-on-an-image-in-WordPress-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Découvrez cet article sur <a href="https://tableberg.com/fr/comment-aligner-le-texte-dans-wordpress/" target="_blank" rel="noreferrer noopener">Comment aligner le texte dans WordPress</a>.</p>



<h2 class="wp-block-heading">Fermeture !</h2>



<p class="wp-block-paragraph">Nous espérons que vous avez apprécié ce tutoriel. Mais avant de terminer, nous tenons à vous rappeler quelques points. Donnez la priorité à la lisibilité lorsque vous ajoutez du texte à l'image. Veillez à ce que les couleurs du texte et de l'image contrastent afin que le texte soit lisible.</p>



<p class="wp-block-paragraph">Ensuite, placez le texte dans une position appropriée par rapport à l'image afin qu'il ne masque aucun élément important de l'image. Enfin, le texte doit être court et concis. Un texte trop long risque de submerger les lecteurs.</p><p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-ajouter-du-texte-au-dessus-dune-image-dans-wordpress/">How to Add Text on Top of an Image in WordPress</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
		<item>
		<title>Comment mettre en valeur les logos sur WordPress (avec/sans plugin)</title>
		<link>https://tableberg.com/fr/comment-mettre-en-valeur-les-logos-dans-wordpress/</link>
		
		<dc:creator><![CDATA[Istiak Rayhan]]></dc:creator>
		<pubdate>Fri, 20 Sep 2024 17:22:30 +0000</pubdate>
				<category><![CDATA[How To]]></category>
		<category><![CDATA[Image Block]]></category>
		<category><![CDATA[Logo Box]]></category>
		<category><![CDATA[Web Design]]></category>
		<guid ispermalink="false">https://tableberg.com/?p=3646</guid>

					<description><![CDATA[<p>A logo is a powerful visual representation of a brand. When your business is connected with other brands, whether through partnership or affiliation, you may need to display their logos on your website to build trust and credibility among web visitors. For example, if you have a portfolio website, you must display logos of the [&#8230;]</p>
<p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-mettre-en-valeur-les-logos-dans-wordpress/">How to Showcase Logos in WordPress (With/out a Plugin)</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></description>
										<content:encoded><![CDATA[<p class="wp-block-paragraph">Un logo est une représentation visuelle puissante d'une marque. Lorsque votre entreprise est liée à d'autres marques, que ce soit par le biais d'un partenariat ou d'une affiliation, vous pouvez avoir besoin d'afficher leurs logos sur votre site web afin d'instaurer un climat de confiance et de crédibilité parmi les visiteurs du site.</p>



<p class="wp-block-paragraph">Par exemple, si vous avez un site de portfolio, vous devez afficher les logos des marques avec lesquelles vous avez travaillé. Il en va de même pour de nombreux autres sites web. WordPress vous permet de le faire de différentes manières simples et faciles.</p>



<p class="wp-block-paragraph">Dans ce tutoriel, nous vous montrerons les deux méthodes les plus simples pour mettre en valeur des logos dans WordPress, avec et sans plugin. Commencez !</p>



<h2 class="wp-block-heading">Première méthode : sans plugin (en utilisant le bloc de colonnes)</h2>



<p class="wp-block-paragraph">La colonne est un bloc par défaut de l'éditeur Gutenberg. </p>



<h3 class="wp-block-heading">Étape 01 : Ajouter le bloc de colonnes à l'éditeur</h3>



<p class="wp-block-paragraph">Ajouter <strong>Bloc de colonnes</strong> dans l'éditeur en cliquant sur le bouton <strong>icône plus (+)</strong>.</p>



<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/09/Add-the-Columns-block-to-the-editor.webp" alt="Ajouter le bloc Colonnes à l&#039;éditeur" class="wp-image-3342" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-the-Columns-block-to-the-editor.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Columns-block-to-the-editor-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Columns-block-to-the-editor-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Columns-block-to-the-editor-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Columns-block-to-the-editor-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 02 : Sélection d'une disposition de colonnes</h3>



<p class="wp-block-paragraph">Sélectionnez une disposition en colonnes. Plus vous sélectionnez de colonnes, plus vous pouvez ajouter de logos. Sélectionnons la mise en page <strong>33/33/33</strong>.</p>



<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/09/Select-a-column-layout.webp" alt="Sélectionner une disposition de colonnes" class="wp-image-3648" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Select-a-column-layout.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Select-a-column-layout-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Select-a-column-layout-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Select-a-column-layout-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Select-a-column-layout-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Une fois le bloc ajouté, vous pouvez augmenter le nombre de colonnes. </p>



<p class="wp-block-paragraph">Pour ce faire, <strong>cliquer</strong> les <strong>Icône de colonne</strong> dans la barre d'outils<span style="box-sizing: border-box; margin: 0px; padding: 0px;">.&nbsp;<strong>Aller à</strong>&nbsp;les&nbsp;<strong>Onglet Paramètres</strong>. Ensuite, venez au&nbsp;<strong>Section des colonnes</strong>. </span></p>



<p class="wp-block-paragraph"><span style="box-sizing: border-box; margin: 0px; padding: 0px;">Vous pouvez </span><strong><span style="box-sizing: border-box; margin: 0px; padding: 0px;">augmenter le nombre de colonnes</span>mber</strong> en faisant glisser l'échelle ou en tapant directement un chiffre.</p>



<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/09/Increase-the-column-number.webp" alt="Augmenter le nombre de colonnes" class="wp-image-3649" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Increase-the-column-number.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Increase-the-column-number-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Increase-the-column-number-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Increase-the-column-number-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Increase-the-column-number-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 03 : Ajouter le bloc d'images aux colonnes individuellement</h3>



<p class="wp-block-paragraph">Vous pouvez ajouter tous les autres blocs Gutenberg dans les colonnes. Allez dans la section <strong>première colonne</strong> et <strong>cliquer</strong> les<strong> icône plus (+)</strong>. </p>



<p class="wp-block-paragraph"><strong>Type d'image</strong> dans la boîte de recherche. Une fois que le bloc apparaît, ajoutez-le à la colonne.</p>



<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/09/Add-the-Image-Block-to-the-Columns-Individually.webp" alt="Ajouter le bloc d&#039;images aux colonnes individuellement" class="wp-image-3651" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-Columns-Individually.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-Columns-Individually-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-Columns-Individually-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-Columns-Individually-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-the-Image-Block-to-the-Columns-Individually-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Téléchargez maintenant un logo à partir de votre disque local ou de la bibliothèque multimédia.</p>



<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/09/Upload-logo-to-the-Gutenberg-column-block.webp" alt="Télécharger le logo dans le bloc de colonnes Gutenberg" class="wp-image-3652" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Upload-logo-to-the-Gutenberg-column-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Upload-logo-to-the-Gutenberg-column-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Upload-logo-to-the-Gutenberg-column-block-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Upload-logo-to-the-Gutenberg-column-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Upload-logo-to-the-Gutenberg-column-block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Vous pouvez voir que nous avons ajouté un logo au bloc de colonnes.</p>



<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/09/Logo-added-to-the-column-block.webp" alt="Logo ajouté au bloc de colonnes" class="wp-image-3663" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-column-block.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-column-block-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-column-block-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-column-block-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-column-block-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 04 : Ajouter des logos aux autres colonnes, un par un</h3>



<p class="wp-block-paragraph">De la même manière, ajoutez des logos aux autres colonnes du bloc.</p>



<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/09/Add-logos-to-the-other-columns.webp" alt="Ajouter des logos aux autres colonnes" class="wp-image-3664" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-other-columns.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-other-columns-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-other-columns-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-other-columns-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-other-columns-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 05 : Styliser le bloc de colonnes</h3>



<p class="wp-block-paragraph">Pour styliser le bloc, <strong>aller à</strong> les <strong>Onglet Styles</strong> sur la barre latérale droite.</p>



<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/09/Stylize-the-column-block-after-adding-logos.webp" alt="Styliser le bloc de colonnes après l&#039;ajout de logos" class="wp-image-3665" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-column-block-after-adding-logos.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-column-block-after-adding-logos-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-column-block-after-adding-logos-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-column-block-after-adding-logos-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-column-block-after-adding-logos-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">En faisant défiler l'onglet, <strong>venir à</strong> <strong>Espacement des blocs</strong>. Cette section vous permettra d'ajouter des espaces entre les logos verticalement et horizontalement. Mais dans ce cas, il est préférable d'ajouter des espaces horizontalement.</p>



<p class="wp-block-paragraph">Ensuite, <strong>ajouter une bordure</strong> autour de l'ensemble du bloc de colonnes. Vous pouvez modifier la couleur et la largeur de la bordure.</p>



<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/09/Add-space-between-columsn-and-a-border.webp" alt="Ajouter un espace entre les colonnes et une bordure" class="wp-image-3666" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-columsn-and-a-border.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-columsn-and-a-border-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-columsn-and-a-border-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-columsn-and-a-border-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-columsn-and-a-border-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Pour une personnalisation avancée, vous devez utiliser un plugin tiers. Nous allons expliquer la méthode suivante avec un tel plugin.</p>



<h2 class="wp-block-heading">Deuxième méthode : utilisation d'un plugin (Tableberg)</h2>



<p class="wp-block-paragraph"><strong>Tableberg</strong> est un plugin polyvalent qui permet de créer des tableaux, des boîtes d'icônes, des boîtes d'images, des boîtes de logos, etc. Vous pouvez présenter des logos avec des personnalisations avancées sur votre site web avec ce plugin. Obtenez-le à partir du coup de bannière.</p>



<div class="wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-03d57942 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)">
<div class="wp-block-columns is-layout-flex wp-container-core-columns-is-layout-8d39b2df wp-block-columns-is-layout-flex">
<div class="wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow">
<div class="wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-b7737a6c wp-block-group-is-layout-flex" style="padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)">
<p class="wp-block-paragraph" style="font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);"><strong>Créer de belles tables </strong><br><strong>Avec l'éditeur de blocs</strong></p>



<div class="wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-2cc807e2 wp-block-buttons-is-layout-flex">
<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>



<div class="wp-block-button is-style-outline is-style-outline--7"><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>
</div>
</div>
</div>



<div class="wp-block-column is-layout-flow wp-block-column-is-layout-flow">
<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>
</div>
</div>
</div>



<p class="wp-block-paragraph">Une fois installé, suivez les instructions ci-dessous.</p>



<h3 class="wp-block-heading">Étape 01 : Ajouter le bloc Tableberg à l'éditeur</h3>



<p class="wp-block-paragraph">Le plugin ajoute un bloc à la bibliothèque de blocs de Gutenberg nommé <strong>Tableberg</strong>. Ajouter le bloc à l'éditeur.</p>



<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/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp" alt="Ajouter le bloc TableBerg à votre éditeur Gutenberg" class="wp-image-481" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp 1280w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/01/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor-768x392.webp 768w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Vous devez définir des cellules de tableau pour le nombre de logos que vous souhaitez afficher. Il suffit de créer le nombre de cellules requis en spécifiant le nombre de lignes et de colonnes.</p>



<p class="wp-block-paragraph">Par exemple, nous avons besoin de huit cellules pour afficher huit logos. Définir le numéro de la colonne et de la ligne <strong>4*2</strong>.</p>



<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/09/Select-the-number-of-rows-and-columns.webp" alt="Sélectionner le nombre de lignes et de colonnes" class="wp-image-3667" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Select-the-number-of-rows-and-columns.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-number-of-rows-and-columns-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-number-of-rows-and-columns-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-number-of-rows-and-columns-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Select-the-number-of-rows-and-columns-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Le nombre requis de cellules est créé, comme vous pouvez le voir.</p>



<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/09/Cells-created-for-displaying-logos.webp" alt="Cellules créées pour l&#039;affichage de logos" class="wp-image-3668" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Cells-created-for-displaying-logos.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Cells-created-for-displaying-logos-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Cells-created-for-displaying-logos-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Cells-created-for-displaying-logos-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Cells-created-for-displaying-logos-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 02 : Commencer à ajouter des logos aux cellules Tableberg</h3>



<p class="wp-block-paragraph">Tableberg vous permet d'ajouter plusieurs blocs personnalisés aux cellules. Rechercher et <strong>ajouter le bloc Image</strong> à une cellule.</p>



<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/09/Add-logos-to-the-Tableberg-cells.webp" alt="Ajouter des logos aux cellules Tableberg" class="wp-image-3669" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-Tableberg-cells.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-Tableberg-cells-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-Tableberg-cells-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-Tableberg-cells-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-logos-to-the-Tableberg-cells-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph"><span style="box-sizing: border-box; margin: 0px; padding: 0px;">Aujourd'hui, <strong>télécharger un logo,</strong></span> que ce soit par téléchargement ou à partir de la médiathèque.</p>



<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/09/Logo-added-to-the-Tableberg-cell.webp" alt="Logo ajouté à la cellule Tableberg" class="wp-image-3670" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-Tableberg-cell.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-Tableberg-cell-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-Tableberg-cell-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-Tableberg-cell-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Logo-added-to-the-Tableberg-cell-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Ajouter tous les autres logos au reste des cellules Tableberg.</p>



<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/09/Add-all-logos-to-the-Tableberg-cells.webp" alt="Ajouter tous les logos aux cellules Tableberg" class="wp-image-3671" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-all-logos-to-the-Tableberg-cells.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-all-logos-to-the-Tableberg-cells-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-all-logos-to-the-Tableberg-cells-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-all-logos-to-the-Tableberg-cells-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-all-logos-to-the-Tableberg-cells-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<h3 class="wp-block-heading">Étape 03 : Styliser les cellules</h3>



<p class="wp-block-paragraph">Aujourd'hui, <strong>aller à</strong> les <strong>onglet styles</strong> tout en gardant l'ensemble du tableau sélectionné. Vous pouvez modifier la couleur d'arrière-plan individuellement pour toutes les lignes et cellules. Mais comme nous n'en avons pas besoin pour ce tutoriel, nous laissons cette option de côté.</p>



<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/09/Stylize-the-logos-displayed-with-Tableberg.webp" alt="Styliser les logos affichés avec Tableberg" class="wp-image-3672" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-logos-displayed-with-Tableberg.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-logos-displayed-with-Tableberg-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-logos-displayed-with-Tableberg-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-logos-displayed-with-Tableberg-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Stylize-the-logos-displayed-with-Tableberg-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph"><strong>Venez à</strong> les <strong>Espacement des cellules</strong> en faisant défiler l'onglet vers le bas. En utilisant les options de cette section, vous pouvez ajouter des espaces entre les colonnes du logo, à la fois verticalement et horizontalement.</p>



<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/09/Add-space-between-the-logo-cells.webp" alt="Ajouter de l&#039;espace entre les cellules du logo" class="wp-image-3673" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-the-logo-cells.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-the-logo-cells-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-the-logo-cells-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-the-logo-cells-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-space-between-the-logo-cells-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph"><strong>Bordure "Come to Table</strong>. Dans la section Bordure intérieure, vous pouvez modifier la couleur et le rayon de la bordure. </p>



<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/09/Add-border-and-radius-to-the-logo-columns.webp" alt="Ajouter la couleur et le rayon de la bordure" class="wp-image-3674" style="border-width:1px;border-radius:3px" srcset="https://tableberg.com/wp-content/uploads/2024/09/Add-border-and-radius-to-the-logo-columns.webp 1280w, https://tableberg.com/wp-content/uploads/2024/09/Add-border-and-radius-to-the-logo-columns-300x153.webp 300w, https://tableberg.com/wp-content/uploads/2024/09/Add-border-and-radius-to-the-logo-columns-1024x523.webp 1024w, https://tableberg.com/wp-content/uploads/2024/09/Add-border-and-radius-to-the-logo-columns-768x392.webp 768w, https://tableberg.com/wp-content/uploads/2024/09/Add-border-and-radius-to-the-logo-columns-18x9.webp 18w" sizes="auto, (max-width: 1280px) 100vw, 1280px" /></figure>



<p class="wp-block-paragraph">Vous pouvez ainsi donner un aspect esthétique aux colonnes du logo.</p>



<h2 class="wp-block-heading">Conclusion</h2>



<p class="wp-block-paragraph">Tableberg est un plugin polyvalent passionnant qui vous permet de créer de nombreux designs étonnants pour votre site web. Avant de quitter le site, vous pouvez consulter d'autres tutoriels sur le plugin. </p>



<ul class="wp-block-list">
<li><a href="https://tableberg.com/fr/comment-ajouter-des-boites-de-produits-amazon-dans-wordpress/" target="_blank" rel="noreferrer noopener">Comment créer une boîte de produits Amazon dans WordPress</a></li>



<li><a href="https://tableberg.com/fr/comment-ajouter-des-boites-de-fonctionnalites-dans-wordpress/" target="_blank" rel="noreferrer noopener">Comment ajouter des boîtes de fonctionnalités dans WordPress</a></li>



<li><a href="https://tableberg.com/fr/comment-ajouter-des-boites-a-icones-dans-wordpress/" target="_blank" rel="noreferrer noopener">Comment ajouter des boîtes à icônes dans WordPress</a></li>
</ul><p>&lt;p&gt;The post <a rel="nofollow" href="https://tableberg.com/fr/comment-mettre-en-valeur-les-logos-dans-wordpress/">How to Showcase Logos in WordPress (With/out a Plugin)</a> first appeared on <a rel="nofollow" href="https://tableberg.com/fr">Tableberg</a>.&lt;/p&gt;</p>
]]></content:encoded>
					
		
		
			</item>
	</channel>
</rss>
<!--
Performance optimized by W3 Total Cache. Learn more: https://www.boldgrid.com/w3-total-cache/?utm_source=w3tc&utm_medium=footer_comment&utm_campaign=free_plugin

#!trpst#trp-gettext data-trpgettextoriginal=229#!trpen#Mise en cache de page à l’aide de Disk: Enhanced #!trpst#/trp-gettext#!trpen#

Served from: tableberg.com @ 2026-05-25 04:11:59 by W3 Total Cache
-->