- Method 1: Utilizing The Column Blocks<\/a>
- Step 1: Add A Column Block To The Editor<\/a><\/li>
- Step 3: Customize The Entire Block<\/a><\/li><\/ul><\/li>
- Method 2: Using the Tableberg Plugin<\/a>
- Step 1: Install and Activate the Tableberg Plugin<\/a><\/li>
- Step 2: Create a New Table<\/a><\/li>
- Step 3: Add Content to the Table<\/a><\/li>
- Step 4: Customize your Table<\/a><\/li><\/ul><\/li><\/ul>\n\t\t\t<\/div>\n\t\t<\/div><\/div>\n\n\n
Method 1: Utilizing The Column Blocks<\/strong><\/h2>\n\n\n\n
The Column Block in the Gutenberg editor is a simple way to create info boxes if you want to do it without the help from plugins. It allows you to arrange basic content in a structured format. Here’s how to set up an info box using this approach:<\/p>\n\n\n\n
Step 1: Add A Column Block To The Editor<\/strong><\/h3>\n\n\n\n
Create a new post or page in WordPress and open it in the Gutenberg editor. Proceed to add a Column Block by clicking the “+” icon<\/strong> and then select “Columns”<\/strong> from the block options. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/1.1-2-1024x468.png\")
<\/figure>\n\n\n\nNow, choose a layout<\/strong> with a single column or multiple columns, depending on how you want the info box to appear. For the beginner’s convenience, we\u2019ve chosen a single column to create our info box. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/1.2-2-1024x463.png\")
<\/figure>\n\n\n\nStep 2: Add Different Blocks To Add Content<\/strong><\/p>\n\n\n\n
Next, add content to the column block to create a visually distinct info box. Click the “+” icon <\/strong>to add your preferred block. This, in turn, will guide you to the Gutenberg block library. For example, we start with an image on the top of our info box. So, search for the Image<\/strong> block in the library and select it. Continue to upload your image from the media library or upload it from your device.<\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.1-1024x544.png\")
<\/figure>\n\n\n\nOnce you\u2019ve uploaded your image, you can adjust the alignment<\/strong> of your image and customize the size<\/strong> of it. You can align the image to the left, center, or right. Here, we\u2019ve aligned the picture in the center but kept the size the same. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.2-1024x576.png\")
<\/figure>\n\n\n\nNow, we need a proper heading to highlight our image. To add a Heading<\/strong> block, start by selecting the image, which will open the toolbar, and from there, select the parent block. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.3-1024x569.png\")
<\/figure>\n\n\n\nOnce you\u2019ve selected the parent block, the + icon<\/strong> will appear. So, hit the + icon, search for the Heading<\/strong> block and click on it. Continue to add the texts in the Heading block and align them the way you like. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.4-1024x499.png\")
<\/figure>\n\n\n\nOnce you\u2019re done, repeat the previous procedure of adding blocks. Here, we\u2019ve added a paragraph block<\/strong> and a button block<\/strong> one after another. First, choose the paragraph block<\/strong> and add the necessary text. Align those texts the way you seem necessary. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.5-1024x478.png\")
<\/figure>\n\n\n\nThe next task is buttons. Find the Button blocks from the library, select the block, and add texts to go in that button.<\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.6-1024x471.png\")
<\/figure>\n\n\n\nOnce you\u2019re done, align your buttons<\/strong> the way you like and then add links<\/strong> to your button. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/2.1.7-1024x563.png\")
<\/figure>\n\n\n\nStep 3: Customize The Entire Block<\/strong><\/h3>\n\n\n\n
Customization options allow you to adjust various aspects for a polished look. Select your entire column section<\/strong> by clicking on the column icon on the toolbar. Now, you can start your customization by adjusting the width <\/strong>of the column to ensure it fits well within your page layout. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/3.1-2-1024x591.png\")
<\/figure>\n\n\n\nNext, move to the Styles tab<\/strong>. From here, you can choose the color<\/strong> of the texts, links, and backgrounds; you can alter typography<\/strong> and customize the block’s dimensions<\/strong>. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/3.2-1-1024x559.png\")
<\/figure>\n\n\n\nIf you scroll further down, you will find the settings to add Block Spacing<\/strong> and Border, and Shadows. <\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/3.3-1024x472.png\")
<\/figure>\n\n\n\nWe have changed the text and background color, altered the padding, and introduced some borders and radius. Once the info box is published, we will have the end result. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/3.4-1024x627.png\")
<\/figure>\n\n\n\nMethod 2: Using the Tableberg Plugin<\/strong><\/h2>\n\n\n\n
The Tableberg plugin, primarily used for creating tables, can also be leveraged to design info boxes with a structured format. Here\u2019s how to create an info box using Tableberg:<\/p>\n\n\n\n
Step 1: Install and Activate the Tableberg Plugin<\/strong><\/h3>\n\n\n\n
Go to your WordPress dashboard, navigate to Plugins > Add New,<\/strong> search for “Tableberg<\/strong>,” and click Install Now<\/strong>. Once installed, click Activate<\/strong> to enable the plugin.<\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.1-1024x444.png\")
<\/figure>\n\n\n\nStep 2: Create a New Table<\/strong><\/h3>\n\n\n\n
Click the + icon<\/strong> from your editor and search for the Tableberg<\/strong> plugin from the library. Once you find it, click on it. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.2-1024x469.png\")
<\/figure>\n\n\n\nNow, you need to select the number of columns and rows for your info box. Here, we will create a single-column box; that’s why we\u2019ve selected 1 row and 1 column<\/strong>. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.3-1024x612.png\")
<\/figure>\n\n\n\nStep 3: Add Content to the Table<\/strong><\/h3>\n\n\n\n
As we did in the first method, we\u2019ll start by adding images in our info box. Hit the + icon<\/strong>, search for the Image block<\/strong>, and add it to your posts. Then, upload the image from your device or media library. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.4-1024x469.png\")
<\/figure>\n\n\n\nAgain, if you need any adjustments in the alignment and size, do the same as shown in the picture below. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.5-1024x627.png\")
<\/figure>\n\n\n\nNext, we\u2019ll put the text after the image by adding a Paragraph block<\/strong>. Click the + sign, search for the paragraph block, and add it. If you think any change in alignment is necessary, do it. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.6-1024x581.png\")
<\/figure>\n\n\n\nThe last task is adding buttons. Select the parent block<\/strong>, find the + icon<\/strong>, search for buttons<\/strong>, and add it to the editor. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.7-1024x476.png\")
<\/figure>\n\n\n\nOnce you\u2019ve completed this, add text<\/strong> to your buttons, check the alignments<\/strong> of your button, and add links<\/strong> to it. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.8-1024x600.png\")
<\/figure>\n\n\n\nStep 4: Customize your Table<\/strong><\/h3>\n\n\n\n
After setting up the Tableberg box with your content, you can proceed to customize and style the box as a whole. But keep in mind you can also customize every individual block we\u2019ve used here. For now, we are sticking with the whole table. <\/p>\n\n\n\n
First, click the Tableberg icon<\/strong> in the toolbar to select the entire box. Then, slide to the Settings Tab<\/strong> and adjust the width <\/strong>of the box to fit the layout of your page or post. <\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.9-1024x472.png\")
<\/figure>\n\n\n\nThen, move to the Styles Tab<\/strong> to customize the box\u2019s background color, padding, margin, and space. <\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/5.10-1024x436.png\")
<\/figure>\n\n\n\nIf you scroll down further, you will find more options to change the table, inner and column border, global font color, and more. <\/strong><\/p>\n\n\n\n
![\"\"](\"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/last-1024x433.png\")
<\/figure>\n\n\n\nThis is how you can make a perfect info box. If you need more than one info box, just alter the number of columns and rows and then follow the same procedure.<\/p>\n\n\n\n
Conclusion<\/strong><\/h4>\n\n\n\n
And there you have it, your Tableberg info box styled to perfection. With just a few tweaks, your content can shift from ordinary to eye-catching, pulling attention right where it matters. The customization possibilities are endless, so let your imagination run wild. Experiment with colors, play around with borders and add finishing touches that make every box a visual delight. Let your info boxes not only convey information but also add a touch of flair to your entire website.<\/p>\n","protected":false},"excerpt":{"rendered":"
Info boxes are now a common tool for websites that need to share important information clearly and attractively. Basically, if you want to draw attention to a particular promotion, drive your viewer’s attention to key details and important notices, or encourage your users toward fruitful CTAs, info boxes offer a simple solution to make your […]<\/p>\n","protected":false},"author":9,"featured_media":4349,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7],"tags":[],"class_list":["post-4314","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2024\/10\/info-box-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/es\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/4314","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/comments?post=4314"}],"version-history":[{"count":6,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/4314\/revisions"}],"predecessor-version":[{"id":4355,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/posts\/4314\/revisions\/4355"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media\/4349"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/media?parent=4314"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/categories?post=4314"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/es\/wp-json\/wp\/v2\/tags?post=4314"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}
- Step 2: Create a New Table<\/a><\/li>
- Step 3: Customize The Entire Block<\/a><\/li><\/ul><\/li>
- Step 1: Add A Column Block To The Editor<\/a><\/li>