Ajouter ou modifier du CSS personnalisé dans Divi

• Dans Divi, il est possible d'utiliser du HTML personnalisé.

• À Divi, on peut ajouter nos propres CSS.

• Et il est possible de programmer ce qu'on veut en PHP et Javascript pour étendre ou modifier Divi.

Tout ça est donc effectivement puissant et aux possibilités presque infinies dans le cadre des limites de l'informatique et des langages de programmation utilisés.

Voici 6 manières d'ajouter votre CSS personnalisé à votre site Divi :

1. Menu Divi > Personnaliseur de thème > CSS additionnel

2. Menu Divi > Options du thème > En bas, champ Personnaliser CSS

3. Menu Apparence > Éditeur de fichiers des thèmes > style.css de votre thème enfant (ou autres fichiers CSS de votre thème)

4. Dans une page Divi > Paramètres de page (roue dentée) > Onglet avancé > Champ Personnaliser CSS

5. Dans une section, rangée, module Divi : Onglet avancé > Champ Personnaliser CSS

6. CSS en ligne dans le HTML d'un module Divi

Dans la vidéo ci-dessus, je vous montre en détail tout cela.

Bonjour, ici Jean de formation-divi.com (maintenant ideoforge.com). Aujourd'hui, je vais vous montrer comment ajouter votre CSS personnalisé à votre site web Divi. Il y a plusieurs manières d'ajouter du CSS à un site Divi et je vais vous en montrer six. La première : rendez-vous dans le backoffice de votre site, dans le menu « Divi », sous-menu « Personnaliseur de thème ». Ici, il y a une ligne qui s'appelle « CSS additionnel ».

L'avantage de cette méthode est que nous avons ce qui s'appelle la coloration syntaxique, c'est-à-dire que le code est plus lisible. Vous voyez les couleurs. Regardez ce que ça donnerait sans les couleurs. Donc c'est beaucoup plus facile de s'y retrouver avec cette coloration syntaxique. Autre avantage de cette méthode : vous pouvez prévisualiser directement les changements que vous tapez ici dans votre site. Démonstration. Hop ! Dès que je tape quelque chose ici, ça se répercute dans votre site et vous pouvez même naviguer d'une page à l'autre.

C'est très pratique. Pour les inconvénients : lorsqu'on va avoir beaucoup, beaucoup de CSS, plusieurs centaines ou milliers de lignes, on a cette largeur qui est limitée. Donc il va falloir défiler, défiler, défiler. Également, la fonctionnalité de recherche : si je fais Ctrl+F, elle n'est pas top.

Une autre manière d'ajouter du CSS, c'est de se rendre dans « Divi », « Options du thème ». Ici, on va défiler tout en bas et on va voir ce champ qui s'appelle « CSS personnalisé ». Alors, il se trouve que c'est le même CSS que celui que nous avons vu dans la méthode 1. Démonstration. Si ici je tape quelque chose, que j'enregistre, que je retourne dans « Personnaliseur de thème », « CSS additionnel », on voit que ce que je tape dans l'un se retrouve dans l'autre. Donc, hormis le fait qu'on ait une zone un peu plus large, on n'a pas la prévisualisation. Il n'y a donc pas trop d'intérêt à utiliser cette méthode.

Troisième méthode : rendez-vous dans « Apparence », « Éditeur de thème ». Ici, cela vous donne accès au thème de votre site. Donc vous devez avoir un thème enfant et, dans ce cas, il va y avoir quelques fichiers à droite : style.css, functions.php et éventuellement quelques autres fichiers. Si vous n'avez pas de thème enfant dans votre site, vous allez voir tout ceci avec des dossiers : core, css, epanel, includes et cetera. Cela, c'est le thème principal, ou parent, du site. Il ne faut pas le modifier. Il faut travailler toujours avec un thème enfant dans WordPress.

