{"id":3336,"date":"2025-06-24T16:09:59","date_gmt":"2025-06-24T16:09:59","guid":{"rendered":"https:\/\/tableberg.com\/?p=3336"},"modified":"2025-06-24T16:10:02","modified_gmt":"2025-06-24T16:10:02","slug":"comment-mettre-un-texte-et-une-image-cote-a-cote-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-put-text-and-image-side-by-side-in-wordpress\/","title":{"rendered":"Comment mettre du texte et une image c\u00f4te \u00e0 c\u00f4te dans WordPress"},"content":{"rendered":"<p>Lors de la r\u00e9daction de revues de produits, de tableaux comparatifs, de tutoriels, de r\u00e9cits de voyage, d'infographies, de contenus \u00e9ducatifs, etc., il se peut que vous ayez \u00e0 placer des textes et des images c\u00f4te \u00e0 c\u00f4te. Il existe de nombreuses fa\u00e7ons de le faire dans WordPress. <\/p>\n\n\n\n<p>Dans cet article, nous allons vous montrer plusieurs fa\u00e7ons efficaces de mettre du texte et des images c\u00f4te \u00e0 c\u00f4te dans WordPress. Restez avec nous jusqu'\u00e0 la fin. Vous apprendrez vraiment quelque chose de passionnant.<\/p>\n\n\n<div data-is_sticky=\"false\" data-sticky_toc_position=\"left\" data-hide_sticky_on_mobile=\"false\" data-sticky_button_icon='&lt;svg style=\"color:#000000;\" class=\"ub_sticky-toc-open-button-icon\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" height=\"34px\" width=\"34px\" viewBox=\"0, 0, 448, 512\"&gt;&lt;path fill=\"currentColor\" d=\"M0 96C0 78.33 14.33 64 32 64H416C433.7 64 448 78.33 448 96C448 113.7 433.7 128 416 128H32C14.33 128 0 113.7 0 96zM0 256C0 238.3 14.33 224 32 224H416C433.7 224 448 238.3 448 256C448 273.7 433.7 288 416 288H32C14.33 288 0 273.7 0 256zM416 448H32C14.33 448 0 433.7 0 416C0 398.3 14.33 384 32 384H416C433.7 384 448 398.3 448 416C448 433.7 433.7 448 416 448z\"&gt;&lt;\/svg&gt;' data-sticky_button_color=\"#000000\" data-sticky_toc_width=\"320px\" class=\"wp-block-ub-table-of-contents-block ub_table-of-contents\" id=\"ub_table-of-contents-771754c5-6e52-4edb-ac05-6e6176ad9d96\" data-linktodivider=\"false\" data-showtext=\"show\" data-hidetext=\"hide\" data-scrolltype=\"auto\" data-enablesmoothscroll=\"false\" data-initiallyhideonmobile=\"false\" data-initiallyshow=\"true\"><div class=\"ub_table-of-contents-header-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-header\" style=\"text-align: left; \">\n\t\t\t\t<div class=\"ub_table-of-contents-title\">Mettre du texte et des images c\u00f4te \u00e0 c\u00f4te dans WordPress :<\/div>\n\t\t\t\t\n\t\t\t<\/div>\n\t\t<\/div><div class=\"ub_table-of-contents-extra-container\" style=\"\">\n\t\t\t<div class=\"ub_table-of-contents-container ub_table-of-contents-1-column\">\n\t\t\t\t<ul style=\"\"><li style=\"color: #636381; \"><a href=\"https:\/\/tableberg.com\/fr\/how-to-put-text-and-image-side-by-side-in-wordpress\/#0-method-1-using-the-media-amp-text-block\" style=\"\">M\u00e9thode 1 : Utilisation du bloc M\u00e9dia et texte<\/a><\/li><li style=\"color: #636381; \"><a href=\"https:\/\/tableberg.com\/fr\/how-to-put-text-and-image-side-by-side-in-wordpress\/#5-method-2-using-the-columns-block\" style=\"\">M\u00e9thode 2 : Utilisation du bloc des colonnes<\/a><\/li><li style=\"color: #636381; \"><a href=\"https:\/\/tableberg.com\/fr\/how-to-put-text-and-image-side-by-side-in-wordpress\/#9-method-3-using-the-tableberg-block\" style=\"\">M\u00e9thode 3 : Utilisation du bloc Tableberg<\/a><\/li><li style=\"color: #636381; \"><a href=\"https:\/\/tableberg.com\/fr\/how-to-put-text-and-image-side-by-side-in-wordpress\/#14-method-4-using-the-sliderberg-block\" style=\"\">M\u00e9thode 4 : Utilisation du bloc Sliderberg<\/a><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-using-the-media-amp-text-block\">M\u00e9thode 1 : Utilisation du bloc M\u00e9dia et texte<\/h2>\n\n\n\n<p><strong>M\u00e9dias et textes<\/strong> est un bloc par d\u00e9faut de l'\u00e9diteur de blocs Gutenberg. Avec ce bloc, vous pouvez mettre du texte et des images c\u00f4te \u00e0 c\u00f4te sans d\u00e9pendre d'un outil tiers.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-step-01-add-the-media-amp-text-to-the-editor\">\u00c9tape 01 : Ajouter les m\u00e9dias et le texte \u00e0 l'\u00e9diteur<\/h3>\n\n\n\n<p>Cliquez sur le bouton <strong>ic\u00f4ne plus (+)<\/strong> sur l'\u00e9diteur. Type de document <strong>M\u00e9dias et textes<\/strong> dans la barre de recherche. Ajouter le bloc \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress.webp\" alt=\"Ajouter le bloc Media &amp; Text \u00e0 WordPress\" class=\"wp-image-3337\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-block-to-WordPress-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-02-addupload-an-image-to-the-block\">\u00c9tape 02 : Ajouter\/t\u00e9l\u00e9charger une image dans le bloc<\/h3>\n\n\n\n<p>Vous pouvez ajouter une image en la t\u00e9l\u00e9chargeant \u00e0 partir du disque local, de la biblioth\u00e8que multim\u00e9dia ou de l'image vedette. Choisissez l'option qui vous convient.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block.webp\" alt=\"Ajouter\/t\u00e9l\u00e9charger une image dans le bloc\" class=\"wp-image-3338\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/AddUpload-an-Image-to-the-Block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que l'image est ajout\u00e9e au bloc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block.webp\" alt=\"L&#039;image est ajout\u00e9e au bloc M\u00e9dia et texte\" class=\"wp-image-3339\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-the-Media-Text-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-03-add-text-to-the-media-amp-text-block\">\u00c9tape 03 : Ajouter du texte au bloc M\u00e9dia et texte<\/h3>\n\n\n\n<p>\u00c9crivez le texte de votre choix dans la colonne de droite du bloc. Vous pouvez personnaliser la couleur du texte, l'alignement et d'autres \u00e9l\u00e9ments si vous le souhaitez.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block.webp\" alt=\"Ajouter du texte au bloc M\u00e9dia et texte\" class=\"wp-image-3340\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Text-to-the-Media-Text-Block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"4-step-04-alternate-the-text-and-media-file-position\">\u00c9tape 04 : Alterner la position du texte et du fichier multim\u00e9dia<\/h3>\n\n\n\n<p>Le bloc vous permet d'alterner la position du texte et des fichiers multim\u00e9dias en cliquant sur les options correspondantes dans la barre d'outils.<\/p>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"720\" style=\"aspect-ratio: 1280 \/ 720;\" width=\"1280\" autoplay controls loop muted src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Switch-the-Text-and-Media-File.mp4\"><\/video><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"5-method-2-using-the-columns-block\">M\u00e9thode 2 : Utilisation du bloc des colonnes<\/h2>\n\n\n\n<p>Les <strong>Colonnes<\/strong> est \u00e9galement un bloc par d\u00e9faut de l'\u00e9diteur. C'est l'un des blocs les plus utilis\u00e9s dans la cr\u00e9ation de contenu WordPress.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-step-01-add-the-columns-block-to-the-editor\">\u00c9tape 01 : Ajouter le bloc de colonnes \u00e0 l'\u00e9diteur<\/h3>\n\n\n\n<p>Vous pouvez afficher le texte et l'image c\u00f4te \u00e0 c\u00f4te en ajoutant l'\u00e9l\u00e9ment <strong>Paragraphe<\/strong> et <strong>Blocs d'images<\/strong> s\u00e9par\u00e9ment dans les blocs de colonnes.<\/p>\n\n\n\n<p>Ainsi, <strong>ajouter le bloc Colonnes<\/strong> premier \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Columns-block-to-the-editor.webp\" alt=\"Ajouter le bloc Colonnes \u00e0 l&#039;\u00e9diteur\" 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>\n\n\n\n<p>S\u00e9lectionnez une mise en page en deux colonnes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout.webp\" alt=\"Choisir une mise en page en deux colonnes\" class=\"wp-image-3344\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-a-two-column-layout-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-02-add-the-image-block-to-the-columns-block\">\u00c9tape 02 : ajouter le bloc d'images au bloc de colonnes<\/h3>\n\n\n\n<p>Il est pr\u00e9f\u00e9rable de les afficher \u00e0 gauche. Ainsi, <strong>ajouter le bloc Image<\/strong> dans la colonne de gauche.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block.webp\" alt=\"Ajouter le bloc d&#039;images au bloc de colonnes\" class=\"wp-image-3345\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-Block-to-the-Columns-Block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ici encore, ajoutez l'image souhait\u00e9e, qu'elle provienne du disque local, de la biblioth\u00e8que multim\u00e9dia ou d'une URL.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block.webp\" alt=\"T\u00e9l\u00e9charger une image dans le bloc de colonnes\" class=\"wp-image-3346\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-an-image-to-the-columns-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que l'image a \u00e9t\u00e9 ajout\u00e9e au bloc.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block.webp\" alt=\"L&#039;image est ajout\u00e9e au bloc de colonnes\" class=\"wp-image-3347\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Image-is-added-to-columns-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-03-add-text-to-the-cloumns-block\">\u00c9tape 03 : Ajouter du texte au bloc de phrases<\/h3>\n\n\n\n<p>Ajouter le <strong>Bloc de paragraphes<\/strong> dans la colonne de droite. Cela vous permettra d'ajouter du texte.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block.webp\" alt=\"Ajouter le bloc Paragraphe au bloc Colonnes\" class=\"wp-image-3348\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Paragraph-block-to-the-Columns-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que le texte est ajout\u00e9 \u00e0 la colonne.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block.webp\" alt=\"Le texte est ajout\u00e9 au bloc de colonnes\" class=\"wp-image-3349\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Text-is-added-to-the-columns-block-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ensuite, vous pouvez personnaliser le bloc de colonnes, y compris l'image et le texte qu'il contient.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"9-method-3-using-the-tableberg-block\">M\u00e9thode 3 : Utilisation du bloc Tableberg<\/h2>\n\n\n\n<p><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">Tableberg<\/a> est un merveilleux plugin de construction de tableaux qui vous permet de concevoir de nombreuses parties pour votre site web. Ce plugin vous permet \u00e9galement de mettre du texte et des images c\u00f4te \u00e0 c\u00f4te. T\u00e9l\u00e9chargez le plugin en cliquant sur les boutons attach\u00e9s \u00e0 la banni\u00e8re ci-dessous.<\/p>\n\n\n\n<div class=\"wp-block-group has-border-color has-global-padding is-layout-constrained wp-container-core-group-is-layout-8db5ca72 wp-block-group-is-layout-constrained\" style=\"border-color:#671feb;border-style:solid;border-width:1px;border-radius:4px;padding-top:var(--wp--preset--spacing--medium);padding-right:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--medium);padding-left:var(--wp--preset--spacing--small)\">\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-28f84493 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-vertically-aligned-center is-layout-flow wp-block-column-is-layout-flow\">\n<div class=\"wp-block-group is-vertical is-layout-flex wp-container-core-group-is-layout-505d3e6d wp-block-group-is-layout-flex\" style=\"padding-top:var(--wp--preset--spacing--small);padding-bottom:var(--wp--preset--spacing--small)\">\n<p style=\"font-size:clamp(18.959px, 1.185rem + ((1vw - 3.2px) * 1.175), 30px);\"><strong>Cr\u00e9er de belles tables <\/strong><br><strong>Avec l'\u00e9diteur de blocs<\/strong><\/p>\n\n\n\n<div class=\"wp-block-buttons is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-f2baa792 wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button\"><a class=\"wp-block-button__link has-background wp-element-button\" href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" style=\"background-color:#671feb\" target=\"_blank\" rel=\"noreferrer noopener\">Essai gratuit<\/a><\/div>\n\n\n\n<div class=\"wp-block-button is-style-outline is-style-outline--1\"><a class=\"wp-block-button__link wp-element-button\" href=\"https:\/\/tableberg.com\/fr\/la-tarification\/\" target=\"_blank\" rel=\"noreferrer noopener\">Obtenir un Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"540\" height=\"540\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\" alt=\"\" class=\"wp-image-1545\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png 540w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-300x300.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg-150x150.png 150w\" sizes=\"auto, (max-width: 540px) 100vw, 540px\" \/><\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n<p>Commencez \u00e0 suivre le tutoriel d\u00e8s maintenant.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-01-add-the-tableberg-block-to-the-editor\">\u00c9tape 01 : Ajouter le bloc Tableberg \u00e0 l'\u00e9diteur<\/h3>\n\n\n\n<p>Ce plugin ajoute un bloc nomm\u00e9 Tableberg \u00e0 la biblioth\u00e8que de blocs de Gutenberg. <strong>Ajouter le bloc Tableberg<\/strong> \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"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 \u00e0 votre \u00e9diteur 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>\n\n\n\n<p>S\u00e9lectionnez le nombre de colonnes et de lignes dont vous avez besoin pour la mise en page. Nous choisirons 2*1.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\" alt=\"D\u00e9finir le nombre de lignes et de colonnes\" class=\"wp-image-3014\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que les colonnes et les lignes sont pr\u00eates.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table.webp\" alt=\"Des lignes et des colonnes sont ajout\u00e9es \u00e0 l&#039;\u00e9diteur\" class=\"wp-image-3309\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Rows-and-columns-selecte-for-designing-the-Amazon-product-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-02-add-an-image-to-a-cell-of-the-table-\">\u00c9tape 02 : Ajouter une image \u00e0 une cellule du tableau <\/h3>\n\n\n\n<p>Tableberg vous permet d'ajouter plusieurs blocs personnalis\u00e9s \u00e0 ses cellules. En cliquant sur l'ic\u00f4ne <strong>ic\u00f4ne plus (+)<\/strong>, trouver et <strong>ajouter le bloc Image<\/strong> \u00e0 l'une de ses cellules.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box.webp\" alt=\"Ajouter un bloc d&#039;images \u00e0 Tableberg\" class=\"wp-image-3310\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Image-block-to-the-Amazon-Product-box-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>T\u00e9l\u00e9chargez l'image sur le disque local ou ajoutez-en une de votre biblioth\u00e8que multim\u00e9dia.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg.webp\" alt=\"T\u00e9l\u00e9charger ou ajouter une image \u00e0 Tableberg\" class=\"wp-image-3350\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Upload-or-add-an-image-to-Tableberg-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Nous avons ajout\u00e9 une image, que vous pouvez voir ci-dessous.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table.webp\" alt=\"Une image est ajout\u00e9e au tableau\" class=\"wp-image-3351\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/An-image-is-added-to-the-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-step-03-add-text-to-the-table\">\u00c9tape 03 : Ajouter du texte au tableau<\/h3>\n\n\n\n<p>Il suffit d'ajouter du texte dans la colonne de droite \u00e0 l'aide du bloc de paragraphes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg.webp\" alt=\"Ajouter un texte \u00e0 Tableberg\" class=\"wp-image-3352\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-text-to-Tableberg-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-step-04-modify-the-tableberg-border\">\u00c9tape 04 : Modifier la fronti\u00e8re Tableberg<\/h3>\n\n\n\n<p>Vous pouvez rendre cette section plus attrayante en supprimant ou en colonisant la bordure du tableau. <strong>Aller \u00e0 <\/strong>les <strong>Onglet Styles<\/strong>.<\/p>\n\n\n\n<p><strong>Bordure \"Come to Table<\/strong> en faisant d\u00e9filer l'onglet. Ces options vous permettront de supprimer ou de coloriser la bordure du tableau.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"654\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table.webp\" alt=\"Supprimer les bordures du tableau\" class=\"wp-image-3353\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table-1024x523.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table-768x392.webp 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Remove-borders-from-the-table-18x9.webp 18w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ainsi, vous pouvez cr\u00e9er des sections web pour mettre du texte et des images c\u00f4te \u00e0 c\u00f4te dans WordPress.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"14-method-4-using-the-sliderberg-block\">M\u00e9thode 4 : Utilisation du bloc Sliderberg<\/h2>\n\n\n\n<p>Vous souhaitez pr\u00e9senter du texte et des images c\u00f4te \u00e0 c\u00f4te dans une barre de d\u00e9filement interactive ? L'outil <strong><a href=\"https:\/\/wordpress.org\/plugins\/sliderberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Sliderberg<\/a><\/strong> vous permet de faire exactement cela - en utilisant le bloc Media &amp; Text qui vous est familier, avec une flexibilit\u00e9 totale. Voici comment l'installer en quelques minutes :<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"15-step-1-install-and-activate-the-sliderberg-plugin\">\u00c9tape 1 : Installer et activer le plugin Sliderberg<\/h3>\n\n\n\n<p>Tout d'abord, rendez-vous \u00e0 l'adresse suivante <strong>Plugins \u2192 Ajouter un nouveau<\/strong> dans votre tableau de bord WordPress, recherchez \"Sliderberg\" et cliquez sur <strong>Installer maintenant<\/strong>. Activez ensuite le plugin.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"512\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-1024x512.png\" alt=\"\" class=\"wp-image-9815\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-1024x512.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-300x150.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-768x384.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-1536x768.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-2048x1024.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Install-the-Tableberg-Plugin-18x9.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"16-step-2-insert-the-sliderberg-block\">\u00c9tape 2 : Ins\u00e9rer le bloc Sliderberg<\/h3>\n\n\n\n<p>Modifiez votre message ou votre page. Cliquez sur l'ic\u00f4ne <strong>+<\/strong> recherchez \"Sliderberg\" et ins\u00e9rez le bloc Sliderberg \u00e0 l'endroit o\u00f9 vous souhaitez que le curseur apparaisse.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"518\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-1024x518.png\" alt=\"\" class=\"wp-image-9816\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-1024x518.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-300x152.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-768x389.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-1536x778.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-2048x1037.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Insert-the-Sliderberg-Block-18x9.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"17-step-3-select-the-%E2%80%98blocks-slider%E2%80%99-type\">\u00c9tape 3 : S\u00e9lectionnez le type de \"Blocks Slider\" (curseur de blocs)<\/h3>\n\n\n\n<p>Lorsque vous y \u00eates invit\u00e9, choisissez l'option <strong>Blocs Slider<\/strong> option. Cela vous permet d'ajouter n'importe quel bloc Gutenberg \u00e0 l'int\u00e9rieur de chaque diapositive.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"510\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-1024x510.png\" alt=\"\" class=\"wp-image-9817\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-1024x510.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-300x149.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-768x383.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-1536x765.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-2048x1020.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Select-the-Blocks-Slider-Type-18x9.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"18-step-4-choose-a-background-color-for-the-slider\">\u00c9tape 4 : Choisir une couleur d'arri\u00e8re-plan pour le curseur<\/h3>\n\n\n\n<p>Choisissez une couleur d'arri\u00e8re-plan pour votre curseur en fonction du style de votre site, ou conservez-la transparente pour un aspect plus \u00e9pur\u00e9.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"584\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-1024x584.png\" alt=\"\" class=\"wp-image-9818\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-1024x584.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-300x171.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-768x438.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-1536x877.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-2048x1169.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Choose-a-Background-Color-of-the-Slider-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"19-step-5-add-the-%E2%80%98media-amp-text%E2%80%99-block-inside-the-slider\">\u00c9tape 5 : Ajouter le bloc \"Media &amp; Text\" \u00e0 l'int\u00e9rieur de la barre de d\u00e9filement<\/h3>\n\n\n\n<p>\u00c0 l'int\u00e9rieur de votre premi\u00e8re diapositive, cliquez sur le bouton <strong>+<\/strong> et ins\u00e9rez le <strong>M\u00e9dias et textes<\/strong> bloc.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:3px\">\n<figure class=\"wp-block-video\"><video height=\"1796\" style=\"aspect-ratio: 3158 \/ 1796;\" width=\"3158\" autoplay loop muted src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-the-Media-Text-Block.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"20-step-6-add-image-and-text-to-the-slider\">\u00c9tape 6 : Ajout d'une image et d'un texte \u00e0 la barre de d\u00e9filement<\/h3>\n\n\n\n<p>Utilisez le bloc M\u00e9dia et texte pour t\u00e9l\u00e9charger votre image (c\u00f4t\u00e9 gauche) et ajouter votre texte (c\u00f4t\u00e9 droit). Vous pouvez utiliser des titres, des paragraphes, des boutons ou tout autre bloc dont vous avez besoin.<\/p>\n\n\n\n<div class=\"wp-block-group has-global-padding is-layout-constrained wp-block-group-is-layout-constrained\" style=\"border-width:1px;border-radius:3px\">\n<figure class=\"wp-block-video\"><video height=\"1732\" style=\"aspect-ratio: 3152 \/ 1732;\" width=\"3152\" autoplay loop muted src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-Image-Text-to-the-Slider-.mp4\"><\/video><\/figure>\n<\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"21-step-7-add-or-duplicate-slides\">\u00c9tape 7 : Ajouter ou dupliquer des diapositives<\/h3>\n\n\n\n<p>Vous voulez plus de diapositives ? Cliquez sur <strong>Ajouter une diapositive<\/strong> pour en cr\u00e9er un nouveau, ou <strong>Dupliquer une diapositive<\/strong> pour copier une mise en page existante.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"554\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-1024x554.png\" alt=\"\" class=\"wp-image-9820\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-1024x554.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-300x162.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-768x416.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-1536x832.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-2048x1109.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Add-or-Duplicate-the-Slider-18x10.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"22-step-8-customize-the-slider-and-publish\">\u00c9tape 8 : Personnalisation de la barre de d\u00e9filement et publication<\/h3>\n\n\n\n<p>Modifiez les param\u00e8tres du curseur (animation, lecture automatique, fl\u00e8ches de navigation, etc.) en fonction de vos pr\u00e9f\u00e9rences. Lorsque vous \u00eates pr\u00eat, cliquez sur <strong>Publier<\/strong> en direct !<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-large has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"635\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-1024x635.png\" alt=\"\" class=\"wp-image-9822\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-1024x635.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-300x186.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-768x476.png 768w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-1536x952.png 1536w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-2048x1270.png 2048w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/Customize-the-Slider-and-Publish-18x12.png 18w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p>Vous disposez d\u00e9sormais d'un slider fluide et r\u00e9actif affichant texte et image c\u00f4te \u00e0 c\u00f4te, id\u00e9al pour pr\u00e9senter une \u00e9quipe, des produits, des t\u00e9moignages, etc.<\/p>\n\n\n\n<p><strong>Conseil de pro :<\/strong> Vous pouvez utiliser <em>tous<\/em> \u00e0 l'int\u00e9rieur de vos diapositives Sliderberg - pas seulement Media &amp; Text ! Faites preuve de cr\u00e9ativit\u00e9 avec des boutons, des ic\u00f4nes, des colonnes ou m\u00eame des blocs tiers.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"23-conclusion\">Conclusion<\/h3>\n\n\n\n<p>En effet, vous pouvez tirer parti des blocs Gutenberg par d\u00e9faut pour cr\u00e9er et concevoir vos posts et pages web. Mais comme ils manquent de nombreuses fonctionnalit\u00e9s avanc\u00e9es, vous avez souvent besoin de plugins de blocs suppl\u00e9mentaires qui viennent avec de nombreuses fonctionnalit\u00e9s passionnantes. <\/p>\n\n\n\n<p>Tableberg est un plugin passionnant que vous pouvez utiliser dans ce cas. Ultimate Blocks est un autre excellent plugin de blocs que vous devriez consid\u00e9rer. Explorez les versions gratuites de ces deux plugins en cliquant sur les boutons ci-dessous.<\/p>\n\n\n\n<p><strong>Lire aussi<\/strong>: <\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><a href=\"https:\/\/tableberg.com\/fr\/comment-mettre-des-images-cote-a-cote-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment mettre des images c\u00f4te \u00e0 c\u00f4te dans WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/fr\/comment-ajouter-du-texte-au-dessus-dune-image-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment ajouter du texte au-dessus d'une image dans WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/fr\/comment-redimensionner-les-blocs-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment redimensionner les blocs dans WordPress<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>While covering product reviews, comparison tables, tutorials, travel stories, infographics, educational content, etc., you may have to put texts and images side by side. There are numerous ways to do this in WordPress. In this article, we&#8217;ll show you several effective ways of how to put text and image side by side in WordPress. So, [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":3355,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[111,112,102],"class_list":["post-3336","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-amazon-product-marketing","tag-create-web-sections","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/09\/How-to-Put-Text-and-Image-Side-by-Side-in-WordPress.webp","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/fr\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3336","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=3336"}],"version-history":[{"count":7,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3336\/revisions"}],"predecessor-version":[{"id":9823,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3336\/revisions\/9823"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/3355"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=3336"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=3336"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=3336"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}