Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

Divi Tutorials + Layout Kits | WordPress Tips | Business Growth

Home of the Original Divi Tutorials & Divi Layout Kits.

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.

 

Modify Your Divi Search Widget and Widget Titles Image

 

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.

Modify Your Divi Search Widget and Widget Titles Image 002

 

2. Now open up the Module Settings and give it a unique class. For this first example lets use: option-1

Modify Your Divi Search Widget and Widget Titles Image 003

 

 

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.

Modify Your Divi Search Widget and Widget Titles Image004

 

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.


The following two tabs change content below.
Geno is an entrepreneur who has been designing websites since 1996. He also enjoys all things design, traveling, hanging out with friends, encouraging other believers, and experimenting with new technologies. When not doing any of the above, you can find Geno blogging or writing Divi customization tutorials here on Quiroz.co.

©2012-2019 Geno Quiroz | Teach Learn Build Love | Divi Expert ServicesJohn 3:16

Divi is a registered trademark of Elegant Themes, Inc. This website is not affiliated with nor endorsed by Elegant Themes.

STAY RELEVANT | BE INFORMED | SIGN UP NOW

IT DOES NOT TAKE LONG TO GET LEFT BEHIND!

You have Successfully Subscribed!

Pin It on Pinterest