Formation Elementor Pro gratuite

Module 1 : Introduction à Elementor Pro

🎯 Objectifs pédagogiques :

• Comprendre la différence entre Elementor gratuit et Elementor Pro
• Découvrir les possibilités offertes par Elementor Pro
• Installer et activer Elementor Pro correctement
• Préparer l’environnement de travail pour bien débuter

📦 Qu’est-ce qu’Elementor Pro ?

Elementor Pro est la version premium du célèbre constructeur de pages Elementor. Il débloque des fonctionnalités avancées, des widgets exclusifs et surtout la puissance du Theme Builder, qui permet de personnaliser entièrement chaque partie de ton site.

🆚 Elementor Gratuit vs Pro

🛠️ Installation d’Elementor Pro

1. Installe et active d’abord Elementor (gratuit) depuis Extensions > Ajouter
2. Va sur le site officiel elementor.com et achète Elementor Pro
3. Télécharge l’archive ZIP d’Elementor Pro depuis ton compte
4. Dans WordPress, va dans Extensions > Ajouter > Téléverser une extension
5. Installe le fichier ZIP et active-le
6. Connecte ton site à ton compte Elementor pour activer la licence

⚙️ Préparer son environnement de travail

• Installe un thème compatible (recommandé : Hello Elementor)
• Désactive les plugins inutiles
• Crée les pages de base : Accueil, À propos, Services, Contact, Blog
• Active les permaliens “Nom de l’article” dans Réglages > Permaliens

🧪 Mise en pratique

• Installe et active Elementor + Elementor Pro
• Connecte ta licence Elementor Pro
• Installe le thème Hello Elementor
• Crée 4 à 5 pages vides pour préparer la construction du site

⬆️ Retour au sommaire

Module 2 : Créer l’en-tête et le pied de page avec le Theme Builder

🎯 Objectifs pédagogiques :

• Découvrir le fonctionnement du Theme Builder d’Elementor Pro.
• Créer un en-tête personnalisé pour son site.
• Créer un pied de page avec liens, réseaux sociaux et mentions.
• Appliquer ces modèles à l’ensemble du site.

🧠 Qu’est-ce que le Theme Builder ?

Le Theme Builder d’Elementor Pro permet de créer des modèles personnalisés pour les différentes parties de ton site : en-tête, pied de page, articles, pages, archives, etc.

Tu n’es plus limité au design du thème WordPress : tu peux contrôler entièrement l’apparence de ton site.

📍 Accéder au Theme Builder

1. Va dans Modèles > Theme Builder
2. Clique sur “Ajouter un nouvel en-tête”
3. Donne-lui un nom, par exemple “En-tête principal”

🧱 Créer un en-tête personnalisé

Utilise Elementor pour construire ton en-tête avec ces éléments :

• Logo (Image ou widget Site Logo)
• Menu de navigation (widget Menu Nav)
• Icônes sociales (facultatif)
• Bouton d’appel à l’action (ex : "Réserver", "Nous contacter")
• Disposition responsive (menu burger sur mobile)

Tu peux choisir entre une structure à une ou deux colonnes, ou utiliser des sections internes.

📉 Créer un pied de page

1. Retourne dans Modèles > Theme Builder
2. Clique sur “Ajouter un nouveau pied de page”
3. Ajoute :

• Logo et nom de ton entreprise
• Menu secondaire (liens légaux, mentions, politique de confidentialité…)
• Réseaux sociaux
• Copyright

🖥️ Appliquer le modèle sur le site entier

Une fois que tu termines ton en-tête ou pied de page :

1. Clique sur “Publier”
2. Dans les conditions d’affichage, choisis : “Inclure sur tout le site”

🧪 Mise en pratique

• Crée ton en-tête personnalisé avec logo, menu et bouton
• Crée un pied de page avec mentions légales et liens
• Teste leur affichage sur toutes les pages
• Optimise l’affichage mobile (menu burger, alignements)

⬆️ Retour au sommaire

Module 3 : Concevoir une page d’accueil efficace

