If you’re tired of your dull and boring looking sidebars in your WordPress website, well, you’ll be pleased to know that you can spice them up a little bit using some very simple HTML and CSS.
Sidebars come in all shapes, sizes, and styles. Depending on the theme you’re using, you either have a great looking sidebar or one that looks boring and dated.
Are sidebars really essential?
I think they can certainly be useful, but it really comes down to 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 effective CSS tweaks.
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.
Using custom HTML widgets in your sidebar
If you’re brand new to WordPress and using widgets, before you can use the code displayed below, you’ll first need to create some custom HTML widgets with your own content placed inside them. See the image below.
This is relatively easy to do. Depending on the theme you have installed for your site, you can simply go to Appearance > Widget > and drag a Custom HTML widget into 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>
Usage: You can use the above code in more than one HTML widget if you wish, just make sure you give each widget it’s own custom class name. For example, ‘widget-2’ and ‘widget-3’.
Next, 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.
Here’s a little piece of pre-written custom CSS you can copy and paste into your Additional CSS box to style your sidebar widgets to your liking. You can change any part of the code to meet your needs.
.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;
}
That’s it, you’re all done. Be sure to subscribe to my email newsletter for more code snippets when I publish them here in the future.
Need assistance?
If you require some assistance implementing the code above or need help with your website redesign entirely, check out this page all about my growth-driven design services.