Comment utiliser Elementor sur WordPress (guide complet 2025)

Introduction

Elementor est l'un des constructeurs de pages les plus populaires pour personnaliser et améliorer l'apparence des sites WordPress. Avec plus de 10 millions d’installations actives et une utilisation sur plus d’un cinquième des sites WordPress, il s’impose comme une solution de référence pour les créateurs de sites, les freelances, les agences et les entreprises.

Contrairement à un simple éditeur de contenu, Elementor est une véritable plateforme de conception visuelle qui permet de créer des pages modernes, responsives et optimisées pour le référencement naturel. Grâce à son système de glisser-déposer, ses widgets, ses modèles préconçus et ses fonctionnalités avancées (création de templates réutilisables, builder de thème, conditions d’affichage, intégrations marketing…), vous pouvez concevoir un site professionnel sans écrire une seule ligne de code.

Dans ce guide complet, vous allez apprendre pas à pas comment utiliser Elementor sur WordPress de manière efficace, que vous soyez débutant ou déjà utilisateur de WordPress. Vous découvrirez :

• comment installer et configurer Elementor sur WordPress ;
• comment fonctionne l’éditeur visuel en front-end ;
• comment utiliser les sections, colonnes et widgets ;
• comment tirer parti des templates et des modèles prêts à l’emploi ;
• comment personnaliser finement le design (typographie, couleurs, mise en page) ;
• comment garder de bonnes performances et de bonnes pratiques SEO ;
• les principales différences entre Elementor gratuit et Elementor Pro.

L’objectif est que vous soyez capable, à la fin de cet article, de créer une page d’accueil complète, des pages internes cohérentes et des landing pages orientées conversion, tout en respectant les bonnes pratiques de WordPress.

Pré-requis avant d’utiliser Elementor

Avoir un site WordPress fonctionnel

Pour utiliser Elementor, vous devez d’abord disposer d’un site WordPress installé et accessible. Assurez-vous :

• d’utiliser une version récente de WordPress (idéalement la dernière version stable) ;
• d’avoir un hébergement compatible avec les exigences minimales de WordPress (PHP récent, base de données MySQL ou MariaDB, HTTPS activé) ;
• d’avoir un thème moderne et compatible avec les constructeurs de pages. Les thèmes officiels comme Hello Elementor, Astra, GeneratePress, Kadence ou Blocksy sont souvent recommandés pour un travail optimal avec Elementor.

Vérifier la compatibilité de votre hébergement

Elementor consomme davantage de ressources qu’un simple éditeur de texte, car il charge un éditeur visuel, des scripts et des styles avancés. Pour un fonctionnement fluide :

• privilégiez un hébergement WordPress optimisé (PHP 7.4 ou supérieur, idéalement PHP 8+) ;
• assurez-vous d’avoir au moins 128 Mo de mémoire PHP, voire 256 Mo pour des sites plus complexes ;
• utilisez un certificat SSL afin de proposer votre site en HTTPS, ce qui est préférable pour la sécurité et le SEO.

Installer Elementor sur WordPress

Elementor existe en deux versions : une version gratuite disponible dans le répertoire officiel des extensions WordPress, et une version payante (Elementor Pro) qui ajoute des fonctionnalités avancées comme le builder de thème, les popups ou encore les formulaires avancés.

Pour installer la version gratuite d’Elementor :

• connectez-vous à votre tableau de bord WordPress ;
• allez dans « Extensions » > « Ajouter » ;
• dans la barre de recherche, tapez « Elementor Website Builder » ;
• cliquez sur « Installer », puis sur « Activer ».

Une fois l’extension activée, vous verrez un nouveau menu « Elementor » apparaître dans la barre latérale de votre tableau de bord WordPress. À partir de là, vous pouvez commencer à créer des pages avec l’éditeur visuel.

Découvrir l’éditeur visuel d’Elementor

Accéder à l’éditeur Elementor

Pour créer une page avec Elementor, suivez ces étapes :

• dans le tableau de bord WordPress, allez dans « Pages » > « Ajouter » pour créer une nouvelle page, ou éditez une page existante ;
• donnez un titre à votre page (par exemple « Accueil » ou « Nos services ») ;
• enregistrez le brouillon si nécessaire ;
• cliquez sur le bouton « Modifier avec Elementor » situé en haut de l’éditeur ou à côté du titre de la page.

Vous êtes ensuite redirigé vers l’éditeur visuel d’Elementor, qui s’affiche en plein écran sur la partie front-end de votre site.

Comprendre la structure de l’interface