🎯 Objectifs pédagogiques :

• Structurer une page d’accueil professionnelle avec Elementor Pro.
• Utiliser les sections, colonnes et widgets pour une mise en page claire.
• Intégrer des appels à l’action stratégiques.
• Optimiser la page pour l’expérience utilisateur et le mobile.

🧱 Structure idéale d’une page d’accueil

Voici une structure typique d’une page d’accueil performante :

• Hero section – Grand titre, sous-titre, image ou vidéo + appel à l’action
• Présentation rapide – En quelques phrases, qui tu es et ce que tu proposes
• Services – Liste claire et visuelle de tes prestations
• Preuves sociales – Avis clients, logos de partenaires, chiffres clés
• Appel à l’action – Section de conversion (contact, devis, découverte...)
• Pied de page – Déjà créé dans le module précédent

📐 Mise en page avec Elementor

1. Ouvre la page "Accueil" avec Elementor
2. Ajoute une section pleine largeur pour le Hero
3. Utilise des colonnes pour aligner texte/image
4. Insère des widgets : Titre, Texte, Image, Bouton, Icônes, etc.
5. Utilise les marges internes (padding) pour aérer la mise en page
6. Ajoute des séparateurs ou arrière-plans pour distinguer les blocs

🎯 Appels à l’action efficaces

• Utilise un verbe d’action clair : Découvrir, Réserver, Me contacter…
• Positionne l’appel à l’action dans le Hero ET à la fin de la page
• Ajoute des icônes pour guider le regard
• Soigne la couleur et la taille des boutons

📱 Responsive Design

• Teste l’affichage tablette et mobile depuis Elementor
• Adapte la taille des titres et espacements
• Réorganise certaines colonnes si besoin (mobile first)
• Cache les éléments superflus sur mobile pour alléger

🧪 Mise en pratique

• Crée une page d’accueil complète avec les sections clés
• Ajoute au moins 2 appels à l’action
• Teste le rendu sur desktop, mobile et tablette
• Soigne les espacements et les visuels

⬆️ Retour au sommaire

Module 4 : Créer une page Services avec icônes, colonnes et animations

🎯 Objectifs pédagogiques :

• Créer une page “Services” claire et attractive.
• Utiliser les colonnes et widgets pour organiser l’information.
• Ajouter des icônes et visuels pour illustrer chaque service.
• Appliquer des animations simples pour dynamiser la page.

🧩 Structure d’une page Services efficace

• Introduction – Un paragraphe d’accroche clair
• Services en colonnes – Présentation structurée
• Icônes ou images – Pour illustrer chaque service
• Appel à l’action final – Pour pousser à la prise de contact

⚙️ Construction dans Elementor

1. Ouvre la page “Services” avec Elementor
2. Ajoute une section à 3 colonnes (ou plus selon le design)
3. Dans chaque colonne, insère :

• Un widget Icône ou Image
• Un widget Titre pour le nom du service
• Un widget Texte pour une courte description

✨ Ajouter des animations

• Sélectionne un widget > Avancé > Effets de mouvement
• Choisis une animation d’entrée (ex. : fade in, slide up)
• Varie légèrement les effets pour chaque colonne pour plus de fluidité
• Évite les animations trop rapides ou trop nombreuses

📱 Responsive design

• Vérifie que les colonnes se réorganisent bien sur mobile
• Ajoute de l’espace entre les éléments sur petit écran
• Utilise l’option “réorganiser les colonnes” si nécessaire

🧪 Mise en pratique

• Crée une section avec 3 à 6 services en colonnes
• Ajoute une icône, un titre, un court texte pour chaque
• Ajoute une animation d’apparition simple à chaque bloc
• Teste sur mobile et tablette pour ajuster l’espacement

⬆️ Retour au sommaire

Module 5 : Créer un formulaire de contact avec intégration mail et anti-spam

🎯 Objectifs pédagogiques :

