how to create content box in wordpress
Wordpress

How to create content box in WordPress post

Things becomes more beautiful when we add some color to them and it’s universal truth that color attract more people toward them. See below image, I am sure you first look into Butterfly then what around it.

Similarly when we add a color box in our post then our content looks more beautiful.

WordPress editor has many options to make content great but not help you out in adding color box. So here we will walk you through the steps to create a color box.

You need to follow below process to show content box

  • Add CSS code in stylesheet
  • Add HTML code in content

So let’s see …

Create color box in content

Firstly go to your WordPress admin and navigate to Appearance > Edit CSS > Additional CSS 

and add below CSS code then click on save.

/* Green content box*/
.content-box-green{
background-color: #b3efb3;
border: 1px solid #90f490;
padding: 14px 22px;
margin: 20px 0;
}

You can change colour by just updating background and border color in above code. like

/* Red content box */
.content-box-Red{
background-color: #f2dcd5;
border: 1px solid #e1b4b0;
padding: 14px 22px;
margin: 20px 0;
}

/* Blue content box */
.content-box-Blue{
background-color: #e3e7ef;
border: 1px solid #b4c2e8;
padding: 14px 22px;
margin: 20px 0;
}

So till now we have added css now it’s time to add HTML code to show color box. So open your content and then move to Text option as below.

And write your content in <div> tag with class content-box-Green like below.

<div class=”content-box-Green”>
Your text goes here.
</div>

This above code will use your updated CSS and get you a beautiful box like below.

Your text goes here.

You can even change just change background and border color and get any type of colored box.

Your text goes here.
Your text goes here.
Your text goes here.
Your text goes here.

Hope you like this post and now you can easily create a color box in a wordpress post. If you are using any other ways of doing same then write us in a comment.

Pankaj Kamariya

An IT engineer by profession and blogger by passion. Very keen to explore new things online and Help people by sharing many legitimate ways of making money online.

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.