Elementor Pro : créer des pages professionnelles

Ce que vous saurez faire à la fin

1. Installer Elementor Pro et configurer un environnement de design optimal.
2. Construire des pages professionnelles (accueil, services, contact) en glisser-déposer.
3. Créer des templates réutilisables (en-tête, pied de page, archives) avec Theme Builder.
4. Concevoir des popups marketing performants pour conversion.
5. Optimiser les performances et la responsivité mobile pour le contexte africain.

Durée estimée : 5 à 7 heures pour un site vitrine de 6 pages.
Pré-requis : WordPress 6.x avec PHP 8.2+, mémoire PHP 256 Mo minimum, thème compatible (Hello Elementor recommandé), licence Elementor Pro Essential 59 USD/an (~36 000 FCFA) ou Advanced 99 USD/an (~60 000 FCFA), navigateur Chrome ou Firefox récent.

Étape 1 — Installer Elementor gratuit puis Elementor Pro

Allez dans Extensions > Ajouter, cherchez « Elementor Website Builder ». Installez et activez la version gratuite.

Achetez Elementor Pro sur elementor.com. Téléchargez le fichier elementor-pro.zip. Allez dans Extensions > Ajouter > Téléverser une extension, sélectionnez le ZIP, installez et activez. Allez dans Elementor > Licence, saisissez votre clé reçue par email pour recevoir les mises à jour.

Étape 2 — Installer le thème Hello Elementor

Hello Elementor est un thème ultra-léger (6 Ko) conçu pour ne pas interférer avec Elementor. Allez dans Apparence > Thèmes > Ajouter, cherchez « Hello Elementor ». Installez et activez.

Pour personnaliser sans casser le thème lors des mises à jour, créez un thème enfant. Téléchargez le thème enfant officiel sur github.com/elementor/hello-theme-child. Téléversez-le, activez-le. Vos modifications de functions.php et style.css seront préservées.

Étape 3 — Configurer les réglages globaux d'Elementor

Allez dans Elementor > Réglages. Onglet Général :

Types de publication compatibles : Pages, Articles
Désactiver les couleurs par défaut : Coché
Désactiver les polices par défaut  : Coché
Améliorer le chargement des assets : Coché (charge CSS/JS uniquement où nécessaire)

Onglet Avancé : passez « Méthode d'impression CSS » à « Fichiers externes » pour permettre la mise en cache navigateur.

Onglet Expériences : activez « Conteneur Flexbox » et « Conteneur Grid » qui remplacent les anciennes Sections (plus performants, moins de DOM).

Étape 4 — Définir les couleurs et typographies globales

Cliquez sur n'importe quelle page existante puis « Modifier avec Elementor ». En haut à gauche, cliquez sur le menu hamburger > Réglages du site > Style global > Couleurs globales.

Définissez votre charte (exemple PME sénégalaise) :

Primaire    : #00853F  (vert drapeau Sénégal)
Secondaire  : #FDEF42  (jaune drapeau)
Texte       : #1A1A1A  (presque noir)
Accent      : #E31B23  (rouge drapeau)
Arrière-plan : #FFFFFF

Puis Polices globales : choisissez « Inter » pour le corps (chargement rapide via Google Fonts) et « Poppins » pour les titres. Définissez les tailles : H1 48 px, H2 36 px, H3 28 px, Texte 16 px.

Étape 5 — Construire la page d'accueil

Créez une nouvelle page : Pages > Ajouter. Titre : « Accueil ». Cliquez sur « Modifier avec Elementor ».

Premier conteneur (Hero) :

1. Cliquez sur le « + » pour ajouter un conteneur, choisissez 1 colonne pleine largeur.
2. Onglet Style > Arrière-plan : type Image, sélectionnez une photo locale 1920×800 px (par exemple un paysage de Dakar). Position : Centre Centre. Taille : Cover.
3. Ajoutez un widget « Titre » : « Solutions digitales pour PME africaines ».
4. Ajoutez un widget « Éditeur de texte » : sous-titre.
5. Ajoutez un widget « Bouton » : texte « Demander un devis », lien vers /contact/, couleur primaire, taille « Grand ».

Réglez le padding du conteneur : 100 px haut et bas sur desktop, 60 px sur mobile.

Étape 6 — Ajouter une section Services avec icônes

Sous le Hero, ajoutez un nouveau conteneur de 3 colonnes (passez à 1 colonne sur mobile via les paramètres responsive).