• Créer un formulaire de contact professionnel avec Elementor Pro.
• Configurer les notifications email.
• Ajouter une protection anti-spam (reCAPTCHA ou honeypot).
• Styliser et intégrer le formulaire dans la page Contact.

✍️ Création du formulaire

1. Ouvre la page “Contact” avec Elementor
2. Ajoute une section contenant un widget Formulaire
3. Par défaut, le formulaire propose les champs Nom, Email et Message
4. Ajoute ou modifie les champs selon tes besoins : téléphone, sujet, liste déroulante, case à cocher…

📧 Configuration des notifications

Dans les paramètres du widget Formulaire :

• Onglet Actions après envoi > sélectionne Email
• Dans Email > configure l’adresse de réception, l’objet et le message
• Ajoute une confirmation visible ou un message de remerciement

🛡️ Ajouter une protection anti-spam

• Ajoute un champ Honeypot (invisible pour les humains)
• OU connecte Google reCAPTCHA v3 depuis les réglages Elementor > Intégrations
• Crée une clé reCAPTCHA sur Google reCAPTCHA
• Colle les clés dans Elementor > Paramètres > Intégrations
• Active la protection sur ton formulaire (dans l’onglet Sécurité)

🎨 Styliser le formulaire

• Change la typographie, couleurs, bordures, arrière-plan dans l’onglet Style
• Ajoute un fond, une icône ou une bordure pour le bouton d’envoi
• Utilise les options d’espacement pour rendre le tout aéré et lisible

🧪 Mise en pratique

• Ajoute un formulaire complet sur ta page “Contact”
• Teste l’envoi d’un message vers ton adresse mail
• Ajoute une protection anti-spam (honeypot ou reCAPTCHA)
• Ajoute un message de confirmation personnalisé

⬆️ Retour au sommaire

Module 6 : Créer un blog avec Elementor Pro

🎯 Objectifs pédagogiques :

• Mettre en place une section blog dynamique sur son site WordPress.
• Créer un modèle d’article personnalisé avec le Theme Builder.
• Afficher une liste des articles avec les widgets avancés d’Elementor Pro.
• Optimiser l'affichage et la navigation dans les contenus de blog.

📝 Activer la fonctionnalité de blog

• Assure-toi que tu as bien une page "Blog" créée dans Pages
• Va dans Réglages > Lecture
• Sélectionne une page statique pour l’accueil et désigne “Blog” comme page des articles

📄 Créer un modèle d’article avec le Theme Builder

1. Va dans Modèles > Theme Builder
2. Clique sur “Ajouter un modèle” > Choisis “Article unique”
3. Construit le modèle avec :

• Widget Titre de l’article
• Image à la une, Méta-infos (date, auteur, catégories)
• Widget Contenu de l’article
• Ajoute éventuellement des articles similaires ou des boutons de partage

Publie en sélectionnant la condition : “Tous les articles”.

📚 Afficher les articles sur la page Blog

• Ouvre la page "Blog" avec Elementor
• Ajoute le widget Articles ou Posts
• Choisis l’affichage : grille, cartes, liste…
• Filtre les articles par catégorie si besoin
• Ajoute une pagination ou un bouton “Charger plus”

🎨 Personnalisation et responsive

• Adapte la typographie, l’espacement et les bordures
• Utilise une animation subtile pour le survol des cartes
• Teste le rendu sur tablette et mobile

🧪 Mise en pratique

• Crée 2 à 3 articles dans Articles > Ajouter
• Crée un modèle d’article personnalisé
• Ajoute une liste d’articles sur la page “Blog”
• Teste la navigation et le rendu responsive

⬆️ Retour au sommaire

Module 7 : Créer des pop-ups marketing avec Elementor Pro

🎯 Objectifs pédagogiques :

• Créer un pop-up esthétique et fonctionnel avec Elementor Pro.
• Déclencher les pop-ups au bon moment (scroll, clic, sortie…).
• Capturer des emails ou promouvoir une offre avec efficacité.
• Respecter l’expérience utilisateur tout en augmentant les conversions.

📢 Pourquoi utiliser les pop-ups ?

