CSS Snippets for Divi

Useful CSS Snippets for Divi

Amy Valentine

Amy Valentine, Web Designer, NZ

Divi by Elegant Themes ships with a ton of awesome features, but sometimes you just want to edit the CSS Code to suit your requirements. Firstly, we recommend always using a child theme and place your customisations in your child style.css file.

To create a child theme we recommend using this Child Theme Builder freely available on divi.space.

Whilst I haven’t written tutorials on the code below, if you are comfortable using custom CSS and child themes then feel free to use some of the snippets below to customise your next Divi site.

[UPDATE October 2015] The CSS code below was used on the legacy Divi 2.3 version and all snippets are untested on any other versions.

CSS Snippets for Divi 2.3 (legacy)

Note: the hex colours below – change to your site’s colours.

Add opaque overlay behind 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;
Body font size
.body {
font-size: 16px;
Contact form submit button colour
.et_pb_contact_submit:hover {
    background: #000000;
Social icons colour
.et-social-icons body {
color: #000000;
Change dark-bg icon links colour
.et_nav_text_color_dark, .et_nav_text_color_dark #et-secondary-nav a.hover, .et_nav_text_color_dark .et-social-icon a {
color: #000000;
Change light-bg button colour
.et_pb_bg_layout_light .et_pb_more_button {
background-color: #000000;
color: #FFF;
Footer info font weight and colour
#footer-info a {
font-weight: 700;
color: #000000;
Slider height, padding for image and desc
.et_pb_slider .et_pb_slide {
height: 444px;
.et_pb_slide_with_image .et_pb_slide_description {
padding-bottom: 0;
padding-top: 80px;
.et_pb_media_alignment_center .et_pb_slide_image {
bottom: auto;
top: 50%;
Remove section padding
.et_pb_section {
padding: 0px 0px;
position: relative;
Top menu hover colour
#top-menu.nav a:hover { 
    color: #000000 !important;
Main header font weight
#main-header {
line-height: 23px;
font-weight: 700;
Change links-hover colour
.a:hover {
color: #000000 !important;
Widget text link and hover link colours
.et_pb_widget li a {
color: #000000 !important;
.et_pb_widget li a:hover {
color: #ffffff;
Project button hover colour
.project .et_pb_promo_button a:hover {
color: #000000 !important;

Divi Tutorials – by the team at Elegant Themes – this should be your first go-to resource for learning how to use Divi.

Divi Video Tutorials – by Elegant Themes. Perfect for a quick overview of each module, plus lots more video tutorials.

Divi Theme Examples – site created and curated by Craig Longmuir showcasing websites built using the Divi themes.

Divi Theme Examples Resources – want to customise your Divi site? Bookmark this great custom css resource.

Quiroz.co – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom css snippets and tutorials.

Divi.space – by SJ James, creator of the FB Private Group and css master! Another excellent resource to bookmark.

ElegantChildThemes.com – founded by Nathan Duvall, author of the child theme I use on this website!


  1. Hi Amy.

    I used this code to create a grey box around text in slider.

    /*—————[add grey opaque bg to 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;

    Now, the slides are no longer responsive. On iphone, only left part of image appears.
    Can you help?

  2. Hi Stephane, try adding this css to your child theme style.css.

    /*—————[force slider and button to render on mobile]—————*/

    @media only screen and (max-width: 767px) {
    .et_pb_slide_content, .et_pb_more_button, a.et_pb_more_button {
    display: block !important;

  3. Hi, Amy! I need to hover the links on this website’s sidebar http://www.olfomed.com/en/about-us/ , It is built on Divi and with Divi builder. I tried to add a.hover to child theme CSS but it didn’t work. Please give your advuce!

  4. Hi Amy,

    Do you know how to change the light and dark default colors from Divi?

    Hope you can help?

  5. Amy Valentine

    Hi Jeroen,
    I found this in the ET Support Forums. Add to your child style.css or the ePanel Custom CSS box.
    Hope it helps.

    .et_pb_text_color_dark {
    color: #000 !important;
    /*<--Change to your color hex*/; } .et_pb_text_color_light { color: #fff !important; /*<--Change to your color hex*/; } If you want to assign to specific tags simply add the relevant tag. Example as follows: .et_pb_text_color_dark p { color: #000 !important; } .et_pb_text_color_dark h1, h2, h3 { color: #000 !important; } .et_pb_text_color_dark blockquote p { color: #000 !important; }

  6. Amy Valentine

    Hi Roman,
    Try this instead:
    a:link {
    color: #409bd0; /*change to the hover color you want*/

Submit a Comment

Your email address will not be published. Required fields are marked *

Related Posts

Pin It on Pinterest