How to add a content box in WordPress

Content boxes are also called feature boxes. In this tutorial, I am going to walk you step by step through the process by which you can add a content box for your WordPress site.


When going through blogs, you must have come across at least one of these beautiful boxes online. They are well-designed. They often have icons and beautiful imagery and in general give a good sense of aesthetics to the viewer.


This has the indirect impact of increasing dwell time on your posts. You could do this automatically with themes like ThriveBuilder that have an entire post format framework behind them. Or you could follow my tutorial and do it for any WordPress site.


What are feature boxes good for?

Feature boxes stand out from the rest of the page. With that, they draw the attention of the reader to what’s important. If someone is in no mood to read the whole post, feature/content boxes let him hurriedly scroll through the copy assimilating what’s most important.

You could for instance pack:

  • The pros and cons of the product in a feature box
  • Have a section that says who it is for
  • Enlist the most beloved features of a tool/product 
  • Summarize the blog post


And so on.

This is only a short list of what you can do with a content box.


Content boxes with icons

With a content box that has icons you can display features of a product with the use of recognizable icons. Done this way, especially on sales pages, your product gets a face list and catches the attention of the reader.


Here’s an example of what I am talking about.

How to add feature boxes with icons in WordPress

To do this successfully you need the help of two plugins

Install the plugin called Advanced WP columns. It’s free to use.

Next install and activate the WP SVG plugin. This is also free to use.


Once you activate it, go to settings>>Advanced WP Columns to choose the configuration options.

From there go down to the column that sas class and enter mycolumns next to it.

Save changes to save the settings.

Now open up a page or post where you want to add those feature boxes. Once you open up the page or post in the editing menu above you will see two new options one for advanced wp columns and another one for the WP SVG.

The former will show up as Add Icon.

Click on the option for the Wp advanced column. Once you do you get an option to add columns.

Select the number of columns you want to add and add a little text. This ensures that the columns remain visible. Once you do that you can see the columns on the text editor.


Next click the add icon button on the editor. Once you do, you can see a template with icons that you can use.

Click on the icon you want to use. Next click on the span button inside the template. Once you do, its ready. Click on the insert button to get a code.

Use the shortcode to insert the icons.


With the gutenberg editor you can add boxes even more easily

The gutenberg editor operates on blocks. And you can add colored boxes and gradients without jumping through the hooplas of css and html.

Click on the plus sign to add a box. Choose a color and change it. It’s pretty dope.


Add a simple colored box with css

To add a simple colored text box here’s what you can do

Add this code to your css file

  1. .content-box-blue,
  2. .content-box-gray,
  3. .content-box-green,
  4. .content-box-purple,
  5. .content-box-red,
  6. .content-box-yellow {
  7.    margin: 0 0 25px;
  8.    overflow: hidden;
  9.    padding: 20px;
  10. }
  11. .content-box-blue {
  12.    background-color: #d8ecf7;
  13.    border: 1px solid #afcde3;
  14. }
  15. .content-box-gray {
  16.    background-color: #e2e2e2;
  17.    border: 1px solid #bdbdbd;
  18. }
  19. .content-box-green {
  20.    background-color: #d9edc2;
  21.    border: 1px solid #b2ce96;
  22. }
  23. .content-box-purple {
  24.    background-color: #e2e2f9;
  25.    border: 1px solid #bebde9;
  26. }
  27. .content-box-red {
  28.    background-color: #f9dbdb;
  29.    border: 1px solid #e9b3b3;
  30. }
  31. .content-box-yellow {
  32.    background-color: #fef5c4;
  33.    border: 1px solid #fadf98;

To call this code use this snippet in your post <div class=“content-box-COLOR”> Your text HERE</div>

Leave a Reply

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

You may use these HTML tags and attributes:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>