Objectif: Connaître en profondeur les widgets de base et apprendre à contrôler la structure de vos pages avec Elementor sur WordPress.

📋 LEÇON 3.1 : WIDGETS, LES BLOCS DE CONSTRUCTION

Un widget dans Elementor est un bloc fonctionnel qui réalise une tâche spécifique. Si votre site web était une maison, les widgets seraient les briques, les fenêtres, les portes et les meubles.

🏗️ LA HIÉRARCHIE DE CONSTRUCTION

Pour comprendre comment tout fonctionne, il est crucial de connaître cette structure :

 1. 📄 PAGE (votre toile complète)
   ↓
2. 🏗️ SECTION (zones horizontales principales)
   ↓
3. 📊 COLONNES (divisions à l'intérieur de chaque section)
   ↓
4. 🧱 WIDGETS (contenu spécifique à l'intérieur de chaque colonne)

Exemple visuel :

[🏢 SECTION 1 : En-tête Hero]
├── [📊 COLONNE 1 (60%)]
│   └── 🧱 Widget Titre "Bienvenue"
│   └── 🧱 Widget Texte "Description"
│   └── 🧱 Widget Bouton "Voir plus"
│
└── [📊 COLONNE 2 (40%)]
    └── 🧱 Widget Image (photo principale)

🎯 LEÇON 3.2 : LES WIDGETS DE BASE INDISPENSABLES

1. 🏷️ TITRE (anciennement « Titre »)

À quoi sert-il ? Pour les titres et sous-titres de tout niveau (H1, H2, H3…).

Configuration essentielle :

• 📝 Titre : Le texte qui sera affiché.
• 🏷️ Balise HTML : H1 (principal), H2 (sections), H3 (sous-sections).
• 🔗 Lien : Si vous voulez qu’il soit cliquable.
• 🎨 Style : Couleur, typographie, alignement, ombres.

💡 Pratique rapide :

1. Ajoutez un Titre à votre page.
2. Changez-le en balise H2.

2. 🖼️ IMAGE

À quoi sert-elle ? Pour afficher des photographies, illustrations, logos…

Configuration essentielle :

• 🖼️ Choisir une image : Depuis votre ordinateur ou la bibliothèque.
• 📏 Taille : Miniature, Moyenne, Grande, Pleine.
• 🔗 Lien : Où cela mène en cliquant.
• 📝 Texte alternatif : Important pour le SEO et l’accessibilité.

💡 Astuce professionnelle :
Ajoutez toujours un texte alternatif descriptif. Pour une image de bureau : « Bureau moderne avec équipe travaillant » au lieu de simplement « bureau.jpg ».

3. 📝 ÉDITEUR DE TEXTE

À quoi sert-il ? Pour les paragraphes, listes, textes longs…

Différence avec Titre :

• Titre : Titres courts (1 ligne).
• Éditeur de texte : Paragraphes longs (plusieurs lignes).

Contrôles de format :

✏️ Gras | 𝒞 Italique | 🔗 Lien | 📋 Listes | 🔄 Alignement

💡 Pratique rapide :

1. Ajoutez un Éditeur de texte.
2. Ajoutez un lien vers « # » sur un autre mot.

4. ▶️ VIDÉO

À quoi sert-elle ? Pour insérer des vidéos de YouTube, Vimeo ou auto-hébergées.

Configuration essentielle :

• 🔗 Lien : URL de la vidéo (YouTube/Vimeo).
• 🖼️ Image de couverture : Ce qui est vu avant la lecture.
• ⚙️ Lecture : Autoplay, contrôles, boucle.

⚠️ Important : Les vidéos auto-hébergées (téléchargées directement) peuvent ralentir votre site. Mieux vaut utiliser YouTube ou Vimeo.

5. 🔘 BOUTON

À quoi sert-il ? Pour les appels à l’action (CTA).

Parties d’un bouton efficace :

[🎨 COULEUR ATTRACTIVE] [✏️ TEXTE CLAIR] [🔗 LIEN PERTINENT]

Configuration essentielle :

• ✏️ Texte : « Télécharger le PDF », « Demander un devis », « Voir le catalogue ».
• 🔗 Lien : Où mène le bouton.
• 🎨 Style : Couleurs (normal et hover), bordures, ombres.

💡 Psychologie du bouton :

• Texte à la première personne : « Je veux mon devis » vs « Demander un devis ».
• Urgence : « Offre se termine dans 24h ».
• Bénéfice : « Télécharger le guide gratuit ».

6. ➖ SÉPARATEUR

À quoi sert-il ? Pour créer des lignes de séparation entre les sections.

Types de lignes :

• Pleine : ───────
• Double : ═══════
• Pointillée : ┈┈┈┈┈┈
• Décorative : ~~~ ~~~~ ~~~

Configuration :

• 📏 Largeur : 100% (toute la largeur) ou personnalisée.
• 🎨 Style : Type de ligne, épaisseur, couleur.
• ✨ Effets : Ombres, animations.

7. ⬜ ESPACEUR

À quoi sert-il ? Pour créer de l’espace vide (marges personnalisées).

Cas d’utilisation :

• Espacer deux widgets sans toucher aux marges des widgets.
• Créer un espace précis entre des éléments.
• Compenser des hauteurs dans des colonnes.

💡 Astuce : Mieux vaut utiliser un Espaceur que de grandes marges sur des widgets individuels.

8. 🗺️ GOOGLE MAPS

À quoi sert-il ? Pour afficher des emplacements géographiques.

Configuration essentielle :

• 📍 Adresse : Votre adresse physique.
• 🔍 Zoom : Niveau de rapprochement (10-15 pour la rue).
• 🎨 Style : Couleurs de la carte.

⚡ Optimisation : Dans les versions récentes, vous pouvez activer le chargement différé pour que la carte ne ralentisse pas la page initiale.

9. ✨ ICÔNE

À quoi sert-il ? Pour des icônes décoratives ou informatives.

Sources d’icônes disponibles :

• Font Awesome : 1 500+ icônes gratuites.
• Votre propre bibliothèque : SVG personnalisés.

💡 Pratique :

1. Ajoutez un widget Icône.
2. Cherchez « phone » (téléphone).
3. Ajoutez-le avant votre numéro de téléphone.

📱 LEÇON 3.3 : RÉGLAGES SPÉCIFIQUES PAR APPAREIL

Comment ça fonctionne :

1. 📱 Mobile dans la barre supérieure.
2. Effectuez vos modifications.
3. Les changements s’appliquent uniquement au mobile.

Exemples courants :

Astuce : si vous appliquez des changements sur tablette, ces changements ne s’appliqueront qu’à partir de la tablette vers le bas (c’est-à-dire tablette et mobile) et si vous appliquez sur mobile, les changements ne s’appliqueront qu’au mobile. Donc, si sur tablette et mobile quelque chose s’affiche mal, en l’ajustant sur tablette, cela peut déjà bien s’afficher sur mobile sans avoir à faire de modifications sur la vue mobile. Disons que les changements héritent des vues supérieures : PC > Tablette (hérite du PC) > Mobile (hérite de la tablette).

🚫 MASQUER DES ÉLÉMENTS SUR CERTAINS APPAREILS

Quand l’utiliser :

• 🖼️ Images décoratives non essentielles sur mobile
• 📊 Widgets complexes qui ne fonctionnent pas bien sur mobile
• ✨ Éléments purement esthétiques

Comment faire :

1. Sélectionnez l’élément.
2. 🚀 Avancé.
3. « Responsive ».
4. Masquer sur mobile/tablette/bureau.

⚠️ Prudence : Ne masquez pas un contenu important uniquement parce qu’il « ne rentre pas ».

💼 LEÇON 3.4 : PROJET PRATIQUE – PAGE « SERVICES »

📋 OBJECTIF FINAL :

• ✅ En-tête hero avec titre et description.
• ✅ 3 services en grille responsive.
• ✅ Section de témoignages.
• ✅ Appel à l’action final.

🏗️ ÉTAPE 1 : STRUCTURE DE BASE

1. Nouvelle page > « Nos Services ».
2. Ouvrir avec Elementor.
3. Section 1 : 1 colonne (pour l’en-tête hero).

🎨 ÉTAPE 2 : EN-TÊTE HERO

Dans la section à 1 colonne :

1. 🧱 Titre : « Solutions Professionnelles pour Votre Entreprise »
   • Balise HTML : H1.
   • Alignement : Centre.
   • Taille : 52px (bureau) / 36px (mobile).
2. 🧱 Éditeur de texte : (sous le titre)
   • Texte : « Nous proposons des services spécialisés conçus pour stimuler votre croissance et optimiser vos opérations commerciales. »
   • Alignement : Centre.
3. 🧱 Bouton : « Découvrir nos services ».
   • Lien : « #services » (sans les guillemets).
   • Style : Bouton rempli.

💡 Astuce : Dans Style de la section, mettez un fond dégradé doux.

📊 ÉTAPE 3 : SECTION DES SERVICES

1. Nouvelle section : 3 colonnes (33% | 33% | 33%).
2. Titre de section : (au-dessus des colonnes).
   • 🧱 Titre : « Nos Services Principaux ».
   • Balise HTML : H2.
   • Alignement : Centre.

Colonne 1 – Service A :

1. 🧱 Icône : ✨ (choisissez une icône liée au design).
2. 🧱 Titre : « Conception Web ».
   • Balise HTML : H3.
   • Alignement : Centre.
3. 🧱 Éditeur de texte : « Nous créons des sites web modernes, rapides et optimisés pour les conversions. »
   • Alignement : Centre.
4. 🧱 Bouton : « Plus d’informations ».
   • Taille : Petit.
   • Alignement : Centre.

Colonne 2 – Service B :

1. Dupliquez la colonne 1 (clic sur colonne > dupliquer).
2. Changez l’icône, le titre et la description.
3. Assurez-vous que tout soit centré.

Colonne 3 – Service C :

1. Répétez le processus pour la troisième colonne.

📱 ÉTAPE 4 : OPTIMISER POUR MOBILE

1. 📱 Mobile.
2. Vérifiez chaque section :
   • Les textes sont-ils lisibles ?
   • Les boutons sont-ils faciles à toucher ?
   • Les colonnes s’empilent-elles correctement ?
3. Ajustez ce qui est nécessaire :
   • Tailles de police.
   • Marges et espacements.
   • Taille des boutons.

💾 ÉTAPE 5 : ENREGISTRER ET TESTER

1. 👁️ Prévisualiser sur bureau.
2. 👁️ Prévisualiser sur mobile (utilisez le sélecteur d’appareil du navigateur).
3. 🎯 Publier lorsque vous êtes satisfait.

🚨 ERREURS COURANTES ET SOLUTIONS

1️⃣ « Mes colonnes ne s’empilent pas sur mobile »

Cause : Vous n’avez pas bien configuré le responsive.
Solution :

1. 📱 Mobile.
2. Sélectionnez la colonne.
3. 📋 Disposition > Largeur > mettez 100%.
4. Activez « Empiler verticalement » si votre version l’a.

2️⃣ « Les widgets sortent de la colonne »

Cause : Marges ou rembourrages trop grands.
Solution :

1. Sélectionnez le widget.
2. 🚀 Avancé.
3. Réduisez Marges et Rembourrage (Padding).
4. Vérifiez en vue mobile.

3️⃣ « Je ne peux pas aligner verticalement »

Cause : Vous essayez d’aligner le widget, pas la colonne.
Solution :

1. Sélectionnez la COLONNE (bordure bleue).
2. 📋 Disposition.
3. Cherchez « Alignement vertical ».
4. Choisissez Centre.

4️⃣ « Le design est différent à la publication »

Cause : Cache du navigateur ou extensions.
Solution :

1. Videz le cache (Ctrl+F5).
2. Désactivez les extensions de cache temporairement.
3. Régénérez le CSS dans Elementor > Outils.

💡 CONSEILS PROFESSIONNELS DU MODULE 3

🎯 PLANIFIEZ AVANT DE CONSTRUIRE

1. Définissez la hiérarchie : Ce qui est H1, H2, H3…
2. Choisissez les couleurs : 1 principale, 1 secondaire, 1 d’accent.
3. Sélectionnez les polices : 1 pour les titres, 1 pour le texte.

⚡ OPTIMISEZ LA VITESSE

1. Compressez les images avant de les télécharger.
2. Limitez les animations (ralentissent la page).
3. Testez sur mobile avec une connexion 3G simulée.

🔧 MAINTENEZ LA COHÉRENCE

1. Mêmes marges sur toutes les sections similaires.
2. Même style pour tous les boutons du même type.
3. Même rembourrage (padding) sur toutes les cartes de services.
4. Mêmes couleurs pour tous les liens.

📱 TESTEZ SUR DES APPAREILS RÉELS

1. Votre mobile (celui que vous utilisez le plus).
2. Tablette d’un proche.
3. Ordinateur avec grand écran.
4. Navigateurs différents : Chrome, Safari, Firefox.

✅ RÉSUMÉ DES COMPÉTENCES DU MODULE 3

Vous savez maintenant :

1. ✅ Utiliser les 9 widgets de base avec maîtrise.
2. ✅ Contrôler sections et colonnes à un niveau professionnel.
3. ✅ Créer des pages complexes avec une structure logique.
4. ✅ Résoudre les erreurs courantes de structure.
5. ✅ Appliquer des conseils professionnels d’optimisation.

🏆 DÉFI FINAL DU MODULE 3

Créez une page « Équipe » avec ces exigences :

📋 EXIGENCES TECHNIQUES :

• ✅ En-tête hero avec titre + description.
• ✅ Grille de 3 membres d’équipe (photo, nom, poste, biographie courte).
• ✅ Section secondaire avec 3 icônes + statistiques.
• ✅ Bouton final « Rejoindre notre équipe ».
• ✅ Complètement responsive.

🎯 CRITÈRES D’ÉVALUATION :

• Cohérence : Mêmes styles pour les éléments similaires.
• Hiérarchie : Titres H1, H2, H3 utilisés correctement.
• Responsive : Fonctionne parfaitement sur mobile et tablette.
• Espacement : Marges et rembourrages cohérents.
• Performance : Images optimisées, sans excès d’effets.

🎉 FÉLICITATIONS ! Vous avez maîtrisé l’essence de la construction avec Elementor.
Dans le Module 4, vous apprendrez à créer des en-têtes et pieds de page professionnels qui resteront cohérents sur l’ensemble de votre site.
Prêt pour le niveau suivant avec le Module 4 ? 🚀