Elementor mérite t-il vraiment son rang de meilleur constructeur de pages ?

Si vous surfez régulièrement sur le net, à la recherche de ressources WordPress, vous avez probablement vu une publicité concernant le plugin Elementor qui est devenu aujourd’hui une référence dans le domaine des constructeurs de pages. Bien qu’il ne soit pas un vétéran dans sa catégorie, Elementor a connu une ascension fulgurante . Convaincus par son efficacité, les adeptes de ce plugin ne tarissent pas d’éloges à son sujet et en aucune manière, ils ne changeraient d’outil de conception. Si vous posez un jour la question à un ami « Pourquoi utilises-tu Elementor » Pour peu qu’il fasse preuve d’un peu d’humour, il y a de grandes chances qu’il vous rétorque. « Elementor mon cher Watson »

Elementor est sans nul doute aujourd’hui l’un des pages builders les plus utilisés et les plus appréciés au monde avec son autre grand concurrent : Divi proposé par Elegant Thèmes.

Alors, qu’est ce qui suscite un tel engouement chez les utilisateurs ?

Nous allons tenté d’en savoir plus en décortiquant l’engin.

Cet article comprend différents liens d’affiliation conduisant vers des ressources relatives à Elementor. En résumé, si vous achetez un de ces plugins, Riviera Web Design perçoit ainsi une commission qui lui permet de rémunérer le travail de recherche et de rédaction.

Qu'est ce qu'Elementor ?

Elementor fait partie de la famille des page builders (constructeurs de page) dont l’objectif principal est avant tout de faciliter la vie des concepteurs de sites Web, en leur permettant de s’affranchir des contraintes du code. 

Ce plugin de création unique en son genre embarque une multitude de fonctionnalités ludiques et intuitives permettant de mettre en place des visuels avancés. N’importe quel type d’utilisateur, (même un débutant ne disposant d’aucune connaissances techniques) peut, en un minimum de temps, créer l’identité visuelle d’un site web grâce à un système de glisser-déposer de modules divers (image, texte, bouton, vidéo etc…) appelés widgets.

Basé sur un modèle freemium comme bon nombre d’extensions, Elementor est également compatible avec l’éditeur Gutenberg et la majorité des thèmes et plugins WordPress disponibles sur le marché.

Elementor est doté d'une interface intuitive

Une croissance époustouflante

Depuis sa création en 2016 par Yoni Luksenberg, Yakir Sitbon et Ariel Klikstein de l’équipe POJO Thèmes, Elementor a littéralement tout balayé sur son passage pour finalement s’imposer comme étant la référence en matière de constructeur de pages. Fort de ses 5 millions de téléchargement, il ne cesse d’attirer et conquérir de nouveaux utilisateurs. Si on se réfère au site officiel, plus de 10 millions de sites ont déjà été conçus avec Elementor et un nouveau tous les dix secondes. Des statistiques assez impressionnantes. N’est ce pas ?

Un objectif majeur pour Elementor : simplifier le processus de création

A la base, Elementor a été conçu pour palier à un problème de flexibilité dans la mise en place du design d’un site web. En effet, de plus en plus d’utilisateurs boycottaient le CMS WordPress, considérant le processus de conception web beaucoup trop laborieux.

Les développeurs s’étaient donc fixer un seul objectif :

 “simplifier radicalement la construction d’un site web” avec “un minimum de tracas et un maximum de plaisir”  

Comme la majorité des constructeurs de pages, Elementor se calque sur un système de glisser déposer très pratique puisqu’il suffit d’effectuer un clic sur un des modules, puis le faire glisser à l’endroit souhaité sur une page.

Une extension calquée sur un modèle freemium

Comme de nombreux thèmes et extensions lancées sur le marché, Elementor propose deux types de versions :

