{"id":1612,"date":"2025-03-29T15:46:45","date_gmt":"2025-03-29T15:46:45","guid":{"rendered":"https:\/\/tableberg.com\/?p=1612"},"modified":"2025-03-29T15:46:48","modified_gmt":"2025-03-29T15:46:48","slug":"comment-creer-des-boites-de-contenu-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-create-content-boxes-in-wordpress\/","title":{"rendered":"Comment cr\u00e9er des bo\u00eetes de contenu dans WordPress"},"content":{"rendered":"<p>Une bo\u00eete de contenu est un conteneur visuellement distinct qui permet d'encadrer un contenu sp\u00e9cifique et de le faire ressortir du reste. Il vous permet de mettre en \u00e9vidence des informations cl\u00e9s ou des annonces sp\u00e9ciales, en attirant l'attention des utilisateurs sur des d\u00e9tails importants.<\/p>\n\n\n\n<p>Les bo\u00eetes de contenu permettent de pr\u00e9senter des sections d'appel \u00e0 l'action, des t\u00e9moignages, des critiques et les principales caract\u00e9ristiques de produits ou de services. Il existe plusieurs fa\u00e7ons de cr\u00e9er des bo\u00eetes de contenu dans les sites web WordPress.<\/p>\n\n\n\n<p>Dans la suite de cet article, nous vous pr\u00e9senterons trois m\u00e9thodes pratiques pour cr\u00e9er des bo\u00eetes de contenu dans WordPress. Restez avec nous jusqu'\u00e0 la fin.<\/p>\n\n\n<div class=\"wp-block-tableberg-wrapper wp-block-tableberg-table\" >\n\t\t\t<div class=\"tableberg-table-wrapper\" style=\"border-color: #abb8c3; \">\n\t\t\t\t<table class = \"has-inner-border\" style=\"border-spacing: 0 0; --tableberg-inner-border-top: none; --tableberg-inner-border-right: 1px solid #abb8c3; --tableberg-inner-border-bottom: 1px solid #abb8c3; --tableberg-inner-border-left: none; --tableberg-inner-border-top-first: 1px solid #abb8c3; --tableberg-inner-border-left-first: 1px solid #abb8c3; \" data-tableberg-header=\"converted\" data-tableberg-footer=\"\" data-tableberg-responsive data-tableberg-rows=\"4\" data-tableberg-cols=\"3\" data-tableberg-mobile-width=\"700\" data-tableberg-mobile-mode=\"stack\" data-tableberg-mobile-direction=\"row\" data-tableberg-mobile-count=\"1\" data-tableberg-mobile-header=\"1\" ><colgroup><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><col style=\"width: 33.333333333333%; min-width: 33.333333333333%; \"\/><\/colgroup><tbody><tr class=\"tableberg-header\" style=\"\">\n<th data-tableberg-row=\"0\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>M\u00e9thode<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Plugin<\/p>\n<\/div><\/th>\n\n<th data-tableberg-row=\"0\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p>Avant-premi\u00e8re<\/p>\n<\/div><\/th>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"1\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-e6a8e2ba9683099d6dff8d7bf30e4e6f\" style=\"color:#671feb\"><a href=\"#Using-the-Columns-Block\">Utilisation du bloc des colonnes<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center\">Non requis<\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"1\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Columns-Block.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-even-row\" style=\"\">\n<td data-tableberg-row=\"2\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-86045b5d02e709189188f7a38d01267f\" style=\"color:#671feb\"><a href=\"#Using-the-Tableberg-Block\">Utilisation du bloc Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-320d99aea727b6d31c1ea1b4e8be13e5\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/tableberg\/\" target=\"_blank\" rel=\"noreferrer noopener\">Tableberg<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"2\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Box-using-the-Tableberg-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><tr class=\"tableberg-odd-row\" style=\"\">\n<td data-tableberg-row=\"3\" data-tableberg-col=\"0\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-c14ddc11fcd1d98d761080ec059ae1db\" style=\"color:#671feb\"><a href=\"#Using-the-Styled-List-Block\">Utilisation du bloc de liste stylis\u00e9e<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"1\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \">\n<p class=\"has-text-align-center has-text-color has-link-color wp-elements-d58cb3b3f80d24b68f17ea7a536e0e5d\" style=\"color:#671feb\"><a href=\"https:\/\/wordpress.org\/plugins\/ultimate-blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">Blocs ultimes<\/a><\/p>\n<\/div><\/td>\n\n<td data-tableberg-row=\"3\" data-tableberg-col=\"2\" style=\"\" class=\"wp-block-tableberg-cell tableberg-v-align-center\"><div class=\"tableberg-cell-inner\" style=\"display: block; justify-content: center; flex-wrap: wrap; \"><figure class=\"wp-block-tableberg-image tableberg-image-center size-large is-resized\"><img decoding=\"async\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-Boxes-using-the-Ultimate-Blocks-Plugin.png\" alt=\"\" class=\"wp-image-1\" style=\"width: 200px;border-top:  ;border-right:  ;border-bottom:  ;border-left:  ;\" \/><\/figure><\/div><\/td>\n<\/tr><\/tbody><\/table>\n\t\t\t<\/div>\n\t\t<\/div>\n\n\n<h2 class=\"wp-block-heading\" id=\"0-method-1-using-the-columns-block\">M\u00e9thode 1 : Utilisation du bloc des colonnes<\/h2>\n\n\n\n<p>Vous pouvez cr\u00e9er et concevoir une bo\u00eete de contenu de base en utilisant le bloc Colonnes par d\u00e9faut de WordPress. Suivez les \u00e9tapes expliqu\u00e9es ci-dessous.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"1-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>Trouver le <strong>Bloc de colonnes<\/strong> de la biblioth\u00e8que de blocs Gutenberg en appuyant sur la touche <strong>bouton plus (+)<\/strong> et l'ajouter \u00e0 votre \u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp\" alt=\"Ajoutez le bloc Colonnes \u00e0 votre \u00e9diteur\" class=\"wp-image-435\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Add-the-Gutenberg-column-block-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>S\u00e9lectionnez la colonne d'une cellule parmi les options disponibles.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png\" alt=\"S\u00e9lectionnez la mise en page de la colonne \u00e0 cellule unique\" class=\"wp-image-1629\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-single-cell-column-layout-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"2-step-02-add-content-blocks-to-the-column\">\u00c9tape 02 : ajouter des blocs de contenu \u00e0 la colonne<\/h3>\n\n\n\n<p>Le bloc Colonnes vous permet d'ajouter d'autres blocs \u00e0 l'int\u00e9rieur de celui-ci. Vous pouvez ajouter n'importe quel bloc pour organiser votre contenu.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png\" alt=\"Ajouter des blocs de contenu \u00e0 la colonne\" class=\"wp-image-1630\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-Blocks-to-the-Column-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Cliquez sur le bouton <strong>ic\u00f4ne plus (+)<\/strong> sur le bloc de la colonne. Cela ouvrira la biblioth\u00e8que de blocs de Gutenberg, \u00e0 partir de laquelle vous pourrez choisir et ajouter le bloc <strong>bloc de paragraphes<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png\" alt=\"Ajouter le bloc Paragraphe au bloc Colonnes\" class=\"wp-image-1631\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Paragraph-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Nous pouvons voir que nous avons d\u00e9j\u00e0 ajout\u00e9 du texte au bloc de la colonne. Ensuite, vous pouvez ajouter d'autres blocs aux colonnes comme vous le souhaitez. Supposons que nous ajoutions le bloc Image.<\/p>\n\n\n\n<p>Cliquez sur le bouton <strong>Ic\u00f4ne des colonnes<\/strong> dans la barre d'outils. Appuyez sur la touche <strong>ic\u00f4ne plus (+)<\/strong>. Recherchez et s\u00e9lectionnez le <strong>Bloc d'images<\/strong> de la biblioth\u00e8que.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png\" alt=\"Ajouter le bloc d&#039;images au bloc de colonnes\" class=\"wp-image-1632\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que nous avons ajout\u00e9 une image au bloc de colonnes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png\" alt=\"Image ajout\u00e9e au bloc de colonnes\" class=\"wp-image-1633\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Image-added-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"3-step-03-customize-the-entire-columns-block\">\u00c9tape 03 : Personnalisation de l'ensemble du bloc de colonnes<\/h3>\n\n\n\n<p><strong>S\u00e9lectionner toute la section de la colonne<\/strong> en cliquant sur l'ic\u00f4ne de la colonne dans la barre d'outils. Acc\u00e9dez \u00e0 la colonne <strong>Onglet Param\u00e8tres<\/strong>. Vous pouvez ajuster le <strong>Largeur<\/strong> de la colonne de l'option correspondante.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png\" alt=\"Personnaliser l&#039;ensemble du bloc des colonnes\" class=\"wp-image-1634\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Entire-Columns-Block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ensuite, venez \u00e0 la <strong>Onglet Styles<\/strong>. Vous aurez la possibilit\u00e9 de modifier la couleur du texte, la couleur d'arri\u00e8re-plan, la typographie et les dimensions du 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=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png\" alt=\"Styliser le bloc de colonnes\" class=\"wp-image-1635\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-column-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>En faisant d\u00e9filer la section, vous obtiendrez d'autres options pour ajouter <strong>espacement des blocs<\/strong> et <strong>fronti\u00e8re<\/strong> au bloc de colonnes.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png\" alt=\"Ajouter un espacement et une bordure au bloc des colonnes\" class=\"wp-image-1636\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-block-spacing-and-border-to-the-columns-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_7ef4228f-ed3e-4329-8d24-eec03fe9aa6e\"><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>\n\n\n<h2 class=\"wp-block-heading\" id=\"4-method-2-using-the-tableberg-plugin\">M\u00e9thode 2 : Utilisation du plugin TableBerg<\/h2>\n\n\n\n<p>TableBerg est un puissant plugin de construction de tableaux qui peut am\u00e9liorer la solution de construction de tableaux par d\u00e9faut de WordPress. Vous pouvez \u00e9galement cr\u00e9er des bo\u00eetes de contenu attrayantes avec le plugin. Voyons comment proc\u00e9der.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"5-step-01-install-and-activate-the-tableberg-plugin\">\u00c9tape 01 : Installation et activation du plugin TableBerg<\/h3>\n\n\n\n<p>Comme pour la m\u00e9thode ci-dessus, il faut aller sur <strong>Plugins &gt; Ajouter un nouveau plugin<\/strong>. Trouver le <strong>Plugin TableBerg<\/strong> en tapant son nom dans le champ de recherche. <strong>Installer<\/strong> et <strong>activer<\/strong> il.<\/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\/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>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"6-step-02-add-the-tableberg-block-to-the-editor\">\u00c9tape 02 : Ajouter le bloc TableBerg \u00e0 l'\u00e9diteur<\/h3>\n\n\n\n<p>Le plugin est livr\u00e9 avec un bloc nomm\u00e9 TableBerg. Ajoutez-le \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"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 \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>Si vous envisagez de construire un tableau, vous pouvez d\u00e9finir le nombre de lignes et de colonnes ici, comme dans le bloc de tableau par d\u00e9faut.<\/p>\n\n\n\n<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\/03\/Select-a-row-and-columns-for-the-table.webp\" alt=\"D\u00e9finir les colonnes et les lignes d&#039;un tableau\" class=\"wp-image-1031\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-300x153.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-1024x522.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/03\/Select-a-row-and-columns-for-the-table-768x392.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Mais s\u00e9lectionnez la ligne 1 et la colonne 0 pour cr\u00e9er une bo\u00eete de contenu. Vous pouvez voir que la mise en page a \u00e9t\u00e9 cr\u00e9\u00e9e instantan\u00e9ment.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png\" alt=\"Ajouter du contenu \u00e0 la bo\u00eete TableBerg\" class=\"wp-image-1645\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"7-step-03-add-content-to-the-tableberg-box\">\u00c9tape 03 : Ajouter du contenu \u00e0 la bo\u00eete TableBerg<\/h3>\n\n\n\n<p>TableBerg vous permet d'ajouter diff\u00e9rents types de contenu \u00e0 ses lignes et \u00e0 ses colonnes en ajoutant des blocs de contenu.<\/p>\n\n\n\n<p>Une fois que vous avez plac\u00e9 votre curseur sur la bo\u00eete, vous verrez l'option de blocage appara\u00eetre dans le coin inf\u00e9rieur droit.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png\" alt=\"Ajouter du contenu \u00e0 la bo\u00eete TableBerg\" class=\"wp-image-1646\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-Content-to-the-TableBerg-Box-1-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>S\u00e9lectionnez un \u00e0 un les blocs que vous souhaitez ajouter \u00e0 la bo\u00eete pour cr\u00e9er le contenu souhait\u00e9. Nous commencerons par ajouter le bloc image.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png\" alt=\"Ajouter le bloc d&#039;images\" class=\"wp-image-1647\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-image-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ensuite, vous pouvez voir que nous avons ajout\u00e9 un texte descriptif sur le produit. Nous avons ajout\u00e9 et utilis\u00e9 l'\u00e9l\u00e9ment <strong>Bloc de paragraphes<\/strong> pour cela.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png\" alt=\"Ajouter un paragraphe au bloc\" class=\"wp-image-1648\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-paragraph-to-the-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Enfin, nous avons ajout\u00e9 un bouton CTA.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png\" alt=\"Ajouter un bouton CTA \u00e0 la bo\u00eete TableBerg\" class=\"wp-image-1649\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-a-CTA-button-to-the-TableBerg-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"8-step-04-customize-the-tableberg-box\">\u00c9tape 04 : Personnalisation de la bo\u00eete TableBerg<\/h3>\n\n\n\n<p>Vous pouvez personnaliser chaque bloc individuellement que vous avez ajout\u00e9 \u00e0 la bo\u00eete TableBerg. Ensuite, vous pouvez personnaliser et styliser l'ensemble de la bo\u00eete TableBerg.<\/p>\n\n\n\n<p>Nous ne montrons pas comment personnaliser les blocs individuels, car cela rendrait le tutoriel trop long. Vous pouvez le voir sur notre page de documentation.<\/p>\n\n\n\n<p>S\u00e9lectionnez toute la bo\u00eete en cliquant sur l'ic\u00f4ne TableBerg dans la barre d'outils.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png\" alt=\"Personnaliser les param\u00e8tres de la bo\u00eete TableBerg\" class=\"wp-image-1650\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-Settings-of-the-TableBerg-Box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Dans l'onglet Param\u00e8tres, vous pouvez d\u00e9finir la largeur souhait\u00e9e pour la bo\u00eete.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png\" alt=\"Personnaliser la largeur du tableau\" class=\"wp-image-1651\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-table-width-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>A partir de la <strong>Onglet Styles<\/strong>Vous pouvez personnaliser la couleur d'arri\u00e8re-plan, le remplissage, la marge et l'espace de la bo\u00eete.<\/p>\n\n\n\n<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\/Customize-the-content-box.webp\" alt=\"Personnaliser la bo\u00eete de contenu\" class=\"wp-image-1652\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-content-box-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ainsi, vous pouvez cr\u00e9er une bo\u00eete contextuelle avec le plugin TableBerg.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_2e72e3e8-3320-48be-b190-44b2a8e835a7\"><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>\n\n\n<h2 class=\"wp-block-heading\" id=\"9-method-3-using-the-ultimate-blocks-plugin\">M\u00e9thode 3 : Utilisation du plugin Ultimate Blocks<\/h2>\n\n\n\n<p>Ultimate Blocks est un plugin de marketing de contenu prometteur avec 25+ blocs personnalis\u00e9s pour alimenter votre \u00e9diteur Gutenberg. Il dispose de plusieurs blocs \u00e9tonnants gr\u00e2ce auxquels vous pouvez cr\u00e9er d'autres bo\u00eetes de contenu attrayantes sur votre site.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"10-step-01-install-and-activate-the-ultimate-blocks-plugin\">\u00c9tape 01 : Installer et activer le plugin Ultimate Blocks<\/h3>\n\n\n\n<p>Aller \u00e0 <strong>Plugins &gt; Ajouter un nouveau plugin<\/strong>. Trouver le <strong>Plugin Ultimate Blocks<\/strong> en tapant son nom dans le champ de recherche. <strong>Installer<\/strong> et <strong>activer<\/strong> une fois que le plugin appara\u00eet 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=\"655\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp\" alt=\"Installer et activer le plugin Ultimate Blocks\" class=\"wp-image-456\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin.webp 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-300x154.webp 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-1024x524.webp 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Install-and-activate-the-Ultimate-Blocks-plugin-768x393.webp 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"11-step-02-add-the-styled-box-block-of-the-plugin-to-your-gutenberg-editor\">\u00c9tape 02 : Ajouter le bloc de bo\u00eetes stylis\u00e9es du plugin \u00e0 votre \u00e9diteur Gutenberg<\/h3>\n\n\n\n<p>Le plugin Ultimate Blocks comprend un bloc d\u00e9di\u00e9 nomm\u00e9 <strong>Bo\u00eete de style<\/strong> pour cr\u00e9er des bo\u00eetes de contenu. Trouvez-le et ajoutez-le \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png\" alt=\"Ajouter le bloc styl\u00e9 du plugin \u00e0 votre \u00e9diteur Gutenberg\" class=\"wp-image-1637\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-the-Styled-Block-of-the-Plugin-to-Your-Gutenberg-Editor-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Le bloc vous propose quatre types de bo\u00eetes. Choisissez celui qui vous convient pour afficher votre message. Chacune d'entre elles dispose d'un ensemble unique de fonctionnalit\u00e9s.<\/p>\n\n\n\n<p>Dans le cadre de ce tutoriel, nous s\u00e9lectionnerons l'option <strong>Bo\u00eete \u00e0 outils<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png\" alt=\"Bo\u00eetes stylis\u00e9es\" class=\"wp-image-1638\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Styled-boxes-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>La bo\u00eete de caract\u00e9ristiques vous permet d'ajouter une image, un titre et une description. J'esp\u00e8re que vous pouvez le faire vous-m\u00eame.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png\" alt=\"Ce que vous pouvez ajouter \u00e0 la bo\u00eete \u00e0 outils\" class=\"wp-image-1639\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Things-you-can-add-to-the-feature-box-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"12-step-03-add-content-to-the-block\">\u00c9tape 03 : Ajouter du contenu au bloc<\/h3>\n\n\n\n<p>Par d\u00e9faut, le bloc vous permet d'afficher un produit et de d\u00e9crire ses caract\u00e9ristiques. Mais vous pouvez ajouter et afficher plusieurs produits avec le bloc. <strong>S\u00e9lectionner le type de colonne<\/strong> vous souhaitez d\u00e9finir le nombre de produits \u00e0 afficher.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"652\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png\" alt=\"S\u00e9lectionner le type de colonne\" class=\"wp-image-1640\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Select-the-column-type-768x391.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Maintenant, ajoutez du contenu aux options que vous voyez dans la rubrique <strong>Bloc de bo\u00eetes stylis\u00e9es<\/strong>.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png\" alt=\"Ajouter du contenu au bloc de bo\u00eetes stylis\u00e9es\" class=\"wp-image-1641\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Add-content-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Vous pouvez voir que nous avons ajout\u00e9 du contenu au bloc.<\/p>\n\n\n\n<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\/05\/Content-added-to-the-styled-box-block.png\" alt=\"Contenu ajout\u00e9 au bloc de bo\u00eetes stylis\u00e9es\" class=\"wp-image-1642\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Content-added-to-the-styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"13-step-04-customize-and-stylize-the-styled-box-block\">\u00c9tape 04 : Personnaliser et styliser le bloc de bo\u00eetes stylis\u00e9es<\/h3>\n\n\n\n<p>Venez au <strong>Onglet Param\u00e8tres<\/strong>. De la <strong>S\u00e9lectionner l'option Mode<\/strong>En outre, vous pouvez remplacer la bo\u00eete de caract\u00e9ristiques par d'autres bo\u00eetes stylis\u00e9es comme celles pr\u00e9sent\u00e9es ci-dessus, telles que la bo\u00eete de notification, la bo\u00eete bord\u00e9e et la bo\u00eete de chiffres.<\/p>\n\n\n\n<p>Ensuite, \u00e0 partir du <strong>Option de contr\u00f4le r\u00e9actif<\/strong>Vous pouvez masquer le blocage pour un type d'appareil particulier.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png\" alt=\"Personnaliser le bloc Styled Box\" class=\"wp-image-1643\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Customize-the-Styled-Box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ensuite, venez \u00e0 la <strong>Onglet Styles<\/strong>. Vous pouvez modifier les <strong>Rembourrage<\/strong> et <strong>Marge<\/strong> du bloc \u00e0 partir de cet onglet.<\/p>\n\n\n\n<figure class=\"wp-block-image aligncenter size-full has-custom-border\"><img loading=\"lazy\" decoding=\"async\" width=\"1280\" height=\"653\" src=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png\" alt=\"Styliser le bloc Styled box\" class=\"wp-image-1644\" style=\"border-width:1px;border-radius:3px\" srcset=\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block.png 1280w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-300x153.png 300w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-1024x522.png 1024w, https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Stylize-the-Styled-box-block-768x392.png 768w\" sizes=\"auto, (max-width: 1280px) 100vw, 1280px\" \/><\/figure>\n\n\n\n<p>Ainsi, vous pouvez cr\u00e9er une bo\u00eete de contenu \u00e0 l'aide du plugin Ultimate Blocks.<\/p>\n\n\n<div class=\"wp-block-ub-divider ub_divider ub-divider-orientation-horizontal\" id=\"ub_divider_61102040-edd2-4f4b-9e13-dd2f6cb65bdb\"><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>\n\n\n<h3 class=\"wp-block-heading\" id=\"14-finishing-notes\">Notes de fin d'ann\u00e9e !<\/h3>\n\n\n\n<p>Ultimate Blocks et TableBerg sont deux plugins multifonctionnels qui visent \u00e0 r\u00e9volutionner le syst\u00e8me Gutenberg, permettant aux utilisateurs de cr\u00e9er facilement des contenus sophistiqu\u00e9s. <\/p>\n\n\n\n<p>TableBerg est encore en cours de d\u00e9veloppement et promet de proposer tr\u00e8s prochainement de nombreuses fonctionnalit\u00e9s avanc\u00e9es. D'un autre c\u00f4t\u00e9, Ultimate Blocks est d\u00e9j\u00e0 un plugin populaire utilis\u00e9 par plus de 60 000 sites web dans le monde entier.<\/p>\n\n\n\n<p>Si vous avez des questions \u00e0 ce sujet, n'h\u00e9sitez pas \u00e0 nous les poser \u00e0 tout moment dans la bo\u00eete de commentaires.<\/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\/meilleurs-plugins-wordpress-box\/\" target=\"_blank\" rel=\"noreferrer noopener\">Les meilleurs plugins WordPress Box<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/fr\/comment-creer-des-zones-de-texte-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment cr\u00e9er des bo\u00eetes de texte dans WordPress<\/a><\/li>\n\n\n\n<li><a href=\"https:\/\/tableberg.com\/fr\/comment-creer-des-boites-dinformation-dans-wordpress\/\" target=\"_blank\" rel=\"noreferrer noopener\">Comment cr\u00e9er de superbes bo\u00eetes d'information sur WordPress<\/a><\/li>\n<\/ul>","protected":false},"excerpt":{"rendered":"<p>A content box is a visually distinct container by which you can frame specific content that makes it stand out from the rest. It helps you highlight key feature information or special announcements, drawing users\u2019 attention to important details. Content boxes are suitable to showcase call-to-action sections, testimonials, reviews, and key features of products or [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":8203,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[87,38],"class_list":["post-1612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-content-box","tag-content-presentation"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/How-to-Create-Content-Boxes-in-WordPress.png","author_info":{"display_name":"Istiak Rayhan","author_link":"https:\/\/tableberg.com\/fr\/author\/wpx_irayhan\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1612","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=1612"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1612\/revisions"}],"predecessor-version":[{"id":8206,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/1612\/revisions\/8206"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/8203"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=1612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=1612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=1612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}