Tired of those same old sidebars? Here is an easy way to add some pizzaz to your Divi Search Widget and Widget Titles. In this tutorial we give you 4 options to choose from.
With these snippets you can give your next Divi project a little something different. You can check out the live demo here.
In this session, I will show you how to target specific sidebars that are added in the Divi Page Builder. I will use specific css classes such as .option-1,.option-2, .option-3 & .option-4.
I did this mainly to allow for 4 different options on 1 website. If you want this to be universal whether on your Page Builder pages or single post pages that do not use Divi Page Builder, then you can omit the css classes and just use .widgettitle h4 without the “option” class before it.
Lets Get Started
1. Create a section and add the Sidebar Module.
2. Now open up the Module Settings and give it a unique class. For this first example lets use: option-1
3. Now save and update page.
The Magic of CSS
Now lets start to dazzle things up a bit with some CSS.
If you are working with a child theme you can go to Appearance>Editor and open your stylesheet. If not, go to Appearance>Divi Theme Options>ePanel>Custom CSS (which is located at the bottom of the ePanel)
/*------------------------------------------------*/
/*-------[CUSTOM WIDGET SEARCH AND TITLES]--------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/
/* option 1 */
.option-1 .widgettitle {
background: #000040!important;
color: #fff;
font-size: 14px;
text-transform: uppercase;
display: inline-block;
position: relative;
height: 33px;
line-height: 33px;
padding: 0 10px;
max-width: 100%;
margin-right: 10px;
border: 0;
margin-left: 10px;
margin-bottom: 14px;}
.option-1 .widgettitle:before {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
left: -10px;
border-color: inherit;
border-bottom: 0 solid rgba(255,255,255,0);
border-right: 10px solid rgba(0,0,64,1);
border-top: 33px solid rgba(255,255,255,0);
right: -10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;}
.option-1 .widgettitle:after {
content: '';
display: block;
height: 0;
position: absolute;
width: 0;
top: 0;
border-color: inherit;
border-bottom: 32px solid rgba(255,255,255,0);
border-left: 10px solid rgba(0,0,64,1);
border-top: 0 solid rgba(255,255,255,0);
right: -10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
text-rendering: optimizeLegibility;}
/* sidebar search bar */
.option-1 .widget_search #searchsubmit {background-color: #000040;}
.option-1 .widget_search input#searchsubmit {color: #fff;}
.option-1 .widget_search input#s {border: 1px solid #000040;}
And the end result should be this one.
Here is the code for the other 3 examples. Be sure to update the Section CSS Class depending on which skin you want. These are the 4 CSS Classes I used on each skin.
- option-1
- option-2
- option-3
- option-4
And remember, if you want this to be global just omit the option class all together.
/*------------------------------------------------*/
/*-------[CUSTOM WIDGET SEARCH AND TITLES]--------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/
/* option 2 */
.option-2 .widgettitle {
background: #fc5a20!important;
color: #fff;
font-size: 14px;
text-transform: uppercase;
height: 33px;
line-height: 33px;
padding: 0 10px;
width: 100%;
border: 0;
margin-bottom: 14px;}
/* sidebar search bar */
.option-2 .widget_search #searchsubmit {background-color: #fc5a20;}
.option-2 .widget_search input#searchsubmit {color: #fff;}
.option-2 .widget_search input#s {border: 1px solid #fc5a20;}
/*------------------------------------------------*/
/*-------[CUSTOM WIDGET SEARCH AND TITLES]--------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/
/* option 3 */
.option-3 .widgettitle {
background: #6abd45!important;
border-radius:5px;
color: #fff;
font-size: 14px;
text-transform: uppercase;
height: 33px;
line-height: 33px;
padding: 0 10px;
border: 0;
display: inline-block;
position: relative;
margin-bottom: 14px;}
/* sidebar search bar */
.option-3 .widget_search #searchsubmit {background-color: #6abd45;}
.option-3 .widget_search input#searchsubmit {color: #fff;}
.option-3 .widget_search input#s {border: 1px solid #6abd45;}
/*------------------------------------------------*/
/*-------[CUSTOM WIDGET SEARCH AND TITLES]--------*/
/*-------------[BY GENO QUIROZ]-------------------*/
/*------------------------------------------------*/
/* option 4 */
.option-4 .widgettitle {
font-size: 14px;
height: 33px;
line-height: 33px;
border-bottom: 3px solid #e33067;
margin-bottom: 14px;}
/* sidebar search bar */
.option-4 .widget_search #searchsubmit {background-color: #e33067;}
.option-4 .widget_search input#searchsubmit {color: #fff;}
.option-4 .widget_search input#s {border: 1px solid #e33067;}
You can adjust colors, border-radius, widths, border thickness and more. Mix and match some of the code to come up with your own variations.
And that’s it! Have fun!
Well that’s all for now. I hope you find this article useful.
Cool stuff man. I appreciate the tutorial.
Very cool, man.
http://www.motionpub.com/blog/
Up and running.
Nice Phil!
What’s the trick to get the individual posts to “obey” the blog’s CSS class? http://www.motionpub.com/blog works fine but the individual posts revert to the “normal, non-Geno” method. Thanks.
Remove .option-1 for each rule to make them universal. .option-1 targets that specific module. Without it it targets every sidebar whether its in a module or not.
Well, that was easy. Thanks, mate.
Thank you! First time I’ve attempted adding code is on this site (I’m on my third site ever using divi builder) still in build at the moment but have used it on the about us page, http://www.cyprusexclusiveweddings.com can’t wait to delve into your other tutorials!
Awesome. Your site looks great. Thanks for sharing 🙂
this is great! I’ll give it a spin on my site that’s using Extra and will let you know how it turns out. Thanks!
Excellent! Been trying to figure something out with sidebars…this is great.
http://risingtide.doralevich.com/mission-statement/
Any suggestions on how I can expand the width of the sidebar?
Looks great. You can now make the sidebar wider in the Customizer settings 🙂
Thank you…but is that for both Divi Builder pages and Posts? I feel like with a Divi Builder page – since there is no right sidebar, and added using the pagebuilder, that Customization doesn’t change that.
Or am I completely missing something…
Thank you!
Following for comments via Email
Great tutorial on modifying the widget title style. However, is there any way to modify the text or name of the widget title to say something other then “Recent Posts,” etc?
Yes you can do that in the Widget Settings page. IN the WordPress dashboard, just go to Appearance>Widgets
Thanks so much Geno! You Rock!
Hi Geno! Thanks for the great tutorials! I have tried customizing using Option 2 (with #c324e2 colour scheme). Search bar has turned out great but the other widget titles are not picking it (custom widget “quotes and commentaries” and categories). Any way of getting These to show the customization as well? Ps. Also looking for a way to get a divider (or a “read more” button) between the posts on the blog posts page but nothing seems to work…
The code targets widget headers. Make sure they are using the default widget header.
Hey Geno…
This is some great code…I use it all the time..Question. I see that the code works nicely for me on my PageBuilder pages.
When I use a Blog Post, my sidebar is a different.
Can this be updated to be consistent?
Post
http://dbdodigital.com/mobilegeddon-is-your-site-mobile-friendly/
Page
http://dbdodigital.com/web-design-development/
See the difference in sidebars?
Thanks for any suggestions you may have.
Good looking site you have there! If you’d like the sidebar to always be the same you can remove the .option-2 class in your CSS code.
Hey…sorry to bother again, but I’m working on this, and was hoping to get this fixed….I tried removing the code where it says : .widgettitle h4 {
Is this correct? not working for me.
Great tut, Geno! But I seem to have trouble with the search box, wich won`t change style? I`m using style 1. Link; http://demoshop.kunde.reklamebanken.com/butikk/
The search box you are using is from WooCommerce, so that is why it is not changing the style. Here is some CSS you can use, you may need to adjust it for your preferences…
.woocommerce-product-search label { background: #F07639!important; color: #fff; font-size: 14px; text-transform: uppercase; display: inline-block; position: relative; height: 33px; line-height: 33px; padding: 0 10px; max-width: 100%; margin-right: 10px; border: 0; margin-left: 10px; margin-bottom: 14px; } #woocommerce_product_search-2 input { border: 1px solid #F07639; height: 33px; } #woocommerce_product_search-2 > form > input[type="submit"]:nth-child(3) { background-color: #F07639; margin-left: -5px; padding: 10px; color: #fff; border: none; }Does this tutorial work well with your recent posts tutorial ?
Hello Muhammad! You should be able to use both tutorials without a problem.
A great tutorial and it works perfectly but I have a doubt.
I have opted for option two and leave the titles ( Category files … ) in blank. However if I choose the file drop-down menu it appears twice. One with the option-2 code in orange and the other one is with the word category without the code. How to avoid duplicate category word.
Thanks
Try not using a title in the module.
Hello Again Geno, I don´t use title in category module. but in that module there are 3 options and If I choose drop-down option apears your code in orange with category and the same word but not code.Then If I choose show all categories it works perfectly.
Here is the page with your code and drop and down and you can see what I¨m saying
https://www.fqeuskadi.org/asociacion/
Many thanks
Oh I see. Yes this was not designed for drop down.
Hi Geno,
Whould you be so kind to give an advice how to implement CSS code (version 1) to default WordPress widgets inside a footer?
Many thanks!
Igor
Thanks! This was very, very handy!
Glad you like em!
Thank you so much Geno … You’re THE BEST!!! always helping me :):):)
Thanks Eva. It’s my pleasure 😀
I don´t get it – where shall I remove .option-1? From the code, e.g. write ” .widgettitle {” instead of “.option-1 .widgettitle {“?
Thank you for this – and other – absolutely wonderful tutorials! I really appreciate your work!