Éditeur du site

L’éditeur de site vous permet de concevoir l’ensemble du site, y compris l’en-tête, le pied de page et tout ce qui se trouve entre les deux, à l’aide de blocs. Il vous offre un meilleur contrôle sur l’apparence de votre site. 

L’éditeur de site est uniquement disponible lorsque vous installez et activez un thème de blocs sur votre site.

Comment accéder à l’éditeur de site

Pour utiliser l’éditeur de site, vous devez utiliser un thème de blocs sur votre site. Un thème de blocs est un thème qui utilise des blocs pour toutes les parties d’un site, y compris les menus de navigation, l’en-tête, le contenu et le pied de page du site. 

Tous les blocs disponibles dans l’éditeur de blocs WordPress peuvent être utilisés dans l’éditeur de site. Un ensemble de blocs appelés blocs de thème sont spécialement conçus pour l’éditeur de site.

Pour trouver des thèmes de blocs, depuis le tableau de bord WordPress, accédez à Apparence > Thèmes et cliquez sur Ajouter. Sur la page Ajouter des thèmes, sélectionnez Thèmes de blocs pour trouver la liste grandissante des thèmes de blocs dans le répertoire de thèmes WordPress.

Une fois que vous avez installé et activé un thème de blocs sur votre site, accédez à Apparence > Éditeur pour ouvrir l’éditeur de site.

Actions possibles dans l’éditeur de site

Une fois dans l’éditeur de site, vous verrez cinq éléments de menu.

• Navigation : permet de parcourir vos menus et d’effectuer des modifications de base.
• Styles : permet d’accéder directement à la modification des variations de style de votre site.
• Pages : vous pouvez désormais modifier le contenu de vos pages directement dans l’éditeur de site.
• Modèles : examinez les différentes mises en page par défaut des différentes sections de votre site, ainsi que les pages personnalisées (résultats de recherche, 404, etc.).
• Compositions : vos compositions synchronisées et vos parties de modèle peuvent être gérées ici.

Vous verrez également une icône représentant une loupe. Cliquez dessus pour accéder à la palette de commandes.

Voici un aperçu des différentes sections de l’éditeur de site.

L’espace de travail de l’éditeur de site

L’éditeur de site charge la page d’accueil de votre site (en fonction de ce que vous avez défini dans les réglages de lecture) pour commencer la modification.

Le menu supérieur de l’éditeur de site comprend les options suivantes :

1. L’icône du site (ou l’icône W, si aucune icône de site n’est définie pour le site) : revenir au tableau de bord ou passer à une autre section de l’éditeur de site : Navigation, Styles, Pages, Modèles ou Compositions. Si vous choisissez de revenir au tableau de bord, vous serez invité·e à enregistrer les modifications ou à quitter l’éditeur de site sans les enregistrer.

2. Le bouton d’insertion de blocs +  : ajoutez un nouveau bloc, une composition de blocs, un média ou une composition synchronisée (si le site possède des compositions synchronisées) dans l’éditeur de site.

3. Outils : basculez entre la modification d’un bloc et la sélection d’un bloc. Choisissez l’outil Sélectionner (ou appuyez sur la touche Échap de votre clavier) pour sélectionner des blocs individuels. Une fois un bloc sélectionné, appuyez sur la touche Entrée de votre clavier pour revenir à la modification.

4. Annuler : annule l’action la plus récente.
5. Rétablir : rétablit une action que vous avez annulée à l’aide du bouton Annuler.
6. Vue en liste : affiche une liste de tous les blocs présents sur la page et permet de naviguer facilement entre les blocs de votre page. Cette fonction est utile pour visualiser la structure de la page et modifier, déplacer ou supprimer des blocs.
7. Palette de commandes : cliquez ici pour accéder rapidement à tout le contenu, aux modèles et aux compositions de votre site, ainsi que pour lancer d’autres actions (réglages, nouvelle page, etc.).

