Définition
Elementor est un constructeur de pages *drag & drop* (glisser-déposer) qui s'installe comme extension sur WordPress. Concrètement, il remplace l'éditeur classique de WordPress — celui qui vous oblige à écrire du code ou à bricoler des shortcodes — par une interface visuelle où vous voyez votre page se construire en temps réel, exactement comme elle apparaîtra à vos visiteurs.
Pour un e-commerçant, Elementor est donc la couche qui se situe entre votre thème WordPress et votre boutique WooCommerce. Vous gardez WooCommerce pour la gestion des produits, des stocks et des paiements, mais vous utilisez Elementor pour dessiner vos landing pages, vos pages de vente, vos pages « À propos » ou vos tunnels de capture d'email.
Deux versions coexistent :
- Elementor Free : la version gratuite, disponible sur le dépôt officiel WordPress.
- Elementor Pro : la version payante (à partir de 59 $/an pour 1 site), qui débloque le *Theme Builder*, les widgets WooCommerce natifs, les formulaires avancés et les popups.
Analogie
Pensez à Elementor comme à Canva appliqué à votre site web.
Avec Canva, vous partez d'un template, vous faites glisser un bloc texte, vous redimensionnez une image, vous changez la couleur, et vous exportez. Avec Elementor, c'est la même logique : vous partez d'une page vierge ou d'un template, vous glissez un widget « Titre », un widget « Bouton », un widget « Produit WooCommerce », et vous publiez. La différence, c'est que le résultat n'est pas une image figée mais du HTML/CSS réel, indexable par Google et connecté à votre base de données produits.
Autre image utile : Elementor est au site WordPress ce qu'un page builder de Shopify (comme Shogun ou PageFly) est à une boutique Shopify. Même promesse : reprendre le contrôle du design sans dépendre d'un développeur.
Formule
La structure technique d'Elementor repose sur une hiérarchie en trois niveaux :
Page = Σ (Sections) → Σ (Colonnes) → Σ (Widgets)
Autrement dit :
- 1 Section = un bloc horizontal pleine largeur (ex. un hero banner)
- 1 Colonne = une subdivision interne de la section (ex. 2 colonnes : texte à gauche, image à droite)
- 1 Widget = un élément atomique (titre, image, bouton, prix, formulaire)
Exemple concret sur une landing page DTC :
Landing = Section_Hero (1 col) + Section_Bénéfices (3 cols) + Section_Preuve_Sociale (2 cols) + Section_CTA (1 col)
Côté performance, la formule à surveiller est :
Temps de chargement ≈ (Poids HTML + Poids CSS Elementor + Poids images) / Bande passante
Elementor génère par défaut 2 fichiers CSS supplémentaires (elementor-frontend.css et post-XXXX.css) et 2 fichiers JS. Sur une page bien construite, cela ajoute généralement entre 40 et 120 Ko au poids total.
Tableau comparatif
| Critère | Elementor | Gutenberg (natif WP) | Divi | WPBakery |
|---|---|---|---|---|
| Type | Drag & drop visuel | Éditeur par blocs | Drag & drop visuel | Drag & drop visuel |
| Version gratuite | Oui (solide) | Oui (incluse) | Non | Non |
| Prix Pro (1 site) | ~59 $/an | 0 $ | ~89 $/an | ~64 $ |
| Widgets WooCommerce | Oui (Pro) | Limités | Oui | Oui |
| Popups & Theme Builder | Oui (Pro) | Non | Oui | Partiel |
| Poids CSS moyen | 40–120 Ko | 5–30 Ko | 80–200 Ko | 100–250 Ko |
| Courbe d'apprentissage | Faible | Faible | Moyenne | Moyenne |
| Idéal pour | DTC, landing pages | Blogs, sites simples | Agences | Sites legacy |
Lecture DTC : si vous lancez une boutique WooCommerce et que vous voulez tester 5 landing pages en 2 semaines sans dev, Elementor Pro est le meilleur rapport vitesse/coût. Si vous visez un blog ultra-rapide ou un site vitrine minimaliste, Gutenberg suffit.
Applications concrètes en DTC / e-commerce
1. Landing pages produit pour le paid traffic
Vous recevez du trafic Meta Ads ou TikTok Ads. Vous créez une page dédiée avec Elementor : hero + bénéfices + avis clients + CTA achat. Objectif : un taux de conversion supérieur à la page produit WooCommerce par défaut. Sur les comptes bien optimisés, on observe souvent +20 à +40 % de CVR par rapport à une fiche produit standard.
2. Pages de capture email (lead magnet)
Widget Formulaire Elementor Pro + intégration Klaviyo ou Brevo. Vous proposez -10 % en échange de l'email. Coût d'acquisition email typique : 0,30 à 0,80 € par lead selon le secteur.
3. Upsell et cross-sell post-achat
Page de remerciement personnalisée avec Elementor, proposant un produit complémentaire. Sur un panier moyen de 45 €, un upsell bien placé peut ajouter 8 à 15 € de valeur moyenne.
4. Tests A/B rapides
Elementor Pro permet de dupliquer une page et de modifier uniquement le hero ou le CTA. Vous testez deux variantes en 48 h sans toucher au code.
5. Pages « Notre histoire » et branding
Pour les marques DTC qui misent sur la transparence (origine des matières, atelier, fondateur), Elementor permet de raconter visuellement sans dépendre d'un thème rigide.
Erreurs fréquentes
- Empiler trop de widgets : chaque widget ajoute du DOM et du CSS. Une page avec 80 widgets devient lente. Visez 30 à 50 widgets maximum par page.
- Utiliser Elementor pour tout : l'éditeur de produits WooCommerce n'est pas fait pour Elementor. Gardez WooCommerce pour les fiches produits, Elementor pour les pages marketing.
- Ignorer le responsive : Elementor propose des vues Mobile/Tablet/Desktop. Configurez systématiquement les 3 — plus de 60 % du trafic DTC vient du mobile.
- Surcharger les animations : les effets de scroll et les animations d'entrée ralentissent le rendu. À utiliser avec parcimonie sur les pages de vente.
- Oublier de désactiver les widgets inutilisés : dans Elementor > Réglages > Avancé, vous pouvez désactiver les widgets que vous n'utilisez pas. Gain typique : -15 à -30 Ko de CSS.
- Confondre Elementor et le thème : Elementor ne remplace pas votre thème. Il s'y superpose. Choisissez un thème léger (Hello Elementor, Astra, GeneratePress) pour éviter les conflits.
- Négliger le cache : sans WP Rocket, LiteSpeed Cache ou équivalent, Elementor peut faire chuter votre score PageSpeed. Avec un bon cache, on remonte souvent de 40 à 80 points sur mobile.
Termes liés
- WordPress : le CMS sur lequel Elementor s'installe.
- WooCommerce : l'extension e-commerce de WordPress, compatible nativement avec Elementor Pro.
- Gutenberg : l'éditeur par blocs natif de WordPress, alternative gratuite à Elementor.
- Theme Builder : fonctionnalité Elementor Pro qui permet de construire header, footer, pages produits et archives.
- Hello Elementor : thème minimaliste officiel, conçu pour fonctionner avec Elementor.
- Page Builder : catégorie d'outils à laquelle appartient Elementor (avec Divi, WPBakery, Brizy).
- CRO (Conversion Rate Optimization) : discipline qui consiste à optimiser les pages pour convertir plus, souvent via des tests Elementor.
- LCP (Largest Contentful Paint) : métrique Core Web Vitals sensible au poids des pages Elementor.