Historique des conversations
Chargement...
Chapitre 7 : Gutenberg
1. Le concept de "Bloc"
Introduit en 2018, l'éditeur Gutenberg a révolutionné la création de contenu. Au lieu d'un simple champ de texte (comme Word), tout élément sur votre page est un **bloc** indépendant (paragraphe, image, bouton, titre).
Titre
Paragraphe
Image
Colonnes
2. Maîtriser l'interface
L'éditeur se compose de trois zones clés :
- La barre d'outils supérieure : Pour ajouter un bloc (+), annuler une action ou enregistrer.
- La zone centrale : Votre canvas où vous composez votre mise en page.
- L'inspecteur (Barre latérale droite) : Pour configurer les réglages précis du bloc sélectionné (couleur, taille du texte, bordures).
Raccourci de pro : Le Slash "/"
Pour aller vite, ne cliquez pas sur le "+". Tapez simplement / suivi du nom du bloc dans un paragraphe vide pour l'insérer instantanément.
Exemple : tapez
/image puis Entrée.Mises en page complexes (Layouts)
Gutenberg permet de créer des designs avancés sans constructeur de page externe (comme Elementor) grâce aux blocs de structure :
- Colonnes : Divisez votre contenu en 2, 3 ou 4 colonnes.
- Groupe : Regroupez plusieurs blocs pour leur donner une couleur de fond ou une bordure commune.
- Bannières (Cover) : Créez des sections avec une image de fond et du texte par-dessus.
- Compositions (Patterns) : Utilisez des modèles de sections déjà designés par WordPress ou votre thème.
Testez par vous-même !
Essayez de déplacer vos blocs en les faisant glisser ou en utilisant les flèches haut/bas. La flexibilité est totale.
Prochain chapitre : Nous verrons comment structurer la navigation de votre site avec les menus.
Évaluation des acquis
Correction immédiate
Quiz du chapitre 7
Ateliers pratiques & Projets
Testez vos compétences avec nos exercices guidés et le tuteur IA.
Ateliers pratiques & Corrigés détaillés
Ateliers pratiques & Corrigés
#1 — Comprendre les notions
Atelier #1Expliquez avec vos mots le concept central de ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Reportez-vous au cours */
#2 — Application guidée
Atelier #2Reprenez l'exemple du cours et réalisez un cas pratique.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Comparez vos résultats avec les exemples */
#3 — Mini défi d'autonomie
Atelier #3Concevez une mini-solution liée à ce chapitre.
Correction instantanée et bienveillante
Diagnostic du tuteur IA Weegosoft :
Consulter la solution type du formateur
Solution de référence :
/* Vérifiez la cohérence technique */