Objectif: Apprendre à créer des en-têtes et pieds de page cohérents qui restent constants sur toutes les pages de votre site web avec Elementor.

📋 LEÇON 4.1 : QUE SONT LES EN-TÊTES ET PIEDS DE PAGE ET POURQUOI SONT-ILS IMPORTANTS ?

🏢 L’ANALOGIE DU BÂTIMENT

Imaginez votre site web comme un bâtiment :

• 🏠 En-tête (Header) : C’est comme la façade et la porte d’entrée principale. C’est la première chose que voient les visiteurs, il contient l’identité de la marque et la navigation principale.
• 📄 Pages internes : Ce sont les pièces et espaces. Chacune a un contenu unique.
• 🏢 Pied de page (Footer) : C’est comme les fondations et le sous-sol. Il contient des informations essentielles, des liens importants et apporte de la stabilité.

🎯 POURQUOI SONT-ILS CRITIQUES ?

L’en-tête est crucial car :

• ✅ Première impression – Définit la perception de votre marque.
• ✅ Navigation – Guide les utilisateurs à travers votre site.
• ✅ Cohérence – Même aspect sur toutes les pages.
• ✅ Image de marque – Renforce l’identité visuelle.

Le pied de page est essentiel car :

• ✅ Informations clés – Contact, mentions légales, réseaux sociaux.
• ✅ SEO – Liens internes importants.
• ✅ Crédibilité – Aspect professionnel complet.
• ✅ Conversions – Dernière chance pour les actions.

🚨 LEÇON 4.2 : LIMITATIONS D’ELEMENTOR GRATUIT POUR LES EN-TÊTES/PIEDS DE PAGE

📌 RÉALITÉ INITIALE :

Avec Elementor Gratuit, vous NE POUVEZ PAS créer directement des en-têtes et pieds de page globaux. Mais il existe des solutions.

🔧 DEUX OPTIONS DISPONIBLES :

1️⃣ UTILISER LES OPTIONS DE VOTRE THÈME 🌐

• Avantages : Simple et natif.
• Inconvénients : Moins personnalisable.
• Idéal pour : Les projets qui ne nécessitent pas quelque chose d’aussi personnalisé.

2️⃣ UTILISER UNE EXTENSION COMPLÉMENTAIRE 🔌

Extension recommandée : « Elementor Header & Footer Builder » par (Turbo Addons) https://es.wordpress.org/plugins/header-footer-builder-for-elementor/.

• Elle est gratuite et officiellement compatible.
• Permet de concevoir des en-têtes/pieds de page avec Elementor.
• Limitation : Moins d’options qu’Elementor Pro.

🎯 NOTRE PARCOURS RECOMMANDÉ :

Nous allons utiliser l’Option 2 (extension complémentaire) car :

1. Elle est gratuite.
2. Elle est compatible à 100% avec Elementor.
3. Elle vous prépare pour quand vous utiliserez Elementor Pro.
4. Elle est facile à apprendre.

🔧 LEÇON 4.3 : INSTALLER ELEMENTOR HEADER & FOOTER BUILDER

INSTALLATION PAS À PAS :

1. 📂 Allez dans Extensions dans votre WordPress.
2. ➕ Cliquez sur « Ajouter ».
3. 🔍 Recherchez : « Elementor Header & Footer Builder ».
4. 🎯 Identifiez : Auteur : Turbo Addons.
5. ⬇️ Installez et ▶️ Activez.

✅ VÉRIFICATION DE L’INSTALLATION CORRECTE :

Après activation :

1. 👀 Regardez le menu gauche de WordPress.
2. Vous devriez voir : « Turbo H&F Builder ».

🎨 LEÇON 4.4 : CRÉER VOTRE PREMIER EN-TÊTE PROFESSIONNEL

🏗️ STRUCTURE DE BASE D’UN EN-TÊTE :

Un en-tête professionnel typique comporte 3 zones :

┌──────────────────────────────────────────┐
│            ZONE SUPÉRIEURE               │
│  [Logo]           [Infos contact]        │
├──────────────────────────────────────────┤
│            ZONE PRINCIPALE               │
│  [Menu principal]    [Bouton CTA]        │
└──────────────────────────────────────────┘

ÉTAPE 1 : ACCÉDER AU CONSTRUCTEUR :

1. 📁 Allez dans : Turbo H&F Builder.
2. 🖱️ Cliquez sur « Header Templates ».
3. ✏️ Nommez-le : « En-tête Principal ».
4. 🎯 Cliquez sur « Edit with Elementor ».

ÉTAPE 2 : STRUCTURE INITIALE :

Nous créons 1 ligne :

Ligne 1 – Informations rapides :

