Adding CSS to the Divi Theme

This post may contain referral links which may earn a commission for this site

Many of my Divi Theme tips and tricks will involve adding some CSS to your theme. Here is how to add your own CSS to the Divi Theme.

Adding CSS to Divi via the Theme Options

The easiest, and perhaps best way to add CSS to the Divi Theme is via the Custom CSS box in the Theme Options, as follows:

  1. Log into your WordPress dashboard.
  2. Go to "Divi > Theme Options", where you will find the Divi theme options.
  3. Go to the "General" tab (it should be the current one).
  4. Scroll down to the bottom of the tab.
  5. There you will find a box named "Custom CSS".
  6. Paste your CSS into the box after anything else in there.
  7. Press "Save".

Adding CSS to the Divi Style.css File

You can also add CSS to Divi directly, by adding it to the end of the style.css file located in Divi theme directory. However, it is best to avoid doing so as updates to the theme may cause this file to be overwritten and your changes to be lost.

Adding CSS using a Child Theme

Another way to add CSS to Divi without risking your changes being lost is to create a child theme and place your new CSS in there. While creating a child theme requires a bit of technical work, Elegant Themes (the creators of Divi) have a nice tutorial on creating child themes.

Hundreds of new features for Divi
in one easy-to-use plugin

27 Comments

  1. let me explain if i working on style.css in divi theme and if an other person do the update style.css what will be effect is it possible?

    Reply
    • Hi Scott, whether you are directly editing the style.css (e.g. via FTP) or adding CSS via Divi's custom CSS box, I think the effect will be the same. If user 1 and user 2 both open the CSS, then user 1 saves his changes and user 2 later saves hers, the changes made by user 1 would be lost. I don't believe there is anything in Divi for handling concurrent editing, so you'd need to do this yourself. One way to do it would be to use a child theme under version control (e.g. with GIT).

      Reply
  2. Hello everyone !!
    Is it possible in divi style.css if two user worked combine with their ID ib DIVi style.cs.??
    what will be effect anyone please help me.

    Reply
  3. I have tried it on both places theme options and theme customizer it does not work.

    Reply
    • Hi Faisal. First, make sure you clear any caches on your site (e.g. in performance plugins) and clear your browser history. If that doesn't help perhaps you could send through a link to the page you're working on and give me an indication of the CSS you're trying to add – I might be able to work out why it isn't taking effect. Thanks!

      Reply
  4. Hi guys, I'm new in Divi builder. I just want to know how to restore the image-size in the "Our Team" page, blurb section in WordPress. The original size was just okay, however, when I changed the image it shrunk to a very small size, I can barely see the face. I need your help. Thank you very much!

    Reply
    • Hey Drex, are you able to share a link to the page you're working on so that I can take a look? Thanks!

      Reply
  5. Thanks for the explanation. I'd like to clarify something…
    If I follow the process described of "Adding CSS to Divi via the ePanel" and then update the theme, is there any risk of losing this custom CCS?

    Reply
    • Hi Bruce, updating the theme won't overwrite this CSS (as it's stored in the database), so it's a safe place to put your CSS.

      That said, there's always a small risk that a theme update or something else accidentally alters this CSS, so it'd be wise to keep a copy of what you put in there (e.g. by taking a backup after making changes, or copy/pasting it into a text file on your computer).

      Reply
      • Thanks Dan for this info.

        Can you clarify the best place to add site-wide css? Child theme style.css file vs Theme Options? I'm wondering about any issues with theme updates.

        Would there be any benefit to entering css in Theme Options in saving a backup of my custom css? Or do backups involve just keeping a copy/pasted version of css out of Theme Options in to a file on my drive, so maybe my auto backups of my whole site would be easier, given they copy the style.css file for my child already.

        And does css entered in Theme Options just get added to the style.css file of the child theme or is it somehow accessed by the browser from some other place when the page is loaded?

        Thanks again for the helpful post.

        Reply
        • Hey Kirk, for the most part either will work as well as the other. The Theme Options CSS is stored in the database and will be included in any full site backups you are making. It is not affected by Divi updates, so like CSS in a child theme you shouldn't have any issues with updates.

          I'd suggest adding it wherever is most convenient for you. If you plan to use the child theme on other sites (installing it on a new Divi installation, for example) you may want to keep your CSS in the child theme so that it gets applied to those other sites. Other than that, for most purposes the two places behave pretty much the same.

          Divi adds the Theme Options CSS to a CSS file (which is included in the page and loaded by the browser). This is a separate CSS file from the child theme style.css file, but from the browser's perspective there's no real difference between the two.

          I hope that helps!

          Reply
  6. It's been a while since you posted this. But I was wondering how I can add this css directly to the module in that "Customize CSS" tab.

    Reply
      • Hey Igor, it's not possible to add this via the module's custom CSS tab (as some of the CSS selectors used in the code aren't available in the custom CSS tab).

        The latest versions of Divi now has an option in the "Advanced Design Settings" which might do what you need. The "Use icon font size" option lets you change the blurb icon size when font icon selected. Note – it doesn't work when "Icon Font Size" = 96px (the default), as it incorrectly treats this as "not set" – change it to something else and it should work.

        A couple of other points. The Image Max Width option looks like it should control the icon size when the icon is an image (uploaded through the module), but it didn't work when I tested it. I don't think either of these options will affect custom icons added via Divi Booster / the instructions in this post:

        https://divibooster.com/adding-custom-icons-to-divi/

        If you want to restrict the CSS to a single blurb (or set of blurbs), you would need to give the module a CSS class in the Custom CSS tab, and then in the code I gave replace each instance of "et_pb_blurb_position_left" with the name you entered as the css class.

        Reply
        • Thank you very much. Your last paragraph helped me alot! With this and other issues I was having but didn't want to change the style.css for everything.

          Reply
        • Thanks Dan! You are a great divi/wp resource.

          Reply
  7. I can't add custom Css to the website I created. I am admin, I enabled all functions for admins, but when I go down to the custom css section in the general section, it will not let me type anything in there, nor will it let me paste anything. Can you please help. Thank you

    Reply
    • Hi Elsie,

      I'm afraid I'm not sure what could be causing this. It certainly sounds like you have everything set up correctly. Probably the best place to get help for this will be on the Elegant Themes Divi support forum.

      If Elegant Themes aren't able to help you let me know and I'll try to help out further.

      Reply
  8. hi dan i am a student want to make a website for myself just a personal website can i use divi theme for it.
    please give me reply.

    Reply
      • hi first of all thanks for you quick reply

        my friend purchased divi theme can i use it to make my own website or will there be any copyright issue

        is using divi theme is free or not

        let me know

        Reply
        • I'm not 100% certain whether this is permitted by Elegant Themes' terms and conditions or not, sorry. I'd suggest asking them for clarification on their contact form:

          http://www.elegantthemes.com/contact.html

          Reply
  9. Hi Dan,

    I live in de Netherlands. How can I pay you, when I order you plugin?

    Thanks,

    Robert

    Reply
    • Hi Robert, currently payments for the plugin are processed by PayPal. This lets you pay by credit card (no PayPal account needed), with your PayPal balance (PayPal account needed) or transfer from a bank account (again PayPal account needed).

      Let me know if you are unable to use these methods and we'll sort something out. Thanks!

      Reply
  10. Dan!

    Thank you so much for posting this!

    //Magnus

    Reply
    • Hi Halayna, the code in the Elegant Themes post doesn't get rid of the Divi logo and strip – it just stops the strip from hovering at the top of the page when you scroll down. I've written a post on how to get rid of the Divi header strip entirely. Just add the code in that post in one of the places mentioned above and the strip should disappear.

      Reply

Submit a Comment

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