How To Use Simple HTML and CSS To Style Your Sidebar Widgets In WordPress [Video]

Did you know, with some basic HTML and simple CSS you can turn your boring looking sidebar widgets into attractive, attention-grabbing widgets? Here's how.

WordPress is an awesome platform for creating websites, and regardless of the theme you are using, you can also create customized, widgetized content areas.

In the video tutorial below, you'll learn how to use very basic HTML to create your sidebar widgets, and apply simple CSS to make them truly stand out.

For your convenience, I've included both the HTML and CSS sample code that I used in the video tutorial below. Enjoy.

Creating your HTML widgets

Simply drag and drop a Custom HTML widget anywhere into your website's sidebar. See image below.

<div class="widget-1"><h3>Your headline title<h3> <p>Add your content here</p> <div align="center"><button>Call To Action</button></div></div>

If you want to create additional custom HTML widgets in your sidebar, you can use the same code above.

However, if you want to apply a different style to each of your additional widgets using CSS, you'll need to change class name for each HTML widget. For example, widget-2widget-3, and so on.

Applying CSS to style your widgets

To style the above HTML widget, you can use the simple CSS sample code below. Play around with the values to create a uniquely styled widget for your blog or website.

The CSS sample code below varies slightly to the one I used in the video.

.widget-1 {
   background-color: #f1f1f1;
   padding: 20px;
   border: 3px solid #494949;
   -webkit-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
   -moz-box-shadow: 0px 5px 40px -10px rgba(0,0,0,0.57);
   box-shadow: 5px 40px -10px rgba(0,0,0,0.57);
 }
 .widget-1 h3 {
   font-weight: bold;
   text-transform: uppercase;
   letter-spacing: 1px;
 }
 .widget-1 p {
   font-style: italic;
 }
 .widget-1 button {
   background-color: #494949;
   border-radius: 6px;
 }
 .widget-1 button:hover {
   background-color: #ed3330;
 }

If you have any questions, feel free to get in touch with me here.

Psst! Do you need help with your website design? Click here to learn more.

Enjoyed reading this post?

Hey! Thanks a bunch for reading this post, I hope it was of value to you. I publish new posts every week, so be sure to check back soon, or hit the button below to subscribe.
subscribe to updates
Read Commenting Policy
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram
Share via
Copy link