IV. Personnaliser le site en Full Site Editing
Avec l’Éditeur de Site natif de WordPress, vous modifiez votre site de manière visuelle, comme si vous étiez sur un logiciel de mise en page. Nous verrons plus tard qu’il existe des alternatives encore plus poussées en termes de customisation – pour l’instant on va se concentrer sur l’outil d’édition par défaut (qui est utilisé par beaucoup de sites et que vous rencontrerez un jour).
1. Entrer dans l’Éditeur
Pour commencer, rendez-vous dans le menu Apparence > Éditeur.
Vous arrivez sur une page d’accueil qui présente les différentes sections de personnalisation.
Les sections principales accessibles depuis cette page :
| Section | Description |
|---|---|
| Navigation | Gérer le menu du site |
| Styles | Personnaliser l’apparence globale (couleurs, polices, mise en page) |
| Pages | Gérer les pages de votre site |
| Modèles | Créer et modifier les structures des types de pages (article, archive, etc.) |
| Compositions | Accéder aux blocs préconçus et éléments réutilisables |
Cliquez n’importe où sur l’aperçu de votre site à droite pour entrer dans le mode édition complet.
2. L’interface d’édition
Lorsque vous éditez un modèle ou une composition, l’interface se divise en trois zones principales :
– La barre d’outils
A gauche :
- Bouton « + » : ouvre l’outil d’insertion de blocs
- Flèches Annuler/Rétablir : pour revenir en arrière ou avancer
- Icône de liste (☰) : ouvre la vue en liste de tous les blocs présents sur la page (c’est une sorte de « plan » de votre page)
Au centre :
C’est en quelques sortes le fil d’Ariane de votre interface : cela vous permet de savoir sur quelle page vous vous situez, mais également d’ajouter ou de supprimer des éléments rapidement.
A droite :
- Icône ordinateur / mobile : permet de visualiser le site sous différentes résolutions
- Icône Zoom : permet d’avoir une vue d’ensemble de la page
- Icône des styles (cercle bicolore) : accès aux styles globaux (permet de modifier les règles CSS des pages)
- Icône Réglages : permet d’afficher le panneau latéral droit qui contient les paramètres du bloc sur lequel vous avez cliqué
– La zone de travail centrale :
C’est ici que vous visualisez et modifiez votre contenu. Vous pouvez cliquer sur n’importe quel élément pour le sélectionner et le modifier.
– Le panneau latéral droit :
Ce panneau affiche les options du bloc sélectionné ou les paramètres de la page/du modèle.
Il contient généralement deux onglets : « Bloc » (ou « Block ») pour les réglages spécifiques, et « Avancé » pour les options supplémentaires comme les classes CSS.
3. Changer le style global (Couleurs et Polices)
Les styles globaux sont l’un des outils les plus puissants du Full Site Editing. Ils vous permettent de définir l’apparence générale de votre site en un seul endroit, et ces choix s’appliqueront automatiquement à l’ensemble du site.
En clair, grâce à cet outil vous n’avez pas besoin de changer la couleur de chaque titre un par un.
Twenty Twenty-Five propose plusieurs variations de styles prédéfinies. Ce sont des combinaisons harmonieuses de couleurs et de typographies créées par les designers du thème.
Pour explorer les variations :
- Dans le panneau Styles, observez les vignettes de prévisualisation
- Cliquez sur Parcourir les styles pour voir toutes les options
- Survolez chaque variation pour voir un aperçu en temps réel
- Cliquez sur une variation pour l’appliquer
- Enregistrez pour conserver votre choix
Au-delà des variations prédéfinies, vous pouvez créer votre propre palette de couleurs personnalisée.
Accéder aux paramètres de couleurs :
- Dans le panneau Styles, cliquez sur Couleurs
- Vous voyez la palette de couleurs actuelle du thème
Les éléments que vous pouvez personnaliser :
- Palette : les couleurs de base utilisables dans tout le site
- Arrière-plan : la couleur de fond générale du site
- Texte : la couleur par défaut des textes
- Liens : la couleur des liens (normal, survol, visité)
- Titres : la couleur des différents niveaux de titres
- Boutons : couleurs de fond et de texte des boutons
Pour modifier une couleur :
- Cliquez sur l’élément à modifier (ex : « Arrière-plan »)
- Une palette de couleurs apparaît avec les couleurs du thème
- Cliquez sur une couleur pour la sélectionner, OU
- Cliquez sur « Couleur personnalisée » pour choisir n’importe quelle couleur
- Utilisez le sélecteur de couleur ou entrez un code hexadécimal (#RRGGBB)
– Personnaliser la typographie
La typographie joue un rôle crucial dans l’identité visuelle de votre site. L’éditeur de styles permet de personnaliser les polices et tailles de caractères.
Accéder aux paramètres de typographie :
- Dans le panneau Styles, cliquez sur Typographie
- Vous voyez les différents éléments textuels configurables
Éléments personnalisables :
| Élément | Utilisation |
| Texte | Le texte courant de vos pages et articles |
| Liens | Les liens hypertextes dans le contenu |
| Titres | Tous les niveaux de titres (H1 à H6) |
| Boutons | Les boutons d’action et de navigation |
Pour chaque élément, vous pouvez modifier :
- Police (Font Family) : choisissez parmi les polices disponibles
- Taille (Font Size) : en pixels, em, rem ou avec des préréglages
- Apparence (Font Weight) : normal, gras, léger, etc.
- Hauteur de ligne (Line Height) : l’espacement entre les lignes
- Espacement des lettres (Letter Spacing) : l’écart entre les caractères
- Décoration : souligné, barré, etc.
– Paramètres de mise en page
Les styles globaux permettent également de définir des paramètres de mise en page qui s’appliqueront à l’ensemble du site.
Dans Styles > Mise en page, vous trouverez :
- Largeur du contenu : la largeur maximale du contenu principal
- Largeur étendue : pour les blocs en mode « large »
- Marges et espacements : les espaces autour et entre les éléments
- Espacement des blocs : l’espace vertical par défaut entre les blocs
| Valeurs recommandées pour débuter Largeur du contenu : 800-1200px (classiquement 1140px) Largeur étendue : 1400-1600px Espacement des blocs : 20-40px |
4. Personnaliser l’En-tête (Header)
L’en-tête (header) est la première chose que vos visiteurs voient. Il contient généralement le logo, le nom du site et le menu de navigation. Avec le Full Site Editing, vous pouvez le personnaliser entièrement.
– Accéder à la modification de l’en-tête
Plusieurs chemins sont possibles :
Méthode 1 – Via les compositions :
- Depuis l’accueil de l’éditeur, cliquez sur Compositions
- Sélectionnez Éléments de modèle (ou « Template Parts »)
- Cliquez sur En-tête (Header)
- L’en-tête s’ouvre en mode édition
Méthode 2 – Via un modèle :
- Ouvrez n’importe quel modèle (ex : Page d’accueil)
- Cliquez sur l’en-tête dans la zone de travail
- Cliquez sur Modifier l’en-tête dans le panneau latéral
– Structure de l’en-tête
L’en-tête de Twenty Twenty-Five est composé de plusieurs blocs organisés. Utilisez la Vue en liste (icône ☰) pour visualiser sa structure :
- Groupe : conteneur principal de l’en-tête
- └─ Ligne (Row) : organise les éléments horizontalement
- └─ Titre du site : affiche le nom du site
Cette structure doit vous rappeler les cours de HTML : on travaille avec des blocs qui contiennent d’autres blocs ! (les fameuses <div> ou <section>). La mise en forme du contenu de ces différents éléments se gère dans le panneau latéral droit lorsque vous l’avez sélectionné :
– Ajouter un logo
- Cliquez sur le bloc Titre du site
- Dans la barre d’outils du bloc, cliquez sur l’icône de transformation (deux flèches)
- Sélectionnez Logo du site
- Cliquez sur le bloc Logo pour ajouter une image
- Téléchargez votre logo ou choisissez-le dans la bibliothèque de médias
- Ajustez la taille du logo dans le panneau latéral (recommandé : 100-200px de large)
| Alternative Vous pouvez aussi utiliser le bouton « + » pour ajouter un nouveau bloc « Logo du site » à côté ou à la place du titre. Cela vous permet de garder les deux si vous le souhaitez. |
– Personnaliser le menu de navigation
Le bloc Navigation affiche les liens de votre menu. Par défaut, il peut contenir des liens vers vos pages principales.
Pour modifier le menu :
- Pour ajouter un lien : cliquez sur le « + » à l’intérieur du bloc
- Choisissez Lien de page pour lier vers une page existante
- Ou choisissez Lien personnalisé pour un lien externe
- Pour réorganiser les liens : glissez-déposez ou utilisez les flèches
- Pour supprimer un lien : sélectionnez-le et cliquez sur les trois points > Supprimer
Créer un sous-menu :
- Sélectionnez un lien existant
– Modifier l’apparence de l’en-tête
Couleur de fond :
- Sélectionnez le bloc Groupe principal de l’en-tête
- Dans le panneau latéral, onglet Styles
- Cliquez sur Arrière-plan et choisissez une couleur
Espacement et alignement :
- Marges intérieures (Padding) : ajoutez de l’espace à l’intérieur de l’en-tête
- Largeur : pleine largeur ou contenue
5. Personnalisation du pied de page (footer)
Le pied de page (footer) apparaît en bas de toutes les pages. Il contient généralement des informations de contact, des liens utiles, les mentions légales et les réseaux sociaux.
– Accéder au pied de page
La méthode est similaire à celle de l’en-tête :
- Depuis l’éditeur, allez dans Compositions > Éléments de modèle
- Le pied de page s’ouvre en mode édition
– Éléments typiques du pied de page
Twenty Twenty-Five propose un pied de page minimaliste que vous pouvez enrichir. Voici les blocs couramment utilisés :
- Paragraphe : pour le texte de copyright et mentions
- Icônes de réseaux sociaux : bloc dédié aux liens sociaux
- Colonnes : pour organiser plusieurs sections côte à côte
- Logo du site : pour renforcer l’identité de marque
6. Les modèles (Templates)
Les modèles définissent la structure de vos différents types de pages. Chaque type de contenu (page, article, archive, etc.) peut avoir son propre modèle personnalisé.
– Comprendre les modèles
Qu’est-ce qu’un modèle ?
Un modèle est une structure réutilisable qui détermine comment un type de contenu est affiché. Par exemple, le modèle « Article » définit comment tous vos articles de blog seront présentés.
Accéder aux modèles :
- Depuis l’accueil de l’éditeur, cliquez sur Modèles
- Vous voyez la liste de tous les modèles disponibles
Les modèles principaux de Twenty Twenty-Five
| Modèle | Utilisation |
| Page d’accueil (Front Page) | La page d’accueil de votre site |
| Page (Single Page) | Les pages statiques standard |
| Article (Single Post) ou Publications seules | Les articles de blog individuels |
| Archives | Les listes d’articles (catégories, tags, dates) |
| Résultats de recherche (Search) | La page de résultats de recherche |
| 404 | La page d’erreur « Page non trouvée » |
| Index | Le modèle par défaut si aucun modèle n’est défini sur un type de page |
– Modifier un modèle existant
Exemple : personnaliser le modèle Article
- Dans la liste des modèles, cliquez sur Article (Single)
- Le modèle s’ouvre avec sa structure actuelle
- Observez les blocs présents : En-tête, Contenu de l’article, Pied de page
- Vous pouvez ajouter, supprimer ou réorganiser ces blocs
Blocs dynamiques utiles pour les modèles :
- Titre de l’article : affiche le titre du contenu
- Contenu de l’article : affiche le contenu principal
- Image mise en avant : affiche l’image à la une
- Date de publication : affiche la date
- Auteur : affiche le nom de l’auteur
- Catégories/Étiquettes : affiche la taxonomie
7. Les compositions (Patterns)
Les compositions sont des ensembles de blocs préconçus que vous pouvez insérer rapidement dans vos pages. Elles permettent de gagner du temps et de maintenir une cohérence visuelle.
– Explorer les compositions existantes
- Depuis l’éditeur, cliquez sur Compositions
- Parcourez les catégories : Bannières, Appels à l’action, Galeries, etc.
- Cliquez sur une composition pour voir son aperçu
Catégories de compositions dans Twenty Twenty-Five :
- Appels à l’action (CTA) : sections incitant à une action
- Témoignages : mise en forme d’avis clients
- Équipe : présentation des membres
- FAQ : questions fréquentes
- Galeries : affichage d’images
- Services/Fonctionnalités : présentation d’offres
– Utiliser une composition
Lors de l’édition d’une page ou d’un modèle :
- Cliquez sur le « + » pour ajouter un bloc
- Cliquez sur l’onglet Compositions (ou « Patterns »)
- Parcourez ou recherchez la composition souhaitée
- Cliquez pour l’insérer
- Personnalisez le contenu (textes, images) selon vos besoins
– Créer une composition personnalisée
Vous pouvez sauvegarder vos propres agencements de blocs comme compositions réutilisables.
- Créez votre agencement de blocs dans une page
- Sélectionnez tous les blocs concernés (Shift + clic)
- Cliquez sur les trois points (⋮) dans la barre d’outils
- Sélectionnez Créer une composition
- Donnez un nom et choisissez une catégorie
- Enregistrez
Ne pas oublier d’enregistrer !
Contrairement à un document Word, WordPress ne sauvegarde pas toujours tout en temps réel.
- Cliquez sur le bouton Enregistrer en haut à droite.
- WordPress vous demandera de confirmer ce que vous voulez sauvegarder (le design, le header, etc.). Validez tout.