L’interface d’Elementor est conçue pour être intuitive, tout en donnant accès à un grand nombre d’options. Elle se compose principalement de deux zones :

• La barre latérale gauche : elle contient les widgets (éléments que vous pouvez ajouter à votre page), ainsi que les onglets de configuration d’un élément sélectionné (contenu, style, avancé). C’est ici que vous choisissez et configurez chaque bloc de votre page.
• La zone principale au centre : c’est l’aperçu en temps réel de votre page. Vous y glissez-déposez les widgets, organisez les sections et colonnes, et voyez instantanément le résultat de vos modifications.

Sur la barre latérale, vous trouverez également en bas un ensemble d’icônes utiles : paramètres de la page, historique des révisions, vue responsive (bureau, tablette, mobile), prévisualisation des modifications et bouton « Mettre à jour » pour sauvegarder.

Sections, colonnes et widgets : la base de la mise en page

La structure d’une page Elementor repose sur trois niveaux :

• Les sections : ce sont les grandes bandes horizontales qui structurent votre page (en-tête, bloc de présentation, témoignages, appel à l’action, etc.).
• Les colonnes : à l’intérieur d’une section, vous pouvez créer une ou plusieurs colonnes pour organiser votre contenu (par exemple, deux colonnes pour mettre une image à gauche et un texte à droite).
• Les widgets : ce sont les éléments de contenu (titre, texte, image, vidéo, bouton, formulaire, icônes, carrousel, etc.) que vous placez à l’intérieur des colonnes.

Pour créer une nouvelle section, cliquez sur le bouton « + » au centre de la page, choisissez une structure (1, 2, 3 colonnes ou plus), puis faites glisser les widgets depuis la barre latérale gauche vers les colonnes.

Utiliser les widgets essentiels d’Elementor

Widgets de base

La version gratuite d’Elementor fournit déjà un ensemble complet de widgets permettant de créer la plupart des pages standard :

• Titre : pour créer des titres de niveau H1, H2, H3… et structurer votre contenu.
• Texte : pour ajouter des paragraphes, listes et textes descriptifs.
• Image : pour insérer des visuels, logos, illustrations, avec options d’alignement et de lien.
• Vidéo : pour intégrer des vidéos YouTube, Vimeo ou hébergées sur votre serveur.
• Bouton : pour ajouter des appels à l’action (demande de devis, contact, téléchargement…).
• Icônes et icônes avec texte : idéals pour présenter des avantages, services ou fonctionnalités.
• Espacement et séparateur : pour gérer la respiration visuelle entre les blocs.
• Image de fond de section : via les options de style de la section.

Widgets avancés (surtout avec Elementor Pro)

Avec Elementor Pro, vous accédez à un panel plus large de widgets orientés conversion et marketing :

• formulaire de contact avancé (avec intégrations e-mailing) ;
• carrousel de témoignages ;
• prix, tableaux de prix et boîtes de services ;
• compte à rebours, barres de progression, animations ;
• widgets dynamiques pour afficher des contenus provenant de types de contenus personnalisés (CPT), champs personnalisés, etc.

Si vous débutez, commencez avec les widgets de base puis introduisez progressivement les widgets avancés, en particulier pour les pages de vente et de capture d’e-mails.

Travailler avec les templates et modèles prêts à l’emploi

Bibliothèque de modèles Elementor

Elementor propose une bibliothèque de templates prêts à l’emploi, conçus pour différents types de pages : page d’accueil, page À propos, services, pages de portfolio, blog, landing pages, pages de remerciement, etc. Cela vous permet de démarrer rapidement sans partir d’une page blanche.

Pour utiliser un template :

• dans l’éditeur Elementor, cliquez sur l’icône de dossier au centre de la zone principale ou sur « Ajouter un template » ;
• parcourez la bibliothèque de modèles ou utilisez le champ de recherche par mot-clé (par exemple « business », « restaurant », « coaching ») ;
• prévisualisez un modèle puis cliquez sur « Insérer » pour l’ajouter à votre page.

Une fois le template inséré, vous pouvez personnaliser tous les éléments : textes, images, couleurs, typographies, boutons, liens, etc.

Enregistrer vos propres modèles

Elementor permet également d’enregistrer n’importe quelle section ou page complète comme modèle afin de la réutiliser ailleurs sur votre site. C’est très utile pour garder une cohérence visuelle et gagner du temps.

Pour enregistrer un modèle :