Une fois avoir installé et activé Elementor, deux nouveaux onglets verront le jour au coeur de la barre latérale gauche de votre interface d’administration : 

  • Elementor (qui permet de procéder à tous les réglages de base)
  • Modèles (qui permet d’accéder à la bibliothèque de template préconçus

Pour pouvoir utiliser Elementor sur un type de contenu, il faut préalablement lui en donner  la permission en cochant les cases souhaitées. Par défaut, il faut savoir que c’est l’éditeur de contenu de WordPress (Gutenberg) qui est prioritaire.

Une fois cette action réalisée, il suffit de se rendre dans 

  1. Pages > Ajouter.
  2. Attribuer un nom à votre page et enregistrez-la en brouillon (la publication pourra être faite par la suite)
  3. Cliquez sur le bouton « Modifier avec Elementor » en haut de la page.

Quels sont les principaux atouts d'Elementor ?

Des options de paramétrage très complètes et bien organisées

Une fois avoir installé et activé Elementor, deux nouveaux onglets verront le jour au coeur de la barre latérale gauche de votre interface d’administration : 

  • Elementor (qui permet de procéder à tous les réglages de base)
  • Modèles (qui permet d’accéder à la bibliothèque de template préconçus)

La procédure d’installation d’Elementor se fait de manière classique, comme tous les autres plugins. Vous pouvez soit télécharger le fichier sur le répertoire de WordPress, soit à partir de votre tableau de bord qui est sans nul doute le moyen le plus simple et le plus rapide.

Pour cela il suffit tout simplement de cliquer sur le menu Extension / ajouter et de rechercher Elementor dans la barre de recherche. Ensuite, il suffit d’installer et d’activer le plugin.

L'installation du plugin Elementor est simple

Une interface intuitive et bien structurée

Comme bien souvent, la première impression est souvent la bonne et lorsque qu’un utilisateur lance pour la première fois l’éditeur Elementor, il ne peut qu’être agréablement surpris par l’aspect épuré et convivial de son interface

Pour lancer l’interface d’Elementor, il vous suffit de :

  • Cliquer sur ajouter un article ou bien une page
  • Attribuer un nom à ce type de contenu
  • Cliquer sur modifier avec Elementor

L’interface d’Elementor est divisée en deux parties :

  • à gauche on peut accéder à la zone de réglage et à l’ensemble des widgets disponibles (cette palette peut être réduite ou bien masquée afin de travailler dans de meilleures conditions)
  • à droite, on peut observer la zone dédiée au contenu où sont déposés par glisser-déposer les widgets 

Un processus de conception simplifié

Afin de rendre l’outil le plus pratique possible et simplifier ainsi le processus de personnalisation d’un site, les développeurs ont établi une hiérarchisation au niveau des élements qui sont intégrés dans vos pages. Voici le déroulement classique :

Intégration d'une section en cliquant sur l'icône +

La première étape consiste à intégrer une ou plusieurs rangées

Division de la section en colonnes (1 à 10)

La deuxième étape se focalise sur la création d'une ou plusieurs colonnes

Dépôt de widgets dans les colonnes

La troisième étape consiste en l'intégration de widgets

Comme vous pouvez le constater, le processus de conception d’un site web se simplifie donc considérablement pour les débutants avec la possibilité d’agir directement sur le contenu en ligne. A noter que chaque section peut être modifiée à partir de l’onglet Mise en page figurant sur la partie de droite (largeur du contenu , écart de colonnes, hauteur …. etc…)

Des fonctionnalités innovantes

Un historique des actions accomplies

Elementor intègre des fonctionnalités très pratiques comme la possibilité de revenir à une version antérieure. Concrêtement, si vous commettez une erreur sur votre page en intégrant un élement non désiré ou bien en appliquant un mauvais style, vous pouvez très facilement revenir à une version précédente de deux manières différentes :

  • En utisant le raccourci clavier préféré des têtes-en-l’air (Cltr + z sur Windows ou Cmd + z sur Mac) ;
  • En visualisant l’historique concernant vos actions sur la page : Dans la liste, vous pouvez suivre tous les éléments que vous avez ajouté ou modifié, et choisir la version qui vous convient le mieux.
Element permet de visualiser un histoiriques des actions

Des réglages avancés pour de belles mises en page

La possibilité d’agir sur la mise en page et sur n’importe quel élement (section, colonne etc…) constitue une autre grande force d’Elementor. 

Element permet une mise en page très poussée

Accomplir des actions rapides

Avec Elementor, vous pouvez facilement modifier, copier, dupliquer, enregistrer un élement (section, colonne, widget grâce à l’ouverture d’un menu contextuel en utilisant le clic droit de votre souris)

Elementor embarque un menu contextuel permettant de procéder à différentes actions

Vérifier la structure d’une page

Lorsqu’on intègre un contenu assez long, la présence du navigateur est également très pratique pour pouvoir visionner d’un coup d’oeil l’armature de sa page.

Un éditeur WISYWIG très performant

Toute la puissance d’Elementor réside sans nul doute dans son éditeur WISYWIG qui offre une expérience utilisateur hors du commun. Elementor n’a pas usurpé son surnom de constructeur dynamique car il permet d’effectuer des changements en ligne, directement sur les textes contenus au sein de la page. Cerise sur le gâteau,  l’utilisateur peut également avoir la main mise sur le redimensionnement manuel des colonnes. Le résultat obtenu dans l’interface donne le même rendu sur votre site web, une fois la page publiée.

Elementor permet également le redimensionnement des colonnes

Des options de styles très poussées

On sent bien qu’Elementor s’est beaucoup focalisé sur les fonctions de personnalisation permettant à chaque utilisateur de peaufiner chaque élement à sa guise (alignement, typographie, couleur, ombre de texte …)

Elementor permet de styliser les visuels

Le design system

Il permet de définir votre charte graphique en vous permettant d’agir sur le design et l’apparence visuelle de votre site. Son interface est divisée en 3 parties.

Système de conception

Cette première partie permet de procéder à la personnalisation des couleurs et polices de caractères globales figurant sur l’ensemble de votre site.

Styles du thème

Cette deuxième partie est dédiée aux « styles du thème », A noter que ces réglages sont opérationnels que si vous utilisez le Thème Builder (voir section « Quelles fonctionnalités supplémentaires sont intégrées dans la version PRO d’Elementor ? »)

Vous pouvez agir sur :

  • la typographie (couleur, taille, style, hauteur de ligne, espacement, famille de police, etc.) ;
  • les boutons (couleur, typographie, ombre, bordure, marge) ;
  • les images (bordure, opacité, ombre, filtre CSS) ;
  • les champs des formulaires (couleur, typographie, ombre, bordure, marge).

Réglages

Dans cette partie, vous pouvez procéder à des réglages plus classiques comme l’ajout d’un logo et d’une favicon 

Un véritable arsenal d'outils dédiés à la conception

Des widgets adaptés à chaque besoin

Avec plus de 30 widgets, la version gratuite d’Elementor conviendra à la plupart des utilisateurs qui pourront l’utiliser pour concevoir des mises en page complexes.

Elementor en version gratuite propose des dizaines de widgets

Un panel de modèles très pratiques

La bibliothèque d’Elementor régulièrement mise à jour comprend plus de 100 modèles gratuits. Ces visuels préconçus vous permettront de ne pas partir de zéro et ainsi gagner un temps précieux lors de la construction de vos pages et visuels. L’objectif étant de sélectionner dans un premier temps, le modèle le plus adapté à vos besoins et le modifier à votre guise par la suite afin que vous puissiez obtenir le résultat escompté.

Elementor propose une bibliothèque de modèles préconçus

Une grande variété de blocs

Toujours dans le but de simplifier et d’accélérer le processus de création et permettre à l’utilisateur de se focaliser davantage sur la personnalisation de l’apparence, Elementor intègre également un multitude de blocs bien distincts qui offre la possibilité d’intégrer un élement visuel pré-construit à une page. Ces différents blocs sont classés en catégories : À Propos, Foire Aux Questions, Appel à action, En-tête, Témoignage client etc. :

Grâce à Elementor, vous pouvez  sauvegarder une page ou une section en tant que modèle en utilisant le clic droit de la souris. Ainsi, vous pourrez par la suite les réutiliser à votre guise à n’importe quel endroit sur votre site.

Quelles fonctionnalités supplémentaires sont intégrées dans la version PRO ?

Un thème builder très pratique

Elementor Pro embarque un thème builder ou constructeur de thèmes qui permet la création de modèles personnalisés pour remplacer les modèles par défaut intégrés dans votre thème WordPress. Vous pourrez donc intervenir sur toutes les parties et paramétrer également les conditions d’affichage.

  • entêtes
  • pieds de page,
  • pages d’archives
  • pages de résultat de recherche
  • page 404

Depuis fin Août 2020, date du passage à la version 3.0, Elementor a procédé à une refonte globale de leur interface afin de centraliser toutes les parties d’un site au même endroit, fournissant à l’utilisateur un aperçu automatique du modèle réel, rendant ainsi le  processus de création encore plus convivial. 

Elementor intègre un constructeur de thème

Un constructeur WooCommerce à votre disposition

Si vous avez l’intention de mettre en place un site E-Commerce en intégrant WooCommerce, le WooCommerce Builder sera votre allié en vous permettant de personnaliser vore boutique. Ainsi, vous aurez le choix entre plusieurs widgets dédiés comme titre du produit, prix du produit, ajout au panier, page panier, commande, mon compte etc…

Elementor permet de concevoir un site E-commerce très abouti

Un constructeur de pop up pour les spécialistes du marketing

Elementor PRO intègre également un constructeur de popup (Popup Builder), afin que vous puissiez augmenter vos conversions.

La conversion est un élément majeur du marketing digital. Elle prend effet lorsqu’un visiteur effectue des actions spécifiques sur un site (téléchargement d’un document, inscription à une newsletter,  demande d’un devis, achat). En résumé, une conversion correspond à la transformation d’un visiteur en prospect ou bien d’un prospect en client

Elementor permet de créer des pop up élaborées

Bien que les pop-up ne soient pas toujours appréciées par les visiteurs, car trop intruisives, voire polluantes, ces fenêtres qui apparaissent automatiquement sur une page web, font partie des outils dans l’arsenal du marketeur web. Le but d’une pop up est donc d’inciter à l’action. 

Pour pouvoir bénéficier de cette fonctionnalité, il existe naturellement des extensions qui font le job comme Popup Maker ou bien Popup Builder. Mais cela nécessite d’utiliser un autre plugin.

Elementor Pro à tout prévu en proposant 150 modèles prêts à l’emploi.

  • Il est possible de créer quasiment n’importe quel type de fenêtre popup : en plein écran, en ligne, en barre flottante, en slide-in (la fenêtre glisse sur la droite ou la gauche de votre écran) : il y a de quoi vous contenter. 😉
  • Comme tout bon constructeur de popup qui se respecte, vous pouvez déterminer quand et comment vos popups vont s’afficher. Par exemple : au clic, sur tout le site, lorsque l’utilisateur quitte votre site, au scroll, après une certaine quantité de pages consultées etc.

Vous souhaitez étendre les fonctionnalités ?

Dans le cas où vous souhaiteriez intégrer de nouveaux widgets non intégrés dans la version d’Elementor PRO et étendre ainsi les fonctionnalités, il faudra alors vous tourner vers des extensions tiers appelées addons comme :

  • Essential Add-Ons
  • Utimate Add-Ons
  • Premium Add-Ons

 

Elementor est t-il compatible avec tous les thèmes et plugins ?

Au niveau de la compatibilité, il est bon à savoir tout d’abord qu’ Elementor est parfaitement compatible avec l’éditeur Gutenberg. Si vous êtes plus à l’aise avec Gutenberg, Pas de problème ! vous pourrez très facilement intégrer des blocs de contenus conçus avec Elementor dans votre page.

En ce qui concerne les thèmes, bien qu’Elementor s’adapte parfaitement à la majorité d’entre eux (ceux respectant naturellement les standards de WordPress) l’installation d’un thème comme Hello Elementor est préconisé afin d’obtenir des performances optimales. 

Par ailleurs, Elementor est quasiment compatible avec toutes les extensions. Cependant, voici une liste de plugins suivants succeptibles de causer des soucis :

  • Shortcodes Ultimate
  • Better WordPress Minify
  • qTranslate X
  • Facebook feed WD
  • Image Map Pro
  • Heartbeat Control
  • WP Clone by WP Academy
  • TheSaas Theme & TheElementor

L'expérience utilisateur est t-elle convaincante ?

Vitesse de chargement

La performance d’un site web se juge en premier sur la vitesse de chargement de ses pages. Un site rapide s’apparente le plus souvent, au yeux d’un internaute, comme un gage de sérieux, de qualité et de sécurité. Ce facteur ne doit pas être pris à la légère car il impacte également votre référencement sur les moteurs de recherche comme Google.

Plusieurs actions peuvent être mises en places pour améliorer la vitesse d’un site : 

  • Disposer d’un hébergement de qualité
  • Compresser les images
  • Compresser et minifier le code (css, js)
  • Installer un plugin de cache
  • Utiliser un CDN (Cloudflare par exemple)
  • Ne pas installer trop d’extensions car elles ajoutent des requêtes (des éléments à charger) 

Justement, à propos d’extension, le fait d’utiliser Elementor va t-il avoir un impact négatif sur votre site web ?

La réponse est catégorique. Non. Bien évidemment, il est recommandé d’éviter tout de même de surcharger les pages avec de nombreux modules.

La vitesse de chargement n’est pas pris à la légère par les développeurs d’Elementor. Loin de là. Ils ne cessent d’améliorer régulièrement leur constructeur de pages. Pour preuve, vous pouvez accédez à plusieurs options dans le menu Réglages puis dans l’onglet Expériences qui vous permettront de booster les performances de votre site WordPress (amélioration du chargement des ressources, optimisation du chargement du CSS etc…)

Optimisation du référencement naturel

Elementor intègre plusieurs paramètres SEO dans l’éditeur comme les balises HTML ainsi que des balises Header Footer et Div permettant de structurer le contenu.

Elementor est également compatible avec les plugins Yoast Seo, Rank Math et SeoPress. Pour débuter l’optimisation de votre contenu dans Elementor, il suffit de cliquer en bas à gauche sur Réglages et sur l’onglet de votre plugin de référencement. Pour ma part, j’utilise Yoast Seo.

Vous pouvez donc accéder à :

  • Requête cible : c’est le mot-clé autour duquel vous avez optimisé votre contenu, et à partir duquel Yoast vous fera ses recommandations d’optimisations.
  • Analyse de la lisibilité : une fonctionnalité qui vous indique (de manière plus ou moins pertinente) si votre page est bien organisée, et agréable à lire… mais à ne pas trop prendre au pied de la lettre !
  • Analyse SEO : c’est ici que vous trouverez les recommandations du plugin (en termes de sémantique ou de longueur de contenu notamment). Attention : cette analyse peut s’avérer peu fiable en version gratuite, les fonctionnalités du plugin étant limitées.
  • Les aperçus Google, Facebook, et Twitter : ils s’ouvrent dans une pop-up, et vous permettent d’optimiser vos méta-données pour ces canaux.
  • Schéma : un réglage qui permet de signaler aux moteurs de recherche de quel type de page il s’agit (A propos, FAQ, navigation…) pour les aider à favoriser votre positionnement dans les résultats de recherche.
  • Avancé : quelques réglages à propos de l’indexation de la page, de l’autorisation des robots à suivre les liens présents dessus, ou encore de l’URL canonique de votre page.
  • Contenu Cornerstone : pour indiquer à Yoast SEO qu’il s’agit de l’un de de vos piliers

Responsive Design

Elementor intègre dans l’éditeur de page un mode responsive design très pratique qui offre la possibilité de créer des pages automatiquement adaptées à tous les types d’écran. Cela permet de visualiser en temps réel l’apparence sur les différents types de support. L’utilisateur peut naviguer très facilement entre la vue mobile, tablette et smartphone d’Elementor. 

De cette manière, votre contenu est toujours accessible et lisible pour vos visiteurs en leur offrant une belle expérience.

Elementor permet de créer des visuels adaptable à tous les écrans

Support et documentation

Bien qu’Elementor soit un outil de conception très bien adapté pour les débutants, il faudra tout de même investir du temps dans l’auto-formation afin d’en tirer tout le potentiel et devenir un maestro d’Elementor. Dans certains cas, il se peut que vous soyez bloquer. Pour vous dépanner, vous pourrez profiter des ressources suivantes :

  •  Une documentation complète (Help Center) couvrant les grands domaines et fonctionnalités d’Elementor (installation, éditeur, design, mise en page, Theme Builder, templates etc.).
  • Des dizaines de tutoriels vidéo à retrouver sur la chaîne Youtube d’Elementor pour ceux qui préfèrent les explications visuelles.
  • Un florilège de tutoriels écrits détaillant comment créer tel ou tel type de site, en fonction de votre niche (ex : musique, café, barbier, médical etc.).
  • Une foire à questions (FAQ).
  • Un groupe Facebook privé de plus de 80 000 membres, où vous pourrez trouver des réponses à vos questions, et les poser !

Une communauté très active

L’un des grands points positifs d’Elementor réside dans sa grande communauté composée de 140 000 membres. Cette dernière permet l’échange et le partage de connaissances entre les utilisateurs. Bref, il s’agit d’un communauté très fiable qui pourra apporter des idées et des conseils précieux afin de mieux mettre en place un projet web avec Elementor.

Qu'en est-il au niveau du rapport qualité prix ?

Comme nous avons pu le voir, Elementor est proposé en version gratuite avec une panoplie de fonctionnalités qui ravira la majorité des utilisateurs. Cependant, dans le cas où vous souhaitez créer des sites professionnels très aboutis en matière de design et avoir la main mise sur l’ensemble des parties qui compose votre thème, il vous faudra alors mettre la main au portefeuille.

Elementor Pro propose quatre tyes de formules adaptées :

Essential Plan

Cette première formule au tarif de 49 $ par an (4 €) est idéale si vous avez l’intention de créer le site WordPress de votre entreprise ou bien un simple blog.

La formule Essential est également proposée pour 3 sites WordPress au tarif de 99 $ ( 33 $ par site annuels).

Expert Plan

Pour 199 $ annuels (189 €) vous pourrez mettre en place 25 sites web, ce qui représente à peu près 8 $ par site et par année. Cette formule est très apprécié des développeurs web ou UX/UI designers.

Si vous souscrivez à cette formule, vous pourrez accéder à la Communauté Elementor Experts qui vous permettra de présenter vos plus belles réalisations dans l’optique de booster votre visibilité et d’être contacté par des clients potentiels.

Studio Plan

Cette formule permet d’utiliser Elementor sur 100 sites et est facturée 499 $ annuels (475 €)

Agency Plan

Cette formule proposée au prix de 999 $ par an (951 €) vise comme son nom l’indique les agences web et permet d’installer Elementor Pro sur 1000 sites.

Que vous soyez un freelance ou bien une agence spécialisée dans la conception de sites WordPress, il est conseillé de procéder au renouvellement de la licence Elementor chaque année afin de pouvoir bénéficier d’une part des nouvelles mises à jours (ajout de nouvelles fonctionnalités et correction d’éventuels bugs) et d’autre part de pouvoir contacter le service technique en cas de soucis.

Où peut-on se former sur Elementor ?

Si vous souhaitez vous initier sur Elementor, plusieurs tutoriels vidéos très instructifs sont disponibles sur Youtube. Voici une vidéo réalisé par WP Origami. 

Si en revanche, vous désirez maîtriser toutes les ficelles d’Elementor Pro et bénéficier d’une formation complète dans le but de devenir un expert, je ne peux que vous conseiller celle dispensée par Fabrice DUCARME de WP Formation, organisme référencé sur Datadock 

Grâce à cette formation éligible au CPF et limitée à 10 stagiaires, vous serez capable mettre en place un site complet avec Elementor PRO, de manière autonome

Avis final sur Elementor

Ce que j'ai apprécié sur Elementor

  • Son interface WYSIWYG 
  • Les options de personnalisation avancées
  • La bibiothèque de modèles
  • Le constructeur de thème
  • Les fréquentes mises à jours
  • La réactivité du support
  • La qualité du code

Ce que je n'ai pas apprécié sur Elementor

  • La documentation est en anglais.
  • Pas de chat en live pour le support
  • La traduction n’est pas parfaite

Adapté pour tout type d’utilisateurs, Webdesigner, marketeurs, développeurs WordPress, Elementor semble s’imposer sur le marché des constructeurs de pages car c’est un outil à la fois complet et intuitif. La version gratuite offre déjà pas mal de fonctionnalités évoquées dans cet article, mais peut s’avérer rapidement insuffisante pour de nombreux utilisateurs. Fort heureusement, la version pro proposée à des tarifs relativement abordables, permettra de combler ce manque grâce notamment à l’intégration de 3 constructeurs très pratiques : Thème Builder, WooCommerce Builder et Pop-Up Builder.  

Copyright © 2023 | Tous droits réservés