Installer Wordpress (avec le thème Astra et le plugin Elementor)

Objectifs pédagogiques

À la fin de ce module, l’apprenant sera capable de :

• Installer WordPress en local via l’interface cPanel d’o2switch

• Installer et activer un thème (Astra)

• Installer un constructeur de page (Elementor)

• Comprendre le rôle de WordPress, du thème et du builder

• Commencer la création d’un site vitrine

Module 1 – Installer WordPress via o2switch

O2switch installe WordPress sur votre hébergement O2switch. Si vous souhaitez l’installer vraiment localement sur votre ordinateur, il faut utiliser LocalWP.

Étape 1 – Accéder au cPanel

1. Connectez-vous à votre espace client o2switch (le formateur vous donnera vos identifiants)

2. Cliquez sur Accéder au cPanel
   
   

Étape 2 – Utiliser “WordPress Manager by Softaculous”

1. Dans le tableau cPanel, trouvez la section Softaculous Apps Installer

2. Cliquez sur WordPress Manager by Softaculous

3. Cliquez sur Installer
   
   

Étape 3 – Paramétrer l’installation

Faire remplir par l'apprenant :

• Choix du domaine : sélectionnez le domaine ou sous-domaine où installer WordPress

• Répertoire (directory) : ⚠️ laisser vide pour installer à la racine

• Nom du site : “Site de test” (modifiable plus tard)

• Description : “Mon premier site WordPress”

• Nom d’administrateur : admin ou votre prénom

• Mot de passe : fort, généré automatiquement

• Email administrateur : votre adresse

• Langue : Français

• Laisser les autres options par défaut.
  
  

Cliquez sur Installer.

Étape 4 – Accéder au tableau de bord WordPress

Une fois l’installation terminée :

• URL du site : votresite.com

• Admin : votresite.com/wp-admin
  
  

L’apprenant se connecte à l’interface WordPress.

Module 2 – Installer le thème Astra

Étape 1 – Accéder à la bibliothèque de thèmes

1. Dans WordPress, allez dans :
   Apparence → Thèmes → Ajouter

Étape 2 – Rechercher Astra

1. Dans la barre de recherche, écrivez Astra

2. Cliquez sur Installer

3. Cliquez sur Activer

Module 3 – Installer Elementor

Étape 1 – Ajouter une extension

1. Dans WordPress :
   Extensions → Ajouter
   
   

Étape 2 – Installer Elementor

1. Recherchez “Elementor Website Builder”
   
   

2. Cliquez : Installer → Activer
   
   

Elementor est maintenant prêt.

Module 4 – Comprendre WordPress, Astra et Elementor (pédagogie)

A – WordPress : le système de gestion (CMS)

WordPress est :

• un gestionnaire de contenu

• un tableau de bord où l’on gère pages, articles, menus, médias

• la “structure” du site

• comparable au moteur d’une voiture
  
  

Ce qu’il gère :

• l’architecture du site

• les utilisateurs

• les réglages

• la sécurité

• les extensions
  
  

B – Astra : le thème (design global)

Astra sert à définir :

• la mise en page générale (header, footer, sidebar…)

• les polices et couleurs par défaut

• le style global du site
  
  

Comparaison :

• Astra = la carrosserie et le style général, l'apparence du site
  
  

Il est léger, rapide, idéal pour Elementor.

C – Elementor : le constructeur visuel de pages

Elementor sert à :

• créer des pages en glisser-déposer

• ajouter des sections, colonnes, boutons, images

• construire des designs sur mesure

• voir les modifications en direct
  
  

Comparaison :

• Elementor = les outils de personnalisation avancée

• L’apprenant construit page après page sans coder

Module 5 – Démarrer la création du site

Première réalisation : construire une page d’accueil

Étape 1 – Configurer la page d’accueil

1. Aller dans :
   Pages → Ajouter

2. Nommer la page : Accueil

3. Publier

4. Aller dans :
   Réglages → Lecture → Page d’accueil statique

5. Choisir Accueil
   
   

Étape 2 – Éditer avec Elementor

1. Retournez dans Pages

2. Cliquez sur Modifier avec Elementor
   
   

L’apprenant arrive dans l’interface visuelle :

• À gauche : les widgets

• Au centre : la page

• En haut : le menu d’édition
  
  

Étape 3 – Construire la première section

1. Cliquez sur “+” pour ajouter une section

2. Choisissez une structure à 2 colonnes

3. Ajoutez un widget Titre à gauche

4. Ajoutez un widget Image à droite

5. Personnalisez la police, les couleurs
   
   

Étape 4 – Créer un bouton d'appel à l'action

1. Ajouter un widget Bouton

2. Modifier le texte : “Me contacter”

3. Lier vers la page Contact
   
   

Résultat attendu pour vous

Une première page structurée, comprenant :

• un titre

• une image

• un bouton

• une section élégante

Ressources : 

• WordPress Tutorial Français : Apprendre WordPress de A à Z rapidement (même si vous êtes débutant) : https://youtu.be/20yVELmxBTc?si=9Fo9SHRfzYCsU5mL

• Comment fonctionne l'ARCHITECTURE d'Elementor ? (+Le Navigateur) - Tuto FR : https://www.youtube.com/watch?v=yM89HWMEvOQ&list=PLOXO3LDyaTEnacYpQPHkS6ET7pdCQzazQ

• ASTRA : Présentation complète de ce thème gratuit WordPress + Compatibilité Elementor et Woocommerce : https://www.youtube.com/watch?v=RivrnqSJT7c

• Tutoriel Yoast SEO : Boostez votre référencement avec ce plugin WordPress : https://www.youtube.com/watch?v=qMlsZud4Z2o&t=678s

•