Cr\u00e9er de belles tables <\/strong> Une fois les plugins install\u00e9s sur votre site, suivez le tutoriel ci-dessous.<\/p>\n\n\n\n Ajouter le Bloc Tableberg<\/strong> \u00e0 l'\u00e9diteur.<\/p>\n\n\n\n D\u00e9finissez le nombre de lignes et de colonnes de votre site web en fonction du nombre de bo\u00eetes \u00e0 outils que vous souhaitez cr\u00e9er.<\/p>\n\n\n\n Comme nous allons cr\u00e9er trois bo\u00eetes de caract\u00e9ristiques, nous avons choisi le nombre de colonnes et de lignes 2*2.<\/p>\n\n\n\n Le nombre d\u00e9fini de lignes et de colonnes a \u00e9t\u00e9 ajout\u00e9.<\/p>\n\n\n\n Une bo\u00eete de caract\u00e9ristiques n'a pas de sens si elle n'est pas accompagn\u00e9e d'une image du produit concern\u00e9. Ajoutez l'image Bloc d'images<\/strong> dans une cellule appropri\u00e9e.<\/p>\n\n\n\n Ajoutez une image dans une cellule appropri\u00e9e. Vous pouvez redimensionner l'image en faisant glisser l'ic\u00f4ne circulaire. <\/p>\n\n\n\n Le classement par \u00e9toiles est un moyen intuitif d'exprimer la qualit\u00e9 et la popularit\u00e9 d'un produit. Elle contribue \u00e9galement \u00e0 l'engagement des clients. Ajoutez donc la Bloc d'\u00e9toiles<\/strong> \u00e0 la table.<\/p>\n\n\n\n De sous la Onglet Param\u00e8tres<\/strong> dans la barre lat\u00e9rale droite, d\u00e9finissez des valeurs pour le bloc de classement par \u00e9toiles. Vous pouvez m\u00eame redimensionner le bloc si n\u00e9cessaire.<\/p>\n\n\n\n Avec un bouton CTA, vous pouvez inciter les utilisateurs \u00e0 acheter ou \u00e0 visiter la page du produit. Ajoutez donc le bouton Bloc de boutons<\/strong> sous la notation.<\/p>\n\n\n\n Aller \u00e0 la page Onglet Styles<\/strong>en maintenant le bloc de boutons s\u00e9lectionn\u00e9. <\/p>\n\n\n\n \u00c0 partir de l\u00e0, vous pouvez modifier le bouton\u00a0la couleur du texte, la couleur d'arri\u00e8re-plan, la taille, l'espacement,\u00a0<\/strong>un<\/span>d selon les besoins.<\/p>\n\n\n\n Comme vous avez besoin de plus d'espace pour ajouter la liste des caract\u00e9ristiques et la description, il est pr\u00e9f\u00e9rable de fusionner deux cellules. S\u00e9lectionner les cellules<\/strong> avec votre curseur par en maintenant la touche Majuscule enfonc\u00e9e<\/strong>.<\/p>\n\n\n\n Cliquez sur Modifier le tableau<\/strong> dans la barre d'outils. Appuyez sur la touche Option de fusion<\/strong> sur la liste.<\/p>\n\n\n\n Ajouter le Bloc de paragraphes<\/strong> pour \u00e9crire du texte dans la bo\u00eete \u00e0 outils.<\/p>\n\n\n\n Il est pr\u00e9f\u00e9rable de pr\u00e9senter les caract\u00e9ristiques du produit dans une liste. Ajoutez donc l'\u00e9l\u00e9ment Bloc de listes stylis\u00e9es<\/strong>.<\/p>\n\n\n\n J'esp\u00e8re que vous pourrez dresser la liste des caract\u00e9ristiques de votre produit comme dans l'image ci-dessous. Vous pouvez modifier l'ic\u00f4ne de la liste, augmenter sa taille,<\/strong> et modifier sa couleur<\/strong>.<\/p>\n\n\n\n Enfin, ajoutez une br\u00e8ve description de votre produit en utilisant le bloc Paragraphe sous la liste des caract\u00e9ristiques.<\/p>\n\n\n\n Le contenu de votre bo\u00eete de caract\u00e9ristiques est donc pr\u00eat. Nous allons maintenant personnaliser un peu plus les bo\u00eetes.<\/p>\n\n\n\n Tableberg permet de personnaliser \u00e0 la fois la externe<\/strong> et fronti\u00e8res int\u00e9rieures<\/strong>. <\/p>\n\n\n\n Aller \u00e0 la page Onglet Styles<\/strong>. Descendez un peu. Vous obtiendrez les options suivantes. D\u00e9finissez les couleurs souhait\u00e9es<\/strong> et l'\u00e9paisseur des bordures<\/strong>.<\/p>\n\n\n\n Un ruban est une petite \u00e9tiquette d\u00e9corative ou une banni\u00e8re qui permet de mettre en \u00e9vidence des informations importantes, telles que les r\u00e9ductions, les nouveaux arrivages, etc. Ajoutez le Bloc de rubans<\/strong> \u00e0 la cellule la plus proche.<\/p>\n\n\n\n Se rendre \u00e0 la Onglet Param\u00e8tres<\/strong>, \u00e9crire un copie de ruban<\/strong> et r\u00e9parer sa position<\/strong> sur la case de l'\u00e9l\u00e9ment.<\/p>\n\n\n\n Enfin, allez \u00e0 la page Onglet Styles<\/strong>. <\/p>\n\n\n\n S\u00e9lectionnez l'option texte<\/strong> et couleur de fond<\/strong> pour le ruban.<\/p>\n\n\n\n Allez sur la page de pr\u00e9visualisation. Vous verrez que la fonctionnalit\u00e9 fonctionne bien.<\/p>\n\n\n\n J'esp\u00e8re que cet article vous a plu. Vous pouvez faire plus de designs avec le plugin Tableberg. Par exemple, explorez deux autres articles avant de quitter. Ces articles sont les suivants :<\/p>\n\n\n\n Si vous avez une question concernant le plugin, veuillez nous en faire part dans la bo\u00eete de commentaires. Nous vous r\u00e9pondrons tr\u00e8s rapidement avec une r\u00e9ponse satisfaisante.<\/p>","protected":false},"excerpt":{"rendered":" A feature box is a designed area on a web page that draws attention to specific content, products, and services. Feature boxes are designed with elements like images, icons, concise text, and buttons. Tableberg is a multipurpose table-builder plugin. It can help you create wonderful layouts for your feature boxes. In this tutorial post, we’ll […]<\/p>\n","protected":false},"author":1,"featured_media":3189,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[10,109,102],"class_list":["post-3138","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-customize-table","tag-customize-web-pages","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/How-to-Add-Feature-Boxes-in-WordPress-website.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\/3138","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=3138"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3138\/revisions"}],"predecessor-version":[{"id":9030,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3138\/revisions\/9030"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/3189"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=3138"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=3138"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=3138"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
Avec l'\u00e9diteur de blocs<\/strong><\/p>\n\n\n\n![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/05\/Tableberg.png\")
<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n\u00c9tape 01 : Ajouter le bloc Tableberg \u00e0 l'\u00e9diteur<\/h2>\n\n\n\n
![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/01\/Find-and-add-the-TableBerg-block-to-your-Gutenberg-editor.webp\")
<\/figure>\n\n\n\n![\"D\u00e9finir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Select-the-number-of-rows-and-columns.webp\")
<\/figure>\n\n\n\n![\"Des](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Rows-and-columns-are-added.webp\")
<\/figure>\n\n\n\n\u00c9tape 02 : Ajouter une image de produit \u00e0 la bo\u00eete<\/h2>\n\n\n\n
![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-Product-Image-to-the-Box-1.webp\")
<\/figure>\n\n\n\n![\"Redimensionner](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Resize-image-into-the-feature-box.webp\")
<\/figure>\n\n\n\n\u00c9tape 03 : Ajouter un classement par \u00e9toiles<\/h2>\n\n\n\n
![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-star-rating-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Valeur](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-value-for-the-Star-Rating-block.webp\")
<\/figure>\n\n\n\n\u00c9tape 04 : Ajouter un bouton CTA<\/h2>\n\n\n\n
![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-CTA-Button-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"Personnaliser](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-button-on-the-feature-box.webp\")
<\/figure>\n\n\n\n\u00c9tape 05 : Ajouter la liste et la description des caract\u00e9ristiques<\/h2>\n\n\n\n
![\"Fusionner](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Merge-cells-for-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-Paragraph-block-to-the-feature-box-to-add-text.webp\")
<\/figure>\n\n\n\n![\"Ajouter](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-the-feature-list-to-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Liste](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/List-your-product-features.webp\")
<\/figure>\n\n\n\n![\"Ajoutez](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-a-short-description-about-your-product.webp\")
<\/figure>\n\n\n\n\u00c9tape 06 : Personnaliser les bordures de la bo\u00eete \u00e0 outils<\/h2>\n\n\n\n
![\"Personnaliser](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Customize-the-Feature-Box-Borders.webp\")
<\/figure>\n\n\n\n\u00c9tape 07 : Ajout d'un ruban \u00e0 la bo\u00eete \u00e0 outils<\/h2>\n\n\n\n
![\"Ajout](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Add-Ribbon-to-the-Feature-Box.webp\")
<\/figure>\n\n\n\n![\"D\u00e9finir](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Set-the-ribbon-text-and-its-position-on-the-feature-box.webp\")
<\/figure>\n\n\n\n![\"Choisissez](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Choose-color-the-ribbon.webp\")
<\/figure>\n\n\n\n\u00c9tape 08 : Pr\u00e9visualisation de la bo\u00eete \u00e0 outils<\/h2>\n\n\n\n
![\"Pr\u00e9visualisation](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/Preview-the-Feature-Box.webp\")
<\/figure>\n\n\n\nConclusion<\/h2>\n\n\n\n
\n