Dans chaque colonne, glissez un widget « Encadré d'icône » :

• Icône : sélectionnez dans la bibliothèque (loupe pour SEO, panier pour e-commerce, etc.).
• Titre : « Création de site WordPress ».
• Description : 2-3 lignes maximum.
• Lien : vers la page service correspondante.

Onglet Style : couleur de l'icône en primaire, taille 60 px, alignement centré. Effet de survol : « Grow » avec transition 300 ms.

Étape 7 — Construire un formulaire de contact

Glissez le widget « Formulaire » (disponible avec Elementor Pro). Onglet Contenu :

1. Champs : Nom (texte, requis), Email (email, requis), Téléphone (téléphone, format +221 XX XXX XX XX), Sujet (choix multiple), Message (zone de texte, requis).
2. Bouton de soumission : texte « Envoyer », icône avion en papier.
3. Onglet Actions après envoi : ajoutez « Email » et « Redirection ».

Configurez l'email :

À          : contact@votreentreprise.sn
Sujet      : Nouveau message depuis [field id="sujet"]
Expéditeur : [field id="email"]
Message    :
  Nom : [field id="name"]
  Email : [field id="email"]
  Téléphone : [field id="tel"]
  Message :
  [field id="message"]

Pour la redirection, indiquez /merci/ (créez cette page).

Étape 8 — Créer un en-tête avec Theme Builder

Allez dans Templates > Theme Builder > En-tête > Ajouter un nouveau. Sélectionnez « En-tête » comme type, donnez le nom « Header principal ».

Construisez :

1. Conteneur de 2 colonnes : 30 % / 70 %.
2. Colonne gauche : widget « Logo du site » (téléversez votre logo SVG ou PNG transparent, hauteur 50 px).
3. Colonne droite : widget « Menu de navigation » (sélectionnez votre menu principal créé dans Apparence > Menus).

Style : fond blanc, ombre douce en bas (boîte ombre 0px 2px 10px rgba(0,0,0,0.1)). Position « Sticky » en haut sur scroll.

Cliquez sur « Publier ». Conditions d'affichage : « Site entier ».

Étape 9 — Créer un pied de page complet

Templates > Theme Builder > Pied de page > Ajouter un nouveau. Nom : « Footer principal ».

Conteneur de 4 colonnes :

1. Colonne 1 : logo + courte description de l'entreprise + adresse Dakar.
2. Colonne 2 : Liens « Navigation » (Accueil, Services, À propos, Blog, Contact).
3. Colonne 3 : Liens « Légal » (Mentions, CGV, Confidentialité, RCCM-N° XX-XX-XXX).
4. Colonne 4 : Coordonnées (téléphone +221, email, horaires) + icônes réseaux sociaux.

En dessous, conteneur 1 colonne avec un texte centré : « © 2026 Votre Entreprise. Tous droits réservés. NINEA : XXXXXXX. ». Publiez avec condition « Site entier ».

Étape 10 — Créer un template d'article unique

Theme Builder > Article unique > Ajouter un nouveau. Nom : « Article blog ».

Structure recommandée :

• Conteneur Hero : widget « Titre de l'article » + « Métadonnées de l'article » (auteur, date).
• Conteneur image : widget « Image en vedette » pleine largeur, hauteur 400 px.
• Conteneur 2 colonnes (70/30) : widget « Contenu de l'article » à gauche, widget « Articles populaires » et « Tags » à droite.
• Conteneur partage : widget « Partage » avec boutons WhatsApp, Facebook, LinkedIn (essentiels pour l'Afrique de l'Ouest).

Conditions : « Tous les articles ».

Étape 11 — Concevoir un popup de capture d'email

Allez dans Templates > Popups > Ajouter un nouveau. Nom : « Newsletter exit intent ».

Choisissez un modèle prédéfini ou partez de zéro. Construisez : titre accrocheur (« Recevez notre guide gratuit »), une image, un formulaire à 1 champ (email), un bouton « Télécharger maintenant ».

Onglet Conditions de déclenchement :

Afficher sur : Site entier
Déclencher  : Au signal de sortie (exit intent) sur desktop
              Après 30 secondes sur mobile
Fréquence   : Afficher au maximum une fois par session
              Cacher pendant 7 jours après fermeture

Connectez le formulaire à Brevo ou Mailchimp via les actions après envoi pour collecter les leads automatiquement.

