How To Create A Colored Box With Text

Shares 23

FREE ACCESS TO OUR RESOUCE LIBRARY

Sign-up for our weekly emails and grab your free copy of "Create a Marriage that You Love" along with other AMAZING resources!
YES PLEASE!
We hate spam. Your email will not be shared.

We all want a website that is beautiful and looks professional. For some people, hiring a web designer is in their budget. For those who are work at home moms, just starting on their blogging journey, or on a tight budget, money might be scarce.

Do you want a beautiful and professional looking website without worrying about your CSS or HTML? In less than 5 steps I will show you how to create a professional looking colored box with text. All you need to do is copy and paste. Click to read! Brought to you by the Easy DIY Website Tutorial Series.

So countless hours are spent searching the internet for easy tutorials and usually you find yourself still scratching your head. Where do I even start?

Although this post is not an all-inclusive “how to design your website” post, the purpose of the Easy DIY Website Tutorial Series is to help you with the creation process.

One of my goals in my personal blogging journey is to make the Home Faith Family Community Library page look professional and stand out. It’s constantly being added to and changing, but it’s a labor of love.

A new addition to the page is the colored box with text. (“EBOOKS” text).

This alone has made my “Shop” page look more organized, professional, and more fun. I am going to show you step-by-step how to you can create a colored box with text without going anywhere near your CSS.

Yes, there is HTML involved, but the hardest part for you to do is copy and paste. Are you ready?

How To Create A Colored Box With Text – Easy DIY Website Tutorial Series

Step 1:

The first thing I need you to do is to find your websites HTML color codes. You can do so HERE or do a Google search if you don’t see your color listed on the linked website.

What is an HTML color code? It’s your website’s colors but in hashtag form (i.e. #3090C7 – is a beautiful shade of blue.)

If you haven’t decided on your website’s colors, take the time to do so. This is one of the best steps to having a professional looking website.

Once you have your HTML color code chosen, move on to step 2.

Step 2:

The following is the code for a very simple colored box with basic text inside. Don’t worry if this looks Greek to you. All you will have to do is copy and paste.

 

<h1 style=”background-color: #f18d9e; margin-left: 20px; margin-right: 20px; padding: 8px; text-align: center;”><span style=”font-size: 30px;”><span style=”color: white;”>TYPE YOUR WORDS HERE</span></span></h1>

 

The red text is where you will put your own HTML color code in just a moment.

So, I want you to highlight and right click with your mouse (or laptop) and “copy” the code above this text. The code is in italics for convenience purposes.

Step 3:

Click on the “text” tab of your page or post.

Find where you would like your banner to go and right click then “paste” the code right there.

Don’t forget to change the HTML color code (hashtag) to the color YOU want!

Something that helps me when I want to create a colored box with text is to paste the codes first before I start writing my content or adding pictures.

This way there is not a bunch of jumble I have to worry about messing around with. Once you have the code pasted in the “text” box, your box will look like this:

This is a colored box

Step 4:

You can change the text “This is a colored box” back on the “visual” tab. This is one of the reasons why I love this particular code.

Your Text Goes Here (Header 1 size)

Highlight the “This is a colored box” and add your word(s) that YOU want in the box. For example, I changed mine to “Your Text Goes Here.”

Use your options above (paragraph indents, paragraph/headers, etc.) to play around with the style, size, position, and color of the text.

 

Step 5:

Celebrate! You took the time to create a colored box with text that won’t slow down your website speed, doesn’t risk your CSS, and you did it in less than 15 minutes!

You are one step closer to having a more professional looking website.

As you take the time to work smart, as well as hard, you will have a gorgeous and professional looking website in no time.

Do you need clarification about this tutorial? Or are there other design questions you have? Ask in the comments below. We would love to hear from you!

P.S. Don’t forget to sign-up for our weekly newsletter where you’ll receive practical tips, inspiration, and a friend in your inbox saying hello! I’ll even send you the password to our amazing library where you can have access to cookbooks, marriage helps, a planner, and more FREE!

Join the Club

Resize_email_opt-in_with_bonuses

Subscribe to our weekly newsletter and get access to our entire Home Faith Family library.

Full of free cookbooks, marriage helps, planners, and more!

Powered by ConvertKit
Shares 23

Leave a Comment

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

YES PLEASE!

Join the Club! 
Free Access to Our Resource Library!

Sign-up for our weekly emails & grab the password to our amazing resource library full of marriage helps, cookbooks, and MORE!
close-link

FREE ACCESS TO OUR RESOUCE LIBRARY

Sign-up for our weekly emails and grab your free copy of "Create a Marriage that You Love" along with other AMAZING resources!
YES PLEASE!
We hate spam. Your email will not be shared.
close-link