Themes and Mods

Useful CSS Snippets For Divi WordPress Theme

Divi is a WordPress theme that is shipped by Elegant themes. Due to its long chain of stunning features, it has become one of the most preferred choices for building a website. The features provided by the theme are sufficient enough for delivering a top-notch web design. However, in some cases, you would want to make some changes to the CSS code in order to meet your own requirements.

In this post, I have showcased some of the useful CSS snippets that will prove to be useful for Divi WordPress theme.

Snippets for Sliders

For stopping the slider description animation

.et_pb_slide_description {animation:none!important;}

For adding opaque overlay behind the slider text

et_pb_bg_layout_dark .et_pb_slide_description {
background-color: rgba(0, 0, 0, 0.5);
display: inline-block;
padding: 50px;
margin: 100px;
border-radius: 15px;
}

Snippets for Buttons

For squaring off button corners

.et_pb_promo_button, .et_pb_newsletter_button, a.et_pb_more_button, .et_pb_pricing_table_button {
-moz-border-radius: 0;
-webkit-border-radius: 0;
border-radius: 0;
}

Change the Color of Contact Form Submit Button

et_pb_contact_submit:hover {
background: #000000;
}

Snippets for Sliders

Remove the dividing line

.container::before { display:none; }

Menu for Snippets

For aligning the menu to the left

@media only screen and (min-width: 980px) {
‪#‎top‬-menu-nav { width: calc(100vw – 240px);}}

Changing the font Size of Menu

#top-menu li {font-size: 18px;}

Change the hover color of top menu

#top-menu.nav a:hover {
color: #000000 !important;
}

Snippets for Header

For hiding the header completely

#main-header { display:none; }
#page-container { padding-top:0px !important }

Giving a thick bottom border to header

#main-header {border-bottom: 10px solid #f7ead9;}

Font weight of main header

#main-header { line-height: 23px; font-weight: 700; }

Snippets for Image

For changing the border radius, adding shadow and adding a hover pop-up effect

img {
border-radius: 9px;
-moz-transition: all 0.09s;
-webkit-transition: all 0.09s;
transition: all 0.09s;
-webkit-filter:
drop-shadow(5px 5px 5px black);
}

img:hover {
-webkit-transform: scale(1.15);
-moz-transform: scale(1.1);
-o-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
}

For Product, Post and Project Image Overlay Zoom In

.et_overlay {
-webkit-transform: scale(.9);
-moz-transform: scale(.9);
-o-transform: scale(.9);
-ms-transform: scale(.9);
transform: scale(.9);
}

.et_shop_image:hover .et_overlay, .et_portfolio_image:hover .et_overlay{
-webkit-transform: scale(1);
-moz-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}

Snippets for Logo

Increasing the Logo Size

.et_fixed_nav #logo {
max-height: 100px;
margin-bottom: 18px;}

Snippets for Maps

Adding borders to Top and Bottom of Map

.et_pb_map_container {border-top: 5px solid #ff3600; border-bottom: 5px solid #ff3600; }

Snippets for Footer

Remove Padding and bullets

#footer-widgets .footer-widget li:before {display: none!important;}
#footer-widgets .footer-widget li {padding: 0 0 10px 0px;}

In The End

Above are a few of the useful snippets that will enable you to make the necessary changes in your Divi website. Most of the website owners have resorted to these CSS snippets for integrating a number of amazing features. It doesn’t matter how feature packed Divi theme is, you will feel the need to add some much needed customizations to your website. This will allow you to make your website stand apart from your competitors and make a mark for itself.

Author Bio:
Lauren McLaren was born and raised in Australia. She is working as blogger for Digital Muscle, affordable Web Design Sydney company. She’s hardworking, competent and trustworthy. Her role within the company is to manage team Experts. In her spare time, she likes to read, cook and watch movies.