8. Enregistrer : enregistre les modifications effectuées dans l’éditeur de site.
   • Lorsque vous cliquez sur le bouton Enregistrer , une liste de toutes les compositions synchronisées, menus de navigation, modèles et parties de modèle dans lesquels vous avez effectué des modifications s’affiche.
   • Vous pouvez choisir de tous les enregistrer ou de n’en enregistrer que certains.
   • Notez que certaines modifications (comme celles apportées aux modèles d’en-tête et de pied de page) s’appliqueront à toutes les pages de votre site qui utilisent ces modèles, et pas uniquement à la page sur laquelle vous travailliez.

9. Réglages : affiche ou masque la barre latérale des réglages des modèles et des blocs.

10. Styles : parcourez les variations de style disponibles pour votre thème, définissez la typographie, les palettes de couleurs et la mise en page de l’ensemble du site, ou personnalisez l’apparence de blocs spécifiques pour tout le site.
11. Plus d’options : cliquez sur l’icône représentant trois points verticaux pour ouvrir des réglages et outils supplémentaires.

Afficher la barre d’outils supérieure : affiche ou masque la barre d’outils supérieure dans l’éditeur. Lorsque vous activez cette option, les barres d’outils des blocs sont fixées en haut de l’éditeur de blocs WordPress (juste sous la barre d’outils supérieure) au lieu d’apparaître directement au-dessus du bloc.

Mode projecteur : tous les blocs sont grisés, à l’exception de celui sur lequel vous travaillez, afin que vous puissiez vous concentrer sur un seul bloc à la fois.

Sans distraction : lorsque cette option est activée, toutes les parties non essentielles de l’interface sont masquées afin de proposer une expérience de modification plus immersive.

Éditeur : par défaut, vous utilisez l’éditeur visuel. Passez à l’éditeur de code pour afficher la page entière dans l’éditeur de code HTML.

Extensions : ici, vous pouvez basculer entre Réglages et Styles dans la barre latérale de l’éditeur de site.

Outils : ici, vous pouvez télécharger votre thème avec les modèles et styles mis à jour (Exporter), consulter les raccourcis clavier, consulter le guide de bienvenue de l’éditeur de site, copier tous les blocs ou afficher d’autres articles d’aide.

Préférences : utilisez le menu Préférences pour personnaliser l’expérience de modification et modifier la manière dont vous interagissez avec les blocs.

Comment utiliser l’éditeur de site

Modifier les styles du site

Vous pouvez utiliser l’éditeur de site pour personnaliser les styles de l’ensemble du site et des blocs. Les réglages de style sont disponibles quel que soit le modèle ou la partie de modèle que vous modifiez. 

• Accédez à Apparence > Éditeur.
• Cliquez sur l’élément de menu Styles ou sur l’icône située à côté de la barre latérale des réglages des blocs.

Dans la section Styles, vous pouvez parcourir les variations de style disponibles pour votre thème, modifier les palettes de couleurs et la typographie, ainsi que la mise en page de l’ensemble du site, et également modifier l’apparence des blocs, ces modifications s’appliquant à tout le site.

Pour consulter vos révisions de style ou réinitialiser complètement les modifications effectuées, cliquez sur l’icône du menu à trois points dans le coin supérieur droit et sélectionnez l’une des options.

Pour en savoir plus sur les styles, consultez cet article d’aide : Présentation des styles.

Personnaliser la mise en page du site

Vous pouvez utiliser l’éditeur de site pour créer la structure et la mise en page de l’ensemble de votre site à l’aide de blocs. Par exemple, les zones telles que les en-têtes, les pieds de page et l’apparence structurelle des articles et des pages de votre site.

Tous les blocs disponibles dans l’éditeur de blocs WordPress peuvent être utilisés dans l’éditeur de site. Un ensemble de blocs appelés blocs de thème sont spécialement conçus pour l’éditeur de site.

Exemples : le bloc Boucle de requête vous permet de personnaliser l’apparence et la présentation de vos articles, le bloc Navigation vous permet de personnaliser le menu de navigation du site, et le bloc Titre du site permet de personnaliser le titre du site, entre autres.

