Divi Code Snippets

Widget Styles

Style Widget Title

Change To Your Needs.

/* Widget Title */
.widgettitle {
text-align:center;
font-size:18px;
padding-bottom: 20px;
}

Change Sidebar Color

Change color (#52255E) to the color you want.

/* Blog vertical divider */
#main-content .container::before {background-color: #52255E;}

Add Bottom Border To Widget Title

Change each section to your needs.

/* Widget Bottom Border */
.widgettitle {
border-bottom: solid 2px #000000;
margin-bottom: 25px;
}

Add Top & Bottom Border To Widget Title

Change each section to your needs.

/* Widget top & Bottom Border */
.widgettitle {
text-align: center;
border-top: 3px solid #ffcc0d !important;
border-bottom: 3px solid #ffcc0d !important;
padding-top: 12px;
margin-bottom: 12px;
font-weight: 900;
}

Adjust Margin Between Widgets

Change To Your Needs.

/* Sidebar Margin */
.et_pb_sidebar .et_pb_widget {
margin-bottom: 14% !important;}

Add Background & Padding To Widget Menu

Change To Your Needs.

/* Sidebar Background */
.et_pb_widget ul li {
background-color: #f9f9f9;
}

Add Padding To Widget Menu

Change To Your Needs.

/* Sidebar Padding */
.et_pb_widget ul li {
padding: 10px;
}

Miscellaneous Styles

Blog Grid Padding

Change each section to your needs.

/* Blog Grid */
.et_pb_blog_grid .et_pb_post {
padding-left: 10 !important;
padding-right: 10 !important;}

.et_pb_blog_grid .et_pb_image_container {
margin-left: 10 !important;
margin-right: 10 !important;}

Customize Read More

Change each section to your needs.

/* Read More Button */
display:inline-block;
/*border-radius*/
-webkit-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
padding:8px 16px;
margin:5px 10px 15;
text-transform: uppercase;
background: #9bcdd8;
color: #fff;
border:2px solid #9bcdd8;
font-family:Lato;
font-style:normal;
font-size:14px;
align-self: center;