How to Create Content Boxes in WordPress

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 One: 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.

Add the Columns block to your editor

Select the one-cell column from the available options.

Select the single cell column layout

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.

Add Content Blocks to the Column

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.

Add the Paragraph block to the columns 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.

Add the image block to the columns block

You can see we have added an image to the columns block.

Image added 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.

Customize the Entire Columns Block

Next, come to the Styles tab. You’ll get options to modify text color, background color, typography, and dimensions of the block.

Stylize the column block

Scrolling down the section, you’ll get further options to add block spacing and border to the columns block.

Add block spacing and border to the columns block

Method Two: 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.

Install and activate the Ultimate Blocks plugin

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.

Add the Styled Block of the Plugin to Your Gutenberg 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.

Styled boxes

The feature box allows you to add an image, a title, and a description. Hope you can do them yourself.

Things you can add to the feature box

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.

Select the column type

Now, add content to the options you see within the Styled Box block.

Add content to the styled box block

You can see we have added content to the block.

Content added to the styled box 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.

Customize the Styled Box block

Next, come to the Styles tab. You can modify the Padding and Margin of the block from this tab.

Stylize the Styled box block

Thus, you can create a content box using the Ultimate Blocks plugin.

Method Three: 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.

Install and activate the TableBerg plugin

Step 02: Add the TableBerg Block to the Editor

The plugin comes with a block named TableBerg. Add it to the editor.

Find and add the TableBerg block to your Gutenberg editor

If you think of building a table, you can define the number of rows and columns here like the default table block.

Define table column and row

But select row 1 and column 0 as we create a content box. You can see the layout has been created instantly.

Add Content to the TableBerg Box

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.

Add Content to the TableBerg Box

Select blocks one by one you want to add to the box to curate your desired content. First, we’ll add the image block.

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.

Add paragraph to the block

Finally, we have added a CTA button.

Add a CTA button to the TableBerg box

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.

Customize Settings of the TableBerg Box

From the Settings tab, you can set your desired width for the box.

Customize the table width

From the Styles tab, you can customize the box’s background color, padding, margin, and space.

Customize the content box

Thus, you can create a context box with the TableBerg 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.

Leave a Reply

Your email address will not be published. Required fields are marked *

Early Bird Offer Is Live Now!
This is default text for notification bar