Sujets
La personnalisation des styles globaux est une nouvelle fonctionnalité de WordPress 5.9, incluse dans les thèmes basés sur des blocs.
Elle vous permet de personnaliser vos sites autant que vous le souhaitez, avec différentes couleurs, typographies, mises en pages, et bien plus encore.
Vous pouvez aussi ajuster le style de vos blocs pour assurer une expérience cohérente sur l’ensemble du site. Ajoutez par exemple vos couleurs sur le bloc Bouton, ou les différents niveaux de titres à la taille de police la plus adaptée.
Comment fonctionnent les styles globaux ?
Les styles globaux impactent l’ensemble de votre site. Cela signifie que si vous modifiez la couleur d’arrière-plan, cela la modifiera sur tous vos articles, pages et modèles.
Votre thème propose plusieurs réglages par défaut en plus de ceux de WordPress. Vous les trouverez tous listés ici, mais en utilisant les styles globaux, vous pourrez les surcharger par vous-même. Cela signifie par exemple que vous pouvez ajouter vos propres couleurs à la palette de couleurs disponible dans l’éditeur de publications. Idem pour les outils de contrôle de mise en page, et ainsi de suite.
Lorsque vous avez terminé de modifier les styles globaux, pensez à cliquer sur le bouton Enregistrer, situé en haut à droite de l’écran, pour les conserver.
Où trouver les styles globaux
Afin d’accéder à cette fonctionnalité, vous devez utiliser un thème basé sur des blocs, puis vous rendre dans l‘éditeur de site. Lisez l’article l’éditeur de site pour découvrir comment y accéder.
Une fois dans l’éditeur de site, vous trouverez le bouton Styles en haut à droite de l’écran, à côté du bouton Réglages.
Ce panneau restera disponible quel que soit le modèle ou l’élément de modèle que vous modifiez, afin de vous permettre de créer la mise en forme de votre site au fur et à mesure de la conception de ses modèles.
À noter que lorsque vous accédez à l’éditeur de site depuis le tableau de bord, vous trouverez le bouton Styles dans le menu, sur la gauche de l’écran. Cliquez ensuite sur Modifiez les styles (icône crayon) pour accéder au panneau décrit précédemment.
Prévisualiser vos modifications avec le guide de style
Lorsque vous apportez des modifications aux styles de votre site, qu’il s’agisse de passer à une variation de styles différente ou de modifier juste un bloc, il est important de voir l’impact visuel que cela aura.
Avec l‘ajout du guide de style dans WordPress 6.2, vous pouvez prévisualiser vos modifications de styles directement appliquées aux blocs.
Pour activer le guide de style, cliquez sur le bouton Guide de style (icône « oeil ») présent en haut du panneau des Styles.
Une fois activé, une page présentant les différents blocs de votre site s‘affiche dans la partie centrale de l’éditeur.
Ce bouton est disponible tout au long de la personnalisation des styles, vous pouvez ainsi modifier les styles de votre site et voir directement le résultat sur vos contenus.
Réglages disponibles dans les styles globaux
Typographie
Les réglages de typographie permettent de gérer les paramètres typographiques des différents éléments – textes, liens, titres, légendes et boutons – de l’ensemble du site.
Vous y trouverez deux sous sections : Polices et Éléments, décrites ci-après.
Polices
La section Polices vous permet de gérer les différentes polices d’écriture disponibles sur votre site.
Vous pourrez y gérer les polices proposées par votre thème, ainsi qu’une interface pour téléverser de nouvelles polices.
Cliquez sur le bouton Gérer les polices pour ouvrir une fenêtre modale où vous trouverez trois onglets :
- Médiathèque – Vous trouverez ici la liste des polices disponibles sur votre site, en cliquant sur l’une d’elle, un nouveau panneau s’ouvre et vous permet d’activer ou de désactiver des variantes de police.
- Téléverser – C’est ici que vous pouvez téléverser des polices personnalisées que vous aurez préalablement téléchargées. Les formats de police supportés sont :
.tff,.otf,.woff, et.woff2. - Installer des polices – Ce dernier onglet vous permet de vous connecter directement à Google Fonts pour y sélectionner des polices. Lors de votre premier accès à cet onglet, vous devrez cliquer sur le bouton Autoriser l’accès aux Google Fonts. Une liste de police s’affiche alors, vous pouvez y effectuer une recherche, puis choisir des polices à installer.
Éléments
Dans la section Éléments, vous pouvez paramétrer les réglages de typographie des éléments suivants : textes, liens, titres, légendes et boutons.
Cliquez sur un élément pour accéder à ses réglages, vous y trouverez les réglages communs de typographie.
Couleurs
Cette section vous permet de gérer les palettes de couleurs et la couleur par défaut de différent éléments généraux de votre site : texte, arrière-plan, liens, légendes, boutons, titres, H1.
Palette
En cliquant sur Palette, vous pourrez modifier la palette de couleurs de votre thème et celle par défaut.
Ajout d’une couleur ou d’un dégradé personnalisé
Si vous souhaitez ajouter une couleur ou un dégradé personnalisé sur votre site, suivez ces étapes :
- Ouvrez le panneau Styles.
- Cliquez sur la section Couleurs.
- Cliquez sur la section Palette et sélectionnez l’onglet Solide (couleur) ou Dégradé.
- Dans la section Personnalisée, cliquez sur le bouton +.
- Ici, sélectionnez et nommez votre couleur personnalisée. Lors du choix du nom de votre couleur, évitez les noms trop génériques (bleu, vert, etc.) pour éviter que votre couleur se confonde avec d’autres noms de couleurs génériques.
- Une fois que vous avez créé votre couleur ou votre dégradé personnalisé, cliquez sur OK puis Enregistrer.
- Votre option de couleur/dégradé sera maintenant disponible sur l’ensemble de votre site.
Mise en page
Cette section vous permet de modifier des réglages de mise en page sur l’ensemble de votre site :
- Largeur de la zone de contenu principal : la largeur que doit prendre votre contenu en mode Contenu et Large.
- Marges internes : les marges internes appliquées aux éléments qui entourent le contenu principal.
- Espacement des blocs : les marges haut et bas entre chaque bloc dans le contenu principal.
Blocs
Chaque bloc de votre site peut être ajusté ici afin de faire correspondre sa mise en forme à vos besoins, et dispose de ses propres options de personnalisation. Par exemple, le bloc Image propose des options de mise en page, et le bloc Bouton propose des options de typographie, de couleurs et de mise en page.
Gardez en tête que les changements faits ici auront un impact sur l’état par défaut de chaque bloc sur l’ensemble de votre site, à moins qu’il ait été personnalisé lors de son insertion à un endroit spécifique.
Par exemple, si vous avez personnalisé un bloc Bouton spécifiquement inséré sur une page précise de votre site, sa mise en forme ne sera pas impactée, puisqu’elle diffère des options proposées par défaut.
Variations de styles
Les variations de style sont une nouvelle fonctionnalité des thèmes basés sur les blocs, introduite dans WordPress 6.0.
Avec ces variations de style, des versions alternatives de votre thème vous sont présentées avec différentes combinaisons de couleurs, polices, typographie, espacement, paramètres de bloc, etc. Vous pouvez facilement sélectionner une variation de style et modifier l’apparence de votre site, sans changer de thème.
Dans le panneau Styles, vous trouverez la variation de style active, via un encart de prévisualisation.
Cliquez sur le bouton Parcourir les styles situé en dessous, une galerie des variations disponibles s’affiche, cliquez sur l’une d’entre elle pour la prévisualiser dans la zone centrale de l’éditeur de site.
Appliquer du CSS additionnel
Si les réglages de l’éditeur de site ne vous permettent pas d’atteindre votre objectif dans la personnalisation de votre site, vous pouvez ajouter du CSS personnalisé.
Notez que les modifications CSS que vous apportez ne seront pas écrasées par une mise à jour de votre thème, mais elles seront effacées lorsque vous changerez de thème.
CSS additionnel global
Depuis WordPress 6.2, il est possible d’appliquer du CSS personnalisé de façon globale (sur l’ensemble du site), depuis le panneau des Styles, via le menu En savoir plus puis CSS additionnel.
CSS additionnel bloc par bloc
Lorsque vous personnalisez les styles d’un bloc, vous trouverez un réglage CSS additionnel dans l’onglet Avancé. Le CSS saisi à cet endroit s’applique à tous les blocs de ce type, sur l’ensemble du site.
Étant donné que le CSS saisi ici est destiné à un type de bloc spécifique, vous ne devez pas ajouter de sélecteur ou d’accolades, mais directement les règles CSS. WordPress se charge de les englober dans les sélecteurs CSS appropriés.
Par exemple, si vous souhaitez afficher la partie textuelle du bloc Citation en italique, vous pouvez ajouter ceci dans le réglage CSS additionnel de ce dernier :
font-style: italic;Qui sera transformé automatiquement par WordPress en :
.wp-block-quote {
font-style: italic;
}En utilisant des combinateurs CSS, vous pouvez appliquer des styles plus complexes, y compris des états de survol. Vous pouvez également utiliser l’esperluette (&) comme dans SASS/LESS, pour cibler un élément imbriqué.
Par exemple, voici une règle CSS que vous pouvez appliquer au bloc Bouton pour modifier son apparence au survol :
:hover {
background: #bb00bb;
}Qui sera transformé automatiquement par WordPress en :
.wp-block-button .wp-block-button__link:hover {
background: #bb00bb;
}Réinitialiser les styles
Pour revenir aux styles par défaut de votre thème, avant toute personnalisation effectuée depuis l’éditeur, allez dans le panneau des Styles, via le menu En savoir plus puis cliquez sur Réinitialiser les styles.
Ressources
Voici un exemple montrant quelques modifications rapides des styles globaux :
Accédez aux thèmes basés sur des blocs du répertoire de thèmes de WordPress.org.
Traduit par Jb Audras
Relu par Jenny Dupuy & Didier Demory
Dernière mise à jour le 4 avril 2024
Contribuer à la documentation en français de WordPress
Journal des modifications
4 avril 2024 – Marie Comet – Refonte pour WordPress 6.5.