1. ➕ Nouvelle section : 2 colonnes (25% | 75%).
2. Colonne 1 : Widget « Logo du site ».
   • Votre logo est inséré automatiquement.
   • Si vous n’avez pas de logo : utilisez le widget « Image ».
3. Colonne 2 : Widget « Menu » ou « Navigation ».
   • Si vous utilisez « Menu » : sélectionnez votre menu WordPress.
   • 🎨 Style : Espacement uniforme, pas de soulignements.

ÉTAPE 3 : ENREGISTRER ET ASSIGNER :

1. 💾 Enregistrez votre en-tête.
2. 🚪 Quittez l’éditeur.
3. 📍 Dans Turbo H&F Builder > Header Templates :
   • « Edit conditions ».
   • Définissez Condition d’affichage > « Entire site » (la condition pour afficher le menu sera sur l’ensemble du site).
   • Cliquez sur le bouton « Update » (enregistre les modifications).

Maintenant, lorsque vous visualisez votre site web, vous verrez le nouveau menu que vous avez créé.

📱 LEÇON 4.5 : EN-TÊTE RESPONSIVE – MENU HAMBURGER

🎯 LE PROBLÈME DU MOBILE :

Sur les petits écrans, les menus horizontaux ne fonctionnent pas.

SOLUTION : MENU HAMBURGER 🍔

ÉTAPE 1 : VOIR EN VUE MOBILE :

1. Dans l’éditeur de l’en-tête.
2. 🖱️ Cliquez sur 📱 Mobile (barre supérieure).
3. 👁️ Observez : Votre menu est probablement mal affiché ou pas comme vous le souhaitez.

ÉTAPE 2 : CONFIGURER LE POINT DE RUPTURE :

1. ⚙️ Allez dans : Elementor > Réglages.
2. 📱 Cherchez : « Appareils de prévisualisation ».
3. 📏 Point de rupture tablette : 768px (par défaut).
4. 📏 Point de rupture mobile : 425px (par défaut).

ÉTAPE 3 : AJUSTER L’EN-TÊTE POUR MOBILE :

1. En vue 📱 Mobile, sélectionnez le menu :
2. Dans la colonne de gauche, éditez les options « Menu mobile » :
   1. Vous pourrez modifier la taille de l’icône hamburger, la couleur, l’alignement, etc., à partir des options « Contenu » et « Style« .

🏢 LEÇON 4.6 : CRÉER UN PIED DE PAGE COMPLET

🏗️ STRUCTURE D’UN PIED DE PAGE PROFESSIONNEL :

Les meilleurs pieds de page comportent 3 parties :

┌────────────────────────────────────────────┐
│         SECTION SUPÉRIEURE                 │
│  [Logo+Description] [Liens rapides]        │
│                        [Contact]           │
├────────────────────────────────────────────┤
│         SECTION MILIEU                     │
│   [Réseaux sociaux] [Modes de paiement]    │
├────────────────────────────────────────────┤
│         SECTION INFÉRIEURE                 │
│  © 2024 VotreEntreprise | Mentions légales │
└────────────────────────────────────────────┘

ÉTAPE 1 : CRÉER UN NOUVEAU PIED DE PAGE :

1. 📁 Allez dans : Turbo H&F Builder.
2. 🖱️ Cliquez sur « Footer Templates ».
3. ✏️ Nommez-le : « Pied de page Principal ».
4. 🎯 Cliquez sur « Edit with Elementor ».

ÉTAPE 2 : SECTION SUPÉRIEURE (4 COLONNES) :

1. ➕ Nouvelle section : 4 colonnes (25% chacune).

Colonne 1 – Logo et description :

1. Logo du site ou Image.
2. Éditeur de texte en dessous :
   • Brève description de votre entreprise (1-2 lignes).
   • 🎨 Style : Petit texte, gris clair.

Colonne 2 – Liens rapides :

1. Titre : « Liens rapides » (H4).
2. Liste d’icônes ou Éditeur de texte :
   • Accueil.
   • Services.
   • Portfolio.
   • Contact.
   • 🎨 Style : Liste sans puces.

Colonne 3 – Contact :

1. Titre : « Contact » (H4).
2. Icône + texte (téléphone).
3. Icône + texte (e-mail).
4. Icône + texte (adresse).
5. 🎨 Style : Petites icônes alignées.

Colonne 4 – Newsletter :

1. Titre : « Newsletter » (H4).
2. Éditeur de texte : « Inscrivez-vous pour recevoir les actualités ».
3. Formulaire (si vous avez Elementor Pro).
4. Ou Bouton « S’abonner » avec un lien.

ÉTAPE 3 : LIGNE DE SÉPARATION :