• sélectionnez la section que vous souhaitez réutiliser ;
• cliquez sur l’icône de dossier ou le menu contextuel de la section ;
• choisissez « Enregistrer comme modèle » ;
• donnez un nom clair (par exemple « Bandeau hero accueil », « Section témoignages »).

Vous pourrez ensuite réinsérer ce modèle sur d’autres pages depuis l’onglet « Modèles » de la bibliothèque Elementor.

Templates et cohérence de marque

Pour un site professionnel, il est essentiel de garder une identité visuelle cohérente : mêmes styles de titres, même palette de couleurs, même style de boutons, marges et espacements homogènes. Les modèles prédéfinis doivent donc être adaptés à votre charte graphique.

Avant de multiplier les pages, prenez le temps de définir :

• une palette de couleurs principale (couleur dominante, secondaire, couleur d’accent) ;
• deux ou trois polices de caractères maximum (titres, textes, éventuellement accent) ;
• un style de boutons récurrent (forme, couleur, bordure, ombre, effet au survol).

Elementor permet de configurer ces éléments au niveau global, ce qui simplifie la maintenance et améliore l’homogénéité de votre site.

Personnalisation avancée avec Elementor

Onglets Contenu, Style et Avancé

Quand vous sélectionnez un widget, une colonne ou une section, la barre latérale gauche d’Elementor affiche trois onglets principaux :

• Contenu : pour gérer le texte, les images, les liens, l’alignement et les paramètres fonctionnels de l’élément.
• Style : pour tout ce qui concerne l’apparence (couleurs, typographie, arrière-plan, bordures, ombres, etc.).
• Avancé : pour les marges et paddings fins, la position, les animations d’entrée, le responsive, les classes CSS, les conditions d’affichage dans certains cas.

En combinant ces trois onglets, vous pouvez obtenir un contrôle très précis sur chaque détail de votre mise en page.

Gestion des marges, espacements et alignements

Un site agréable à parcourir repose souvent sur une bonne gestion des espaces blancs. Dans l’onglet « Avancé », vous pouvez ajuster :

• les marges externes (margin), qui entourent l’élément ;
• les marges internes (padding), qui créent de l’espace entre le contenu et le bord de l’élément ;
• l’alignement horizontal ou vertical de certains widgets, notamment les colonnes, images et boutons.

Pensez à utiliser les options de désynchronisation (petite icône de chaîne) pour définir des valeurs différentes selon les côtés (haut, droite, bas, gauche) quand c’est nécessaire.

Responsive design : adapter votre site au mobile

La majorité du trafic web se fait aujourd’hui sur mobile. Elementor propose des outils intégrés pour vérifier et ajuster le rendu de vos pages sur les différents appareils.

Dans la barre inférieure de l’éditeur, cliquez sur l’icône en forme de moniteur pour basculer entre les vues :

• bureau ;
• tablette ;
• mobile.

Vous pouvez alors adapter, pour chaque breakpoint, certains paramètres comme :

• la taille de la typographie ;
• les marges et espacements ;
• l’alignement du contenu ;
• l’ordre d’affichage de certaines colonnes ;
• l’affichage ou la dissimulation de certains blocs (par exemple cacher une grande image sur mobile).

Cette personnalisation responsive est essentielle pour offrir une bonne expérience utilisateur et éviter les problèmes de lisibilité sur smartphone.

Bonnes pratiques pour utiliser Elementor sur WordPress

Structurer le contenu pour le SEO

Elementor permet de structurer correctement vos pages pour le référencement naturel, à condition de respecter quelques bonnes pratiques :

• Un seul H1 par page, généralement réservé au titre principal de la page (souvent géré par le thème ou par un widget Titre distinct).
• Des sous-titres hiérarchisés (H2, H3, H4) pour organiser vos sections et faciliter la lecture, tant pour l’utilisateur que pour les moteurs de recherche.
• Un contenu textuel suffisamment riche sur les pages importantes (page d’accueil, pages de services, landing pages), avec des paragraphes clairs, des listes et des mots-clés naturellement intégrés.
• Des URLs propres configurées dans les réglages des permaliens de WordPress, en complément du travail fait avec Elementor.

Évitez de transformer chaque élément visuel en image contenant du texte. Privilégiez les vrais textes HTML pour que vos pages soient lisibles par les moteurs de recherche, les lecteurs d’écran et les outils de traduction.

Optimiser les images

Elementor facilite l’intégration d’images, mais c’est à vous de veiller à ce qu’elles soient optimisées pour la vitesse de chargement :

