Vue d’ensemble des styles globaux

La définition 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 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.

Où trouver les styles globaux

Afin d’accéder à cette fonctionnalité, vous devez utiliser un thème basé sur des blocs. Si c’est bien le cas, depuis l’administration de votre site, cliquez sur le menu Apparence, puis Éditeur (beta) pour afficher l’éditeur de site.

Une fois sur l’éditeur de site, vous trouverez le bouton Styles en haut à droite de l’écran, à côté du bouton Réglages. Il vous permet d’accéder au panneau de gestion des styles.

Ce panneau restera disponible quelque 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. 

Capture d'écran montrant le panneau de gestion des styles
Ci-dessus : panneau de gestion des styles globaux.

Haut ↑

Fonctionnement des styles globaux

Les styles que vous mettez en place 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 disponibles 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 pour les conserver.

Haut ↑

Typographie

Cette section vous permet de gérer les polices utilisées sur votre site et leur aspect général par défaut, comme par exemple au niveau de la graisse de police et de l’interlignage.

Après avoir sélectionné ce réglage, vous trouverez des options permettant de modifier le texte et les liens. Cela vous permet de personnaliser la famille de police, l’interlignage et l’apparence de chaque option.

Cet enregistrement vidéo montre l’accès aux outils de gestion des styles typographiques, puis aux réglages typographiques concernant les liens hypertextes.

Haut ↑

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. Cela comprend votre couleur d’arrière-plan, la couleur du texte et celle des liens.

Haut ↑

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 :

  1. Ouvrez le panneau Styles.
  2. Cliquez sur la section Couleurs.
  3. Cliquez sur la section Palette et sélectionnez l’onglet Solide (couleur) ou Dégradé.
  4. Dans la section Personnalisée, cliquez sur le bouton +.
  5. 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.
  6. Une fois que vous avez créé votre couleur ou votre dégradé personnalisé, cliquez sur OK puis Enregistrer.
  7. Votre option de couleur/dégradé sera maintenant disponible sur l’ensemble de votre site.

Haut ↑

Mise en page

Cette section vous permet d’ajouter des marge internes à l’ensemble de la structure de votre site. Vous n’aurez généralement pas besoin de modifier cela, mais dans certains cas cela peut être utile pour ajuster la mise en page générale de votre site. 

Haut ↑

Blocs

Chaque bloc de votre site peut être ajusté ici afin de faire correspondre sa mise en forme à vos besoins. Chaque bloc 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.

Haut ↑

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 7 janvier 2022

Contribuer à la documentation en français de WordPress