9 Useful Divi CSS Snippets You Can Add To ePanel In Seconds

As an experienced developer, you might feel that Divi would constrain you from flexing your CSS muscles. However, you’d be wrong.

While Divi was built to be easy for users to pick up even if they have little experience with WordPress, it also caters to more demanding users. For example, the Divi ePanel includes a useful feature to add custom CSS code without any fuss – just type the code into a box and you’re good to go.

If you want to check out just what this custom CSS option is capable of, today’s your lucky day. We’ll be showing you how to use the ePanel, step by step, and cover nine of our favorite (and easy to implement) CSS tricks.

Editor’s note: this post originally contained ten scripts. One has been removed since adjusting the size of your logo and header upon scroll can be achieved using the theme customizer and does not require a code snippet. See this video for an example.

How to Use the ePanel to Add CSS

This is a piece of cake.

Head over to your WordPress Dashboard and click on the Divi tab. This will take you to the Theme Options section of the ePanel, where the aforementioned Custom CSS box lays.

Once you’re in the ePanel, scroll all the way down until you find the CSS field at the end. Do you have some code you’d like to try out? Great, then paste it in and click Save and, well, that’s pretty much it.

Now – if you want to play around with some CSS customizations, take a look at the simple snippets we’ve compiled below from several enthusiastic Divi and overall web development resources such as Calcatraz, Brian Sniff Designs, Divi Theme Examples, and GenoQuiroz.

1. Superimpose Your Logo

Let’s get things started with a simple trick. The default Divi header bar is nice and elegant (plus it resizes itself by default as you scroll down the page), but it does not play nice with logos with an ample height.

Should your logo be too big, it will automatically be sized down to fit into the header bar. What the following CSS code does is modify the z-index of your logo to an absurd value to make sure it’s superimposed over any other content on the page, even as you scroll down.

Aside from that, you can also play with the max-height and margin-top values until your logo displays exactly as you want.

#top-header {z-index: 99999;}

#logo {

max-height: 220%;

margin-top: -32px;

z-index: 100000;

}

@media only screen and (max-width : 980px) {

#logo { margin-top: 0px}}

2. Add a Quasi-Transparent Background Image to the Header

For an added touch of originality, you can actually use an image as the background in your header. However, whichever image you choose should be of an adequate size to actually act as a header.

All you have to do is upload your new background to your WordPress media files and place its URL below where it says yourimagegoeshere.png. The rest of the code is meant to modify its opacity (so the colors don’t overpower the rest of the elements in your header), set its edges and specify its z-index as below all other elements.

#main-header::after {

content: "";

background-image: url('yourimagegoeshere.png');

background-size:cover;

opacity: 0.5;

top: 0;

left: 0;

bottom: 0;

right: 0;

position: absolute;

z-index: -1;

}

3. Change the Sidebar Width

This one is pretty straightforward – we’re going to be changing the default width of the Divi sidebar widget. If you’ve ever felt like it was too narrow, all you have to do is take a look at the code below.

This code will change the default width to 300px and set a margin of 30px on the edge of the viewers screen. However, you might have noticed there’s a media query in there as well. Since we’re going to be forcing new a new width and a margin, if it weren’t for that media query, your side might break on small screens.

For testing purposes, we set a minimum width of 1,200px for enforcing the CSS changes outlined below. If the viewer’s resolution matches or exceeds that minimum, they’ll be able to see your new sidebar.

@media only screen and ( min-width: 1200px ) {

.et_right_sidebar #sidebar .et_pb_widget {

margin-right:30px !important;

}

.et_left_sidebar #sidebar .et_pb_widget {

margin-left:30px !important;

}

.et_right_sidebar #left-area,

.et_left_sidebar #left-area {

width:720px !important; /* 1020 - width */

}

.et_right_sidebar #main-content .container:before {

right:300px !important; /* width */

}

.et_left_sidebar #main-content .container:before {

left:300px !important; /* width */

}

.et_right_sidebar #sidebar,

.et_left_sidebar #sidebar {

width:300px !important; /* width */

}

}

4. Remove the Header Bar Bottom Border

If you’ve got a keen eye, you might have noticed a small border on the bottom side of your Divi header. Well, get ready for some excitement, because today we’re going to teach you how to get rid of that pesky little border for good.

At the risk of blowing some minds, we must clarify that small divider is not exactly a border per se, but a simple CSS shadow, and the code below simply sets its value to ‘none’.

#main-header{

-webkit-box-shadow:none !important;

-moz-box-shadow:none !important;

box-shadow:none !important;

}

5. Add Dividers Between Widgets

“But Tom, what if I’m not a border-hating communist?” is what you might be asking yourself after going over that last CSS customization. Well then, honestly, we prefer not to discriminate between border advocates or otherwise.