Consultez la liste complète des blocs de thème.

Exemple – Comment personnaliser Twenty Twenty-Three avec l’éditeur de site

Twenty Twenty-Three prend en charge l’éditeur de site et peut être personnalisé à l’aide de celui-ci. À titre d’exemple, supprimons l’espace situé en haut de la page d’accueil de Twenty Twenty-Three. Pour ce faire, supprimons la marge interne inférieure de la partie de modèle d’en-tête et la marge interne supérieure de la zone de contenu.

Commencez par supprimer la marge interne inférieure des parties de modèle d’en-tête.

1. Depuis l’écran d’administration, sélectionnez Apparence > Éditeur.
2. Sélectionnez Compositions > Parties de modèle > En-tête > En-tête, puis cliquez sur l’icône en forme de crayon pour la modifier.
3. Sélectionnez le bloc Groupe > Ligne. Utilisez la navigation des blocs inférieure.
4. Dans les réglages des blocs, cliquez sur Styles.

5. Faites défiler l’écran jusqu’à Marge interne > Bas. La valeur actuelle est 2.
6. Définissez-la sur 0.
7. Enregistrez les parties de modèle.

Supprimez ensuite la marge interne supérieure de la zone de contenu.

8. Retournez dans l’éditeur de site.
9. Sélectionnez Modèles > Accueil, puis cliquez sur l’icône en forme de crayon pour le modifier.
10. Sélectionnez le bloc Groupe supérieur. Utilisez la navigation des blocs inférieure.
11. Dans les réglages des blocs, cliquez sur Styles.

12. Faites défiler l’écran jusqu’à Marge interne > Haut. La valeur actuelle est 3.
13. Définissez-la sur 0.
14. Enregistrez le modèle.

Parcourir les modèles et les parties de modèle

Depuis l’éditeur de site, vous pouvez facilement parcourir les modèles et les parties de modèle disponibles pour votre site.

• Accédez à Apparence > Éditeur pour ouvrir l’éditeur de site. Vous arriverez sur une vue qui vous permet de choisir de parcourir vos modèles ou vos parties de modèle.
• Cliquez sur Modèles pour afficher un aperçu de la liste des modèles disponibles pour votre site.
• Cliquez sur Compositions pour afficher un aperçu de la liste des parties de modèle.

Gérer les modèles du site

WordPress utilise des modèles pour créer la mise en page et la structure de types de pages spécifiques de votre site. L’éditeur de site affiche les modèles que vous pouvez ajouter à votre site et vous permet de créer des modèles personnalisés à l’aide de l’éditeur de modèles.

Depuis Apparence > Éditeur, une vue comprenant une barre latérale avec votre liste de modèles et de compositions, incluant la liste des parties de modèle, s’affiche.

Pour en savoir plus sur les modèles, consultez cet article d’aide : Éditeur de modèles.

Gérer les parties de modèle

Une partie de modèle est un bloc destiné à gérer les zones globales récurrentes du site, telles que l’en-tête, le pied de page, la barre latérale, etc. Elles servent principalement à définir la structure du site et peuvent être réutilisées. Vous pouvez également créer des parties de modèle personnalisées qui pourront être réutilisées dans les modèles.

Depuis Apparence > Éditeur, cliquez sur l’option Compositions. Vous pouvez y accéder depuis la section Toutes les parties de modèle.

Pour en savoir plus sur les parties de modèle, consultez cet article d’aide : Partie de modèle.

Gérer les pages

Depuis la version 6.3, il est possible de gérer, modifier et créer des pages via l’éditeur de site, dans la section « Pages ».

Pour en savoir plus sur la gestion des pages via l’éditeur de site, consultez cet article d’aide : Pages de l’éditeur de site

Comment revenir au tableau de bord

