Comment ajouter des classes CSS personnalisées à WordPress (3 façons faciles)

Ceux qui savent CSS savent que les cours CSS sont un gain de temps massif lors du style d'un site entier. Mais si vous ne codez pas, vous n'avez peut-être jamais réalisé à quel point ils peuvent être puissants. Aujourd'hui, nous changeons cela.

Dans cet article, je vais vous montrer 3 façons faciles d'ajouter des cours CSS à WordPress, même si vous n'avez jamais écrit une seule ligne de code. Vous apprendrez également à le faire de la manière sans code en utilisant le puissant Builder de site Web WordPress, Divi.

Que sont les cours CSS et comment aident-ils?

CSS ( feuilles de style en cascade ) est le code qui contrôle la conception et l'apparence des éléments, tels que les couleurs, l'espacement et les polices, sur un site Web. Une classe CSS est une étiquette réutilisable que vous attribuez à plusieurs éléments afin que vous puissiez les styliser tous en même temps au lieu de répéter le même processus pour chaque élément.

Sans classes CSS, vous devrez styliser manuellement chaque élément, ce qui prend du temps, en particulier lorsque vous travaillez sur des sites WordPress plus grands avec plusieurs pages. Mais comme c'est souvent le cas, la plupart des sites Web incluent des éléments et des motifs répétés, tels que les boutons d'une page de prix ou de boîtes de fonctions sur différentes sections.

Ces éléments semblent similaires car, dans le backend, ils partagent le même groupe de classe. Ainsi, lorsque vous appliquez CSS à un élément d'un groupe de classe commun, chaque élément dedans hérite automatiquement des mêmes paramètres de style. À l'avant, cela leur donne une apparence visuellement similaire. Les classes CSS gagnent du temps, gardez la conception cohérente et facilitez les modifications futures - car vous n'avez qu'à mettre à jour la classe au lieu de changer chaque élément un par un.

Façons d'ajouter des cours CSS à WordPress

Vous pouvez ajouter des classes CSS à un site Web WordPress de plusieurs manières, en fonction de votre maîtrise de l'utilisation de CSS. Je vais vous montrer comment le faire à l'aide de WordPress Customizer et un plugin comme un CSS personnalisé simple, mais ces deux méthodes vous obligent à écrire CSS.

Passez à la troisième méthode si vous êtes plus intéressé par la méthode sans code.

1. Utilisation du personnalisateur WordPress

Disons que votre page WordPress a plusieurs boutons. Ils ont actuellement l'air clair et vous voulez qu'ils se démarquent, vous prévoyez donc d'ajouter une bordure bleu marine et un fond bleu ciel.

L'ajout de CSS à chaque bouton prendra un temps considérable car vous devrez répéter le processus huit fois. Mais avec les classes CSS, vous pouvez simplement affecter la même classe CSS à chaque bouton et écrire le CSS une seule fois. Nommez notre classe CSS « Custom-A» . Dans la fenêtre de l'éditeur de page WordPress, cliquez sur n'importe quel bouton> Paramètres (Icône Gear)> Basculez l'option avancée . Maintenant, écrivez le nom de classe dans des classes CSS supplémentaires.

Répétez le processus pour chaque bouton et enregistrez. Pour ajouter le code de style à ces boutons, vous devrez accéder à WordPress Customizer> CSS supplémentaire.

Pour faire la frontière bleu marine et le bleu ciel de fond, vous colleras votre CSS ici.

Notez que le nom de la classe CSS que nous avons choisi est avant les règles de style dans le code. Cela garantit que le code est appliqué à chaque élément qui a ce nom de classe attribué.

Après avoir réussi à publier et à prévisualiser votre page, les boutons stylisés ressembleront à ceci:

C'est simple - si vous connaissez CSS.

WordPress Customizer est également idéal pour apporter des modifications mineures. Cependant, le problème est que le CSS a ajouté qu'il est lié au thème, ce qui signifie qu'il peut être perdu si vous changez de thèmes. Donc, si vous aimez tester différents thèmes sur votre site Web, vous devrez mettre à jour le code chaque fois que vous passez à un thème différent, ce qui n'est pas amusant. Dans ce cas, l'installation d'un plugin pour assurer la sécurité de vos styles de classe CSS est une bien meilleure option.

2. Utilisation d'un plugin comme CSS personnalisé simple

Une fois que vous avez installé le plugin CSS personnalisé simple, l'option CSS personnalisée sera ajoutée à la section d'apparence . Maintenant, il vous suffit d'ajouter votre code CSS et de mettre à jour CSS personnalisés pour refléter les modifications. (Vous devez toujours attribuer des noms de classe aux éléments que vous souhaitez avoir des styles communs.)

