Niveau : Débutant
Objectif : adapter l’identité visuelle sans toucher au code.
Plan d’action pas à pas
- Définir une palette couleur cohérente (2 à 3 couleurs max).
- Choisir une hiérarchie typographique lisible.
- Configurer logo, favicon et largeur de mise en page.
- Ajuster les options d’entête, footer et blog.
- Valider chaque changement sur desktop + mobile.
Chapitre 1 — Définir une palette couleur cohérente (2 à 3 couleurs max).
- Commence par lire l’étape une première fois pour bien comprendre le résultat attendu.
- Depuis le menu Apparence > Personnaliser, ouvre la section concernée.
- Exécute cette partie sans sauter de sous-étape : Définir une palette couleur cohérente (2 à 3 couleurs max).
- Exemple simple : Définis une palette courte et une typo principale + une secondaire.
- Sauvegarde immédiatement les modifications avant de passer au point suivant.
- Contrôle la lisibilité mobile (tailles, espacements, boutons).
- Utilise aperçu desktop/tablette/mobile pour fiabiliser ton résultat.
- Point de vigilance : multiplier couleurs et polices.
- Contrôle final : Contrôle contraste, lisibilité et cohérence visuelle.
- Quand ce point est validé, passe à la suite et garde la même méthode.
Chapitre 2 — Choisir une hiérarchie typographique lisible.
- Commence par lire l’étape une première fois pour bien comprendre le résultat attendu.
- Depuis le menu Apparence > Personnaliser, ouvre la section concernée.
- Exécute cette partie sans sauter de sous-étape : Choisir une hiérarchie typographique lisible.
- Exemple simple : Définis une palette courte et une typo principale + une secondaire.
- Sauvegarde immédiatement les modifications avant de passer au point suivant.
- Contrôle la lisibilité mobile (tailles, espacements, boutons).
- Utilise aperçu desktop/tablette/mobile pour fiabiliser ton résultat.
- Point de vigilance : multiplier couleurs et polices.
- Contrôle final : Contrôle contraste, lisibilité et cohérence visuelle.
- Quand ce point est validé, passe à la suite et garde la même méthode.
Chapitre 3 — Configurer logo, favicon et largeur de mise en page.
- Avant d’agir, clarifie l’objectif de cette étape pour éviter les réglages inutiles.
- Accède à Pages > Ajouter et prépare ton écran de travail.
- Action concrète : Configurer logo, favicon et largeur de mise en page.
- Exemple terrain pour amateur : Crée Accueil, À propos, Contact avec un titre clair et une intro courte.
- Valide le changement avec un “voir la page” pour contrôler le rendu réel.
- Teste ensuite sur mobile : c’est souvent là que les défauts apparaissent en premier.
- Appuie-toi sur éditeur de blocs Gutenberg pour valider techniquement l’étape.
- Ne tombe pas dans ce piège : publier des pages vides ou en doublon.
- Checklist rapide : Vérifie que chaque page est accessible depuis le menu.
- Si tout est bon, documente ce réglage puis continue le tutoriel.
Chapitre 4 — Ajuster les options d’entête, footer et blog.
- Prends 2 minutes pour cadrer ce que tu veux obtenir avec cette action.
- Rends-toi dans Apparence > Personnaliser pour appliquer la modification.
- Applique précisément : Ajuster les options d’entête, footer et blog.
- Cas concret recommandé : Définis une palette courte et une typo principale + une secondaire.
- Enregistre, puis rafraîchis la page pour vérifier que le changement est bien pris en compte.
- Passe en vue smartphone/tablette pour éviter les mauvaises surprises.
- Le bon réflexe : vérifier via aperçu desktop/tablette/mobile.
- Erreur fréquente à éviter : multiplier couleurs et polices.
- Validation attendue : Contrôle contraste, lisibilité et cohérence visuelle.
- Une fois validé, passe au chapitre suivant sans toucher au reste.
Chapitre 5 — Valider chaque changement sur desktop + mobile.
- Commence par lire l’étape une première fois pour bien comprendre le résultat attendu.
- Depuis le menu Tableau de bord WordPress, ouvre la section concernée.
- Exécute cette partie sans sauter de sous-étape : Valider chaque changement sur desktop + mobile.
- Exemple simple : Utilise des noms simples et des réglages lisibles.
- Sauvegarde immédiatement les modifications avant de passer au point suivant.
- Contrôle la lisibilité mobile (tailles, espacements, boutons).
- Utilise prévisualisation WordPress pour fiabiliser ton résultat.
- Point de vigilance : faire plusieurs changements simultanés sans test.
- Contrôle final : Recharge la page concernée et vérifie que le résultat est visible.
- Quand ce point est validé, passe à la suite et garde la même méthode.
Erreurs à éviter
- Multiplier les polices.
- Utiliser des contrastes faibles.
- Ignorer la cohérence des boutons.
Checklist finale
- Les réglages clés sont configurés.
- Le rendu mobile est validé.
- Le parcours utilisateur est fluide.
- Une sauvegarde est disponible.