Durée estimée : 2 heures

Objectif: Connaître et pratiquer l’interface de l’éditeur visuel d’Elementor.

📋 LEÇON 2.1 : L’INTERFACE QUE VOUS ALLEZ RENCONTRER

Créez une nouvelle page avec le nom de votre choix et publiez-la.

Une fois publiée, modifiez-la avec Elementor :

• Soit depuis « Pages – Toutes les pages – Modifier avec Elementor ».
• Soit depuis la partie publique, sur la page que vous voulez modifier, et dans la barre supérieure, cliquez sur « Modifier avec Elementor« .

Lorsque vous entrez pour la première fois dans l’éditeur d’Elementor, vous verrez cette répartition :

🔝 BARRE SUPÉRIEURE NOIRE (Votre panneau de contrôle principal)

[☰] [➕] [⚙️] [🕒] | [🖥️] [💻] [📱] | [📋] [🆕] [🔍] [📐] [👁️] [🎯]

Explication de chaque élément :

Gauche →
• ☰ Menu – Affiche/masque le panneau des widgets.
• ➕ Ajouter un élément – Accès rapide aux widgets.
• ⚙️ Réglages de la page – Configuration générale.
• 🕒 Historique – Gestion des versions.

Centre →
• 🖥️ Bureau – Vue pour ordinateurs.
• 💻 Tablette – Vue pour tablettes.
• 📱 Mobile – Vue pour mobiles.

Droite →
• 📋 Liste de vérification – Outils d’optimisation.
• 🆕 Nouveautés – Mises à jour d’Elementor.
• 🔍 Recherche – Rechercher des widgets et réglages.
• 📐 Structure – Voir la hiérarchie des éléments. C’est une liste avec toutes les colonnes, widgets, etc.
• 👁️ Prévisualiser – Voir comme un visiteur.
• 🎯 Publier – Publier/mettre à jour la page.

⬅️ PANNEAU DE GAUCHE (Votre boîte à outils)

Ici, vous trouverez TOUS les widgets organisés par catégories :

🔍 Rechercher un widget...
───────────────
🏗️ ÉLÉMENTS DE BASE
• Titre
• Image
• Éditeur de texte
• Vidéo
• Bouton
• Séparateur
• Espaceur
• Google Maps
• Icône
───────────────
🚀 ÉLÉMENTS PRO
(Si vous avez la version Pro)
───────────────
📁 MES ÉLÉMENTS
(Vos modèles enregistrés)

🎨 ZONE CENTRALE (Votre toile vierge)

C’est l’espace où vous construirez votre page. Au début, vous verrez :

╔══════════════════════════════════════════╗
║                                          ║
║        🎯 ZONE DE TRAVAIL                ║
║                                          ║
║   [  ➕  ] ← Cliquez ici pour commencer  ║
║                                          ║
║     Votre conception apparaîtra ici      ║
║                                          ║
╚══════════════════════════════════════════╝

➡️ PANNEAU DE DROITE

Le panneau « Structure » flottera seulement si vous le sélectionnez dans la barre supérieure, vers la gauche. Il est utile de l’avoir toujours actif pour pouvoir vous situer schématiquement dans quel widget vous êtes et pour réorganiser Elementor par glisser-déposer.

🎯 LEÇON 2.2 : COMMENT COMMENCER À CONSTRUIRE

ÉTAPE 1 : CRÉER VOTRE PREMIÈRE SECTION

1. 🖱️ Cliquez sur le grand bouton ➕ dans la zone centrale.
2. 🏗️ Sélectionnez la structure à « 2 colonnes » (50% | 50%).
3. ✅ Voilà ! Vous avez déjà votre première section avec deux colonnes.

Ce que vous verrez :

┌───────────────────────────────────────┐
│  SECTION (avec bordure gris clair)    │
│                                       │
│  ┌─────────────┐ ┌─────────────┐      │
│  │  COLONNE    │ │  COLONNE    │      │
│  │      1      │ │      2      │      │
│  │             │ │             │      │
│  │     [+]     │ │     [+]     │      │
│  │             │ │             │      │
│  └─────────────┘ └─────────────┘      │
└───────────────────────────────────────┘

ÉTAPE 2 : AJOUTER VOTRE PREMIER WIDGET

Ajoutons un Titre dans la colonne de gauche :

1. 🧰 Ouvrez le panneau de gauche (cliquez sur ☰ s’il est fermé).
2. 🔍 Cherchez le widget « Titre » dans « Éléments de base ».
3. 🖱️ Cliquez dessus et maintenez enfoncé.
4. ➡️ Faites-le glisser vers la colonne 1.
5. 🖐️ Relâchez le bouton de la souris.