Les pop-ups sont très utiles pour :

• Capturer des emails (newsletter, lead magnet)
• Promouvoir une offre ou un événement
• Proposer un code promo
• Réduire le taux de rebond (pop-up de sortie)

⚙️ Créer un pop-up avec Elementor

1. Va dans Modèles > Popups
2. Clique sur “Ajouter un nouveau”
3. Choisis un modèle prêt à l’emploi ou commence de zéro
4. Donne un nom à ton pop-up (ex : Offre d’inscription)

🔧 Contenu d’un pop-up efficace

• Titre accrocheur : une promesse ou un avantage clair
• Texte bref : pas plus de 2-3 lignes
• Formulaire : pour capturer un email (widget Formulaire)
• Bouton visible : avec un libellé engageant (“Je m’inscris”, “Oui je veux !”)
• Option de fermeture : icône X bien visible

🎯 Déclencheurs et conditions d’affichage

1. Clique sur “Publier” puis “Ajouter condition” > Choisis “Tout le site”
2. Ajoute des déclencheurs :
• Au bout de X secondes
• Au scroll (ex. 50%)
• Au clic sur un bouton
• À la sortie de la page (intention de quitter)
3. Ajoute éventuellement des règles avancées (par exemple : ne pas l'afficher plus d'une fois par jour)

🧪 Mise en pratique

• Crée un pop-up de capture d’email avec un message clair
• Ajoute une animation d’apparition légère (zoom, fade)
• Configure l’apparition après 5 secondes sur la page d’accueil
• Teste le pop-up sur mobile et desktop

⬆️ Retour au sommaire

Module 8 : Créer un tunnel de conversion simple (landing page + pop-up)

🎯 Objectifs pédagogiques :

• Comprendre les éléments clés d’un tunnel de conversion.
• Créer une landing page efficace avec Elementor Pro.
• Intégrer un pop-up déclenché stratégiquement.
• Inciter l’utilisateur à passer à l’action (s’inscrire, acheter, réserver).

🔄 Qu’est-ce qu’un tunnel de conversion ?

Un tunnel de conversion est une suite logique de pages et d’interactions dont le but est de transformer un visiteur en prospect ou en client. Le plus simple commence souvent par :

• Une landing page (page d’atterrissage)
• Un pop-up ou formulaire intégré pour capter les coordonnées
• Un email de confirmation ou une redirection

📄 Créer la landing page

1. Crée une nouvelle page nommée “Offre spéciale”, “Inscription gratuite”, etc.
2. Choisis le modèle de page “Élémentor pleine largeur”
3. Structure la page comme suit :

• Titre percutant
• Sous-titre ou bénéfice principal
• Liste de bénéfices ou points clés
• Bouton d’appel à l’action qui déclenche le pop-up
• Preuves sociales (avis, logos, témoignages)

📩 Intégrer le pop-up au tunnel

1. Crée un pop-up depuis Modèles > Popups
2. Ajoute un formulaire de capture (nom, prénom, email)
3. Configure l’action après envoi : redirection vers une page “Merci” ou envoi d’un email
4. Dans les paramètres du bouton de la landing page, choisis :
   “Lien > Dynamique > Actions Elementor > Pop-up” et sélectionne le pop-up

🎯 Conseils pour convertir

• Sois clair sur la promesse de ton offre
• Utilise des visuels qui renforcent ton message
• Limite les distractions : en-tête/pied de page allégés ou absents
• Optimise le bouton : couleur contrastée, texte engageant
• Ajoute une preuve sociale ou un élément de réassurance

🧪 Mise en pratique

• Crée une landing page simple et claire avec Elementor Pro
• Ajoute un bouton qui déclenche un pop-up de capture
• Configure le formulaire pour envoyer les données par mail
• Teste l’ensemble du tunnel (formulaire + redirection)

⬆️ Retour au sommaire

Module 9 : Personnalisation avancée avec les conditions dynamiques

🎯 Objectifs pédagogiques :

