How To Create Content Boxes In WordPress (With CSS)

A content box highlights specific paragraphs. It wraps the content in styled layout and boxes using HTML tag <div>. These boxes are built, designed and styled using CSS.

Using a content box you can put a box around or behind the text in WordPress.

You can create your own content boxes by using padding, margin, border, color and columns. You can also use HTML commands such as span to add extra styling in your boxes.

If you are a regular reader, you may have noticed I have been using them in my posts quite often. In case your unfamiliar with what it is, this is how it looks:

Here you see what some people would know as the info, feature, or shortcode box. However, all three examples are primarily called content boxes and are the same.

Getting Started

You can use content boxes for many things. From highlighting a precautionary step, a disclaimer, a disclosure or a simple tip. It just creates a new pleasing element in your content people really enjoy.

It is an effective technique for engaging your visitors.

Many websites use content boxes to display features, services, and work experience.

How To Create Content Boxes Using CSS

There are many types of content boxes and all are different in some ways.

I’ll show you a demo of each of several different types of content boxes and below each, I’ll give the CSS code you can copy/paste in your WordPress CSS file.

1.Without Title

This is a type of content box that doesn’t have any title area. You can use them to highlight any text but without any title or heading.

To use this, Copy and Paste the CSS given below in your WordPress CSS file.

.bfb-content-box{
background-color: #42d1fd;
border-color: #d9f6ff;
color: #ffffff;
border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius: 3px;
}

Whenever you have to use this in your blog posts, follow these steps:

  1. Open your WordPress post editor
  2. Switch to the text editor

Then type:


<div class="bfb-content-box"> your text here </div>


You can change the background color by changing the value in the code background-color:. Search for your color’s hex code on Google and copy/paste it next to the background-color: in the CSS code.

2. Content Box With Title & White Background

This is a type of content box that has a title area. You can add a title at the bottom and the text background below it will be white.

To use this content box add this line of code in your WordPress CSS file:

.su-box-title {
display: block;
padding: .5em 1em;
font-weight: 700;
font-size: 1.1em;
background-color: #4fff59;
color: #FFFFFF;
border-top-left-radius: 1px;
border-top-right-radius: 1px;
border-color: #3fcc47;
border-radius: 3px;
}

Then add this code:

.su-box-content.green {
background-color: #fff;
color: #444;
padding: 1em;
border-color: #3fcc47;
border-radius: 3px;
}

To display this particular content box, paste this code wherever you want to show it:


<div class="su-box-content green"> <span class="su-box-title"> your title</span> your text here </div>



You can also add an emoticon or icon before the title to make your boxes a good attraction.

3. Content Box with Title And Colored Text Background

This content box looks very attractive especially because of its dual color tone.

The tile displays a beautiful opaque title block and below that the content has a smooth translucent red background. The best part, you can change the title block and content background color separately.

Copy/paste the code below in your WordPress CSS file:

#primary .entry-content .content-box .title {
margin: -2rem -2rem 1rem -2rem;
padding: 0.5rem 2rem 0.5rem 1rem;
display: block;
font-weight: bold;
color: #FFF;
font-size: 1.125rem;
}

And then paste this code:

.entry-content .content-box.bforbloggers1{
border-color: #e22828;
}

.entry-content .content-box.bforbloggers1{
background: rgba(226,40,40,0.2);
}

.entry-content .content-box.bforbloggers1.title {
background: #e22828;
}

.entry-content .content-box {
border-radius: 5px;
border: 1px solid;
padding: 2rem 2rem 1rem 2rem;
margin: 0 0 2rem 0;
font-weight: normal;
}

To show this content box, use the code shown below:

<div class="content-box bforbloggers1"> <span class="title"> Your title here </span> Your content here.</div>


4. Without Title & Background Color

This is one of the simplest looking content boxes. Its minimal and does the job of wrapping a text and images perfectly.

To use this, copy/paste the CSS code below in your WordPress CSS file:

.box1{
border: 1px solid #10ef53;
}

To display this on your blog, copy/paste this code:


<div class="box1">
This text is enclosed in a box.
</div>



Featured Content Boxes With Icons

Many websites that have SaaS or other digital products to sell use feature boxes and columns. These feature boxes will help you show your customers what are the best features and services you offer in a better way.

To create this type of content box, you will need to install a WordPress plugin called Advanced WP Columns.

After you’ve installed you’ll also need to install another plugin called WPSVG Icons.

After activating Advanced WP Columns, go to its settings. In the “column class” field enter newcolumns and hit save.

Create a new page where you want to add the feature box. On the top of the WordPress editor, you’ll notice a new button to add advanced columns and a new button to add SVG icons in your content.

Click on advanced wp columns button and click on empty and in the next screen select the number of columns you want to add.

Then enter some text in all of the blank columns and click Add.

You have new columns created and you’ll see them in your post editor now. Take your cursor just before the text without giving any space click on the Add Icon button.

A popup like this would appear for you to select an icon from:

Select any icon that you want and click on the “span” button and then click on the Insert Icon button. Repeat this to add icons in other columns boxes as well.

