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:

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.

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?

Recommended For You

How to Hide Author Box in WordPress

Do This to Fix 503 Service Unavailable Issue in WordPress

Top 7 Web Host That Offer Free Migration For WordPress Websites

Fix Plugin Could Not Be Activated Because It Triggered a Fatal Error

Share on: