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

Updated on 25/09/2021 | Published on 25/05/2020 | 9 comments

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

Yes... The native tools of Divi and WordPress allow us to easily add code for customise 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 must have seen that some articles offer this kind of "snippet to help you customise your site. So let's take a closer look at where to add custom code...

Announcement: this article contains affiliate links that you will easily recognise. The classic links are in purple and sponsored links are in pink.

1 - The Divi Text Module: CSS and HTML

The Divi Text Module allows you to do many things! You can :

  • Writing text (obviously)
  • Add titles
  • Adding bulleted or numbered lists
  • Inserting images
  • Inserting 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 will have access to the HTML version of your text. This is very useful, and even essential!

So, if you have some knowledge of HTML and CSS, you can modify your texts on the fly.

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

Pour vous donner un exemple, sur la capture d’écran ci-dessus, j’ai rapidement balisé une partie du texte avec des <strong><h2></strong> et ajouté une couleur à quelques mots.

Vous voyez la balise <strong><span></strong> ? À l’intérieur, j’ai ajouté du style (du CSS) : <strong><span style= »color:blue; »></strong><em>Placer un mot ici</em><strong></span></strong>. C’est ce que l’on appelle le <strong>CSS INLINE</strong>. Pour tout vous dire, ce n’est pas recommandé de placer du <strong>CSS Inline</strong> partout car cela peu avoir un impact sur la performance of your site. But sometimes it can help!

This Text module, as you can see, is an easy-to-use "all-terrain" module for adding HTML or CSS!

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

Each module, line and section in the Visual Builder has a tab called ADVANCED which contains fields for adding CSS.

But be careful, 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 for adding CSS:

  1. Before: this is the "Pseudo-Element Before".
  2. Main element: the CSS you add here will act on the main element.
  3. After: this is the "Pseudo-Element After".

Learn more about Pseudo Elements Before and After.

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

9 Element Principal

Note that in these fields you should only enter the CSS without calling any classes or tags as this will not work. You will then have to use other means, such as those 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 - Advanced page parameters: CSS

When you activate the Visual Builder within a page or 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 page settings menu (the purple cross at the bottom of the page) and click on the gear icon.

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

Go to the ADVANCED tab: you can enter your CSS in the "Customise CSS" field.

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

However, 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 > Customise : CSS

The Appearance > Customise > Additional CSS tab natively allows you to add any CSS rules you need.

Apparence Personnaliser CSS
Add CSS via the menu Appearance > Customize

Just start entering 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 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 you to add CSS and Scripts in 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 page of the Divi > Theme Options > GeneralYou will find a field for entering CSS. This field is the same as the one found in the Appearance > Customise > Additional CSS tab (seen in the previous chapter of this article).

So this is another way to add CSS to 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 in the Divi theme options

Les champs présents dans cet onglet permettent d’ajouter du code dans le <strong><head></strong> et dans le <strong><body></strong> de votre site.

On se sert de cela principalement pour ajouter des balises <strong><script></strong> mais également des balises <strong><link></strong>.

For example:

Enfin, on peut aussi se servir de la balise <head> pour ajouter des polices personnalisées dans Divi à l’aide d’une balise <strong><link></strong>. Voici à quoi cela ressemblerait :

  

(to add premium fonts, you will need a child theme)

6 - The Code module: CSS, HTML and JavaScript

Divi's Code module allows you to add CSS, HTML or JavaScript to your layout.

Module Code Divi
Adding custom code in Divi via the Code Module

In this case, the code added via this module will only be active within the layout that embeds it.

Note that you can also use this module within your templates created with the Theme Builder. The code will then be active in all templates that use it.

To understand how it works, read this article dedicated to the Divi Code Module.

7 - The child theme : CSS, PHP, HTML, JavaScript

You can use a Child Theme to make customisations within your site. This is the most secure way to avoid losing changes every time the parent theme is updated.

Depending on the changes you need to make, a child theme is essential. This may be the case, for example, if you code a page template from scratch or add files.

Theme Enfant Divi - ajout de Code
Adding custom code to Divi via a child theme

The style.css file in any child theme will allow you to add your CSS rules. As for the functions.php file, it allows you to enter PHP.

If you need to add scripts, you can add .js files to your child theme folder and load them via the functions.php file.

To go further:

8 - Using the Code Snippets extension: PHP, JavaScript, HTML, CSS

In case you only need to add some code snippets to your theme without adding files or folders, in this case the child theme is not really necessary. The Code Snippets extension does the job very well... It's even more practical!