WP SVG Icons adds a shortcode in your boxes to display icons on your live page. So, to make them look big, copy/paste the CSS code below in your WordPress CSS file:

span.wp-svg-smile.smile{
font-size:100px;
}
span.wp-svg-rocket.rocket{
font-size:100px;
}
span.wp-svg-bubbles.bubbles{
font-size:100px;
}
.newcolumns {
border:1.25px solid #fff;
min-height:200px;
padding-top:20px !important;
}

The names “bubbles” in code span.wp-svg-bubbles.bubbles and others will change as you use other icons. The shortcode and icon name is shown in WP SVG icons pop up.

Using Gutenberg Editor

I want to show another very easy way to create a content box that is using Gutenberg editor.

With WordPress 5.0 release the default editor which is called TinyMCE will be replaced with Gutenberg editor. Gutenberg is a block-based editor meaning you can create HTML blocks and style them without touching a line of code.

However, it’s currently in the beta stage and you should not use it only live site. This also means team Automattic (WordPress and Gutenberg developers) may remove the feature. But you can still use it on a test or demo site.

This is how it will work and look in Gutenberg:

You only have to add a block, change its background and text color. It’s pretty easy and fast. You can even adjust the box and text size using the slider.

💡TipYou can also use any page builder like Thrive Architect to have the same ease of use if you don’t want to use Gutenberg.

I’ve written about every content box that I know and use. you can tweak the CSS code for some more personalization and branding as you feel.

You can also use these content boxes in your sidebar or footer widgets area by selecting the text widget.

These content boxes would work in every theme. They don’t have anything to do with a WordPress theme’s core function.php or style.css files.

If you ever change your theme in the future there will be no effect on your content boxes.

That’s all.

Let me know which one you liked the most?

20 Comments

    1. Hi Gaurav,

      Here’s how to add these content box in Blogger blogs. They work the same as they do in WordPress blogs.

      Go to your Blogger dashboard and click on themes in the left sidebar. Then click on the customize button. Then click on the advanced button and select “add CSS” option. This will open window to add custom CSS in your Blogger template.

      Copy one of the above-given content box CSS and paste it there. Click on save and go back to your dashboard. Now to display them live on your blog, copy and paste the HTML code I’ve given above and paste it in the HTML editor of your blogger editor.

      That’s it.

  1. i love this guide and is exactly what i was looking for
    But you have not explained how to add the emoticons or icons with the css methods.
    I prefer this method as i don’t have to use any plugins.
    Please can you edit the post to include how to add the emoticon or provide an answer to my comment here?
    Thanks much appreciated.

    1. You don’t need CSS to add emoticons. I use CMD + Ctrl + Space bar to add emoticons wherever I want in my Mac. In windows you can do that by pressing Windows key + : or . (period).

  2. I just want to make a correction for the green box’s HTML code. For the span class, it should not say “title” but rather “su-box-title” so that the title will actually work with the CSS when previewed.

    Thank you though for this helpful guide, I was able to create a cool box that I need for my content!

    1. Hey Gabrielle,

      “su-box-title” class should be only used (or will be effective) when we style the content box title and it conflicts with other content box titles. If you’ll look closely 2nd CSS code in my post has “su-box-title” to help it take effect while making you free to use the 3rd content box style. If you use the same class “su-box-title” in all titles, you won’t be able to make individual title changes.

      Hope it helps.

      1. Thanks for this, great guide!
        I also have the same issue here and had to use “su-box-title” for the second example. In my case, I only use a single box in a page so I guess this how it should be.
        Other than that, I don’t get a box for the content, only for the title. Is there a way to add a box around the content as it is the case in your example here?
        Thanks!

        1. Assuming you’ve used the exact CSS, Are you sure you’re using “div” tags correctly?

          There’s no way it will only appear for the title if you’re using the exact CSS above.

          Yes, for the second example, it should be “su-box-title”. However if you use: #primary .entry-content .content-box .title {
          margin: -2rem -2rem 1rem -2rem;
          padding: 0.5rem 2rem 0.5rem 1rem;
          display: block;
          font-weight: bold;
          color: #FFF;
          font-size: 1.125rem;
          }

          Then the “title” should work.

  3. Wow! i really need this highlight boxes for my newly created travel blog. Thank God i found your blog

  4. Nitesh Kohli says:

    how to do in blogger
    please can u make a short video of blogger please
    upload on youtube plzz and give me a link 🙂

    thanks

    1. Hey Nitesh,

      The same way you do it in WP. All you need is access to the Blogger Theme code and paste the HTML code as it is.

      I’m not on Youtube currently, but when I do, I will keep this in mind.

  5. Nice article. But is it possible to add a box around the content with some plugin or so ?I don’t have experience with coding and don’t want to experiment with my blog.

  6. Nice article. I want to know about how to add a comparison table, for my website.

  7. Thank you! I’ve been searching the web for a way to make a simple box so that I could insert some related content within posts on my site, and you made things so easy with your examples.

Leave a Reply

Your email address will not be published.