Exercice2
Exercice intermédiaire – Mise en page avancée avec Gutenberg¶
Objectif¶
Maîtriser :
- les blocs imbriqués
- les groupes et colonnes
- les réglages de style
- la cohérence visuelle d’une page
Consigne générale¶
Créez une page promotionnelle pour un service ou un projet fictif, en utilisant Gutenberg uniquement (aucun code).
Étape 1 – Création de la page¶
- Titre de la page : Exercice – Page promotionnelle
- Visibilité : Publique
Étape 2 – Structure obligatoire de la page¶
1️⃣ Section d’introduction
Utilisez un bloc Groupe contenant :¶
- Un Titre (H1)
- Un Paragraphe (2 à 4 phrases)
Appliquez :¶
- une couleur de fond
- un padding au groupe
2️⃣ Section “Fonctionnalités”¶
Ajoutez un bloc Colonnes (3 colonnes) Dans chaque colonne :
- Un Titre (H3)
- Un Paragraphe
- Une icône ou une image
Les 3 colonnes doivent avoir :¶
- un alignement cohérent
- un espacement uniforme
3️⃣ Section contenu enrichi¶
Ajoutez un bloc Média & Texte :
- Image à gauche
- Texte à droite (paragraphe + liste à puces)
👉 Ajustez :
- l’alignement vertical
- la largeur de l’image
4️⃣ Section appel à l’action (CTA)
Créez un bloc Groupe contenant :
- Un Titre (H2)
- Un Paragraphe
- Un Bloc Boutons (au moins 2 boutons)
👉 Stylisez :
- couleurs différentes pour chaque bouton
- alignement centré
Étape 3 – Manipulations obligatoires¶
Vous devez :
- Regrouper des blocs manuellement
- Dupliquer une section
- Réorganiser l’ordre des blocs
- Modifier au moins 2 styles globaux de blocs (couleurs, typographie, marges, etc.)
Critères de réussite¶
- Utilisation correcte des blocs Groupe et Colonnes
- Mise en page claire et hiérarchisée
- Styles cohérents sur toute la page
- Blocs bien configurés (alignements, espacements, couleurs)
⭐ Bonus (niveau +)¶
- Transformer une section en modèle réutilisable (pattern)
- Ajouter un bloc Requête ou Derniers articles
- Tester la page en vue mobile et ajuster les blocs