Durée estimée: 90 minutes

À la fin de cette leçon, vous aurez Elementor installé et activé sur votre WordPress avec une page de base mise en page.

Leçon 1.1 : Installation pas à pas d’Elementor

Avec une installation propre de WordPress, seulement les plugins « Classic editor », « Widget Editor » et le thème « Betheme », nous allons procéder à l’installation du maquettiste Elementor.

Étape 1 : Accéder à votre tableau de bord WordPress

1. Ouvrez votre navigateur web (Chrome, Firefox, etc.)
2. Saisissez l’adresse de votre site WordPress suivie de /wp-admin
   • Exemple : https://votresite.com/wp-admin
3. Saisissez votre nom d’utilisateur et votre mot de passe.
4. Cliquez sur « Se connecter ».

Étape 2 : Naviguer vers la zone des extensions

Une fois dans le tableau de bord WordPress :

1. Dans le menu de gauche, cherchez l’option « Extensions ».
2. Passez la souris sur « Extensions ».
3. Dans le sous-menu qui apparaît, cliquez sur « Ajouter ».

Explication visuelle :

├── Tableau de bord
├── Articles
├── Médias
├── Pages
├── Commentaires
├── **APPARENCE**
├── **Extensions** ← Cliquez ici !
│   ├── Extensions installées
│   └── **Ajouter** ← Puis ici !
└── Outils

Étape 3 : Rechercher Elementor

Sur l’écran « Ajouter des extensions » :

1. Regardez en haut à droite de l’écran.
2. Vous verrez un champ de recherche indiquant « Rechercher des extensions ».
3. Écrivez exactement : « Elementor ».
4. Appuyez sur Entrée ou cliquez sur la loupe.

Étape 4 : Identifier la bonne extension

Vous verrez plusieurs résultats. Vous devez trouver l’extension officielle :

Attention à celles-ci :

• « Elementor Pro » – C’est la version payante
• « Elementor Addons » – Ce sont des extensions supplémentaires
• « Elementor Hello » – C’est un thème, pas l’extension

Étape 5 : Installer Elementor

Une fois la bonne extension identifiée :

1. Cliquez sur le bouton « Installer maintenant » situé sous le nom « Elementor ».
2. Attendez quelques secondes pendant que WordPress télécharge et installe l’extension.
3. Vous verrez que le bouton se transforme en « Activer ».

Étape 6 : Activer Elementor

1. Cliquez sur le bouton « Activer ».
2. Un message apparaîtra en haut indiquant : « Extension activée ».
3. Observez que dans le menu de gauche apparaît désormais « Elementor » comme nouvelle option.

Vérification de l’installation correcte

Pour vous assurer que tout est en ordre :

1. Allez sur une page existante
   • Menu de gauche → « Pages » → « Toutes les pages »
   • Choisissez n’importe quelle page et cliquez sur « Modifier »
2. Vous devriez voir un nouveau bouton bleu indiquant « Modifier avec Elementor »

Si vous voyez ce bouton, félicitations ! Elementor est correctement installé.

Leçon 1.2 : Installation d’un thème compatible

Objectif : Installer un thème léger qui fonctionne parfaitement avec Elementor.

⚠️ Attention : si vous avez Betheme, utilisez toujours celui-ci. Lisez ce qui suit uniquement comme documentation/apprentissage ⚠️

Pourquoi avons-nous besoin d’un thème compatible ?

• Certains thèmes ont leur propre système de conception.
• Cela peut générer des conflits avec Elementor.
• Les thèmes légers permettent à Elementor d’avoir un contrôle total.

Étape 1 : Aller dans la zone des thèmes

1. Dans le menu de gauche, cherchez « Apparence ».
2. Passez la souris sur « Apparence ».
3. Cliquez sur « Thèmes ».

Étape 2 : Ajouter un nouveau thème

1. En haut de l’écran, vous verrez un bouton « Ajouter ».
2. Cliquez dessus.

Étape 3 : Rechercher « Hello Elementor » (ou installer Betheme payant)

1. Dans le champ de recherche (en haut à droite), écrivez : « Hello Elementor ».
2. Appuyez sur Entrée.

Étape 4 : Installer le thème

1. Vous trouverez le thème « Hello Elementor » créé par Elementor.com.
2. Passez la souris sur l’image du thème.
3. Un bouton « Installer » apparaîtra.
4. Cliquez sur « Installer ».
5. Attendez que l’installation se termine.
6. Le bouton se transformera en « Activer ».
7. Cliquez sur « Activer ».

Qu’est-ce que Hello Elementor ?

• C’est un thème ultraléger (moins de 6 Ko).
• Il n’inclut pas de styles propres.
• Il permet à Elementor de contrôler toute la conception.
• Il est 100% gratuit.
• Maintenu par l’équipe d’Elementor.

Étape 5 : Vérifier l’activation

Après avoir activé Hello Elementor :