Vous pouvez vérifier cela dans « Apparence », « Thèmes ». Ici, il va y avoir deux thèmes qui ont souvent presque le même nom. Et lorsque vous cliquez sur « Détails du thème », vous voyez : ceci est un thème enfant de Divi. Donc, si vous avez bien votre thème enfant, vous pouvez éditer dans « Apparence », « Éditeur de thème ». Vous choisissez à droite style.css. Ici, vous pouvez éditer le CSS de votre site. Exemple.

Donc l'avantage ici, on a toujours la coloration syntaxique et on a beaucoup plus de place. C'est donc utile lorsqu'on a beaucoup de CSS. Vous pouvez aussi accéder au fichier de votre thème enfant par FTP et donc l'ouvrir dans un éditeur de texte, et ici bénéficier de tous les avantages d'un éditeur de texte avancé comme « Rechercher et remplacer », par exemple. Autre avantage de cette méthode : comme c'est un fichier de votre site, vous allez pouvoir le passer dans des outils qui vont le minifier, le compresser, le combiner avec d'autres pour optimiser la vitesse de chargement de votre site.

Quatrième méthode. Lorsque vous éditez une page Divi dans le backoffice, vous voyez en haut à droite qu'il y a plein de boutons. Il y en a un qui est une roue dentée et qui s'appelle « Réglages » ou « Paramètres de la page ». Lorsque je clique dessus, je peux modifier des paramètres de cette page uniquement, en me rendant dans l'onglet « Avancé », « CSS personnalisé ». Ici, je peux taper du CSS qui va s'appliquer seulement à la page en cours. Tandis que les méthodes que nous avons vues avant s'appliquent à l'intégralité du site, à toutes les pages du site.

Donc ici, dans « Paramètres de la page », onglet « Avancé », c'est pour ajouter du CSS qui va seulement dans cette page. L'avantage, c'est que si vous avez quelque chose d'assez lourd, comme un formulaire de contact, une méthode de paiement, une infographie réalisée en CSS, vous n'avez pas besoin de charger le CSS dans toutes les pages du site. Vous pouvez le charger seulement dans la page concernée. Ici, nous sommes en backoffice, mais si vous éditez votre site web en mode visuel sur le front, lorsque vous activez le Visual Builder, vous retrouvez le même menu : en bas, sur la roue dentée qui se trouve ici.

Enfin, une 6e et dernière méthode. Il s'agit de mettre du CSS en ligne. Lorsque j'édite un module, je me rends dans l'onglet qui s'appelle « Texte », c'est-à-dire la vue HTML. Ici, je peux taper du HTML, du CSS et même du JavaScript. Exemple. Ici, je vais ajouter une balise HTML strong à laquelle j'applique un CSS en ligne, qui est color: red, que je vais refermer ici. Et voilà comment faire du CSS en ligne avec Divi.

Si vous avez des questions, je vous invite à vous rendre sur le site formation-divi.com et à me contacter. Pour aller plus loin dans l'intégration web avec Divi, vous pouvez découvrir ma formation qui s'appelle « Formation Divi Intégration web », dans laquelle je vais transformer une maquette graphique en site web Divi en utilisant toutes les possibilités de Divi, ainsi que du CSS personnalisé comme nous venons de le voir. Voici le résultat de cette formation : un site web responsive et magnifique que nous allons créer ensemble à partir d'une page blanche et que vous pouvez réutiliser pour vous.

Les méthodes qui sont vues dans cette formation, vous pouvez les utiliser pour travailler pour des clients. C'est-à-dire qu'en achetant cette formation Divi Intégration web, vous allez développer des compétences que vous allez rentabiliser 10 fois ou 100 fois en appliquant ce que je vous explique ici pour vos propres clients. Si vous découvrez simplement Divi, je vous invite à découvrir la formation « Découvrir Divi », dans laquelle je crée avec vous un site web opérationnel à partir de zéro en utilisant Divi. Je vous souhaite une très bonne journée et à bientôt sur formation-divi.com.