In fact, to make up for our thoughtlessness, we’re going to be teaching you how to add some additional borders or dividers to your sidebars. Yes, we’re that cool.

The code below will create dividers between each widget or section of your sidebar, giving your site a more organized feel. You can modify the height and color of the borders by changing the values right the beginning.

#sidebar .et_pb_widget {

border-bottom: 1px solid #ddd;

padding-bottom: 20px;

margin-bottom: 20px;

}

#sidebar .et_pb_widget:last-of-type {

border-bottom:0;

}

6. Add Connected Bullet Lists

This one is pretty cool – the effect you see on the image above is actually achieved by creating CSS lines and dots as part of the background.

Beware, though, this code will apply the effect globally across all lists.

.dots-list {

width: 100%;

}

.dots-list ol {

padding-left: 50px;

position: relative;

margin-bottom: 20px;

list-style: none !important;

}

.dots-list ol li {

position: relative;

margin-top: 0em;

margin-bottom: 20px;

}

.dots-list ol li .number_divider {

position: absolute;

left: -50px;

font-weight: 800;

font-size: 2em;

top: -5px;

}

.dots-list ol li:before {

content: "";

background: #8dbeb2;

position: absolute;

width: 2px;

top: 1px;

bottom: -21px;

left: -24px;

}

.dots-list ol li:after {

content: "";

background: #8dbeb2;

position: absolute;

width: 15px;

height: 15px;

border-radius: 100%;

top: 1px;

left: -31px;

}

.dots-list ol li:last-child:before {

content: "";

background: #ffffff;

}

7. Add a Background Color for Slider Text

By default, Divi will simply overlay the text on your sliders directly on top of the images, and it looks great. But what if you choose to use images that make it hard to discern the text? Well, you could make modifications to the style of the text itself, or give it a simple background to make it pop.

As you might surmise from the title of this point, we’re about to teach you how to pull off the latter. The code below will create a simple background rectangle around your text, the color of which you can modify by changing the value where it says ‘background color’.

You can also play around with the padding, borders, and opacity, so go nuts!

.et_pb_slide_description h2 {

background-color: #000;

border-top-right-radius: 5px;

border-top-left-radius: 5px;

-moz-border-top-right-radius: 5px;

-moz-border-top-left-radius: 5px;

-webkit-border-top-right-radius: 5px;

-webkit-border-top-left-radius: 5px;

padding: 15px;

opacity: .8;

}

.et_pb_slide_content p {

background-color: #000;

border-bottom-right-radius: 5px;

border-bottom-left-radius: 5px;

-moz-border-bottom-right-radius: 5px;

-moz-border-bottom-left-radius: 5px;

-webkit-border-bottom-right-radius: 5px;

-webkit-border-bottom-left-radius: 5px;

padding: 15px;

opacity: .8;

}

8. Animate the Divi Toggle Icon

This little snippet will let you have some fun with the Divi toggle icon; more specifically, by changing its color and spinning the default arrow around once it’s been toggled.

.et_pb_toggle_open .et_pb_toggle_title:before {

transform: rotate(180deg);

content: "\25bc";

transition:all 0.5s ease-in-out 0s;

color:#e5e2d3;

}

.et_pb_toggle_title:before {

content: "\25bc";

font-size:2em;

transition:all 0.5s ease-in-out 0s;

color:#179baf;

}

9. Switch to the Mobile Menu on Desktop Displays

If you don’t want to clutter up your header bar with too many links, you can always choose to emulate what mobile displays do: use a toggle to display a navigation menu.

Divi actually does this when being browsed from a mobile device, and the code below simply makes this toggle button accessible when your site is being viewed from a PC. This way you can keep your header looking uncluttered.

@media only screen and ( min-width:980px ) {

#et_mobile_nav_menu { display:block }

#top-menu-nav { display:none; }

}

/**change these settings if you want to style it**/

.mobile_menu_bar:before {

content: "\61";

font-size: 32px;

left: 0;

position: relative;

top: 0;

cursor: pointer;

}

}

Conclusion

Even if you’re using a theme, that doesn’t have to preclude your site from being truly unique (especially if that theme is Divi). There are always customization options available to WordPress users regardless of which theme you choose, on top of thousands upon thousands of tutorials to tackle any feature you might wish to implement.

As far as Divi goes, remember that all you have to do in order to make your own CSS customizations without touching any core files is jump into the Divi tab on your dashboard. This will automatically take you to the Divi ePanel, and follow the simple instructions in our “How to Use the ePanel to Add CSS” section.

Do you know any cool CSS tricks for Divi? Share them with everyone else in the comments section below!

Article thumbnail image by Iconic Bestiary / shutterstock.com