1. ➕ Nouvelle section : 1 colonne.
2. 🧱 Séparateur
   • 📏 Largeur : 100%.
   • 🎨 Couleur : Gris très clair (#EEEEEE).
   • 📏 Épaisseur : 1px.

ÉTAPE 4 : SECTION INFÉRIEURE (COPYRIGHT) :

1. ➕ Nouvelle section : 2 colonnes (50% | 50%).

Colonne 1 – Copyright :

1. 🧱 Éditeur de texte :
   • « © [Votre Entreprise]. Tous droits réservés. »
   • 🔗 Liens : Mentions légales | Conditions générales.
   • 🎨 Style : Petit texte, gris.

Colonne 2 – Réseaux sociaux :

1. 🧱 Icônes sociales (si votre thème en a).
2. Ou des Icônes individuelles liées.
3. 🎨 Style : Alignement à droite.

ÉTAPE 5 : STYLE GÉNÉRAL DU PIED DE PAGE :

1. Sélectionnez chaque section du pied de page.
2. 🎨 Style > Arrière-plan :
   • Couleur foncée (#222222 ou #333333).
   • 🎨 Couleur du texte : Gris clair (#CCCCCC).
3. 📏 Ajustez les remplissages (padding) :
   • Section supérieure : 60px haut/bas.
   • Section inférieure : 30px haut/bas.

ÉTAPE 6 : ENREGISTRER ET ACTIVER :

1. 💾 Enregistrez votre pied de page.
2. 🚪 Quittez l’éditeur.
3. 📍 Dans Turbo H&F Builder > Footer Templates :
   • « Edit conditions ».
   • Définissez Condition d’affichage > « Entire site » (la condition pour afficher le pied de page sera sur l’ensemble du site).
   • Cliquez sur le bouton « Update » (enregistre les modifications).

🏆 PROJET PRATIQUE : EN-TÊTE ET PIED DE PAGE COMPLETS

📋 OBJECTIF :

Créer un en-tête et un pied de page professionnels pour un site web de services digitaux.

🎯 CRITÈRES D’ÉVALUATION :

POUR L’EN-TÊTE :

• Logo aligné à gauche.
• Menu principal avec 5 liens minimum.
• Bouton CTA « Demander un devis ».
• Sticky activé pour le menu (activer dans « Edit Conditions »).
• Fonctionnel sur mobile (hamburger ou simplifié).
• Couleurs cohérentes avec l’identité.

POUR LE PIED DE PAGE :

• 4 colonnes sur bureau.
• Informations de contact complètes.
• Liens légaux (confidentialité, conditions).
• Réseaux sociaux.
• Copyright à jour.
• Newsletter ou CTA final.

⏳ TEMPS ESTIMÉ :

• En-tête : 30 minutes.
• Pied de page : 30 minutes.
• Test responsive : 10 minutes.
• Total : 1 heure 10 minutes.

📝 LISTE DE VÉRIFICATION FINALE :

1. ✅ En-tête apparaît sur toutes les pages.
2. ✅ Pied de page complet et sans erreurs.
3. ✅ Mobile totalement fonctionnel.
4. ✅ Sticky fonctionne correctement.
5. ✅ Liens tous fonctionnels.
6. ✅ Couleurs cohérentes sur les deux.
7. ✅ Logo net et bien dimensionné.
8. ✅ CTA clair et visible.

💡 CONSEILS PROFESSIONNELS

🎨 DESIGN VISUEL :

1. Maintenez une hauteur d’en-tête constante (80-100px idéal).
2. Utilisez des espaces généreux dans le pied de page (ne surchargez pas).
3. Hiérarchisez l’information : le plus important en haut/à gauche.
4. Contraste suffisant pour une lecture facile.

⚡ PERFORMANCE :

1. Optimisez le logo pour le web (PNG compressé).
2. N’utilisez pas de widgets complexes dans l’en-tête/pied de page.
3. Utilisez des icônes SVG au lieu d’images (les widgets d’icônes sont déjà en svg).

✅ RÉSUMÉ DE CE QUE VOUS AVEZ APPRIS

Dans ce module, vous avez appris :

1. ✅ L’importance des en-têtes et pieds de page professionnels.
2. ✅ Les solutions pour Elementor Gratuit (extension complémentaire).
3. ✅ La création d’un en-tête complet avec navigation.
4. ✅ La conception d’un pied de page structuré et utile.
5. ✅ Les techniques responsive (menu hamburger).

🎉 EXCELLENT TRAVAIL !
Maintenant, votre site web aura la base professionnelle qu’il mérite avec un en-tête et un pied de page cohérents et fonctionnels.

Êtes-vous prêt à concevoir la page la plus importante : l’Accueil ?

Dans le Module 5, vous apprendrez à :

• 🏠 Mettre en page une page d’Accueil complète et efficace.
• 🎯 Hiérarchiser le contenu pour une conversion et des visites maximales.
• 📱 Concevoir des sections hero percutantes.
• ✨ Mettre en œuvre des appels à l’action efficaces.