When it comes to building out your websites, you should have content.

Content Comes In Various Forms

Content includes a mix of text, images, videos, banners, call to actions, buttons, boxes, icons, etc.

WordPress Themes offer overall visual layouts for your websites and blogs.

But with simple HTML and CSS code, you can also add visual elements inside your pages and posts to make content more visually appealing.

Content Boxes Are Simple Visual Elements

As with anything, there is always more than one way to achieve your desired end result.

You can make your pages and post more visually appealing by adding content boxes, buttons and special text call outs.

This blue border box is one example of a special note callout. Visually, this content box separates the text inside the box from the page and brings extra attention to it.

These HTML content boxes and buttons can be used for many different purposes:

  • Call to Actions - A specific action you want your viewers to take
  • Special Notes - A special note such as a required affiliate disclosure statement
  • Headlines - A boxed in headline that helps break out sections of a long post
  • Images - An image with a special background color

The sky is the limit with content boxes.

And there are multiple ways to create content boxes and buttons.

You can create a box or button with:

  • HTML - uses HTML code to create boxes and buttons
  • Image - create a button and take a screenshot of it
  • Page Builder Plugins - Use plugins to add visual elements inside your page or post content

You can find plenty of WordPress plugins for page builders that allow you to easily insert in a content box, a button and many more visual elements.

You can even find them themes that come with page builder plugins included.

However, it is very easy and completely free to use HTML code to create a content box.

HTML Makes Websites

HTML is what makes up your website pages anyway. Why not customize the code?

The reason these plugins exist is because HTML is a coding language and can seem technical. So the plugins make it easy to build elements like content boxes without knowing html or how to code.

I personally would like to show how easy HTML really is.

I would like to see if I can convince you that using HTML is easier than you think.

If you know code for specific HTML elements such as a content box, you can easily create these content boxes and customize them however you want.

  • Without installing a plugin
  • Without having to learn how to use the plugin
  • Without worrying about slowing down your site with plugins or images

And if you know of some really good free resources, you can grab more HTML codes for about anything you want.

This tutorial will show you step by step how to create a content box in HTML.

You will get the HTML codes for different content boxes and variations. You will also get a list of resources, tips and tricks to make this an easy learning process.

The 6 Steps in this tutorial include:

  • Step 1 - How To Access Text Editor in WordPress
  • Step 2 - How To Create A Box Around Text in HTML
  • Step 3 - How To Change Box Color in HTML
  • Step 4 - How To Create A Border in HTML
  • Step 5 - How To Create A Button in HTML
  • Step 6 - HTML Code Tips

Ready to get started? Cool. Let's do this!

Next Page -> How To Access Text Editor in WordPress



Join the Discussion
Write something…
Recent messages
Jadatherapy Premium
Thank you for this training

Really appreciate this training because I always wanted to know how to create boxes and then you came along.

Much appreciated

Jennifer
Reply
kimwolfe Premium
Yay Jennifer :) Hit me up if you have any questions.

Hopefully, you will be surprised at how easy it is. Especially for buttons. No plugins or images needed.

Keep me posted how this goes!

Kim
Reply
Jadatherapy Premium
Thank you will do when I get round to it. lol

But I think I will need your help so thank you for the offer.

Jennifer
Reply
kimwolfe Premium
Just don't fear it. It really is easier than you think. Especially, since you can just copy my codes and then edit them in visual editor view of WordPress.
Reply
Jadatherapy Premium
Thank you I will not leave it too long because I want to add to new articles.

Jennifer
Reply
Claudiojuan Premium
Thank you very much very interesting training I am always looking to place the least amount of plugins on my sites. Everything that is HTML and CSS codes seems great to me. Regards!
Reply
kimwolfe Premium
Yes, it is easier than you make think. And there are tons of free resources online to continue your training. Let me know if you have any questions.
Reply
Claudiojuan Premium
OK Kim All questions about HTML and CSS codes you will be my teacher. Thank you!
Reply
kimwolfe Premium
Awesome. I am here for ya :)
Reply
Chrissies Premium
Many thanks Kim :)
Reply
kimwolfe Premium
Thanks Chrissies! Hope this helps.
Reply
Triblu Premium
An EXCELLENT tutorial Kim, Thank YOU!
Reply
kimwolfe Premium
Hey Trish. HUGE THANKS! Appreciate you chiming in and stopping by here.
Reply
merlynmac Premium
Great how-to! I do have on issue. Lesson 4 isn't loading for me. That's the lesson on "How To Change Box Color in HTML". If I'm on Lesson 3 and click on Next Page -> it doesn't work. If I use the menu to get to lesson 4 it doesn't work and if I jump to Lesson 5 and try to go back to lesson 4 using the <- Previous Page button it doesn't work. Everything else is golden!
Reply
merlynmac Premium
Lesson's 6 and 7 are also broken.
Reply
kimwolfe Premium
Hey thanks for the heads up here. I will see if I can figure out how to fix. Thanks again.
Reply
merlynmac Premium
It may not be your training...It looks like the WA servers are having issues....Reach out to support to see if that's the issue. If so, you might not have to do anything but wait.
Reply
kimwolfe Premium
I’ll wait it out then and go from there. Thanks again.
Reply
kimwolfe Premium
Can you confirm you access lessons 4 - 7? I think the issue should be fixed now.
Reply
merlynmac Premium
Confirmed..I can now access all lessons.
Reply
kimwolfe Premium
Thank you :)
Reply
Top