Got a WordPress site? Tired of dull and boring-looking sidebars? In this tutorial, I’m going to show you how to spice up your sidebar content using some simple HTML and CSS.
Sidebars come in all shapes, sizes, and styles. So depending on the type of theme you’re using, you either have a great-looking sidebar or one that looks boring and dated.
But, are sidebars essential?
If you’re asking for my opinion, then I think they can certainly be useful, but it comes down to your website goals and personal preference.
For example – If your website has a blog, it’s great to be able to use a sidebar to feature things like a list of your latest or best blog posts, featured pages, a short bio, an incentivized email opt-in form, or even display some social icons, etc.
The only problem with sidebars is that they tend to lack any style that pleases the eye, and as a result, people kind of ignore them. Well, let’s change all of that and make your sidebar widgets stand out using some simple HTML and cool CSS.
💡 Check out the video tutorial below to learn how to style your sidebar elements to make any feature or offering in your sidebar stand out. Please be advised that the tutorial is a few years old now, but you can still get some value from it.
Using custom HTML widgets in your sidebar
If you’re new to WordPress and using widgets in general, before you can use the code displayed below, you’ll first need to create some custom HTML widgets with your content placed inside them. See the image below.
This is relatively easy to do. Again, depending on the theme you have installed for your site, you can simply go to Appearance > Widget > and click on the + icon to add an HTML Block to your primary sidebar.
You can then add the custom HTML code shown below, inside this widget, along with your custom content.
<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>
Use: You can use the above code in more than one HTML block if you wish. If you’d like to style each widget differently, then add a new class to each one. For example, ‘widget-2’ and ‘widget-3’.
OK, now for the CSS part. For this, you’ll need to make a note of the ‘class’ names’, in this case, it is ‘widget-1’, and head over to Customize > Additional CSS, to add your custom CSS.
WPCodeBox plugin
I would highly recommend using the WPCodeBox plugin for adding any custom code to your website safely. With WPCodeBox, you can create a dedicated stylesheet to keep all of your site’s CSS tweaks. This is a premium plugin that you can check out here.
OK, so below you’ll find some CSS you can copy and paste into your Additional CSS box to style your sidebar widgets to your liking. If you’re familiar with CSS, you can change any part of the code to meet your needs.
.widget-1 {
background: #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: #ed3330;
}
That’s it, you’re all done. Be sure to review your sidebar on the front end and make any additional tweaks that you need.
Need assistance?
If you require some assistance implementing the code above, click here to learn more about my membership benefits.