6 Ways to Add CSS to Divi

6 Ways to Add CSS to Divi
Published FEB 11, 2018. Updated OCT 08, 2019

One of the most amazing things about using the Divi theme is that it comes with so many options for its users. From using the front end builder or the back end builder, to customizing modules with a plethora of options, Divi is just a theme that caters to a broad range of users as it allows deep levels of customization in both easy to use and accessible ways.

Extending this ethos further, Divi users are far from limited when it comes to CSS styling.

As well as the trusty stylesheet that’s present in just about all WordPress themes, Divi users are lucky enough to be able to enter CSS in a number of different places, six to be exact!

In the following blog post, we’ll discuss the various methods that you can add custom CSS to your Divi theme, as well as explain the pros and cons of each method.

Please note, at the time of writing, Elegant Themes had recently offered a sneak peek at one of the new Divi theme updates which saw the inclusion of format-friendly Custom CSS boxes in the Divi Theme Options boxes. If, when you are reading this, the update has been processed and you are writing CSS within the Divi framework that mirrors the formatting of a text editor or IDE, please ignore the sections where I mention the lack of formatting.

Six Ways That You Can Add CSS to Divi

Divi users can choose between six different methods to add custom CSS to their websites. These methods include:

  1. Inline CSS added to the content section of a module
  2. Custom CSS Box in the Divi Theme Options dashboard
  3. Advanced options tab of the sections, rows and individual modules
  4. Divi Builder Page Settings of an individual page
  5. Divi child theme style.css file
  6. Add CSS with WordPress plugins

For this demonstration, I’ve set up a simple page layout using a single section and row with four columns. Each column has text module filled with a paragraph of Lorem Ipsum.

  • Facebook

On the front end, it looks like this:

  • Facebook

1. Add Styling to Divi Using Inline CSS

First up, is inline CSS.

Any module within the Divi theme that has a content area (i.e. a place where you can enter custom text, such as the text module, blurb module etc.) will allow you to add inline styles. To add inline styles to a section of an element, you’ll need to target the element itself and add the <style> attribute, thereafter you can add any number of styling properties that relate to the specific element you’re trying to target and style.

To add inline CSS to a module in the Divi Builder (provided it has a content area), open the WYSIWYG Text editor, not the WYSIWYG Visual editor.

Set inline styles using the Text editor in the Divi Builder
  • Facebook

