Elementor – Notre test & avis sur ce constructeur de page WordPress
Elementor est un constructeur de page visuel conçu pour WordPress, qui permet de créer des pages web sans avoir besoin de compétences en codage. Grâce à une interface intuitive en glisser-déposer, il simplifie la création de designs professionnels en un temps record. Que vous soyez débutant ou designer chevronné, Elementor offre une flexibilité incomparable, vous permettant de personnaliser chaque aspect de votre site avec précision.
L’un des principaux avantages d’Elementor est la rapidité avec laquelle vous pouvez transformer une page blanche en un site web élégant et fonctionnel. En plus de sa version gratuite, Elementor propose une version Pro qui déverrouille des fonctionnalités avancées comme des widgets premium, des outils de personnalisation supplémentaires et l’intégration directe avec des plugins comme WooCommerce. Cela fait d’Elementor une solution incontournable pour ceux qui souhaitent un contrôle total sur l’apparence et les performances de leur site WordPress, tout en restant simple d’utilisation.
Elementor est aujourd’hui le seul constructeur de page capable de véritablement concurrencer Divi Builder d’Elegant Themes. Avec plus de 2 millions d’utilisateurs dans le monde et traduit en 52 langues, il est constamment mis à jour et amélioré pour répondre aux besoins des utilisateurs, qu’ils soient débutants ou experts.
Dans cet article, nous allons explorer en profondeur les fonctionnalités clés d’Elementor, en commençant par la prise en main de son interface utilisateur. Nous verrons comment utiliser les widgets et sections pour créer des pages personnalisées. Ensuite, nous examinerons les outils avancés offerts par Elementor Pro pour personnaliser encore plus vos pages, notamment la création de headers, footers, et l’intégration de WooCommerce. Nous parlerons aussi de l’optimisation du design pour le responsive, afin que vos pages s’affichent parfaitement sur mobile et tablette.
Vue d’ensemble de l'interface d'Elementor
Lorsque vous lancez Elementor pour la première fois, vous êtes accueilli par une interface simple et intuitive. La majorité de l’écran est dédiée à l’aperçu en temps réel de la page que vous construisez. Sur la gauche, vous trouverez une barre latérale qui contient tous les outils et widgets nécessaires pour personnaliser votre site. Cette séparation claire entre la zone de conception et les outils rend l’interface facile à utiliser, même pour les utilisateurs novices.
La barre latérale d’Elementor propose des widgets prêts à l’emploi, allant des textes et images aux boutons et galeries. Ces widgets peuvent être glissés directement sur la zone de travail centrale, où vous pouvez les organiser au sein de sections et colonnes, offrant une liberté totale pour structurer votre page.
Barre latérale et widgets
Les widgets d’Elementor sont les blocs de base avec lesquels vous allez construire votre site. Ils incluent des éléments comme :
- Textes : Créez des zones de texte riches avec options de formatage.
- Images : Insérez et ajustez facilement vos visuels.
- Boutons : Ajoutez des appels à l’action avec des options de personnalisation avancées.
- Formulaires : Créez des formulaires de contact en quelques clics.
La version Pro ajoute encore plus de widgets avancés, comme des sliders, des carrousels, des menus déroulants, et des intégrations avec des outils tiers comme WooCommerce.
Zones de travail : Sections, colonnes et éléments
Elementor est structuré autour d’une hiérarchie simple :
- Sections : Elles constituent les blocs principaux qui divisent la page. Chaque section peut avoir plusieurs colonnes.
- Colonnes : Elles permettent de diviser une section en plusieurs zones verticales.
- Éléments : Ce sont les widgets que vous glissez dans les colonnes pour remplir votre page de contenu.
Grâce à cette structure modulaire, vous pouvez facilement déplacer, redimensionner et personnaliser chaque partie de votre page selon vos besoins. Elementor offre également une précision poussée dans l’alignement des éléments et la gestion des marges, ce qui permet d’obtenir un design cohérent et esthétique.
Les templates
L’une des forces d’Elementor réside dans sa bibliothèque de templates préconçus qui offrent une solution clé en main pour créer rapidement des pages web au design professionnel, sans repartir de zéro. Que vous travailliez sur une page d’accueil, un portfolio, ou même une page de vente, Elementor propose des centaines de modèles classés par catégorie.
Il existe des templates pour des pages complètes, mais aussi pour des éléments spécifiques de la page, appelés blocs. Ces blocs sont des sections pré-construites comme des en-têtes, des pieds de page, des formulaires de contact, ou encore des témoignages. Cela permet une personnalisation plus rapide et ciblée, en insérant seulement les sections nécessaires sans devoir utiliser un template de page entière.
Après avoir importé un template, vous pouvez commencer à modifier chaque section, colonne, ou widget en fonction de vos besoins. Vous pouvez changer les images, les textes, les couleurs, ou même ajouter de nouveaux éléments pour personnaliser davantage le design. Elementor permet également de sauvegarder vos propres pages ou sections en tant que templates réutilisables, ce qui est particulièrement utile pour maintenir une cohérence visuelle sur plusieurs pages de votre site.
Personnalisation des sections et colonnes
Dans Elementor, chaque page est construite autour d’une structure flexible qui repose sur des sections et des colonnes. Les sections sont les conteneurs principaux qui divisent la page en différents blocs horizontaux, tandis que les colonnes subdivisent ces sections pour organiser le contenu de manière plus précise. Cette approche modulaire permet de concevoir des mises en page complexes tout en gardant un contrôle total sur chaque élément.
Elementor permet également de réutiliser des sections et des colonnes personnalisées sur d’autres pages de votre site. Une fois que vous avez créé un design que vous souhaitez répéter, vous pouvez sauvegarder la section ou la colonne en tant que template réutilisable, que vous pouvez facilement sur une autre page.
Les sections
Chaque section peut être personnalisée en termes de taille, de style et de disposition. Les options disponibles pour personnaliser les sections incluent :
- Largeur et hauteur : Ajustez la largeur de la section à pleine page ou en fonction d’une taille personnalisée. Vous pouvez aussi régler la hauteur pour obtenir des effets visuels distincts.
- Arrière-plan : Choisissez une couleur unie, une image, un dégradé ou même une vidéo en arrière-plan pour donner un style unique à chaque section.
- Effets de bordure et ombres : Ajoutez des bordures autour de vos sections ou appliquez des ombres pour donner de la profondeur à votre design.
- Effets de mouvement : Elementor permet également d’ajouter des animations et des effets de défilement, tels que l’effet parallaxe, pour dynamiser les sections.
Les colonnes
Les colonnes sont utilisées pour structurer l’intérieur des sections, en organisant le contenu en plusieurs zones verticales. Chaque colonne peut être redimensionnée individuellement pour obtenir un ratio précis et un alignement parfait. Voici quelques-unes des personnalisations possibles :
- Largeur des colonnes : Ajustez la taille de chaque colonne en fonction de vos besoins, soit manuellement en tirant sur les bordures, soit en définissant un pourcentage spécifique.
- Alignement vertical : Vous pouvez choisir l’alignement des éléments dans une colonne (haut, centre, bas) pour mieux contrôler la disposition visuelle.
- Espacement : Gérez les marges intérieures (padding) et extérieures (margins) pour chaque colonne afin de contrôler l’espace entre les éléments.
Les widgets d'Elementor
Les widgets d’Elementor vous permettent d’ajouter différents types de contenu comme du texte, des images, des boutons, des vidéos, des formulaires, et bien plus encore sur vos pages. Ces éléments sont essentiels pour structurer et enrichir vos publications de manière visuellement attractive.
Les Widgets de base
Les widgets de base sont accessibles dans la version gratuite d’Elementor et couvrent la majorité des besoins pour créer une page fonctionnelle. Parmi les plus utilisés, on retrouve :
- Texte : Permet d’ajouter des zones de texte avec des options de personnalisation avancées (police, taille, couleur).
- Images : Ajoutez et ajustez des images, avec des contrôles pour les dimensions, l’alignement et l’effet hover.
- Boutons : Créez des appels à l’action personnalisables, avec des options de style (couleur, icône, texte).
- Icônes : Insérez des icônes personnalisées pour enrichir votre contenu.
- Vidéos : Intégrez des vidéos YouTube, Vimeo ou des fichiers auto-hébergés directement sur votre page.
Ces widgets de base suffisent pour créer des pages web fonctionnelles et esthétiques, surtout pour des projets simples ou personnels.
Les widgets avancés fournit avec Elementor Pro
Avec Elementor Pro, vous accédez à une gamme étendue de Pro Widgets qui déverrouillent des fonctionnalités plus avancées. Ceux-ci sont parfaits pour les utilisateurs qui cherchent à pousser la personnalisation de leurs sites et à intégrer des fonctionnalités plus complexes. Parmi les widgets Pro, on retrouve :
- Sliders : Créez des diaporamas d’images ou de contenu avec des options de transitions fluides.
- Carrousels : Affichez des témoignages, des logos, ou des articles sous forme de carrousel défilant.
- Formulaires avancés : Formulaires de contact personnalisés, intégration avec des services comme MailChimp, ActiveCampaign, etc.
- Call-to-action : Des widgets dédiés pour inciter les utilisateurs à cliquer sur des offres ou services spécifiques.
- Pop-ups : Créez et personnalisez des pop-ups sans installer d’extensions supplémentaires.
Ces widgets permettent de créer des sites web encore plus dynamiques et interactifs.
Theme Elements (Éléments de thème)
Les éléments de thème permettent aux utilisateurs d’Elementor Pro de personnaliser l’apparence et la structure globale de leur site WordPress. Ils sont conçus pour offrir un contrôle total sur chaque partie du thème, en vous permettant de créer des headers, footers, et même des pages d’archives personnalisées. Voici quelques exemples :
- Header & Footer : Créez et personnalisez l’en-tête et le pied de page de votre site avec une totale flexibilité.
- Menu de navigation : Un widget permettant de construire et styliser des menus de navigation dynamiques.
- Articles récents : Affichez une liste d’articles récents avec des options de mise en page et de design.
- Titre de page dynamique : Insérez des titres dynamiques qui s’adaptent aux pages sur lesquelles ils sont affichés.
Ces éléments permettent de faire d’Elementor non seulement un constructeur de page, mais également un outil de personnalisation complète de votre thème WordPress.
WooCommerce Widgets
Pour ceux qui utilisent WooCommerce avec Elementor Pro, une série de widgets spécifiques est disponible pour construire et styliser vos pages de boutique en ligne. Ils permettent d’intégrer des produits et des fonctionnalités de commerce électronique directement dans vos pages Elementor. Voici quelques exemples :
- Produit individuel : Affichez un produit WooCommerce spécifique avec toutes les informations nécessaires (prix, description, image).
- Liste de produits : Présentez une liste de produits filtrés ou triés selon vos préférences (nouveautés, promotions, etc.).
- Panier : Ajoutez un widget de panier directement dans vos pages pour afficher le contenu du panier aux utilisateurs.
- Validation de commande : Personnalisez la page de validation de commande pour un processus d’achat fluide et sur mesure.
Ces widgets sont essentiels pour créer une boutique personnalisée et professionnelle sur un site WordPress fonctionnant avec WooCommerce.
Ajouter des widgets sur une page
Pour ajouter un widget, il suffit de le sélectionner dans la barre latérale et de le glisser dans la section ou colonne de votre choix. L’interface d’Elementor vous permet de voir en temps réel où le widget sera placé. Vous pouvez ensuite ajuster sa position à l’aide des marges, des colonnes, et des alignements.
Personnalisation des Widgets
Une fois le widget en place, vous pouvez cliquer dessus pour ouvrir les options de personnalisation dans la barre latérale. Chaque widget a ses propres paramètres, vous permettant de modifier le contenu, le style, les dimensions, les couleurs, les animations, les marges, et bien plus encore.
- Le contenu : Modifiez les textes, insérez des images, ou intégrez des vidéos. Par exemple, dans le widget de bouton, vous pouvez changer le texte du bouton ainsi que son lien.
- Le style : Chaque widget peut être personnalisé au niveau de l’apparence. Vous pouvez ajuster la couleur de fond, les bordures, les ombres, la typographie, et bien plus encore. Par exemple, pour un widget de texte, vous pouvez changer la police, la taille, l’espacement des lettres, ou encore la couleur.
- Les animations et effets : Elementor permet d’ajouter des animations de type hover (survol) et des effets de défilement. Par exemple, vous pouvez définir un changement de couleur pour un bouton lorsqu’un utilisateur passe la souris dessus, ou ajouter une animation de défilement pour rendre l’apparition d’un texte plus dynamique.
- Marges et remplissages (paddings) : Ajustez l’espace intérieur (remplissage) et extérieur (marge) des widgets pour mieux structurer votre mise en page.
- Positionnement personnalisé : Vous pouvez définir le positionnement d’un widget comme étant relatif ou absolu, ce qui vous permet de placer un widget à un endroit spécifique de votre page, indépendamment de la grille.
- Effets d’ombre et de bordure : Appliquez des ombres portées et des bordures personnalisées pour donner plus de profondeur à vos widgets.
- Sliders et carrousels : Personnalisez l’apparence et les transitions entre les images ou les éléments affichés.
- Formulaires : Elementor Pro permet de créer des formulaires entièrement personnalisables avec des champs multiples, des validations, et des intégrations avec des outils de marketing.
- Pop-ups : Créez des pop-ups entièrement personnalisés qui s’affichent selon vos conditions prédéfinies, comme des délais, des actions de l’utilisateur, ou des pages spécifiques.
Utilisation du CSS personnalisé pour les widgets
Bien qu’Elementor offre de nombreux outils visuels pour concevoir des pages sans avoir à coder, il permet également aux utilisateurs avancés d’ajouter du CSS personnalisé pour un contrôle encore plus précis sur le style de leur site. Cela est particulièrement utile si vous souhaitez appliquer des modifications spécifiques à certains éléments ou sections qui ne sont pas disponibles directement via l’interface d’Elementor.
Pour appliquer du CSS personnalisé, Elementor Pro vous offre plusieurs options :
- À l’échelle de la page : Vous pouvez ajouter du CSS directement à une page spécifique en cliquant sur le bouton « Réglages » (icône d’engrenage) dans l’éditeur et en allant dans l’onglet « Avancé », où vous trouverez un champ dédié pour insérer votre CSS.
- Pour une section ou un widget spécifique : Pour plus de granularité, vous pouvez ajouter du CSS à un élément particulier comme une section, une colonne ou un widget. Sélectionnez l’élément, rendez-vous dans l’onglet « Avancé », puis dans « CSS personnalisé ». Là, vous pouvez insérer vos règles CSS pour cibler cet élément uniquement.
Le constructeur de thèmes
Elementor ne se limite pas à la création de pages individuelles. Avec l’option Constructeur de thèmes (disponible dans Elementor Pro), vous pouvez concevoir des en-têtes, des pieds de page, des pages d’articles, des pages d’archives, des résultats de recherche, et bien plus encore. Avec la possibilité d’ajouter des modèles pour chaque section, vous avez un contrôle total sur l’apparence de votre site.
Header (En-tête)
Dans Elementor, la création d’un Header (en-tête) personnalisé est simple grâce au bouton « Add New ». Vous pouvez y insérer des éléments tels que le logo, les menus de navigation, des boutons d’appel à l’action, et des icônes sociales. Une fois conçu, vous pouvez choisir sur quelles pages cet en-tête sera appliqué.
Footer (Pied de page)
Le Footer (pied de page) suit un processus similaire. En cliquant sur « Add New », vous pouvez créer un pied de page personnalisé avec vos informations de contact, des liens vers les principales pages de votre site, ou encore des icônes pour vos réseaux sociaux.
Search Results (Résultats de recherche)
Les pages de résultats de recherche affichent les articles ou pages correspondant aux termes recherchés par les visiteurs. Avec Search Results, vous pouvez personnaliser la mise en page de ces résultats.
Single Post (Article unique)
Pour les pages d’articles de blog, le modèle Single Post permet de personnaliser l’apparence de chaque article en ajoutant des éléments comme le titre, l’image à la une, le contenu de l’article, l’auteur, et la date de publication.
Single Page (Page unique)
La Single Page vous permet de concevoir le modèle des pages statiques sur votre site, comme une page « À propos » ou « Contact ».
Archive (Page d'archives)
Les pages d’archives regroupent plusieurs articles ou produits en fonction d’une catégorie ou d’un tag. Elementor vous permet de personnaliser l’apparence de ces pages d’archives via l’onglet Archive.
Single Product (Produit unique)
Si vous utilisez WooCommerce, Elementor vous permet de créer des modèles de pages spécifiques pour chaque produit. Avec la fonction Single Product, vous pouvez afficher les détails du produit, les images, la description, le prix, et les avis clients d’une manière visuellement cohérente.
Products Archive (Archives des produits)
L’archive des produits regroupe tous vos articles de vente dans WooCommerce. En utilisant Products Archive, vous pouvez créer un modèle personnalisé pour afficher les produits selon les catégories, les promotions ou d’autres critères.
Loop Item (Élément de boucle)
Le Loop Item vous permet de concevoir un modèle de présentation pour les éléments répétés dans des listes, comme les produits ou les articles. Vous pouvez définir l’apparence de chaque élément d’une liste dans une structure en boucle.
Error 404 (Erreur 404)
La page Error 404 s’affiche lorsqu’une page demandée n’est pas trouvée sur votre site. Elementor permet de concevoir une page 404 sur mesure pour offrir une expérience plus engageante à vos visiteurs, même lorsqu’une page est manquante. Vous pouvez ajouter des liens de redirection ou des suggestions d’autres pages pertinentes.
Optimisation du design pour le responsive
Dans un monde où une grande partie du trafic web provient des appareils mobiles, il est essentiel que votre site soit parfaitement lisible et fonctionnel sur tous types d’écrans. Elementor intègre des outils puissants qui facilitent l’optimisation responsive de vos pages, que ce soit pour mobile, tablette ou ordinateur. Cela garantit que votre site s’adapte automatiquement à la taille de l’écran de chaque utilisateur, offrant ainsi une expérience fluide.
Elementor vous permet de basculer rapidement entre les différents modes d’affichage pour voir comment votre page apparaîtra sur un mobile, une tablette ou un ordinateur de bureau. Grâce à ces vues, vous pouvez ajuster vos mises en page spécifiquement pour chaque appareil. Les options disponibles incluent :
- Caché sur certains appareils : Elementor permet de cacher certains éléments sur mobile, tablette ou bureau. Par exemple, vous pouvez choisir d’afficher une image uniquement sur les ordinateurs de bureau, mais de la cacher sur les mobiles si elle prend trop de place.
- Ajustement des marges et des paddings : Les marges et les espacements peuvent être ajustés pour chaque appareil individuellement, garantissant que votre mise en page reste harmonieuse.
- Taille de police spécifique : Vous pouvez définir des tailles de texte différentes pour mobile et bureau, afin d’améliorer la lisibilité sur tous les appareils.
- Ajuster les tailles d’image : Réduisez automatiquement la taille des images pour les appareils mobiles afin d’optimiser le temps de chargement et la performance.
Les colonnes et sections, qui constituent la structure de votre page, peuvent également être ajustées pour chaque appareil. Elementor permet :
- Colonnes empilées : Pour les appareils mobiles, vous pouvez choisir d’empiler les colonnes verticalement, garantissant une meilleure lisibilité et une navigation plus fluide.
- Largeur des colonnes : Vous pouvez redimensionner les colonnes pour chaque appareil afin d’éviter qu’elles ne se chevauchent ou qu’elles n’apparaissent trop petites sur un mobile.
Histoire des révisions
Elementor propose un historique des révisions qui vous permet de revenir en arrière et restaurer une version antérieure de votre design, ce qui permet une plus grande flexibilité et réduit le risque de perdre des ajustements importants. Chaque modification apportée à la page est automatiquement enregistrée et visible dans l’historique des révisions.
Elementor AI
Avec les progrès rapides de l’intelligence artificielle (IA), Elementor a intégré des outils basés sur l’IA pour améliorer encore plus l’expérience de création de sites. Elementor AI permet de rendre la conception et la personnalisation de pages encore plus intuitives et rapides, en automatisant certaines tâches répétitives tout en offrant des suggestions intelligentes pour améliorer le design.
Création de contenu assistée
L’une des fonctionnalités clés d’Elementor AI est la génération automatisée de contenu texte. Que vous ayez besoin d’une introduction, d’une description de produit, ou de recommandations SEO, Elementor AI est capable de proposer des suggestions de textes pertinents basés sur le contexte de la page ou les mots-clés que vous indiquez.
Cela permet d’accélérer la création de contenu sans compromettre la qualité.
Amélioration du design
Elementor AI va au-delà du texte et peut également analyser la mise en page de votre page pour proposer des améliorations de design. Il peut vous suggérer des ajustements sur les couleurs, les polices, et même les alignements pour rendre la page plus attrayante visuellement.
Ces suggestions se basent sur les bonnes pratiques de design web et sur les données recueillies à partir de milliers de pages web réussies.
Optimisation SEO
L’intégration de l’intelligence artificielle dans Elementor permet également d’optimiser les pages pour les moteurs de recherche. En analysant le contenu de la page, Elementor AI peut recommander des améliorations SEO telles que l’ajout de balises, l’optimisation des titres et des descriptions, et l’amélioration de la structure des URL.
Cela permet de maximiser la visibilité de leurs pages tout en respectant les bonnes pratiques SEO.
Génération d'images par IA
Elementor AI propose aussi des options pour générer des images optimisées en fonction du contenu de votre page. Vous pouvez indiquer le style ou le thème de l’image souhaitée, et l’outil IA d’Elementor proposera des visuels adaptés.
Cela permet d’accélérer la création visuelle, sans avoir à chercher manuellement des images sur des plateformes externes.
Personnalisation intelligente des sections
Grâce à l’IA, Elementor peut analyser les sections que vous ajoutez à vos pages et suggérer des widgets complémentaires ou des mises en page optimisées.
Par exemple, si vous créez une section de témoignages, Elementor AI peut vous suggérer d’ajouter un widget de bouton pour inciter à l’action, ou encore ajuster les espacements pour un rendu plus harmonieux.
Notre avis final sur le constructeur de page Elementor
Elementor s’impose comme l’un des meilleurs constructeurs de page pour WordPress, en particulier avec sa version Pro qui offre des fonctionnalités avancées et une personnalisation poussée. Sa facilité d’utilisation, grâce à l’interface en glisser-déposer, en fait un outil accessible aussi bien pour les débutants que pour les développeurs expérimentés cherchant à accélérer la création de sites web.
Le Constructeur de thèmes est l’une des fonctionnalités phares d’Elementor Pro, offrant un contrôle total sur l’apparence de chaque section du site, des en-têtes aux pieds de page, en passant par les pages d’articles et d’archives. De plus, l’intégration avec WooCommerce permet de créer des boutiques en ligne complètes, tout en personnalisant chaque étape du parcours utilisateur.
L’optimisation du design pour le responsive et la possibilité d’ajouter du CSS personnalisé offrent encore plus de flexibilité pour adapter le site à différents appareils et apporter des touches uniques à votre design. Que ce soit pour des ajustements mineurs ou pour une refonte complète, Elementor garantit que chaque élément de la page est à la fois fonctionnel et esthétique.
Avec des mises à jour régulières, une large communauté d’utilisateurs, et une bibliothèque impressionnante de templates, Elementor reste l’outil incontournable pour tous ceux qui veulent créer un site WordPress professionnel sans plonger dans le codage. Que vous optiez pour la version gratuite ou pour la version Pro, vous trouverez dans Elementor une solution flexible, puissante et complète pour vos projets web.
Bonjour,
Je n’ai pas trouvé ce type d’info sur le net.
Je désirerais utiliser certains plugin utilisés en principe avec la version standard de Wordpress (exemple Simple Membership, WP private content,…)
J’ai vu qu’il est possible d’utiliser Elementor dans le gestionnaire de page Gutenberg :: « Elementor Blocks for Gutenberg »
Est ce que l’inverse est possible ( blocks Gutenberg for elementor) ou à défaut, est ce qu’un thème crée par elementor inclut l’éditeur Gutenberg, de manière telle que je puisse utiliser tous types de plugin
Merci de votre réponse.
Cordialement
JPE
Bonjour Estienne,
Guttenberg fait partie intégrante de la structure de Wordpress, qu’un thème soit créé avec Elementor ne change rien, Guttenberg demeure disponible.