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’ attention to important details.
Content boxes are suitable to showcase call-to-action sections, testimonials, reviews, and key features of products or services. There are several ways to create content boxes in WordPress websites.
In the following write-up of this article, we’ll show you three handy methods of how to create content boxes in WordPress. Be with us till the end.
Method |
Plugin |
Preview |
---|---|---|
Not Required |
||
Method 1: Using the Columns Block
You can create and design a basic-level content box using the default WordPress Columns block. Follow the steps explained below.
Step 01: Add the Columns Block to the Editor
Find the Column block from the Gutenberg block library by pressing the plus (+) button and add it to your editor.
Select the one-cell column from the available options.
Step 02: Add Content Blocks to the Column
The Columns block will allow you to add other blocks as well inside it. You can add any block you want to curate your content.
Click the plus (+) icon on the column block. It will open the Gutenberg block library, from which you can choose and add the paragraph block.
We can see we have already added text content to the column block. After that, you can add more blocks to the columns as you want. Suppose we’ll add the Image block.
Click the Columns icon on the toolbar. Hit the plus (+) icon. Find and select the Image block from the library.
You can see we have added an image to the columns block.
Step 03: Customize the Entire Columns Block
Select the entire column section by clicking the column icon on the toolbar. Go to the Settings tab. You can adjust the Width of the column from the respective option.
Next, come to the Styles tab. You’ll get options to modify text color, background color, typography, and dimensions of the block.
Scrolling down the section, you’ll get further options to add block spacing and border to the columns block.
Method 2: Using the TableBerg Plugin
TableBerg is a powerful table-builder plugin that can power up the default table building solution of WordPress. You can create appealing content boxes with the plugin as well. Let’s see how to do this.
Step 01: Install and Activate the TableBerg Plugin
Like the above method, go to Plugins > Add New Plugin. Find the TableBerg plugin by typing its name in the search box. Install and activate it.
Step 02: Add the TableBerg Block to the Editor
The plugin comes with a block named TableBerg. Add it to the editor.
If you think of building a table, you can define the number of rows and columns here like the default table block.
But select row 1 and column 0 as we create a content box. You can see the layout has been created instantly.
Step 03: Add Content to the TableBerg Box
TableBerg allows you to add different types of content to its rows and columns by adding content blocks.
Once you place your cursor on the box, you’ll see the block option appears in the bottom-right corner.
Select blocks one by one you want to add to the box to curate your desired content. First, we’ll add the image block.
Next, you can see we have added descriptive text about the product. We have added and used the Paragraph block for this.
Finally, we have added a CTA button.
Step 04: Customize the TableBerg Box
You can customize each block individually you have added to the TableBerg box. After that, you can customize and stylize the entire TableBerg box.
We are not showing how to customize the individual block as it will make the tutorial so long. You can see it on our documentation page.
Select the entire box by clicking the TableBerg icon on the toolbar.
From the Settings tab, you can set your desired width for the box.
From the Styles tab, you can customize the box’s background color, padding, margin, and space.
Thus, you can create a context box with the TableBerg plugin.
Method 3: Using the Ultimate Blocks Plugin
Ultimate Blocks is a promising content marketing plugin with 25+ custom blocks to power up your Gutenberg editor. It has several stunning blocks by which you can create further good-looking content boxes on your site.
Step 01: Install and Activate the Ultimate Blocks Plugin
Go to Plugins > Add New Plugin. Find the Ultimate Blocks plugin by typing its name in the search box. Install and activate it once the plugin appears below.
Step 02: Add the Styled Box Block of the Plugin to Your Gutenberg Editor
The Ultimate Blocks plugin includes a dedicated block named Styled Box to create content boxes. Find and add it to the editor.
The block offers you four types of boxes. Choose the one you like to display your message. Each one has a unique set of functionalities.
For the tutorial, we will select the Feature Box.
The feature box allows you to add an image, a title, and a description. Hope you can do them yourself.
Step 03: Add Content to the Block
By default, the block lets you display one product and describe its features. But you can add and display multiple products with the block. Select the column type you want to define how many products you want to display.
Now, add content to the options you see within the Styled Box block.
You can see we have added content to the block.
Step 04: Customize and Stylize the Styled Box Block
Come to the Settings tab. From the Select Mode option, you can change the Feature box to other styled boxes as shown above, like the notification, bordered, and number box.
After that, from the Responsive Control option, you can hide the block from any particular device type.
Next, come to the Styles tab. You can modify the Padding and Margin of the block from this tab.
Thus, you can create a content box using the Ultimate Blocks plugin.
Finishing Notes!
Ultimate Blocks and TableBerg are two multifunctional plugins that aim to revolutionize the Gutenberg system, enabling users to create sophisticated content easily.
TableBerg is still in the development process and promises to come up with many advanced features very soon. On the flip side, Ultimate Blocks is already a popular plugin used by 60K+ websites worldwide.
If you have any questions regarding them, feel free to ask us questions anytime through the comment box.