✨ Félicitations ! Vous venez de placer votre premier widget.

⚙️ LEÇON 2.3 : COMMENT ÉDITER CORRECTEMENT LES ÉLÉMENTS

ERREUR COURANTE DES DÉBUTANTS :

❌ NE faites PAS de double-clic sur le texte pour le modifier.
❌ NE cherchez PAS de boutons de mise en forme comme dans Word.

MÉTHODE CORRECTE :

1. 🖱️ Cliquez UNE SEULE FOIS sur le titre que vous avez ajouté.
2. 👁️ Observez ce qui se passe :

AUTOUR du titre, apparaît une icône :

[✏️] ← (pour éditer)

Avec un clic droit sur le crayon, vous trouverez des options comme :

[📋]      ← (dupliquer)
[🗑️]      ← (supprimer)

Dans le PANNEAU DE GAUCHE, avec le widget sélectionné, vous verrez maintenant :

┌────────────────────────────────────────┐
│ [TARGET] TITRE                         │
│                                        │
│ [CONTENU]   [STYLE]                    │ ← Onglets principaux
│    [AVANCE]                            │
│                                        │
│ > Titre : "Ceci est le..."             │ ← Votre texte ici
│                                        │
│ > Balise HTML : H2                     │ ← Type de titre
│                                        │
│ > Lien :                               │ ← Pour le rendre cliquable
└────────────────────────────────────────┘

POUR ÉDITER LE TEXTE :

1. 👉 Allez dans le panneau de gauche, onglet « Contenu ».
2. 🖱️ Cliquez dans le champ « Titre ».
3. 🗑️ Effacez le texte par défaut.
4. ⌨️ Écrivez : « Bienvenue sur Mon Site Web ».
5. 👀 Regardez ! Le changement est instantané dans la zone centrale.

🎨 LEÇON 2.4 : LES 3 ONGLETS DE CONFIGURATION

Lorsque vous sélectionnez N’IMPORTE QUEL widget, dans le panneau de gauche, vous verrez ces 3 onglets :

1. 📋 CONTENU (Ce qui est dit)

Ici, vous contrôlez le contenu de l’élément :

• ✏️ Textes – Ce qui est lu.
• 🖼️ Images – Ce qui est vu.
• 🔗 Liens – Où cela mène.
• ⚙️ Options – Comportement de base.

Exercice pratique :

1. 🖱️ Sélectionnez votre titre.
2. 👉 Allez dans l’onglet « Contenu ».
3. 🔽 Cherchez « Balise HTML ».
4. 🖱️ Changez de « H2 » à « H1 ».

2. 🎨 STYLE (Comment c’est vu)

Ici, vous contrôlez l’apparence visuelle :

• 🎨 Couleurs – Palette chromatique.
• 🔤 Typographie – Polices et tailles.
• 📐 Alignement – Position du contenu.
• ✨ Effets – Ombres, bordures, etc.

Exercice pratique :

1. 👉 Cliquez sur l’onglet « Style ».
2. 🎨 Cherchez « Couleur du texte ».
3. 🖱️ Cliquez sur le carré de couleur.
4. 🎯 Choisissez une couleur qui vous plaît.
5. 🔤 Essayez de changer la taille à 48px.

3. 🚀 AVANCÉ (Contrôle technique)

Pour des réglages plus spécifiques :

• 📏 Marges – Espace extérieur.
• 🛡️ Rembourrage (Padding) – Espace intérieur.
• 🎭 Animations – Effets d’entrée.
• 🛠️ CSS personnalisé – Pour les experts.

Exercice pratique :

1. 👉 Cliquez sur l’onglet « Avancé ».
2. 📏 Cherchez « Marges ».
3. ✏️ Écrivez dans « Supérieure » : 20.
4. ✏️ Écrivez dans « Inférieure » : 20.
5. 👁️ Observez comment le titre gagne de l’espace en haut et en bas.

🏗️ LEÇON 2.5 : COMPLÉTER VOTRE PREMIÈRE SECTION

Terminons de construire notre première section complète :

DANS LA COLONNE 1 (Nous avons déjà le titre) :

1. 🧰 Cherchez le widget « Éditeur de texte ».
2. 🖱️ Faites-le glisser EN DESSOUS du titre.
3. ✏️ Éditez le texte pour qu’il dise :
   « Ceci est mon site web créé avec Elementor. J’apprends à concevoir des pages web de manière visuelle et professionnelle. »
4. 🎨 Allez dans Style > Alignement > Justifié.

