Here's a simple little tutorial for you. With some basic HTML and CSS, you can transform your sidebar widgets from 'meh' looking to 'wow' in just a few easy steps. Here's how.
WordPress is an awesome platform for creating websites as well as creating blogs. And it doesn't really matter what theme you are using, with a bit of know-how, you can tweak your WordPress site and customize it the way you want.
Of course, nowadays, we have access to lots of visual website building tools and plugins to make this job easier. But for the simplest tweaks, all you need is some HTML and CSS.
Talking of which, In the video tutorial below, you'll learn how to use some basic HTML to create your sidebar widgets. Then you can apply some simple CSS to make them truly stand out. I'll show you how.
For your convenience, I've included both the HTML and CSS sample code that I used in the video tutorial below.
Simply drag and drop a Custom HTML widget anywhere into your website's sidebar. See the image below the code.
<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 reuse the code above.
However, if you want to apply a different style to each of your additional widgets using CSS, you'll need to change the class name for each HTML widget. For example, widget-2, widget-3, and so on.
To style the above HTML widget, you can use the simple CSS sample code below. Play around with the values to style the widgets to your liking. If you're not comfortable modifying CSS yourself, you can get a WordPress developer to do it for you.
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;
}
There you have it. You've created some custom sidebar widgets for your blog. Now that wasn't so hard, was it? And now that you know how to do it, you can apply the same techniques for styling all your other widgets.
