Utiliser le guide de style pour concevoir votre site

Dans ce guide, vous apprendrez à utiliser le guide de style pour voir un aperçu de la façon dont les changements apportés aux styles affecteront l’affichage de n’importe quel bloc, sans avoir à insérer ces blocs sur le site.

Cette fonctionnalité est disponible sur les sites utilisant nos plans WordPress.com Premium, Business et Commerce, ainsi que l’ancien plan Pro. Les sites utilisant les plans Gratuit et Personnel doivent mettre à niveau leur plan pour avoir accès à cette fonctionnalité.

Le guide de style vous présentera des exemples du rendu de tous les blocs disponibles après avoir enregistré des modifications apportées aux styles de votre site.

1. Consultez le tableau de bord de votre site.
2. Accédez à Apparence → Éditeur.
3. Sélectionnez « Styles » dans le menu de gauche.
4. Cliquez sur l’icône en forme d’œil à droite du texte « Styles ». (Vous pouvez cliquer à nouveau sur l’icône pour revenir à l’éditeur.)

Vous pouvez également ouvrir le guide de style lorsque vous modifiez une page, un modèle ou un élément de modèle. C’est la méthode employée dans l’aperçu vidéo ci-dessus. Procédez comme suit :

1. Consultez le tableau de bord de votre site.
2. Accédez à Apparence → Éditeur.
3. Modifiez une page, un modèle ou un élément de modèle.
4. Cliquez sur l’icône « Styles » (un cercle moitié blanc, moitié noir) située dans la barre d’outils supérieure de l’éditeur.
5. Cliquez sur l’icône « Guide de style » (l’icône ressemble à un œil) pour ouvrir le guide de style. (Vous pouvez cliquer à nouveau sur l’icône pour revenir à l’éditeur.)

Une fois que vous avez ouvert le guide de style, vous pouvez prévisualiser et modifier votre jeu de couleurs et votre typographie, avec des exemples de la façon dont chaque modification affectera un texte, des blocs ou des médias spécifiques, etc.

À droite du panneau « Styles » se trouve un aperçu des différents types d’éléments (Couleurs, Typographie, Boutons, Images, etc.) sur votre site. Pour modifier les styles d’un élément spécifique :

1. Cliquez sur un élément (Couleurs, Typographie, etc.) dans l’aperçu à droite de l’écran.
2. Modifiez les styles de l’élément dans le panneau « Styles » à gauche.
3. Cliquez sur la flèche Retour en regard du nom de l’élément pour revenir à la liste complète des éléments et sélectionner un autre élément à styliser.

4. Lorsque vous avez terminé, cliquez sur le bouton « Passer en revue X modification(s)… » au bas du panneau « Conception » pour vérifier et enregistrer vos modifications.

Pour quitter sans enregistrer vos modifications, cliquez sur l’icône en haut à gauche du panneau « Conception » et sélectionnez l’option permettant de quitter sans enregistrer les modifications.