Next is to assign a tag to the element (in this case, we’ll assign a <p> tag to make it paragraph text, and apply the <style> attribute. Once the style tag is added, you can add various properties and values.

In this example, we’ll take the first text the first text module and style the text to have a heavier font weight and a different color (blue).

Add inline style to Divi text module
  • Facebook

Pros and Cons of using inline styles:


  • Adding inline styles is a quick workaround for a simple change to a single element


  • Using this method means that you’ll need to style each individual module element in the same fashion, which is incredibly time wasting, especially if there are many of the same styling changes and you’re working on a large website
  • In the same regard, it’s really easy to forget about inline styles especially in a large website
  • As the inline styles are so deeply baked into the modules themselves, they cannot be targeted and edited using @medias, which could pose a problem later down the line

2. Add Styling to Divi Using the Divi Theme Options Custom CSS

A popular way to add CSS to Divi is by using the Custom CSS box in the Divi Theme Options dashboard. To locate the Custom CSS box navigate to Divi > Theme Options and scroll all the way down the page until you see the Custom CSS box.

Divi Theme Options Custom CSS
  • Facebook

The Divi Theme Options Custom CSS box is a great place to add CSS for your website if you have a small handful of styling edits. If you have a number of edits, it is better to use a stylesheet (more on that later).

Unlike code editors (such as Sublime or Brackets), the Divi Theme Options Custom CSS box does not include any color coding or automatic script guidelines so be sure to pay attention when entering CSS here.

For the next example, we’ll take the second text module in our four column layout. We’ll take the second text module’s paragraph text and style it by increasing the font and changing the color.

If you know exactly which element you are targeting, you can enter the CSS directly into the text area. To find the exact property that you need to target, you can open the specific Divi module, navigate to the Advanced tab and click in the Main Element area. The name of the property will automatically pop up just above the text area.

Simply copy that selector, head over to the Divi Theme Options Custom CSS box, paste in the selector’s name and add the desired styling. Don’t forget to click Save Changes.

  • Facebook

In the event that your Divi module has more than one element, for example, the Blurb module includes an image, a heading and paragraph text as the content, you’ll need to be a bit more specific as to which element you’re targeting in the module. In such cases, to explicitly target the paragraph text, you’ll need to add the ‘p’ selector.

.et_pb_text_1 p { 
font-size: 16px;
color: red;

Pros and Cons of using the Divi Theme Options Custom CSS box:


  • Using the Divi Theme Options Custom CSS box is a great method if you have a few CSS edits you’d like to add to a website
  • Far more easy to manage that inline CSS or individual module CSS (more on that next), all of your CSS will all be in one place and not scattered across a million modules
  • CSS styling added to the Divi Theme Options Custom CSS box will not be overridden by theme updates


  • Not very user-friendly, the Divi Theme Options Custom CSS box does not include any formatting assistance, color coding or similar whereas IDEs such as Sublime or Brackets do

3. Add Styling to Individual Divi Modules Using the Advanced Tab CSS

The next place that you can add CSS is in the Advanced Tab section of the individual module, row or section

Individual Module Advanced Tab
  • Facebook

First, let’s cover the individual modules Advanced options. Within the module’s Advanced tab, you’ll find:

  • CSS ID & Classes: Here you can enter unique class or ID names that can be used to add even more layers of unique styling
  • Custom CSS: Composed of the before, main element and after boxes. The before and after areas are for pseudo-elements, to add additional elements either before or after the content. The main content box is where the styling of the specific module should go.
  • Visibility: Here you can decide whether the module should be hidden or shown on various devices

Note, each module in the Divi builder is composed of different elements, and so will present a different set of options in the Advanced tab.

To add CSS to the individual module, open up the module itself by clicking on the hamburger menu, navigate to the Advanced tab and scroll down until you see the Main Element box. Here, add the various CSS styling, but note, you only have to enter the property and the value – you do not need to specify the selector.

Add CSS to individual module
  • Facebook

Going a step further, you can also add CSS styling to the various rows and sections. While the sections don’t have too many options, the rows present plenty of styling options. To view the options, click on the row’s hamburger menu, navigate to the Advanced tab and start scrolling to see all of the entry options.

  • Facebook

Similarly to the individual module’s Advanced tab, you’re able to add custom IDs and classes as well as CSS to the element itself (before, main and after), except that now, these are all offered based on how many columns are present in the Section.

To add CSS styling to a specific column, Navigate to the Advanced tab and search for the Main Element box of the column itself and enter your CSS.

  • Facebook

Adding CSS into the modules and rows can be useful for quick, simple edits, but beyond small changes that are going to stay the same forever, adding CSS this way isn’t really recommended. If you’re going to be working on a website regularly, changing up the aesthetic or adding new content, using the module or row CSS may present a few problems down the line as trying to keep track of hundreds of lines of CSS entered into various modules scattered across a website can be confusing.

Pros and Cons of using the Advanced Tab CSS:


  • Using the individual sections, rows and module’s Advanced tabs to enter CSS is useful for single, simple edits on pages that won’t really be looked at in the future
  • These CSS edits will not get overwritten by theme updates


  • Having tiny bits of CSS hidden in the Advanced settings of many modules scattered across a website can get messy and will become difficult to keep track of in the event that the website will need to be revisited in terms of design or development
  • The same sort of edits can be achieved relatively easily using an alternate method, such as the Divi Theme Options Custom CSS box or a stylesheet where all of the styling is kept in one place

4. Add Styling to Divi Using the Divi Builder Page Settings

Another way for Divi users to add CSS to their website is to use the Divi Builder Page Settings.

  • Facebook

Great for quick changes that only apply to a single page or a small handful of pages, the Divi Builder Page Settings let users adjust variables per page without having to adjust each individual modules. Any changes added to the Divi Builder Page Settings will only be applied to the page itself. An incredibly useful tool, the Divi Builder Page Settings replaces the need to write out very complicated, highly targeted CSS.

Within the Divi Builder Page Settings, there is Custom CSS box. As well as the Custom CSS box, additional per-page customization options within the Divi Builder Page Settings include:

  • Enabling split testing
  • Adding a custom color picker palette per page
  • Setting the pages’ gutter width, default light and dark text colors, and section and content background colors

To demonstrate the per page settings, I’ve added another row with a text module, and have assigned the H1 tag to the text.

  • Facebook

At this point, open up the Divi Page Settings console, scroll to the Custom CSS box and enter the relevant CSS styling. Note, here it is important to specify the selector that you’d like to target.

  • Facebook

The Page Settings box is really helpful for making simple per-page changes, and I often make use of this feature when adding a bit of extra styling to either the Divi Space or Aspen Grove Studios blog posts (i.e. making the headings stand out, setting styling for images etc.), as I don’t have access to the Divi Theme Options to access the Custom CSS box or the master site stylesheet.

When it comes to making landing pages, maintenance mode pages or coming soon pages, the Divi Page Settings console is really helpful as you can easily hide the page header, footer and bottom bar with very little effort. To do so, simply add #main-header {display: none;} and   #bottom-footer {display: none;}

In this example, I don’t have a footer set up, but adding #main-footer {display: none;} would hide the footer.

Pros and Cons of using the Divi Builder Page Settings:


  • Great for adding CSS styling that is only meant to reflect on one single page, not site-wide
  • Easy to style a few page elements rather than writing complicated CSS with heavy levels of targeting


  • If you have a website with many pages, each with individual Custom CSS entered into the Divi Builder Page Settings, you may lose track of all of the styling enhancements, in which case using a stylesheet would be a better idea
  • Just like the Divi Theme Options Custom CSS box, there is no formatting in the Divi Builder Page Settings so it may be tricky to keep track of styling especially if you have loads of CSS

5. Add Styling to Divi Using a Stylesheet

In our opinion, the best way to add CSS to the Divi theme is by using a child theme and a unique stylesheet.

If you’re brand new to WordPress and Divi, the term ‘child theme’ may sound completely foreign to you. All that is, is a series of files that, when added together, form a ‘secondary theme’ to a parent theme, in this case, the Divi theme. Using a child theme in development is repeatedly recommended as best practice as it’ll safeguard your web design efforts.

To learn more about child themes, why they’re important and how to set them up, we highly recommend going through the following blog posts as essential reading:

Every Divi user has the ability to access the parent theme files and edit them. The theme files can be located in the Editor console, but it’s really not advised to tinker around here, as one wrong move can cause the entire Divi site to break.

Even if you were to successfully add CSS styling to the parent theme (again, NOT advised), your changes would be overridden everytime a new theme update would be released.

To help safeguard your website and preserve your CSS changes, use a child theme and enter your CSS into a stylesheet.

  • Facebook

In our opinion, using this route – of creating a child theme and using the stylesheet – is the best method to suit our needs. We like using a child theme as it ensures that all of our styling is in one, easy to access place, and not spread across various spaces throughout the website’s pages and modules.

Beyond simply having the CSS styling in the same place, our custom websites created for clients tend to get a bit complicated, and thus, we need the ability to reference multiple stylesheets. This just simply isn’t possible using one of the alternate Divi CSS methods mentioned above.

To get started with a child theme, we recommend using our Divi Space child theme Child Theme Generator. All you have to do is enter your details and the details relating to the website you’re building and your child theme will be mailed to you. Once you’ve downloaded your Div child theme, you can install it on your website by navigating to Appearance > Themes and clicking Add New. Then, click Upload Theme and select the Divi child theme from your downloads folder. Install the child theme as you did the parent, click activate, and in no time, you’ll be running a child theme to protect your Divi website.

Once installed and activated, you can make changes to the stylesheet by navigating to Appearance > Editor, and selecting the style.css file from the child theme itself.

  • Facebook

Pros and Cons of using a Divi child theme and editing the style.css file:


  • Using a Divi child theme will safeguard your web design processes and protect your website by preventing you from tinkering with the parent theme (Divi) files
  • All of your website’s styling is stored in one place that is easy to access and edit
  • With the latest version of WordPress the Editor consoles includes color formatting and guidance, so, when you are writing CSS styles, you’ll receive error alerts if your syntax is incorrect
  • Using a child theme and stylesheet will allow you to use and enqueue multiple stylesheets (great for large websites)


  • This method is the most complicated to set up and is the least user-friendly of the above-mentioned methods

6. Add CSS with WordPress plugins

Plugins are a great way to add CSS because they don’t require any special coding. Simply install a WordPress plugin and you can start adding your CSS. There are lots of good options available in both free and premium versions. Here’s a look at a few of the best options.

Custom CSS and JavaScript Developer Edition

  • Facebook

Custom CSS and JavaScript Developer Edition works with any WordPress theme and adds an editor with tabs for CSS and JavaScript. It has a multi-file interface to help keep your code structured and organized. It splits the files into multiple virtual files, allowing you to work with individual snippets or portions of code independently.

The code is served to WordPress through this file system rather than the MySQL database. This code can be minified if you want. It utilizes a single-file compile process so the browser doesn’t have to make multiple requests to receive all of the files individually. This speeds up the website.

The editor numbers and color-codes the code through syntax highlighting. You can preview the CSS changes as you edit, so you can get your styling exactly the way you want it before going live. You can see the changes on the page you’re working with and in a new tab. 

All changes to the code are documented with a time-stamped history feature. You can restore to any revision you want. It saves your code through AJAX so you don’t lose your place when saving the files. An import/export feature makes it easy to reuse code.

It’s available to purchase separately and it’s included with the membership plans.

  • Single site – $30
  • 3 sits – $45
  • Unlimited sites – $60
  • Annual membership – $149
  • Lifetime membership – $399


Simple Custom CSS and JS

  • Facebook

Simple Custom CSS and JS is a free plugin that adds an editor to any WordPress theme to make it easy to add CSS and JS. The editor adds syntax highlighting to make it easier to follow. Add the CSS on the frontend or backend.

Once you’ve created your code you can print it inline, add it to an external file, print it to the header, or print it to the footer. The code is cached within your files so they don’t have to load from the server every time the page loads.

A pro version is available that adds even more features such as Less and SAAS preprocessors, editor themes, the ability to choose specific URLs to display the code, and more.

  • 1 site – $48.50
  • 10 sites – $68.50
  • 50 sites – $148.50

SiteOrigin CSS

  • Facebook

SiteOrigin CSS is a free CSS editor that works with any WordPress theme. It includes visual controls to make editing even easier and you can see the results in real-time. Choose colors, styles, and measurements with the click of a button.

It has a lot of help for writing CSS. Click on any element and it will identify the best selector to use. The code auto-completion feature for selectors and attributes makes writing CSS faster. It also has tools to identify issues with your code before it’s published.

Pros and Cons of using a WordPress plugin:


  • Many include intuitive interfaces that highlight the syntax.
  • You can see your styles before publishing the code.
  • You don’t have to modify your theme’s files.
  • You won’t lose your CSS if you change themes.
  • Some include support.


  • If the developer stops updating the plugin you’ll have to replace it with another one and move your CSS to the new plugin.
  • They might add tools or features you don’t need.
  • Poorly coded plugins can slow down your website.


There are many ways to add custom CSS to the Divi theme, the trick is to find the method that feels the most comfortable and suits your Divi design habits the best.

As mentioned above, we recommend going the child theme add stylesheet route, even if it is a bit more tricky to manage in the beginning. If you decide to add CSS to the modules, pages or content areas as inline CSS, we recommend possibly keeping a note of this so that if and when you return to a website, you don’t spend hours trying to figure out where certain CSS is being served from.

We want to hear from you!

How do you add CSS styling to your Divi website? Which is your favorite and also least favorite method? Please feel free to share your comments or questions below. We love receiving your feedback!

Thanks for reading!

Lisa-Robyn Keown

Lisa-Robyn is a qualified copywriter and brand strategist from Cape Town, South Africa.