🎨 TP WordPress - Reproduction Landing Page Divi

Créez une landing page professionnelle avec Divi Builder
⏱️ Durée estimée : 2 heures

🎯 Objectif du TP

Reproduire la structure et le design d'une landing page professionnelle en utilisant le thème Divi et ses modules. Vous apprendrez à maîtriser les sections, lignes, colonnes et modules pour créer une page web complète et responsive.

🔗 Page de référence :
https://formationm2i.savoirvirtual.com/sup-de-com-25-26/

📋 Préparation

Avant de commencer, vérifiez que vous avez :

  • Accès à votre tableau de bord WordPress
  • Le thème Divi installé et activé
  • Les médias disponibles dans votre bibliothèque
  • Le document PDF de référence ouvert

🏗️ Structure de la page à créer

Votre landing page sera composée de 7 sections principales :

1. 🎯 Header (En-tête)

Section d'accueil avec titre, description et média principal

2. ⭐ Features (Fonctionnalités)

Présentation des fonctionnalités avec icônes et descriptions

3. 💰 Pricing (Tarifs)

Plans tarifaires avec comparaison des offres

4. 📚 Popular Courses (Cours populaires)

Grille de cours avec images, descriptions et boutons

5. 🚀 Call to Action (Appel à l'action)

Section incitative pour convertir les visiteurs

6. 💬 Testimonials (Témoignages)

Avis clients avec photos et citations

7. 📍 Footer (Pied de page)

Informations de contact, liens et newsletter

🚀 Démarrage du projet

  • Connectez-vous à votre tableau de bord WordPress
  • Allez dans Pages > Ajouter
  • Dans l'éditeur Gutenberg, donnez un titre : "Landing Page Formation"
  • Cliquez sur Utiliser Divi Builder (bouton violet)
  • Choisissez Construire à partir de zéro

🎨 Charte graphique

Palette de couleurs à respecter :

Bleu principal
#2E7BCF
Vert/Turquoise
#1ABC9C
Gris foncé
#2C3E50
Gris clair
#F5F5F5

Typographie :

  • Titres : Police en gras, taille 32-40px
  • Sous-titres : Taille 20-24px
  • Texte courant : Taille 16-18px

Espacements :

  • Entre les sections : 80-100px
  • Entre les éléments : 20-30px
  • Padding des sections : 60-80px

📱 Responsive Design

⚠️ Important : Testez votre page sur différents écrans !

Dans Divi Builder, utilisez l'icône 📱 (en bas à gauche) pour tester :

  • 💻 Desktop (ordinateur)
  • 📱 Tablet (tablette)
  • 📱 Phone (téléphone)

✅ Checklist de validation

Avant de rendre votre travail, vérifiez que :

  • Toutes les 7 sections sont présentes et complètes
  • Les images sont toutes chargées et visibles
  • Les boutons ont des liens (même factices)
  • Les textes sont sans fautes d'orthographe
  • Les couleurs correspondent à la charte graphique
  • La page est responsive (mobile/tablette/desktop)
  • Les espacements sont harmonieux
  • Le footer contient toutes les informations

💡 Conseils pour réussir

  • Gagnez du temps : Utilisez le copier/coller de modules (clic droit > Dupliquer)
  • Restez organisé : Nommez vos sections pour vous y retrouver facilement
  • Sauvegardez souvent : Cliquez régulièrement sur "Enregistrer le brouillon"
  • Référez-vous au PDF : Le document contient tous les détails de structure
  • Expérimentez : N'ayez pas peur de tester différentes options

🎓 Compétences développées

À la fin de ce TP, vous saurez :

  • ✓ Créer une page WordPress avec Divi Builder
  • ✓ Utiliser les sections, lignes et modules Divi
  • ✓ Personnaliser couleurs, polices et espacements
  • ✓ Créer une mise en page responsive
  • ✓ Intégrer différents types de contenu (texte, images, vidéos, formulaires)
  • ✓ Reproduire un design à partir d'une maquette

Bon courage et bonne création ! 🚀

N'hésitez pas à demander de l'aide si vous êtes bloqué