Pour revenir à votre tableau de bord, cliquez sur l’icône WordPress (ou sur l’icône du site si vous en avez défini une) afin d’ouvrir la navigation gauche de l’éditeur de site. Sélectionnez < pour revenir à votre tableau de bord WordPress. Vous serez invité·e à enregistrer les modifications effectuées dans l’éditeur de site avant de le quitter.

Comment exporter les modèles et les styles

Vous pouvez exporter votre thème avec les modifications que vous avez apportées dans l’Éditeur de site, y compris les modèles, les parties de modèle et les réglages de style, de manière similaire à l’option Outils > Exporter.

• Ouvrez l’Éditeur de site en allant dans Apparence > Éditeur.
• Sélectionnez l’icône représentant trois points verticaux à côté de l’option de réglages Styles.
• Sous Outils, sélectionnez Exporter. Cela lancera le processus d’exportation et vous recevrez un fichier zip téléchargé de votre thème contenant les modèles et les parties de modèle.

Outils utiles lors de l’utilisation de l’Éditeur de site

Les outils suivants sont utiles lors de l’utilisation de l’Éditeur de site.

La palette de commandes

La palette de commandes vous permet de parcourir rapidement le contenu de votre site et d’exécuter différentes actions, comme créer de nouvelles publications ou pages, activer ou désactiver des préférences et accéder à vos réglages de style et de CSS personnalisé.

Vous pouvez ouvrir la palette de commandes dans la vue du site, dans la colonne latérale, en cliquant sur l’icône de recherche. Dans la vue d’édition, la palette de commandes se trouve dans la barre de titre supérieure. Vous pouvez également utiliser le raccourci clavier Cmd+k sur Mac ou Ctrl+k sur Windows

En savoir plus sur la palette de commandes dans cet article d’assistance : Palette de commandes de l’Éditeur de site.

Vue en liste

La vue en liste vous aide à parcourir les mises en page complexes composées de blocs et les structures de blocs imbriqués. Vous pouvez sélectionner exactement le bloc dont vous avez besoin et obtenir un aperçu rapide de la mise en page de la page sur laquelle vous travaillez. Vous pouvez facilement sélectionner plusieurs blocs et les modifier, les déplacer ou les regrouper.

En savoir plus sur la vue en liste dans cet article d’assistance :  Vue en liste.

Compositions de blocs

Les compositions de blocs sont un ensemble de blocs prédéfinis que vous pouvez insérer dans des publications et des pages. Vous pouvez ensuite les personnaliser davantage. WordPress propose un ensemble de compositions de blocs standard. Vous pouvez également trouver des compositions de blocs incluses avec les thèmes de blocs.

En savoir plus sur les compositions de blocs dans cet article d’assistance : Composition de blocs.

Copier et coller des styles

Avec WordPress 6.2, une nouvelle option a été ajoutée pour vous permettre de copier et coller les styles des blocs, ce qui facilite la réutilisation des designs que vous avez créés. Vous pouvez y accéder depuis le menu à trois points de n’importe quel bloc et elle est destinée à être utilisée pour copier et coller entre des blocs du même type :

Appliquer globalement les modifications de style

Si vous êtes plus à l’aise avec les options avancées lors de la création d’un design ou de la personnalisation de blocs individuels, depuis WordPress 6.2, vous pouvez prendre les modifications apportées à un bloc individuel et les appliquer à tous les blocs du même type. Par exemple, vous pouvez appliquer le design d’un bloc individuel à tous les blocs de votre site grâce à une nouvelle option dans la section Avancé des réglages du bloc.

Redimensionner l’aperçu de l’Éditeur de site

Lorsque vous êtes dans l’Éditeur de site, vous pouvez souhaiter modifier l’aperçu du modèle ou de la partie de modèle que vous consultez. Pour ce faire, sélectionnez les poignées de la colonne latérale gris foncé et déplacez-la comme vous le souhaitez.

Liens vers des ressources

• Guide supplémentaire pour utiliser l’Éditeur de site
• Conception simple de site et édition complète du site
• Introduction à l’Éditeur de site et à l’Éditeur de modèles