Des plugins comme celui-ci gardent votre CSS personnalisé intact, même si vous modifiez votre thème plus tard. Il est également un peu plus organisé que WordPress Customizer. Cependant, les deux méthodes ne sont pas évolutives car elles peuvent facilement devenir encombrées lorsque vous enregistrez CSS personnalisé pour plusieurs groupes d'éléments de votre site Web entier.

C'est pourquoi, pour le style à l'échelle du site, l'approche recommandée consiste à créer un thème enfant et à mettre à jour sa feuille de style. De cette façon, toutes vos modifications sont maintenues en sécurité dans le thème de votre enfant, même après les mises à jour du thème.

Bien que efficace (et recommandé par les codeurs), cette méthode peut rapidement devenir technique car elle nécessite toujours un travail manuel - vous devrez styliser chaque élément (ou plusieurs éléments à l'aide de classes CSS), ce qui prend du temps et non adapté aux débutants. Vous devrez également garder une trace des noms de classe - imaginez que vous souhaitez modifier une classe de bouton particulière, et vous faites défiler les chaînes de code sans fin.

Et si vous pouviez évoluer le style sans écrire une seule ligne de code? C'est là que les constructeurs de pages de glisser-déposer modernes comme Divi entrent.

3. Utilisation d'un constructeur de sites Web sans code comme Divi

La beauté de l'utilisation d'un constructeur de sites Web sans code moderne comme Divi est que vous n'avez pas besoin d'écrire CSS (ou de tout code) pour appliquer des styles cohérents sur votre site. Avec une interface visuelle, vous pouvez attribuer des styles aux sections, des lignes, des colonnes et des modules simplement en sélectionnant et en personnalisant les paramètres de conception.

En Divi, vous créez des préréglages au lieu des classes CSS. Pendant des années, Divi a offert des préréglages basés sur des modules qui vous permettent d'économiser et de réutiliser les styles de modules comme des boutons, des souplesseurs et des images. Mais nous avons lancé quelque chose de plus incroyable - des préréglages de groupe d'option qui vous permettent d'aller encore plus loin.

Avant les préréglages du groupe d'options, vous n'étiez autorisé qu'à appliquer des préréglages sur les modules. Par exemple, un préréglage du texte de présentation ne peut être utilisé que dans un autre texte de présentation. Maintenant, vous pouvez même partager des paramètres entre les modules.

Au lieu de personnaliser un élément à la fois, les préréglages du groupe d'options vous permettent d'enregistrer des styles pour les paramètres partagés - comme des arrière-plans, des bordures ou des styles de texte - et les appliquer à plusieurs éléments différents à la fois. Par exemple, si une section et une colonne utilisent toutes deux une couleur d'arrière-plan, vous pouvez enregistrer ce paramètre de style en préréglage et l'appliquer sur tous les éléments pertinents pour créer une conception cohérente.

Divi simplifie les styles de construction et de sauvegarde en tant que préréglages à travers des fonctionnalités de glisser-déposer sans aucun codage, ce qui rend la conception à l'échelle du site change plus rapidement et plus accessible, en particulier pour les non-codeurs.

Télécharger Divi 5

Voyons ce que je veux dire plus en détail ci-dessous

Les préréglages du groupe d'options de Divi facilitent l'ajout de cours CSS

Les préréglages du groupe d'options de Divi suivent le concept des classes CSS et le simplifient pour les non-codeurs. Au lieu d'écrire et d'attribuer manuellement des cours, vous pouvez désormais utiliser le constructeur visuel de Divi pour appliquer des styles de conception partagés sur différents éléments en quelques clics.

Ces préréglages fonctionnent sur le niveau d'option, ce qui signifie qu'ils ciblent des paramètres de conception spécifiques comme les couleurs d'arrière-plan, les bordures ou l'espacement qui sont partagés sur plusieurs types d'éléments. Ainsi, par exemple, les paramètres d'arrière-plan d'une section peuvent être appliqués à une colonne, une ligne et même un élément de texte.

C'est un moyen plus rapide, plus facile et plus intuitif de maintenir la conception de votre site Web cohérente. Voici comment:

• Styles réutilisables à travers les éléments: vous n'avez pas besoin de personnaliser chaque élément manuellement. Enregistrez les styles de groupe d'options en tant que préréglages et appliquez-les à n'importe quel élément.
• Mises à jour globales avec une seule modification: modifiez un préréglage une fois, et tous les éléments utilisant ce préréglage mettront à jour automatiquement. Cela rend les ajustements de conception rapidement et efficaces sur l'ensemble de votre site Web.
• Combinez plusieurs préréglages: superposez et mélangez différents préréglages (par exemple, bordures, ombres, styles de texte) sur n'importe quel élément pour une combinaison de conception flexible et créative sans commencer à zéro.
• Personnalisez les préréglages par défaut pour les styles de base: enregistrez les préréglages par défaut pour les appliquer automatiquement à tous les éléments pertinents.

En savoir plus sur les préréglages du groupe d'options

Comment utiliser Divi pour ajouter des classes CSS à WordPress sans codage

Maintenant que vous savez quels sont les préréglages du groupe d'options de Divi et que vous n'avez pas besoin de savoir le codage pour travailler avec eux, je voulais vous montrer comment cela fonctionne exactement à l'intérieur du Divi Builder. Ce que vous devez faire pour créer, enregistrer et appliquer des préréglages de groupe à n'importe quel paramètre d'option comme l'arrière-plan, la bordure, la boîte à box, etc. Pour notre exemple, personnalisons une page de tarification.

Modification du fond du bouton

Supposons que je souhaite modifier l'arrière-plan du bouton en violet pour correspondre à la couleur de la page. Je vais donc personnaliser le bouton de la première colonne et enregistrer les paramètres en tant que préréglage du bouton de lumière primaire . (La couleur noire dans les paramètres de l'interface utilisateur montre que vous modifiez un préréglage de paramètres. Si vous avez sélectionné le mode sombre, ce sera le contraire.)