• compressez vos images avant de les téléverser (formats WebP, JPEG optimisés, PNG uniquement si nécessaire) ;
• n’utilisez pas des images beaucoup plus grandes que la taille réelle d’affichage ;
• renseignez systématiquement le texte alternatif (attribut alt) pour décrire brièvement l’image, ce qui est utile pour l’accessibilité et le SEO ;
• limitez le nombre de grandes images ou de carrousels lourds sur une même page.

Limiter le nombre de widgets et d’animations

Même si Elementor propose de nombreuses animations, effets et widgets, il est préférable de rester mesuré :

• utilisez les animations d’entrée avec parcimonie pour éviter de ralentir le site et de distraire l’utilisateur ;
• évitez de multiplier les sections très lourdes (fonds vidéos, nombreux carrousels, parallaxe sur toutes les sections) ;
• supprimez les widgets inutilisés et optimisez la structure de vos pages pour qu’elles restent légères.

Compatibilité avec les thèmes et extensions

Elementor est compatible avec la majorité des thèmes modernes et bien codés, mais certains anciens thèmes ou thèmes très lourds peuvent provoquer des conflits. Pour limiter les problèmes :

• choisissez un thème conçu pour fonctionner avec les constructeurs de pages ;
• évitez d’activer plusieurs constructeurs de pages en même temps sur un même site ;
• testez les nouvelles extensions sur un environnement de préproduction quand c’est possible, avant de les installer sur votre site en production.

Elementor gratuit vs Elementor Pro

Ce que permet la version gratuite

La version gratuite d’Elementor suffit pour créer des pages vitrines simples, des pages de présentation de services ou des pages de blog personnalisées. Elle inclut :

• le constructeur par glisser-déposer ;
• les sections, colonnes et principaux widgets (titres, textes, images, vidéos, boutons, icônes, séparateurs, etc.) ;
• des modèles de pages et de sections prêts à l’emploi ;
• le mode responsive et les réglages de base pour mobile ;
• les paramètres de style essentiels (couleurs, typographies, arrière-plans, bordures…).

Fonctionnalités supplémentaires d’Elementor Pro

Elementor Pro s’adresse aux utilisateurs qui souhaitent aller plus loin dans la personnalisation et l’automatisation. Parmi les apports majeurs, on trouve :

• Theme Builder : création de templates pour l’en-tête (header), le pied de page (footer), les modèles de pages, d’articles, d’archives, de 404, etc., avec conditions d’affichage.
• Form Builder : formulaires avancés avec champs conditionnels, intégrations avec des services d’e-mail marketing ou CRM, messages de confirmation personnalisés.
• Popups Builder : création de fenêtres pop-up ciblées pour la collecte d’e-mails, les promotions, les annonces importantes, avec règles d’affichage fines.
• Widgets dynamiques : affichage de contenus dynamiques provenant de types de contenus personnalisés, champs personnalisés, taxonomies, etc.
• Templates Pro : accès à une bibliothèque plus riche de modèles de pages et de blocs professionnels.

Le choix entre la version gratuite et Pro dépend de vos besoins : pour un simple site vitrine, la version gratuite peut suffire, tandis que pour un site complexe, multilingue, e-commerce ou axé conversion, Elementor Pro apporte un gain de temps et de flexibilité important.

Performance et maintenance d’un site Elementor

Mettre à jour Elementor et WordPress

Pour rester sécurisé et performant, votre site Elementor doit être maintenu à jour :

• mettez régulièrement à jour WordPress, Elementor et les autres extensions ;
• effectuez une sauvegarde avant les mises à jour importantes ;
• testez rapidement vos pages-clés après une mise à jour pour vérifier qu’aucun bloc ne s’est déstructuré.

Utiliser un système de cache

Les pages construites avec Elementor peuvent être légèrement plus lourdes que des pages entièrement codées à la main, surtout si vous utilisez de nombreux widgets. L’utilisation d’un plugin de cache et, si possible, d’un système de mise en cache côté serveur permet de :

• réduire le temps de chargement ;
• diminuer la charge sur le serveur ;
• améliorer le score des outils de performance et l’expérience utilisateur.

Nettoyer les pages et les modèles inutilisés

Avec le temps, il est courant de multiplier les modèles, sections test, brouillons de pages. Pour rester organisé et éviter les doublons :

• supprimez régulièrement les modèles que vous n’utilisez plus ;
• archivez ou supprimez les anciens brouillons devenus inutiles ;
• renommez clairement vos modèles pour les identifier rapidement (par type de page, par objectif, par client, etc.).

Exemple de création d’une page d’accueil avec Elementor