Extension Code Snippet
Adding custom code to Divi with the Code Snippet extension

This extension is free of charge and is available directly from your backoffice, in the Extension > Add tab.

Code Extension Snippet
Manage Code snippets easily

To use it, just go to the 'Extracts' tab and click on 'New ': you can enter PHP.

If you need to enter HTML, JS or CSS, this is also possible. By the way, 3 sample code snippets are available to understand how to insert these language types.

Finally, I find that this extension offers some significant advantages:

  • You do not need to go through FTP to add or remove code.
  • You can enable and disable each code snippet. This is very useful if you encounter conflicts in the future.
  • If the code you enter is not correct, your site will not "break". A message will appear explaining the error.
  • You can name each extract to make it easier to find.
  • You can prioritise the order in which you want to work.

9 - Custom code in Divi: summary table

You've just seen the overview of where you can add custom code in Divi. You're spoilt for choice!

It will then be necessary to choose "strategically": should the code be active on the entire site or should it only work on one page? Is this code recurrent? And so on...

So depending on your needs, there is always a solution!

Here is a summary table:

HTMLCSSJavaScriptPHP
Text Modulexx
Divi Modules Advanced Tabx
Page settingsx
Via the Appearance menux
Theme optionsxx
Divi Code Modulexxx
Children's themexxxx
Code Snippet Extensionxxxx

To go further, here are some links:

Ajouter Code personnalisé dans Divi
Code Personnalise Divi Theme
Where to add Custom Code in Divi

1,727 words

7

You might like it too:

Comment changer une image au survol de la souris ?

How to change an image on mouseover?

If you are not using the hover options available in Divi, you are missing out! Here's an example of how to use them that you might find useful. In this tutorial and video, I show you how to change an image on mouseover.

Page d’erreur 404 personnalisée : avec et sans le Divi Thème Builder

Custom 404 error page: with and without the Divi Theme Builder

Have you thought about customising your site's 404 error page? No ? Well, you should: not only is it easy to do, but it could also lower your bounce rate! The idea is to keep the user who passes through your site on your site. Discover the step by step tutorial + video.

9 Commentaires

  1. jerome218

    Un très bon résumé… j’ai enfin compris le avant et après dans le « personnaliser CSS » !!! Merci

    Pour le php, perso je passais par des shortcodes dans le functions de mon thème enfant, je vais tester Code snippet !!

  2. Lycia Diaz

    Merci Jérôme 😉 Tu vas vois Code Snippet est vraiment pratique !

  3. Anne Laure

    Merci BEAUCOUP pour ce site au top. Je suis en train de m’auto-former sur Divi, en ne connaissant pas encore ce qui est CSS d’ailleurs, et ce site est une mine d’or. Et comme je ne maitrise pas encore le sujet, je n’arrive qu’à utiliser les paramètres avancés de chaque module et du coup ne pige pas comment utiliser cela sans appeler de classe ou de balise.

    En l’occurence je cherche à faire un effet bouton mais à partir d’une icone Font Awesome, du texte donc, et je n’arrive pas à faire de changement de couleur au passage de la souris. Aurais-tu une idée de comment faire ?

  4. francoise

    Bonjour,
    Cet article est super clair.
    Je me suis donc servie de code snippet sur mon site en construction en pensant avoir trouvé la solution sans aller me plonger dans mon theme enfant.
    J’ai fait un « copier-coller » d’un code trouvé sur caldera forms afin de remplacer le drapeau us des numéros de telephone par le drapeau français.
    Mais cela ne fonctionne pas!

  5. Lycia Diaz

    Salut Anne Laure, ce que tu veux faire est du CSS pur. Pour émettre des règles au survol de la souris, tu dois utiliser «  :hover » Cela te donne une piste à explorer, tu trouveras des tutos sur Google.

  6. Lycia Diaz

    Salut François, on ne peut pas copier-coller n’importe quel code. Il faut avoir quelques connaissances en amont.

  7. Anne Laure

    Merci Lycia, en fait j’ai découvert l’onglet « souris » (je ne sais pas quel est le terme officiel) de Divi et j’ai réussi du coup !

  8. Réal Drolet

    Merci Lycia pour ce site vraiment extraordinaire! Une mine d’or pour celui qui se fait la main avec WordPress et Divi. Et en français!

  9. Lycia Diaz

    Merci !

Soumettre un commentaire

Votre adresse e-mail ne sera pas publiée.

Je souhaite recevoir les news du blog Astuces Divi !

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.

Pin It on Pinterest

Shares
Share This