Étape 12 — Optimiser pour mobile et tablette

Elementor permet d'ajuster chaque élément par appareil. En bas de l'éditeur, cliquez sur l'icône appareils. Switchez entre Desktop, Tablet et Mobile.

Pour chaque page, vérifiez :

1. Tailles de police : H1 48 px desktop → 32 px mobile, H2 36 px → 24 px.
2. Padding des conteneurs : 100 px desktop → 40 px mobile.
3. Colonnes multiples : passent automatiquement en 1 colonne sur mobile.
4. Images : utilisez l'option « Responsive » pour servir des tailles adaptées.
5. Boutons : texte plus court sur mobile (« Devis » au lieu de « Demander un devis »).

Cachez les éléments décoratifs lourds sur mobile via Avancé > Visibilité réactive > Cacher sur mobile.

Étape 13 — Optimiser les performances

Elementor peut alourdir un site. Mesures essentielles :

1. Activer le chargement amélioré des assets dans Elementor > Réglages > Expériences.
2. Compresser les images avec ShortPixel ou Imagify avant import.
3. Utiliser le format WebP via le plugin Converter for Media (gratuit).
4. Désactiver les widgets Elementor non utilisés via Elementor > Réglages > Expériences > Optimisation des éléments.
5. Cache avec WP Rocket ou LiteSpeed Cache.

Tableau de performance attendue après optimisation :

Métrique PageSpeed       | Avant    | Après
-------------------------|----------|----------
LCP (Largest Contentful) | 4,8 s    | 1,9 s
FID (First Input Delay)  | 180 ms   | 45 ms
CLS (Cumulative Layout)  | 0,28     | 0,02
Score mobile             | 42       | 88
Score desktop            | 68       | 96

Étape 14 — Sauvegarder et exporter vos templates

Vos designs sont précieux. Sauvegardez-les pour les réutiliser. Allez dans Templates > Templates enregistrés > Importer/Exporter.

Pour exporter un template : ouvrez-le dans l'éditeur Elementor, cliquez sur le menu hamburger > Enregistrer comme modèle. Donnez un nom, choisissez « Page » ou « Section ». Pour exporter le ZIP : cochez le template dans la liste, cliquez sur « Exporter ».

Créez aussi une sauvegarde complète du site avec UpdraftPlus avant chaque modification majeure. Stockez sur Google Drive ou un serveur distant chez votre hébergeur sénégalais.

Erreurs classiques

• Trop de widgets dans une page : au-delà de 50 widgets, les performances chutent. Découpez en plusieurs pages.
• Images non optimisées : téléverser une photo de 5 Mo détruit le score PageSpeed. Compressez avant.
• Polices Google Fonts en abondance : 2 polices maximum, sinon le rendu se dégrade.
• Animations excessives : ralentissent l'affichage et frustrent les utilisateurs sur connexion 3G.
• Pas de version mobile testée : 70 % du trafic web sénégalais est mobile.
• Modifier le thème parent au lieu de l'enfant : mises à jour effacent vos changements.
• Désactiver Elementor sans avoir migré : les pages perdent leur mise en forme. Toujours migrer ou conserver le plugin.

Checklist

[ ] WordPress, PHP 8.2+ et mémoire 256 Mo confirmés
[ ] Elementor + Elementor Pro installés et licence activée
[ ] Thème Hello Elementor + thème enfant actifs
[ ] Couleurs et polices globales définies (charte)
[ ] Conteneurs Flexbox/Grid activés (Expériences)
[ ] Page d'accueil construite avec Hero + Services + CTA
[ ] Formulaire de contact testé (envoi email reçu)
[ ] Header sticky publié via Theme Builder
[ ] Footer 4 colonnes avec mentions OHADA publié
[ ] Template article unique configuré
[ ] Popup newsletter actif avec exit intent
[ ] Design vérifié et ajusté sur Desktop/Tablet/Mobile
[ ] Images compressées (ShortPixel ou Imagify)
[ ] Format WebP activé via Converter for Media
[ ] Widgets non utilisés désactivés
[ ] Plugin de cache (WP Rocket) configuré
[ ] Score PageSpeed mobile > 80
[ ] Templates sauvegardés et exportés en ZIP
[ ] Sauvegarde UpdraftPlus complète effectuée
[ ] Numéro WhatsApp +221 et email contact testés