Maintenant, pour appliquer les mêmes paramètres aux deux autres boutons, je vais simplement changer le préréglage du bouton en lumière primaire.

Changer l'ombre d'une colonne

Ajoutons une ombre de boîte à toutes les colonnes. J'ajouterai une ombre de boîte à la première colonne et je l'enregistrerai sous forme de préréglage de l'ombre de la boîte d'ombre .

Pour appliquer la même ombre sur les deux autres colonnes, je vais simplement changer le préréglage de l'ombre de la boîte en ombre .

Modification des préréglages de texte

Vous pouvez également modifier des styles pour les éléments de texte, tels que H1 et H2S. Voici comment fonctionne la mise à jour des colonnes H3 Preset:

Après avoir économisé, voici à quoi ressemblera la page de tarification:

Bien que j'aie apporté des modifications mineures pour vous montrer comment cela fonctionne, vous pouvez imaginer les possibilités. Avec les préréglages de groupe d'options de Divi, l'édition de styles personnalisés de groupes est aussi simple qu'un clic d'un bouton. Mais c'est juste la pointe de l'iceberg. Vous pouvez également:

• Définissez les préréglages par défaut pour les groupes d'options afin que les éléments de base comme les en-têtes ou les boutons héritent automatiquement de votre style sur le site. Une fois que vous comprenez le fonctionnement des préréglages par défaut, vous ne revenez jamais à l'utilisation d'anciennes méthodes.
• Le groupe d'options de calque prérégrisé sur les préréglages d'élément pour ajouter un accent supplémentaire, comme appliquer un fond partagé, puis empilé un style d'ombre ou de bordure pour faire ressortir certains éléments.

Nous avons écrit un guide entier sur tout ce que vous devez savoir sur les préréglages du groupe d'options de Divi. Lisez l'article complet pour obtenir des idées de conception et des conseils sur la façon de simplifier la conception Web basée sur les classes avec Divi.

En savoir plus sur les préréglages du groupe d'options

Divi est un changeur de jeu pour le système de conception basé sur les classes

Les préréglages du groupe d'options de Divi apportent la puissance des cours CSS à tout le monde. Que vous conceviez en solo ou que vous collaboriez avec une équipe, les préréglages accélèrent votre flux de travail, à bien faire à mesure que votre site se développe et que vous faites un style cohérent sans effort. Ils sont plus rapides, plus efficaces et beaucoup plus intuitifs que les flux de travail CSS traditionnels.

Commencez avec Divi 5 aujourd'hui

Divi 5 est en mode de mise à jour complet. Nous lançons de nouvelles fonctionnalités chaque semaine, tout comme les préréglages du groupe d'options, c'est une bonne idée de connaître les unités avancées, les variables de conception CSS et bien d'autres qui changent la façon dont vous abordez la conception de n'importe quel site Web.

En savoir plus sur Divi 5

Divi 5 est un framework de conception puissant avec des outils puissants comme Divi Dash, Divi Quick Sites et Divi AI - construit pour vous aider à créer des sites Web personnalisés et professionnels sans toucher une seule ligne de code. Rien ne vous limite, prêt à faire un essai routier dans l'avenir de la conception du site Web?

Télécharger Divi 5