{"id":3050,"date":"2024-08-30T17:49:57","date_gmt":"2024-08-30T17:49:57","guid":{"rendered":"https:\/\/tableberg.com\/?p=3050"},"modified":"2024-08-31T05:20:41","modified_gmt":"2024-08-31T05:20:41","slug":"comment-ajouter-des-boites-a-icones-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-add-icon-boxes-in-wordpress\/","title":{"rendered":"Comment ajouter des bo\u00eetes d'ic\u00f4nes dans WordPress"},"content":{"rendered":"\n

An icon box typically consists of a small graphic that is paired with a short piece of text. Using icon boxes, you can highlight things like key features, services, benefits, and offers in visually captivating and meaningful ways.<\/p>\n\n\n\n

You can also use icon boxes to showcase testimonials, call to action, process steps, and more. Tableberg<\/a> is a versatile table builder plugin. You can create gorgeous and engaging icon boxes easily with the plugin.<\/p>\n\n\n\n

In the following parts of this article, we’ll explain to you how to add icon boxes in WordPress with the plugin. Get the plugin by clicking the links below.<\/p>\n\n\n\n

\n
\n
\n
\n

Create Beautiful Tables <\/strong>
With Block Editor<\/strong><\/p>\n\n\n\n

\n
Try Free<\/a><\/div>\n\n\n\n
Get Pro<\/a><\/div>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n
\n
\"\"<\/figure>\n<\/div>\n<\/div>\n<\/div>\n\n\n\n

Step 01: Add the Tableberg Block to the Editor<\/h2>\n\n\n\n

Add the Tableberg block<\/strong> to your editor as you would any Gutenberg block.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Set the number of rows and columns<\/strong> according to the number of icon boxes you want to create.<\/p>\n\n\n\n

For example, in this tutorial, we’ll create three icon boxes. So, we’ll set 3 columns and 1 row.<\/p>\n\n\n\n

\"Set<\/figure>\n\n\n\n

You can see the number of boxes that have been created. Next, we’ll add content to create icon boxes.<\/p>\n\n\n\n

\"Rows<\/figure>\n\n\n\n

Step 02: Add an Icon to a Box\/Cell<\/h2>\n\n\n\n

Tableber allows you to add various elements to its cells by which you can make the table cells super attractive. We’ll explain them in this section.<\/p>\n\n\n\n

Add a Background Color to the Cells<\/h3>\n\n\n\n

Select the entire table by clicking<\/strong> the Tableberg icon<\/strong> on the toolbar. Then, go to the Styles tab<\/strong>. Under the tab, you’ll see the color options. Using the suitable option, set a background for the table cells.<\/p>\n\n\n\n

Note:<\/strong> You must set the background color at the beginning as all the table box elements will be designed based on it. <\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Add an Icon to a Box\/Cell<\/h3>\n\n\n\n

You can add blocks inside the table cells like the Gutenberg block editor. Click the plus (+) icon<\/strong> on a cell. Find and add the Icon block<\/strong> to the cell.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Change and Select an Icon<\/h3>\n\n\n\n

Go to the Settings tab<\/strong> on the right sidebar while keeping the Icon block selected. Under this tab, you’ll get options to increase the icon size<\/strong>, set rotation<\/strong>, and change the icon<\/strong>.<\/p>\n\n\n\n

\"Change<\/figure>\n\n\n\n

You may select an icon from the existing icon library or import one from your local drive.<\/p>\n\n\n\n

\"Select<\/figure>\n\n\n\n

Colorize the Icon<\/h3>\n\n\n\n

Go to the Styles tab<\/strong>. Set the Icon color<\/strong> and the Background color<\/strong>.<\/p>\n\n\n\n

Indeed, the background color layout doesn’t look good, right? We have got you covered.<\/p>\n\n\n\n

\"Colorize<\/figure>\n\n\n\n

Scroll down a bit below the Styles tab. You’ll see the padding, margin,<\/strong> and radius<\/strong> options. <\/p>\n\n\n\n

You can create a layout for the background color by placing suitable values, as in the image below.<\/p>\n\n\n\n

\"Change<\/figure>\n\n\n\n

Step 03: Add Text to the Cell\/Box<\/h2>\n\n\n\n

No icon box is meaningful without text content. Add the Paragraph block<\/strong> below the icon on the cell.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Add a title<\/strong> about the icon box. Next, align it<\/strong> centrally, select a color<\/strong>, and set a size<\/strong> for the text.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Similarly, add a description of the icon box using the Paragraph block<\/strong>.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Step 04: Add a Button to the Cell\/Box<\/h2>\n\n\n\n

You can direct users to another page, documentation, or resource by adding a button. Add the Button block<\/strong> to the cell.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

After adding the button, add a CTA copy<\/strong>, change its text and background color<\/strong>, and increase the copy size<\/strong>.<\/p>\n\n\n\n

\"Customize<\/figure>\n\n\n\n

Step 05: Add Spaces Between the Blocks<\/h2>\n\n\n\n

The cell looks congested, right? It’s because there isn’t enough space between the blocks in the cell. But you can easily solve this problem.<\/p>\n\n\n\n

Select the entire cell<\/strong>. Go to the Styles tab<\/strong>. Scroll down a bit below. <\/p>\n\n\n\n

You’ll get Cell Padding<\/strong> and Block Spacing<\/strong> options. Using these options, you can create necessary spaces between these blocks.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

So, your one icon box is ready.<\/p>\n\n\n\n

Step 06: Duplicate the Icon Box<\/h2>\n\n\n\n

You can manually create other icon boxes in the same way, or you can duplicate the box. Tableberg has an exciting feature for duplicate rows and columns.<\/p>\n\n\n\n

Click the [Pro] Edit Table<\/strong> option on the toolbar. The rest you can do yourself. For a detailed guide, explore this post on how to add service boxes in WordPress<\/a>. We have explained how to use this feature at the later part of this post.<\/p>\n\n\n\n

\"Duplicate<\/figure>\n\n\n\n

You can see in the image below that we have duplicated the icon box and changed its content.<\/p>\n\n\n\n

\"Icon<\/figure>\n\n\n\n

Step 07: Add Spaces Between the Cells<\/h2>\n\n\n\n

Go to the Styles tab<\/strong>. Scroll down to\u00a0Cell Spacing.<\/strong>\u00a0This option allows you to add space between the cells, as in the image below<\/span>.<\/p>\n\n\n\n

\"Add<\/figure>\n\n\n\n

Step 08: Remove the Cell Border<\/h2>\n\n\n\n

Under the Styles tab, you’ll see the Table Border<\/strong> and Inner Border <\/strong>options. Set the border value to 0<\/strong> in both places. This will remove borders from the cells.<\/p>\n\n\n\n

\"Remove<\/figure>\n\n\n\n

Thus, you can create an icon box in WordPress.<\/p>\n\n\n\n

Closing Up!<\/h2>\n\n\n\n

Hope you enjoyed this tutorial. By following the steps outlined in this guide, you can easily add and customize icon boxes to align with your brand and effectively highlight key information.<\/p>\n\n\n\n

Before moving away, have a few more minutes to learn how to format tables in WordPress<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"

An icon box typically consists of a small graphic that is paired with a short piece of text. Using icon boxes, you can highlight things like key features, services, benefits, and offers in visually captivating and meaningful ways. You can also use icon boxes to showcase testimonials, call to action, process steps, and more. Tableberg […]<\/p>\n","protected":false},"author":1,"featured_media":3137,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[26,10,102],"class_list":["post-3050","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","tag-create-a-website","tag-customize-table","tag-web-design"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/08\/How-to-Add-Icon-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\/3050","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=3050"}],"version-history":[{"count":5,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3050\/revisions"}],"predecessor-version":[{"id":9000,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/3050\/revisions\/9000"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/3137"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=3050"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=3050"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=3050"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}