• Comprendre les fonctionnalités dynamiques d’Elementor Pro.
• Afficher du contenu conditionnel selon le contexte ou l’utilisateur.
• Utiliser les balises dynamiques pour automatiser l’affichage.
• Créer des expériences personnalisées et contextuelles.

🔍 C’est quoi le contenu dynamique ?

Le contenu dynamique permet d’afficher automatiquement des données issues de WordPress ou personnalisées, comme :

• Le nom de l’auteur ou du visiteur
• La date actuelle
• Le titre ou le contenu d’un article
• Des champs personnalisés (Custom Fields)

⚙️ Utiliser les balises dynamiques

Dans Elementor Pro, de nombreux widgets proposent une icône de base de données (⚙️) à côté des champs de texte. Clique dessus pour :

• Insérer le titre de la page automatiquement
• Afficher la date de publication ou de modification
• Utiliser le nom de l’utilisateur connecté

🎛️ Affichage conditionnel (Display Conditions)

Dans le Theme Builder, tu peux configurer des conditions d’affichage pour :

• Afficher une section uniquement sur certaines pages
• Créer plusieurs headers selon les types d’utilisateurs
• Montrer un bloc de contenu à un utilisateur connecté uniquement

🧰 Exemples concrets

• Afficher un message "Bonjour [Prénom]" aux membres connectés
• Insérer automatiquement le nom de l’auteur dans un encadré
• Utiliser ACF (Advanced Custom Fields) pour afficher des données produits ou projets
• Créer une fiche profil dynamique en fonction de l’utilisateur

🧪 Mise en pratique

• Insère un titre dynamique dans une page
• Ajoute un encadré visible uniquement pour les utilisateurs connectés
• Utilise ACF pour créer un champ personnalisé et l’afficher avec un widget dynamique
• Teste l’affichage en tant qu’utilisateur anonyme et connecté

⬆️ Retour au sommaire

Module 10 : Optimisation des performances et mise en ligne

🎯 Objectifs pédagogiques :

• Améliorer la vitesse de chargement du site créé avec Elementor Pro.
• Optimiser les images, les scripts et les polices.
• Vérifier que tout est prêt pour la mise en ligne.
• Publier un site finalisé et professionnel.

🚀 Pourquoi optimiser la performance ?

Un site rapide améliore l’expérience utilisateur, le référencement SEO et le taux de conversion. Elementor, bien que puissant, peut générer du code lourd si mal configuré.

🧼 Optimisations à faire avant publication

• Compresser les images (via TinyPNG, ShortPixel, ou Smush)
• Réduire les polices (éviter de charger trop de variantes Google Fonts)
• Nettoyer les pages inutilisées et supprimer les brouillons
• Optimiser les widgets (éviter les sections trop complexes ou doublées)

⚙️ Plugins utiles pour la vitesse

• LiteSpeed Cache – Caching et optimisation complète (si serveur compatible)
• Autoptimize – Minification CSS/JS et gestion des polices
• Asset CleanUp – Charger les scripts uniquement là où c’est nécessaire

📊 Tester les performances

• Google PageSpeed Insights
• GTmetrix
• Pingdom Tools

Analyse les points à améliorer, notamment sur mobile.

✅ Checklist avant mise en ligne

• Logo, favicon et titres de pages définis
• Menus testés et fonctionnels sur mobile
• Formulaires testés (emails reçus)
• Liens internes vérifiés
• SEO de base en place (métas, titres H1, permaliens)
• Page 404 personnalisée
• Sauvegarde du site effectuée

🚀 Mettre le site en ligne

Si le site est encore en maintenance, retire le plugin “Maintenance Mode”. Si le nom de domaine est temporaire, configure le bon domaine depuis l’hébergeur et WordPress.

🧪 Mise en pratique

• Installe un plugin de cache + compresse toutes les images
• Teste ton site avec PageSpeed Insights
• Fais une sauvegarde complète avant publication
• Retire le mode maintenance et partage le lien du site final !

⬆️ Retour au sommaire