5 Ways to Add CSS to Divi

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, five 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.

Five Ways That You Can Add CSS to Divi

Divi users can choose between five 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

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.

  • Google+
  • Facebook
  • Twitter

On the front end, it looks like this:

Demo-Set-Up-Front-End
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

Pros and Cons of using inline styles:

Pros:

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

Cons:

  • 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

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
  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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:

Pro:

  • 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

Con:

  • 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

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
  • Google+
  • Facebook
  • Twitter

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
  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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 your 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:

Pro:

  • 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

Con:

  • 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

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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:

Pro:

  • 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

Con:  

  • 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

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.

  • Google+
  • Facebook
  • Twitter

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.

  • Google+
  • Facebook
  • Twitter

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

Pro:

  • 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)

Con:

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

Conclusion

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.

Previous post
Next post