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

Many places where you canadd custom code in DiviHey! This theme facilitates this task. You will see in this article that yourtheme child is almost useless !

Yes... The native toolsDivi and WordPressallow us to easilyadd codeforCustomize Divi. This is ideal if you are not a developer but you have found a piece of code (a snippet) to copy and paste.

If you readAstuces Diviyou must have seen that some articles proposed this kind of"Snippet"to help youcustomize your site. So let's take a closer look.where to add custom code...

1 - The Divi Text module: CSS and HTML

TheDivi Text moduleallows to do a lot of things! You can:

• Write text (of course)
• Add Titles
• Add lists with chips or numbers
• Insert Images
• Insertshortcodes
• Etc.

It looks like the old WordPress editor (Classic Editor) and offers a tab that youallows to add CSS and HTML. All you have to do isswitch module to "TEXT" modeand you access theHTML version of your text. It's very practical, even indispensable!

So, if you have someHTML and CSS concepts, you can modify your texts on the fly.

To give you an example, on the screenshot above, I quickly marked part of the text with<h2>and added a color to a few words.

You see the beacon<span>? Inside, I added style (of the CSS):<span style="color:blue;">Placer un mot ici</span>. This is called theCSS INLINE. To tell you everything, it is not recommended to placeCSS Inlineeverywhere because this may have an impact on theperformance of your site. But sometimes it can help!

This Text module, you understand, is an easy-to-use off-road module to add HTML or CSS!

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

EachVisual Builder module, line and sectionhas a tab namedADVANCEDwhich containsfields to add CSS.

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

Three fields are available to add CSS:

1. Before:This is the"Pseudo-Element Before"
2. Main Element:the CSS you add here will affect the main element.
3. After:This is thePseudo-Element After

Learn more aboutPseudo Elements Before and After.

These fieldsact on very specific CSS CLASSES. I advise you to click on theQuestioning pointto know where your code will work.

Note that in these fields you only have toenter CSS without calling classes or tagsBecause it won't work. You will then have to use other means, such as those we will discuss in the rest of this article.

Do you know you can test Divi for free?See you on this pageand click on "TRY IT FOR FREE"

3 - Advanced settings of the page: CSS

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

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

See you atADVANCED tab: you can enter your CSS in the fieldPersonalize CSS.

This option is ideal if you wantcreate a CSS rule that only acts within this page. Thus, you do not unnecessarily load CSS on your entire site.

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

4 - Appearance > Customize: CSS

The tabAppearance > Customize > Additional CSSnatively adds all the CSS rules you need.

Just start toenter your CSS in the dedicated field. You can add several rules afterwards.

I suggest you skip a line between each code and even add comments to remember what your code is for. 😉

Here is an example:

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

The text between/*and*/is a comment not taken into account by web browsers. By commenting on your CSS, you will find it faster!

5 - Divi theme options: CSS and JavaScript

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

5.1. - The CSS in Tab Divi > Theme Options > General

At the end of the tabDivi > Theme Options > General, you will find a field to enter CSS. This field is the same as the one on the tabAppearance > Customize > Additional CSS(see previous chapter of this article).

So that's another way.add CSS in Divi.

5.2. - JavaScript in Tab Divi > Theme Options > Integration

The tabDivi > Theme Options > Integrationoffers the possibility to add JavaScript or jQuery code.

The fields in this tab allow to add code in the<head>and in<body>Your site.

This is mainly used to add tags<script>Note that you can also use this module within your templates created with the Theme Builder. The code will then be active in all the models that use it.<link>.

Divi Code Module

• You can use aChild themeshows the usefulness of this field forDepending on the changes you need to make, a child theme is essential. This may be the case, for example, if you fully code a page template or add files..
• Add custom code to Divi via a child themethe addition of Google Analytics in Divicontent in any child theme will allow you

Finally, we can also use the beacon<head>to add custom fonts in Divi using a tag<link>. The file

 <link href="https://fonts.googleapis.com/css2?family=Chelsea+Market&display=swap" rel="stylesheet"> 

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

6 - The Code module: CSS, HTML and JavaScript

TheDivi Code moduleallowsadd CSS, HTML or JavaScriptIf you need to add scripts, you can add files

In this case, the code added via this module will only be active within the layout that loads 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 models that use it.

child theme DiviSee how to add.

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

JavaScript or jQuery in a child themeIn case you haveto make customizations within your site. This is the most secure way not to lose changes to each parent theme update.

In this case, the child theme is not really indispensable.

does the job very well... It's even more convenient!style.cssAdd custom code to Divi with Snippet Code extensionadd your CSS rules. Quant au fichierfunctions.php, il permet desaisir du PHP.

If you need to add scripts, you can add files.jsdans le dossier de votre thème enfant et les charger via le fichierfunctions.php.

To go further:

• Créer ou obtenir unDivi child theme
• Voir comment ajouter duJavaScript ou du jQuery dans un thème enfant.

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

Dans le cas où vous avezneed to add only a few extracts of code to your theme without adding files or foldersIn this case, the child theme is not really indispensable.The Snippets Code extensiondoes the job very well... It's even more convenient!

This extension is free and is available directly from your backoffice, on the tabJavaScript.

To use it, just go tothe "Extracts" taband click on"New"Child themesaisir du PHP.

If you need to enter HTML, JS or CSS, it is also possible. In fact, 3 examples of code extracts are available to understand how to insert these types of language.

To go further, here are some links:

• You do not need to go through the FTP to add or delete code.
• You can turn on and off every snippet of code. It is very useful if you encounter conflicts in the future.
• If the code you enter is not correct, your site will not "crack". A message will appear to explain where the error came from.
• by Captain WP
• A list of

9 - Custom code in Divi: summary table

tutorials to learn PHPadd custom code in Divi. You have the embarrassment of choice!

You will then have to choose "strategically": should the code be active throughout the site or should it only work on a page? Is this code recurring? Yeah.

9 Main element

Advanced Code Page Divi

	HTML	CSS	Appearance Customize CSS	Option Theme Divi CSS
Text module	x	x
Option Theme Divi JavaScript		x
Page Settings		x
Divi Code Module		x
Theme Enfant Divi - addition of Code		x	x
See how to add	x	x	x
Snippet Extension Code	x	x	x	x
Add Custom Code in Divi	x	x	x	x

Custom Code Divi Theme

• Divi Tips » Where to add custom code in Divi (CSS, JavaScript and PHP)? Comment flow
• Article"Technical prerequisites to develop under WordPress"de Capitaine WP
• Une liste detutoriels pour apprendre le PHP .