DANS LA COLONNE 2 :

1. 🧰 Cherchez le widget « Image ».
2. 🖱️ Faites-le glisser dans la colonne 2.
3. ⚙️ Configurez :
   • Cliquez sur « Choisir une image ».
   • Choisissez une image sur votre ordinateur ou dans la bibliothèque.
   • Cliquez sur « Insérer ».
4. 🎨 Optionnel : Allez dans Style > Bordure > Rayon : 10px

Sous l’image :

1. 🧰 Cherchez le widget « Bouton ».
2. 🖱️ Faites-le glisser sous l’image.
3. ✏️ Configurez :
   • Texte : « Voir plus d’informations ».
   • Lien : « # » (sans les guillemets).
   • Alignement : Centre.

📱 LEÇON 2.6 : VISUALISATION SUR DIFFÉRENTS APPAREILS

LA MAGIE D’ELEMENTOR :

Vous pouvez voir et ajuster votre conception pour mobile, tablette et bureau séparément.

COMMENT ÇA FONCTIONNE :

Dans la barre supérieure, au centre, cliquez sur :

• 📱 MOBILE – Pour voir sur téléphones.
• 💻 TABLETTE – Pour voir sur tablettes.
• 🖥️ BUREAU – Pour voir sur ordinateurs.

EXERCICE PRATIQUE :

Optimisons notre titre pour mobile :

1. 🖱️ Cliquez sur 📱 MOBILE.
2. 🖱️ Sélectionnez votre titre « Bienvenue sur Mon Site Web ».
3. 👉 Allez dans l’onglet « Style ».
4. 🔤 Cherchez « Taille » dans Typographie.
5. ✏️ Changez de 48px à 32px.
6. 👁️ Observez comment cela change uniquement en vue mobile.

✨ IMPORTANT :
Les modifications que vous faites en 📱 Mobile n’affectent que les mobiles.
Les modifications que vous faites en 💻 Tablette n’affectent que les tablettes.
Les modifications que vous faites en 🖥️ Bureau n’affectent que le bureau.

💾 LEÇON 2.7 : ENREGISTRER ET PUBLIER VOTRE TRAVAIL

DIFFÉRENCE CLÉ :

• 👁️ PRÉVISUALISER = Voir les modifications sans les publier.
• 🎯 PUBLIER = Rendre les modifications visibles pour tous.

ÉTAPE PAR ÉTAPE POUR PUBLIER :

1. 🔝 Regardez le coin supérieur droit.
2. 🖱️ Cliquez sur le bouton 🎯 PUBLIER.
3. ✅ Message : « Page mise à jour » (succès).

POUR VOIR COMME UN VISITEUR :

1. 🖱️ Cliquez sur 👁️ PRÉVISUALISER.
   (à côté du bouton Publier)
2. 🖥️ Un nouvel onglet du navigateur s’ouvre.
3. 👀 Vous pouvez voir votre page exactement comme vos visiteurs la verront.

CONSEIL IMPORTANT :

Utilisez 👁️ PRÉVISUALISER fréquemment pendant que vous travaillez, et utilisez 🎯 PUBLIER uniquement lorsque vous êtes satisfait du résultat.

🛠️ LEÇON 2.8 : OUTILS UTILES DE LA BARRE SUPÉRIEURE

📐 STRUCTURE – Votre carte de navigation

1. 🖱️ Cliquez dans la barre sombre supérieure, à droite, sur 📐 STRUCTURE.
2. 🗺️ Un panneau apparaît avec tous vos éléments organisés.
3. 🖱️ Vous pouvez cliquer sur n’importe quel élément pour le sélectionner.
4. 🎯 Utile lorsque vous avez des éléments superposés ou difficiles à sélectionner, et pour glisser-déposer et changer l’emplacement du contenu de manière schématique.

🕒 HISTORIQUE – Votre assurance contre les erreurs

1. 🖱️ Cliquez sur 🕒 HISTORIQUE.
2. 📜 Vous verrez la liste de tous les changements récents.
3. 🖱️ Cliquez sur n’importe quelle version antérieure.
4. 🔄 Cette version sera restaurée automatiquement.
5. ⏰ Elementor enregistre jusqu’à 50 changements récents.

🔍 RECHERCHE – Trouvez ce dont vous avez besoin

1. 🖱️ Cliquez sur 🔍 RECHERCHE.
2. ⌨️ Écrivez le nom de n’importe quel widget.
3. ⚡ Trouvez-le instantanément.
4. 🎯 Recherche aussi les réglages et configurations.

🏆 EXERCICE PRATIQUE FINAL