1. Ouvrez votre site web dans un nouvel onglet.
2. Observez que la conception est très basique, presque blanche.
3. C’est normal – cela signifie que le thème est prêt pour qu’Elementor prenne le contrôle.

Leçon 1.3 : Configuration de base d’Elementor

Objectif : Configurer les options essentielles d’Elementor pour bien démarrer.

Accéder à la configuration générale

1. Visitez votre page d’accueil comme si vous étiez un utilisateur normal.
2. Dans le menu supérieur, vous verrez « Modifier avec Elementor », cliquez dessus.
3. L’écran de l’éditeur de contenu se chargera.
4. Dans la barre supérieure, sur le côté gauche, vous verrez le logo, cliquez dessus et sélectionnez « Réglages du site« .
5. Vous verrez des options comme « Couleurs globales, Polices globales, typographie, boutons, marges, champs de formulaire, etc ». Ce sont des valeurs que vous pouvez modifier et qui s’appliqueront à l’ensemble du site.
6. Effectuez les modifications souhaitées et cliquez sur le bouton tout en bas « Enregistrer les modifications« .

Leçon 1.4 : Créer une page de test

Objectif : Créer votre première page avec Elementor pour vérifier que tout fonctionne.

Étape 1 : Créer une nouvelle page

1. Dans le menu de gauche, cliquez sur « Pages ».
2. Cliquez sur « Ajouter ».

Étape 2 : Nommer la page

1. Dans le champ « Ajouter un titre », écrivez : « Ma première page avec Elementor ».
2. N’écrivez rien dans l’éditeur classique de WordPress.

Étape 3 : Ouvrir avec Elementor

1. Cherchez le bouton bleu indiquant « Modifier avec Elementor ».
2. Il se trouve juste au-dessus de l’éditeur de texte.
3. Cliquez dessus.

Étape 4 : Premier contact avec l’éditeur

Félicitations ! Vous êtes dans l’éditeur d’Elementor.

Ce que vous devriez voir :

1. Panneau de gauche : Liste de widgets (icônes).
2. Zone centrale : Espace vide avec un bouton « + ».
3. Panneau de droite : Vide pour l’instant.

Étape 5 : Essayer un widget simple

1. Dans le panneau de gauche, cherchez « Titre ».
2. Faites-le glisser (clic + maintenir enfoncé + déplacer) vers la zone centrale.
3. Relâchez la souris.

Étape 6 : Configurer le titre

1. Cliquez sur le widget que vous venez d’ajouter.
2. Dans le panneau de gauche, allez dans l’onglet « Contenu ».
3. Dans le champ « Titre », écrivez : « Bonjour tout le monde ! Ma première page avec Elementor »

Étape 7 : Enregistrer et visualiser

1. Cliquez sur le bouton « Publier » (en bas à gauche ou en haut à droite selon la version).
2. Cliquez sur « Voir la page » (icône d’œil).
3. Vous verrez votre page en ligne !

EXERCICE PRATIQUE DU MODULE 1

Objectif : Vérifier que vous avez bien tout appris.

Tâche 1 : Installation propre

1. Désinstallez Elementor si vous l’aviez déjà.
2. Réinstallez-le depuis le début en suivant les étapes.

Tâche 2 : Configuration complète

Configurez Elementor avec ces valeurs exactes :

• Couleur primaire : #4CAF50 (vert).
• Police primaire : ‘Open Sans’
• Espacement entre widgets : 15

Tâche 3 : Page de test

Créez une page nommée « Pratique Module 1 » qui contient :

1. Un titre principal.
2. Un paragraphe de texte.
3. Une image (vous pouvez en utiliser une quelconque).
4. Un bouton.

Vérification finale :

Votre page devrait ressembler à ceci dans l’éditeur :

[TITRE : "Pratique complétée"]
[TEXTE : "J’ai appris à installer et configurer Elementor"]
[IMAGE : N’importe quelle image]
[BOUTON : "Voir plus"]

QUESTIONS FRÉQUENTES

Q : Ai-je besoin d’Elementor Pro pour commencer ?

R : NON. Elementor Gratuit est largement suffisant pour apprendre et créer des sites professionnels.

Q : Puis-je changer de thème après ?

R : OUI, mais certains thèmes peuvent ne pas être compatibles. Hello Elementor est l’option la plus sûre pour les débutants. Pour les professionnels, on peut utiliser des thèmes comme BeTheme (recommandé).

Q : Elementor ralentit-il mon site ?

R : C’est un maquettiste lourd, il est donc recommandé de ne pas installer beaucoup d’extensions sur un site WordPress avec ce maquettiste.

RESSOURCES SUPPLÉMENTAIRES

1. Documentation officielle : https://docs.elementor.com/ (en parfait anglais)
2. Forum de support : https://wordpress.org/support/plugin/elementor/

MODULE SUIVANT : « Premier contact avec l’éditeur » – Vous apprendrez à naviguer dans l’interface, utiliser les widgets de base et créer votre première section.