Vous développez votre site internet en 2025 et souhaitez configurer Elementor sur WordPress pour construire vos pages ? Ce guide complet rédigé par un expert utilisant ce plugin depuis 5 ans est fait pour vous ! Après avoir lu cet article, vous saurez comment correctement paramétrer ce constructeur pour en tirer le maximum de bénéfices et faire de votre site web un projet fiable, rapide et agréable à prendre en main.
En quelques années seulement, Elementor s’est établi comme l’une des solutions les plus performantes et versatiles dans l’écosystème WordPress. Que vous fassiez vos premiers pas dans la création web ou que vous soyez un webdesigner chevronné à la recherche d’outils perfectionnés, ce constructeur de pages offre un environnement complet qui transforme efficacement vos concepts créatifs en sites fonctionnels.
Sa force réside dans une interface visuelle intuitive, des possibilités de personnalisation exhaustives et une capacité d’adaptation remarquable avec l’ensemble de l’écosystème WordPress. Cette approche révolutionne complètement la façon dont les utilisateurs conçoivent, modifient et déploient leurs contenus en ligne, sans nécessiter de compétences techniques avancées.
Dans ce tutoriel détaillé, nous explorerons l’ensemble des aspects nécessaires à la maîtrise d’Elementor en 2025. Vous ne vous contenterez pas d’apprendre les bases d’installation et de configuration, mais découvrirez également comment exploiter pleinement ses fonctionnalités « no code », des plus simples aux plus sophistiquées.
Que votre objectif soit de créer des pages élégantes adaptées à tous les appareils, de personnaliser entièrement votre thème, ou d’intégrer des éléments interactifs comme des fenêtres pop-up ou des templates optimisés, chaque étape sera abordée avec précision. À la fin de votre lecture, vous disposerez de toutes les compétences nécessaires pour tirer parti d’Elementor et créer des sites web professionnels avec une facilité surprenante.
Qu'est ce qu'Elementor et pourquoi le choisir ?
Elementor est un plugin extrêmement populaire pour WordPress. Officiellement, il est indiqué comme étant un constructeur de site, ce qui implique qu’il va au-delà de la simple création de pages. En effet, les fonctionnalités qu’il propose permettent, entre autres :
- le contrôle global du thème via le Theme Builder
- Elementor permet de concevoir l’intégralité des modèles d’un site : en-têtes et pieds de page, pages d’archives, modèles de publication, templates pour les erreurs, etc.
- la gestion des conditions d’affichage
- Vous pouvez définir des règles précises pour chaque modèle, comme par exemple : afficher tel en-tête seulement sur les pages produit, utiliser un template différent pour la page d’accueil, appliquer une structure personnalisée aux articles de blog.
- une intégration complète au système de thème WordPress
- Elementor (notamment avec le thème Hello ou via des thèmes compatibles) peut remplacer entièrement le thème classique et donc, plus besoin de PHP pour créer des templates puisque tout peut être fait en glisser-déposer dans l’interface Elementor.
- un support de la navigation, des menus, des widgets globaux, etc.
- Des fonctionnalités comme la création de menus de navigation, l’ajout de widgets globaux réutilisables, la gestion de styles globaux (typographie, couleurs), etc.
En tant que développeur WordPress freelance, je recommande fortement à mes clients de considérer Elementor. C’est une solution fiable, pionnière sur le marché des constructeurs de sites et dont la robustesse n’est plus à questionner. La facilité avec laquelle les utilisateurs débutants sur WordPress peuvent le prendre en main en fait, à mon avis, le choix parfait pour la plupart des projets web.
Pour un développeur aguerri, Elementor offre également suffisamment de support pour des intégrations avancées afin de s’adapter aux besoins plus complexes des entreprises. Si vous êtes une TPE/PME et souhaitez construire un site WordPress avec Elementor, n’hésitez pas à passer par un développeur WordPress freelance pour construire le site parfait pour votre business.
En résumé :
| Élément | Constructeur de page | Constructeur de site (comme Elementor) |
|---|---|---|
| Mise en page d’un contenu | ✅ | ✅ |
| Création de modèles globaux | ✴️ (Parfois) | ✅ |
| Remplacement du thème | ❌ | ✅ |
| Contrôle total du site | ❌ | ✅ |
Version gratuite vs. Version Pro
Elementor existe en deux déclinaisons : une version gratuite accessible à tous, et une version Pro payante destinée aux utilisateurs exigeant davantage de contrôle et de fonctionnalités.
La version gratuite permet déjà de concevoir des pages esthétiques grâce à une sélection de widgets de base tels que les images, vidéos, titres, boutons ou encore sections. Elle convient parfaitement à des sites simples ou à des pages de présentation.
La version Pro, quant à elle, déverrouille tout le potentiel d’Elementor :
- Theme Builder pour personnaliser l’ensemble du site (en-tête, pied de page, modèles de contenu…)
- WooCommerce Builder pour les boutiques en ligne
- Widgets premium (formulaires, carrousels, tableaux de prix, appels à l’action…)
- Animations avancées et intégrations marketing (Mailchimp, HubSpot, etc.)
Cette version s’adresse aux professionnels, freelances ou agences cherchant une solution complète et flexible.
💼 Plans tarifaires disponibles :
Elementor Pro propose plusieurs formules selon les besoins de chacun, facturées annuellement :
- Essential – 4,99 €/mois : pour un site unique, avec 57 widgets Pro, le Theme Builder et le support 24/7.
- Advanced Solo – 6,99 €/mois : pour un site professionnel ou e-commerce, avec 86 widgets Pro, le Popup Builder, le code personnalisé et les fonctionnalités e-commerce.
- Advanced – 8,25 €/mois : pour jusqu’à 3 sites, avec les mêmes fonctionnalités avancées que le plan Solo.
- Expert – 16,99 €/mois : pour les freelances ou agences gérant jusqu’à 25 sites, avec support premium et toutes les fonctionnalités Pro.
👉 Tous les plans incluent le Theme Builder, le contenu dynamique, les intégrations marketing, la personnalisation CSS, ainsi que le support client. Seule la version Essential est limitée en nombre de widgets et de fonctionnalités avancées.
Comment fonctionne Elementor ? Comprendre les bases de l'éditeur visuel
Les conteneurs, au cœur de la nouvelle structure
Un conteneur est un élément structurel qui sert à regrouper d’autres éléments dans une page. Il remplace les anciennes sections et colonnes, en s’appuyant sur les standards du web comme Flexbox et Grid. Chaque conteneur peut contenir d’autres conteneurs ou des widgets (boutons, titres, images, etc.), ce qui permet une mise en page beaucoup plus légère et performante. Envie de tester les conteneurs ? Elementor vous propose de tester cette fonctionnalité en un seul clic sur leur site.
Disposition en grille : une nouvelle logique de design
Elementor prend désormais en charge le système de grille CSS, ce qui donne encore plus de contrôle sur l’alignement, la disposition et la répartition des contenus. Contrairement à l’ancienne méthode rigide en colonnes, la grille permet de créer des mises en page complexes tout en garantissant une compatibilité parfaite avec les bonnes pratiques du responsive design
Glisser-déposer, édition en temps réel et personnalisation visuelle
L’un des points forts d’Elementor reste son interface 100 % visuelle. Il suffit de choisir un widget dans la barre latérale, de le glisser dans un conteneur, puis de le configurer selon ses besoins. Tous les changements s’affichent en temps réel, ce qui accélère la phase de conception. Couleurs, typographies, espacements, effets de survol… tout est personnalisable sans quitter l’éditeur.
Des performances optimisées grâce aux conteneurs
Le passage aux conteneurs a également un impact positif sur les performances. En réduisant la profondeur du DOM et en s’appuyant sur des technologies modernes, Elementor permet de créer des pages plus légères et plus rapides à charger : un critère essentiel pour l’expérience utilisateur comme pour le référencement naturel.
Elementor → Réglages → Fonctionnalités → Conteneur (à définir sur actif)
Configurer Elementor après l'installation, mes Recommandations
Vous venez tout juste de compléter l’installation et devez maintenant configurer Elementor. Un popup devrait immédiatement s’afficher pour vous proposer différentes choses, dont le fait de nommer votre site ou de télécharger le thème Hello Elementor. Vous pouvez soit suivre les étapes indiquées, soit passer le processus d’installation. Il n’est absolument pas obligatoire de le compléter.
Étape 1 : Choisir une option pour activer les fonctionnalités Premium
En tant que Développeur Freelance WordPress, j’utilise de façon quotidienne Elementor. Il est à mon sens primordial de choisir une méthode pour activer les fonctionnalités Premium d’Elementor. Sans elles, ce constructeur de site perd tout son intérêt. Mais alors, quelles options s’offrent à vous pour activer Elementor Pro ?
Option 1 : Acheter une licence Elementor Pro (le choix évident, mais pas le seul)
C’est la solution la plus courante, et à première vue, la plus évidente. Lorsque l’on souhaite accéder aux fonctionnalités avancées d’un logiciel, il paraît logique d’acheter une licence directement auprès de l’éditeur.
Cette approche présente plusieurs avantages : en plus de débloquer l’ensemble des fonctionnalités de la version Pro, vous bénéficiez d’un accès officiel au support client, aux mises à jour régulières et à la documentation officielle. Vous soutenez également le développement continu de l’outil.
Cependant, cette option n’est pas la seule qui s’offre à vous. D’autres alternatives existent, selon votre budget, vos besoins techniques ou votre mode de fonctionnement et elles méritent d’être connues, notamment si vous gérez plusieurs sites ou si vous travaillez en agence.
Option 2 : Utiliser ProElements – une alternative gratuite, quasi identique à Elementor Pro
Moins connue, mais particulièrement intéressante, cette solution repose sur ProElements, une version dérivée d’Elementor Pro, librement distribuée sous licence GPLv3 (la même licence open source que celle utilisée par WordPress).
ProElements reprend la quasi-totalité des fonctionnalités de la version Pro officielle : les widgets avancés, le constructeur de thèmes (Theme Builder), le générateur de popups, le constructeur de formulaires, l’éditeur de WooCommerce, les effets de défilement, les polices personnalisées, les règles d’affichage conditionnel, le CSS global, et bien d’autres outils essentiels pour concevoir des sites professionnels.
Pourquoi est-ce possible ?
Parce qu’Elementor Pro, en tant que plugin WordPress, est légalement soumis à la licence GPL, qui autorise la réutilisation, la modification et la redistribution du code source. L’équipe derrière ProElements s’appuie donc sur cette liberté pour proposer une version « libérée » d’Elementor Pro, sans verrou d’activation, et avec des mises à jour automatiques.
Ce qui n’est pas inclus
ProElements ne donne pas accès aux modèles prédéfinis (template kits) ni au support officiel d’Elementor. De plus, comme tout projet libre, il est proposé tel quel, sans garantie. En cas de problème technique, vous devrez donc compter sur vos compétences ou sur la communauté.
Une solution réservée aux utilisateurs avertis
ProElements peut être un excellent choix pour les développeurs freelance, les agences ou les utilisateurs avancés qui souhaitent profiter des fonctionnalités pro d’Elementor sans souscrire à une licence payante. Néanmoins, il est important de comprendre les implications légales et techniques avant de l’adopter dans un contexte professionnel.
Même si l’utilisation de ProElements est légalement permise grâce à la licence GPLv3, certains points doivent être pris en compte :
- Pas de marque « Elementor Pro » : redistribuer une version modifiée d’un plugin sous licence GPL est autorisé, mais sans utiliser les marques déposées. C’est pour cela que le nom “Elementor Pro” ne peut pas être utilisé par ProElements.
- Clause de non-responsabilité : ProElements est distribué sans garantie. Si quelque chose casse votre site, vous ne pourrez pas vous retourner contre le développeur.
Option 3 : Utiliser une licence partagée via un prestataire (solution confortable, mais risquée)
Étape 2 : Installer le thème léger et personnalisable, Hello Elementor
- Installez le thème Hello Elementor depuis le back-office (l’interface d’administration de votre site WP)
- Allez dans Apparences → Thèmes → Ajouter un thème
- Recherchez ensuite le thème Hello Elementor et cliquez sur Installer (pas la peine de l’activer, nous allons ensuite installer un thème enfant)
- Installez un thème enfant pour Hello Elementor
- Rendez-vous sur cette page GitHub d’un thème enfant préconfiguré pour Hello Elementor (ou recherchez Hello Elementor Child sur Google)
- Cliquez sur Code → Download ZIP
- Retournez dans l’onglet Ajouter un thème → Téléverser un thème → Choisir un fichier puis sélectionnez le fichier ZIP que vous venez de télécharger. Vous n’avez ensuite plus qu’à cliquer sur Installer maintenant et Activer.
Étape 3 : Tout préparer pour un développement fluide et structuré de votre site
Nous voilà maintenant au cœur de ce tutoriel : le paramétrage d’Elementor. Voici mes recommandations pour configurer de façon optimale votre constructeur de site :
1. Personnalisez le thème Hello Elementor
Dans votre back-office, rendez-vous dans Hello → Settings et cochez les paramètres suivants :
- Dans SEO and accessibility :
- Activez Disable description meta tag (si vous avez prévu d’installer un plugin SEO par la suite)
- Activez Disable skip links (si vous avez prévu d’installer un plugin d’accessibilité par la suite)
- Dans Structure and layout :
- Activez Disable theme header and footer
- Activez Hide page title
- Dans CSS and styling control :
- (optionnel – non recommandé pour débutants) Activez Deregister Hello style.css
- (optionnel – non recommandé pour débutants) Activez Deregister Hello theme.css
- Si vous activez ces paramètres, je vous recommande fortement d’appliquer le CSS suivant sur toutes vos pages en front-end (avec un plugin comme Admin and Site Enhancements par exemple). Il est aussi probable que vous soyez amené à rédiger du code CSS supplémentaire par la suite. En cas de doute, n’activez pas ces paramètres.
:where(:is(body,h1,h2,h3,h4,h5,h6,p)){margin:unset}
:where(:is(.elementor-widget-theme-post-content,.tutorial-summary) :is(h1,h2,h3,h4,h5,h6,p)){margin:revert}
p:has(.alignleft){float:left;padding:20px}
p:has(.alignright){float:right;padding:20px}
p:has(.aligncenter){text-align:center}
2. Configurez Elementor pour correspondre à vos besoins
Rendez-vous maintenant dans Elementor → Réglages → Général
- Cochez les cases pour les types de contenus pour lesquels vous souhaitez utiliser le constructeur de page d’Elementor. Si vous ne savez pas quoi choisir, cochez toutes les cases.
- Cochez Désactiver les couleurs par défaut
- Cochez Désactiver les polices par défaut
- Décochez Partage des données d’utilisation
Dans l’onglet intégrations, vous pouvez paramétrer vos connexions entre Elementor et d’autres outils. Cela s’avère extrêmement pratique pour configurer des outils nécessaires dans 99% des cas, comme reCAPTCHA V3.
- Pour ajouter reCAPTCHA V3 (outil de protection contre le spam pour vos formulaires), remplissez le formulaire reCAPTCHA V3 de Google puis intégrez les clefs privées et publiques données qui vous seront partagées
- Le libellé n’a pas d’importance, donnez un nom de votre choix. Par exemple : lucaspierrot.fr
- Choisissez sur la base d’un score (v3)
- Dans domaines, entrez le nom de votre domaine. Par exemple, pour ce site, le domaine est : lucaspierrot.fr
- Si une case Google Cloud Platform apparaît en dessous, n’en tenez pas compte.
- Cliquez ensuite sur envoyer et vous devriez recevoir vos Site Key et Secret Key. Copiez-les dans les cases correspondantes, dans l’onglet de paramétrage d’Elementor. Laissez le Score Threshold à 0,5 ou augmentez-le si vous recevez trop de spam.
Dans l’onglet Avancé, je vous recommande d’appliquer les paramètres suivants :
| Paramètre | Valeur | Description |
|---|---|---|
| Permuter de méthode de chargeur d’éditeur | Désactiver ❌ | Pour la résolution de conflits de configuration serveur. |
| Permettre les téléversements de fichier non filtré | Activer ✅ | Permet le téléversement de fichiers non filtrés (SVG & JSON inclus). Risque potentiel de sécurité. |
| Google Fonts | Choisissez ✴️ | Désactive le chargement des polices Google. Recommandé pour les polices personnalisées. |
| Form Submissions | Activer ✅ | Permet d’enregistrer les soumissions de formulaires dans une base de données interne. |
| Charger la prise en charge de Font Awesome 4 | Désactiver ❌ | Permet de s’assurer que les icônes Font Awesome 4 s’affichent correctement avec Font Awesome 5. |
| Balise de générateur | Désactiver ❌ | Indique les attributs utilisés pour créer une page à des fins analytiques. |
L’onglet Performance est assez important puisqu’il peut jouer un grand rôle dans l’optimisation de la vitesse de votre site. Voici mes recommandations (avec la version ProElements) :
| Paramètre | Valeur | Description |
|---|---|---|
| Méthode d’impression CSS | Fichier externe | Recommandé pour la performance : le CSS est placé dans un fichier externe. |
| Chargement optimisé des images | Activer ✅ | Applique fetchpriority="high" sur l’image LCP et loading="lazy" sur les autres images. |
| Chargement optimisé de Gutenberg | Activer ✅ | Réduit les scripts et styles inutilisés de l’éditeur Gutenberg pour améliorer la vitesse de chargement. |
| Chargement différé des images d’arrière-plan | Activer ✅ | Active le lazy loading pour les images d’arrière-plan, sauf la première. |
| Cache de l’élément | 3 jours | Durée de mise en cache des éléments pour accélérer le chargement des pages. |
Pour terminer la configuration des réglages, vous devez maintenant configurer l’onglet Fonctionnalités. Voici encore mes recommandations :
| Fonctionnalité | Statut | Description |
|---|---|---|
| Balisage optimisé | Actif ✅ | Réduit la taille du DOM en éliminant les balises HTML inutiles, potentiellement incompatible avec certaines extensions. |
| Mise en cache d’éléments | Actif ✅ | Affiche une copie d’un élément pour réduire les temps de chargement. |
| Menu | Actif ✅ | Créez des menus et mégamenus avancés avec des structures imbriquées. |
| Polices d’icônes « inline » | Actif ✅ | Diffuse les icônes sous forme de SVG sans charger les bibliothèques externes. |
| Points d’arrêt personnalisés supplémentaires | Inactif ❌ | Ajoutez jusqu’à six points d’arrêt personnalisés pour des conceptions réactives précises. |
| Conteneur | Actif ✅ | Créez des mises en page avancées avec Flexbox et Grid. |
| Load Google Fonts locally | Actif ✅ | Chargez les polices Google localement pour améliorer la vitesse et la confidentialité. |
| Default to New Theme Builder | Actif ✅ | Entrer dans le Theme Builder via le tableau de bord WP > Templates > Theme Builder ouvre par défaut le nouveau constructeur de thème. Vous pouvez toujours revenir à la version WP avec un simple clic. |
| En-tête & pied de page – Thème Hello | Inactif ❌ | Personnalisez et stylisez l’en-tête et le pied de page inter-site du thème Hello intégré depuis le panneau « Réglages du site » d’Elementor. |
| Éléments imbriqués | Actif ✅ | Créez une expérience utilisateur riche en plaçant des widgets dans des onglets « imbriqués ». Les widgets existants ne seront pas affectés. |
| Barre supérieure de l’éditeur | Actif ✅ | Découvrez le nouvel éditeur optimisé par React avec un design plus épuré et une disposition expérimentale. |
| Partage des données d’utilisation | Inactif ❌ | Devenez un contributeur en partageant des données non sensibles de l’extension et en recevant des mises à jour périodiques. |
3. Préparez les réglages du site via Elementor
- Vous devez obligatoirement définir les 4 couleurs principales de votre site. Par défaut, elles seront nommées Primary, Secondary, Text et Accent. Vous pouvez les renommer comme bon vous semble.
- Identifiez les couleurs que vous utiliserez le plus souvent sur votre site. Par exemple, deux couleurs utilisées pour colorier des fonds, et deux couleurs pour vos textes (1 pour chaque couleur de fond).
- Définissez ensuite les couleurs supplémentaires, si applicable à votre projet.
- Les polices globales ne doivent à mon sens pas correspondre au style de vos niveaux de titre. Vous ne devriez donc pas définir vos H1 jusqu’à H6 dans cet onglet mais plutôt définir des styles de police qui apparaissent régulièrement dans vos maquettes. Par exemple, dans la capture d’écran ci-dessous, l’élément ciblé par le point d’interrogation ne correspond à aucun niveau de titre mais il apparaît fréquemment sur les autres pages.
- La bonne méthode pour le reproduire facilement au moment de la conception des pages depuis Elementor est donc de le configurer via une police globale.
- C’est ici que vous pourrez définir le style par défaut de vos paragraphes, titres et liens textuels ainsi que leur couleur par défaut (pratique si vos textes ne doivent pas être en noir).
- Si vous constatez que le choix des polices est trop limité deux options s’offrent à vous :
- Réactivez les polices Google Font pour obtenir le catalogue complet des polices
- Téléchargez vos polices manuellement et uploadez les directement à votre site, dans votre médiathèque, et configurez les dans l’onglet Custom Fonts d’Elementor (dans le backoffice). Cette option offre les meilleures performances mais est plus complexe à mettre en place.
- Largeur du contenu : 1300px
- Marges interne du conteneur : 20px
- Écarts : 20px
- Sélecteur de titre de page (pas important) : h1 ou h1.entry-title
- Section étirée ajustée à : body (valeur par défaut, important)
- Mise en page par défaut : Thème
3. Définissez vos composants réutilisables dans le Constructeur de Thème
4. BONUS : Supprimer les formats d'image introduits par Elementor
// Retirer les formats d'images inutilisés
function remove_unused_image_sizes() {
remove_image_size('1536x1536');
remove_image_size('2048x2048');
}
add_action('init', 'remove_unused_image_sizes');
Conclusion
Elementor reste en 2025 l’un des outils les plus puissants pour créer des sites WordPress personnalisés sans écrire une seule ligne de code. Que vous optiez pour la version gratuite, la version Pro ou des alternatives comme ProElements, les possibilités offertes par ce constructeur de site sont vastes. De la gestion des thèmes à l’intégration de fonctionnalités avancées, Elementor permet de concevoir des sites web élégants, réactifs et performants.
En suivant les conseils de configuration présentés dans ce guide, vous êtes désormais armé pour tirer le meilleur parti de ce plugin incontournable. Besoin d’un accompagnement personnalisé ? En tant que développeur WordPress freelance, je peux vous aider à optimiser votre installation d’Elementor pour maximiser son potentiel. N’hésitez pas à me contacter pour discuter de votre projet.