Étape 1 : préparer le contenu

Avant d’ouvrir Elementor, rassemblez :

• votre slogan ou proposition de valeur principale ;
• une courte présentation de votre activité ;
• vos principaux services ou offres ;
• des témoignages clients, avis ou logos de partenaires ;
• un appel à l’action clair (demande de devis, prise de rendez-vous, inscription à une newsletter).

Étape 2 : créer la structure de la page

Dans Elementor, structurez votre page d’accueil en plusieurs sections :

• une section « Hero » avec un titre accrocheur, un texte d’introduction et un bouton d’appel à l’action ;
• une section de présentation rapide de votre activité ;
• une section listant 3 ou 4 services principaux avec icônes ;
• une section témoignages clients ou avis ;
• une section présentant votre équipe, vos valeurs ou votre méthode de travail ;
• une section finale avec un appel à l’action fort (formulaire de contact ou bouton).

Étape 3 : appliquer votre identité visuelle

Utilisez les réglages globaux d’Elementor pour définir une fois pour toutes :

• les couleurs du site (primaire, secondaire, texte, accent) ;
• les typographies des titres et des paragraphes ;
• le style des boutons (forme, couleur, effet au survol).

Ensuite, appliquez ces styles à vos sections et widgets pour obtenir une page cohérente, esthétique et facile à maintenir.

Étape 4 : vérifier le rendu sur mobile

Avant de publier, testez votre page sur les vues tablette et mobile dans Elementor. Ajustez :

• la taille des titres et textes ;
• les espacements verticaux ;
• l’ordre des colonnes si nécessaire ;
• l’alignement des boutons et images.

Quand le résultat est satisfaisant, cliquez sur « Mettre à jour » puis testez la page sur de vrais appareils si possible.

FAQ : questions fréquentes sur Elementor

Elementor est-il gratuit ?

Elementor propose une version gratuite très complète, suffisante pour créer des pages vitrines, des pages de services, des pages de blog personnalisées et des landing pages simples. La version Pro est payante et ajoute des fonctionnalités avancées comme le builder de thème, les formulaires, les popups et des widgets supplémentaires.

Elementor ralentit-il mon site WordPress ?

Comme tout constructeur de pages, Elementor ajoute une couche d’abstraction et de styles, ce qui peut augmenter légèrement le poids des pages. En revanche, si vous optimisez vos images, utilisez un plugin de cache, évitez les effets inutiles et choisissez un bon hébergement, vous pouvez obtenir d’excellentes performances avec Elementor.

Puis-je utiliser Elementor avec n’importe quel thème WordPress ?

Elementor fonctionne avec la majorité des thèmes modernes, mais l’expérience sera meilleure avec un thème compatible et léger. Certains thèmes sont spécialement conçus pour Elementor et permettent de désactiver facilement les éléments de mise en page du thème pour laisser la main au constructeur.

Quel est l’avantage d’Elementor par rapport à l’éditeur de blocs Gutenberg ?

L’éditeur de blocs Gutenberg est intégré nativement à WordPress et progresse rapidement. Elementor, de son côté, offre une interface visuelle plus poussée, un système complet de widgets, une bibliothèque de templates riche et, avec la version Pro, un builder de thème très flexible. Le choix dépend de votre niveau technique, de vos besoins graphiques et de votre organisation de travail.

Puis-je revenir en arrière si je ne veux plus utiliser Elementor ?

Si vous désactivez Elementor, la structure avancée de vos pages disparaîtra et vous verrez surtout du contenu brut et des shortcodes résiduels qu’il faudra nettoyer ou réorganiser. Il est donc préférable de bien réfléchir avant de l’utiliser massivement sur un site existant. Pour un nouveau site, ce n’est en revanche pas un problème, car toute la structure est pensée dès le départ avec Elementor.

Conclusion

Elementor est aujourd’hui l’un des outils les plus puissants et accessibles pour créer des sites WordPress professionnels sans coder. En maîtrisant l’éditeur visuel, les sections, colonnes, widgets, templates et réglages responsive, vous pouvez concevoir des pages modernes, efficaces et adaptées à votre identité de marque.

En respectant les bonnes pratiques de performance, de structure et de contenu, Elementor devient un allié précieux pour développer un site à la fois esthétique, rapide et bien positionné dans les moteurs de recherche. Que vous vous contentiez de la version gratuite ou que vous optiez pour Elementor Pro, l’essentiel est de garder une approche structurée, centrée sur les besoins de vos visiteurs et les objectifs de votre site.