OBJECTIF : Créer une section « Services » complète

ÉTAPE 1 : Ajouter une nouvelle section

1. Descendez à la fin de votre page.
2. 🖱️ Cliquez sur « ➕ Ajouter une nouvelle section ».
3. 🏗️ Choisissez la structure « 3 colonnes » (33% | 33% | 33%).

ÉTAPE 2 : Colonne 1 – Service 1

1. 🧰 Faites glisser « Icône » dans la colonne.
2. ⚙️ Choisissez une icône qui vous plaît (ex : ⭐).
3. 🧰 Faites glisser « Titre » en dessous.
4. ✏️ Écrivez : « Conception Web ».
5. 🧰 Faites glisser « Éditeur de texte » en dessous.
6. ✏️ Écrivez : « Création de sites web modernes et responsifs ».

ÉTAPE 3 : Colonne 2 – Service 2

1. 📋 Sélectionnez toute la colonne 1.
2. 🖱️ Cliquez sur dupliquer, en cliquant droit sur l’icône du crayon et en choisissant 📋 (dupliquer).
3. ➡️ Faites glisser la colonne dupliquée vers la colonne 2.
4. ✏️ Changez les textes à votre guise.

ÉTAPE 4 : Colonne 3 – Service 3

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

ÉTAPE 5 : Titre de la section

1. 🖱️ Cliquez sur le ➕ AU-DESSUS des 3 colonnes.
2. 🧰 Faites glisser « Titre » là.
3. ✏️ Écrivez : « Nos Services ».
4. 🎨 Style : Centre, taille 42px, couleur accentuée.

ÉTAPE 6 : Optimiser pour mobile

1. 🖱️ Cliquez sur 📱 MOBILE.
2. 🔍 Vérifiez que tout est lisible.
3. ⚙️ Ajustez les tailles si nécessaire.
4. 📱 Vérifiez que les 3 colonnes s’empilent verticalement sur mobile.

ÉTAPE 7 : Publier

1. 🖱️ Cliquez sur 🎯 PUBLIER.
2. 👁️ Cliquez sur 👁️ PRÉVISUALISER.
3. ✅ Vérifiez que tout est correct.

🚨 ERREURS COURANTES ET SOLUTIONS

« Je ne peux pas sélectionner un élément »

SOLUTION :

• Utilisez 📐 STRUCTURE pour naviguer.
• Cliquez sur des zones vides près de l’élément.
• Assurez-vous de ne pas être en mode 📱 MOBILE si vous voulez éditer la version bureau.

« Les modifications ne s’appliquent pas »

SOLUTION :

• Vérifiez que vous avez cliqué sur 🎯 PUBLIER, pas seulement sur 👁️ PRÉVISUALISER.
• Videz le cache de votre navigateur.
• Vérifiez que vous n’avez pas de conflit avec d’autres extensions.

« Je ne vois pas le panneau de gauche »

SOLUTION :

• 🖱️ Cliquez sur ☰ MENU (coin supérieur gauche).
• Ou cliquez sur ➕ AJOUTER UN ÉLÉMENT.
• Ou appuyez sur la touche ÉCHAP (ESC) sur votre clavier.

💡 CONSEILS PROFESSIONNELS

1. Enregistrez des versions – Utilisez 🕒 HISTORIQUE avant les grands changements.
2. Téléphone mobile – Vérifiez toujours en 📱 MOBILE pendant la conception.
3. Nommez les éléments – Dans 🚀 AVANCÉ > CSS, donnez-leur des noms descriptifs (si vous savez utiliser le CSS).
4. Utilisez les raccourcis – Ctrl+S enregistre, Ctrl+Z annule.
5. Expérimentez sans crainte – Vous pouvez toujours utiliser 🕒 HISTORIQUE pour revenir en arrière.

✅ RÉSUMÉ DE CE QUI A ÉTÉ APPRIS

Dans ce module, vous avez maîtrisé :

1. ✅ L’interface complète d’Elementor.
2. ✅ Comment ajouter des sections et des colonnes.
3. ✅ Comment glisser-déposer des widgets.
4. ✅ Comment éditer correctement le contenu.
5. ✅ Les 3 onglets de configuration (Contenu, Style, Avancé).
6. ✅ Comment travailler avec les vues responsives.
7. ✅ Comment enregistrer et publier votre travail.
8. ✅ Des outils utiles comme la Structure et l’Historique.

🎉 EXCELLENT TRAVAIL !
Vous avez maintenant les bases pour construire un site web avec Elementor. Dans le prochain module, nous approfondirons les widgets spécifiques et les techniques de conception avancées.