Le thème Divi est un véritable couteau Suisse pour réaliser facilement des sites avec WordPress.
Son côté multi-usage rend possible la création de n’importe quel type de site, que ce soit un site vitrine, un blog, un site boutique… et ses très nombreuses fonctionnalités permettent une personnalisation de plus en plus poussée au fil des mises à jour du thème.
Néanmoins, afin d’aller encore plus loin en matière de customization, il est très souvent nécessaire d’ajouter des CSS à Divi. 
Je vais donc lister les différents endroits où il est possible d’ajouter ses feuilles de styles.

Dans les options du thème

Ajouter des styles CSS dans les options du thème Divi

Rendez-vous dans l’administration de WordPress puis dans la colonne de gauche, cliquez sur Divi -> Options du thème.
Sur la page qui s’affiche, onglet Général, scrollez tout en bas jusqu’à la rubrique Personnaliser CSS où vous pourrez ajouter vos CSS personnalisées.
Ici, il vous faut préciser une classe ou un identifiant puis ajouter les règles nécessaires.

Depuis le 15 février 2018, l’éditeur de code de Divi a subi une évolution majeure qui lui a apporté la coloration syntaxique, l’auto-complétion, un color-picker (uniquement dans le Visual Builder), un rapport d’erreurs et le rechercher/remplacer.

Petite astuce au passage pour le rechercher-remplacer :

  • cliquez dans l’éditeur de code
  • faites le raccourci CTRL + F sur PC ou COMMAND + F sur Mac
  • saisissez le terme à rechercher
  • tapez sur Entrée pour valider

Dans les paramètres d’une page

Ajouter des styles CSS dans les paramètres de la page de Divi

Pour afficher les paramètres d’une page :

  • si vous utilisez le Visual Builder, cliquez sur l’icone de roue dentée en pied de page :
    Afficher les paramètres de la page dans le visual builder de Divi
  • si vous utilisez le Builder classique, cliquez sur l’icone de hamburger à droite de la barre supérieure du builder :
    Afficher les paramètres de la page dans le page builder de Divi

Cette éditeur est similaire à celui qui se trouve dans les options du thème, à la différence près que les règles CSS que vous ajouterez ici ne s’appliqueront qu’à la page dont vous êtes en train d’éditer les paramètres.
Ce qui revient à écrire par exemple (où 123 serait l’identifiant de la page ciblée) :

.page-id-123 .ma-classe { 
  color: #000; 
  background-color: #dadada;
}

Dans un module code

Ajouter des styles CSS dans un module code de Divi

On n’y pense pas forcément, mais il est tout à fait possible d’ajouter des CSS dans un module code si on les balise de la manière suivante : <style type=text/css> Ici les CSS </style>

Le résultat est le même qu’en ajoutant ses CSS dans les paramètres de la page.

Dans les paramètres des sections, lignes et modules

Ajouter des styles CSS dans les paramètres de sections, lignes et modules de Divi

Ouvrez les paramètres d’une section, d’une ligne ou d’un module et affichez l’onglet Avancé puis la rubrique Personnaliser CSS.
Notez bien que les règles CSS que vous ajouterez dans les champs Avant, Élément principal et Après ne s’appliqueront qu’à la section, la ligne ou le module que vous êtes en train d’éditer.

Les champs Avant et Après permettent des modifier les styles des pseudo-éléments CSS :before et :after (Pour en savoir plus, voir ici et ).

En CSS inline dans le contenu

Ajouter des styles CSS inline dans Divi

Dans chaque module autorisant l’ajout de contenu texte (module texte, module diapo, etc.), si vous cliquez sur l’onglet Texte, vous afficherez le code HTML correspondant.
Ainsi, vous pourrez ainsi insérer vos CSS en balisant un élément avec un <span>, une <div>, un <a>… suivant vos besoins.

Cette méthode n’est à utiliser que si vous souhaitez par exemple exceptionnellement cibler quelques mots et changer leur couleur ou leur taille…
Dans l’absolu, c’est une pratique à éviter car les CSS inline alourdissent votre page et ne sont pas pratiques à modifier car disséminées un peu partout sur votre site.

Dans le customizer de WordPress

Ajouter des styles CSS dans le customizer de WordPress avec Divi

Quel que soit le thème utilisé, WordPress inclut une option CSS additionnel dans le Personnaliseur de thème.
Cet éditeur de code est similaire à celui de Divi en terme de fonctionnalités (hormis qu’il est sur fond blanc…).

Dans le fichier style.css du thème enfant

Ajouter des styles CSS dans le fichier style.css d'un thème enfant pour Divi

Si vous utilisez un thème enfant, il vous suffit de regrouper toutes vos feuilles de styles dans le fichier style.css.
Pour moi, c’est la méthode idéale car vous bénéficiez ainsi de toute la puissance de votre éditeur de code, quel que soit celui que vous utilisez (Atom, Brackets, Coda, Sublime Text…et j’en passe !).

Si vous souhaitez utiliser un thème enfant, vous pouvez télécharger gratuitement celui de Divi Community qui intègre quelques modifications utiles.

En conclusion…

Vous avez maintenant l’embarras du choix pour ajouter vos CSS personnalisées à Divi.
Ici encore, il n’y a pas réellement de bonne ou de mauvaise manière de faire, tout dépend de vos besoins.
Mais gardez à l’esprit que plus vous regrouperez vos CSS au même endroit, plus il vous sera facile de vous y retrouver.

  • Dans 90% des cas de figure, il faudra privilégier les options du thème ou le fichier style.css du thème enfant
  • 9% seront partagés entre les paramètres de la page et les CSS personnalisées des sections, lignes et modules
  • Le 1% restant ira (ou pas !) aux CSS inline placées dans l’onglet Texte des modules ayant une rubrique Contenu.

D'autres tutoriels pouvant vous intéresser: