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
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
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 :
- si vous utilisez le Builder classique, cliquez sur l’icone de hamburger à droite de la barre supérieure du builder :
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) :
Dans un module code
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
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 là).
En CSS inline dans le contenu
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
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
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.
Hello, Merci pour cette article.
Je suis à la recherche de comment rajouter du CSS dans une page catégorie d’article de blog. Le builder Divi n’est pas disponible de ce côté.
Puis je cherche également comment rajouter du CSS sur un layout section enregistré dans la bibliothèque DIVI.
Pour ne pas en fait devoir rajouter ce CSS à chaque fois que je ré utilise cette section. En fait quelle soit enregistré directement dans le layout.
Merci à vous
Il suffit de cibler la classe de ton élément.
Peut-être, dans le cas d’un layout, te faudra-t-il attribuer une classe à ta section si c’en est une.
Pour cibler une page / un article en particulier, inspecte son code source et regarde les classes de la balise body, tu y trouveras son identifiant.
Ensuite, tes CSS iront dans les options de Divi ou dans le fichier style.css de ton thème enfant.
Bonjour
Comprends pas pourquoi dans un thème enfant que c’est la méthode idéale ?
On peu utiliser un éditeur de code sur les autres méthodes ?
L’avantage du thème enfant est que c’est la seule méthode permettant d’utiliser un éditeur de code et ses fonctionnalités spécifiques.
De plus, le côté “portabilité” du thème enfant est idéal lorsqu’on a besoin de créer plusieurs sites car on utilise une même base qui peut contenir ses règles CSS préférées.
Bonsoir,
en recherchant la solution à un de mes problèmes je tombe sur votre article. En ajoutant du css à mon thème enfant celui ci n’ apparait pas. J’ai créer un logo carousel en html… jusque la tout va bien. Le css fontionne. Super. Mais dés que je veux modifier la taille de mes images… rien n’y fait. Il prends en compe une vieille version de mo CSS. Je travaille en local et ai frénetiquement vidé mon cache et testé sur un autre naviguateur… mais rien a faire… meme un bête changement de couleur ne fonctionne pas. Comme si il avait enregistré l’ancien CSS et ne voulait plus rien entendre. Avez vous déja rencontré ce cas de figure?
Hello, as-tu vidé aussi le cache navigateur?
Bonjour,
Y a-t-il moyen depuis le BO d’écrire directement dans le style.css du thème enfants ou faut-il passer obligatoirement par son éditeur de code ?
Le côté qui me semble interessant du style .css est d’y définir et “formater” les styles des balises h1, h2… h6 pour l’ensemble du site afin que si le client ajoute une section, et qu’on souhaite éviter que le site soit visuellement “par terre”, qu’il est seulement accès à l’onglet “Contenu” du module et non “Styles” tout en préservant le design du site.
Est-ce la bonne méthode pour maintenir le design tout en donnant la main à votre client ?
Merci à vous
Tu peux éditer le fichier “style.css” depuis l’admin de WordPress, dans “Apparence -> Personnaliser”.
Si tu souhaites définir un style global pour tes divers niveaux de titres et que tu ne souhaites pas mettre le nez dans les CSS, utilise la gestion globale des styles du builder (l’icone de globe terrestre en haut à droit des paramètres d’un module).
Tu peux même aller plus loin avec le module “Publier un contenu” qui te permettra de définir en plus des styles d’images, etc.
Ensuite, dans l’éditeur de rôles de Divi, tu créés un rôle assez restrictif pour le compte de ton client afin qu’il ne puisse modifier que le contenu et non le style.
Bonjour,
Auriez-vous svp une idée du code à insérer (et ou le placer) afin de classer par ordre alphabétique environ 200 modules “résumé” (ordre basé sur le titre du module) dans une page, ou plutôt même dans la section qui abrite du coup 40 rangées de 5 modules…
Je souhaite que ce classement puisse s’appliquer aussi lorsque je rajouterai des modules en fin de section…
merci beaucoup pour votre aide
Bonjour, ce n’est pas possible car ce n’est pas du contenu dynamique.
Bonjour,
J’aimerais qu’on éclaire ma lanterne.
Dans les sites préconstruits et proposé par DIVI, il y en a qui sont blindé de CSS.
Exemple : https://www.elegantthemes.com/layouts/food-drink/spice-shop-landing-page/live-demo
La superposition des images dans l’entête (les feuilles sous le bol d’épice).
On voit bien une structure pleine page avec à l’intérieur 2 colonnes et dans celle de droite, 4 images disposées les une sur les autres.
Je n’arrive pas à trouver ou ils sont inscrit le CSS pour avoir la main dessus …
Donc si je veux recopier ce modèle à la main avec le divi builder, je n’y arrive pas.
Quelqu’un pourrait m’indiquer ?
Merci beaucoup