Where to add custom code in Divi (CSS, JavaScript and PHP)?

Published on 25/05/2020 | 6 comments

There are many places where you can add custom code in Divi! This theme makes it easy for us to do just that. You will see in this article that your child theme is almost useless!

That's right... The native tools of Divi and WordPress allow us to easily add code for customize Divi. This is ideal if you are not a developer but have found a piece of code (a snippet) to copy and paste.

If you read Divi Tips, you may have noticed that some of the articles offer this kind of "snippet" to help you customize your site. So let's take a closer look at where to add custom code...

Advertisement: This article contains affiliate links that you will easily recognize. The classic links are in purple and sponsored links are in pink.

1 - Divi's Text module: CSS and HTML

The Divi Text module makes it possible to do a lot of things! You can:

  • Writing text (obviously)
  • Add titles
  • Add bulleted or numbered lists
  • Inserting images
  • Insert shortcodes
  • Etc.

It looks like the old WordPress editor (Classic Editor) and offers a tab that allows you to add CSS and HTML. Simply switch the module to "TEXT" mode and you'll be taken to the HTML version of your text. It's very handy, even indispensable!

So, if you have some notions of HTML and CSS, you will be able to modify your texts on the fly.

Code CSS HTML Module Texte
Adding inline CSS or HTML via the TEXT tab of the Text module of Divi

To give you an example, on the screenshot above, I quickly tagged part of the text with

and added color to a few words.

You see the ? Inside, I've added (CSS) style: Place a word here. This is called CSS INLINE. To tell you the truth, it is not recommended to place CSS Inline everywhere because it can have an impact on the your site performance. But sometimes it can help!

This Text module, as you can see, is an easy-to-use "off-the-shelf" module to add HTML or CSS!

2 - The " advanced " tab of the modules, lines or sections: CSS

Each module, line and section of the Visual Builder has a tab named ADVANCED that contains fields to add CSS.

But beware, this CSS will only act for the module, line or section.

Code en mode Avancé Module
Adding CSS within a Divi module

Three fields are available to add CSS :

  1. Before: This is the "Pseudo-Element Before".
  2. Main Element: the CSS that you will add here will act on the main element.
  3. Pseudo-Element After: It's the "Pseudo-Element After"

Learn more about the Pseudo Before and After Elements.

These fields act on very specific CSS CLASSES. I advise you then to click on the icon of the Question Mark to know where your code will act.

9 Element Principal

Note that in these fields, you only need to enter the CSS without calling any classes or tags as it will not work. You will then have to use other means, like the ones we will discuss in the rest of this article.

Did you know that you can test Divi for free? Go to this page and click on "TRY IT FOR FREE"

3 - The advanced parameters of the page: CSS

When you activate the Visual Builder within a page or an article, you can add modules, of course, but you can also access advanced settings (see also : the hidden features of the Visual Builder).

To do this, simply open the settings menu on the page (the purple cross at the bottom of the page) and click on the gearwheel icon.

Code Avancé Page Divi
Adding CSS within a single Divi page

Go to the ADVANCED tab: you will be able to enter your CSS in the "Customize CSS" field.

This option is ideal if you want to create a CSS rule that acts only within this page. This way, you don't load CSS unnecessarily on your entire site.

On the other hand, if this rule is redundant and you need to add it on several pages of your site, I recommend the following solution...

4 - The Appearance tab > Customize : CSS

The Appearance > Customize > Additional CSS tab natively allows you to add all the CSS rules you need.

Apparence Personnaliser CSS
Add CSS via the menu Appearance > Customize

Just start typing your CSS in the dedicated field. You can add several rules in a row.

I still advise you to skip a line between each code and even to add comments so you don't forget what your code is for 😉.

Here is an example:

/* code texte encadré */
.encadre {
	border: solid 1px #7e3bd0;
	padding: 1em;
}

The text placed between /* and */ is a comment not taken into account by web browsers. By commenting on your CSS, you will find your way around more quickly!

5 - Divi theme options: CSS and JavaScript

The Divi theme natively allows to add CSS and Scripts to the theme options...

5.1 - CSS in Divi Tab > Theme Options > General

Option Theme Divi CSS
Adding CSS in Divi theme options

At the end of the tab Divi > Theme Options > Generalyou will find a field for entering CSS. This field is the same as the one found on the Appearance > Customize > Additional CSS tab (seen in the previous chapter of this article).

So this is another way to add CSS in Divi.

5.2 - JavaScript in Divi Tab > Theme Options > Integration

The tab Divi > Theme Options > Integration offers the possibility to add JavaScript or jQuery code.

Option Theme Divi JavaScript
Adding Scripts to Divi Theme Options

The fields on this tab allow you to add Short Code to the Short Code field. and in the of your site.

This is mainly used to add