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

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] The CSS code below was used on legacy Divi 2.3 version and all snippets are untested on any newer versions.

CSS Snippets for Divi 2.3 (legacy)

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

More Resources

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. – Geno Quiroz uses Divi on his website and his blog posts are a rich source of custom CSS snippets and Divi tutorials. – By Michelle Nunan, creator of the Divi Academy, Divi Club Membership and Divi Tutorials. – By Nathan Duvall, Divi child themes, plugins & layouts


  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 , 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. 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. Hi Roman,
    Try this instead:
    a:link {
    color: #409bd0; /*change to the hover color you want*/

  7. Ooh thank you Amy. Footer info font weight and colour CSS is exactly what I was looking for!!

  8. Please help! I’m trying to increase the width of the dropdown on my primary menu without removing the css that makes the “Donate” button orange. Tried a number of solutions I found via search with no luck. Love your snippets!

  9. I’m sorry Kathy but I am not sure how to edit the drop-down menu width. Instead I would suggest swapping the Contact us menu item with Ways To Donate, that way the drop-down menu won’t slide under the Donate button in orange. Hope this helps and thanks for your kind comments:)

  10. You guys are professionals. So glad you put the time and effort into this blog. I need to learn more CSS.

Submit a Comment

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

Take your WordPress website to the next level

Get a free no-obligation quote today!