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.
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é.
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 ?
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.
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 :
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
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 :
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.
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 :
L’interface d’Elementor est divisée en deux parties :
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 :
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…)
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 :
Cltr + z sur Windows ou Cmd + z sur Mac) ;
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.
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)
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.
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.
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 …)
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.
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.
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 :
Dans cette partie, vous pouvez procéder à des réglages plus classiques comme l’ajout d’un logo et d’une favicon
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.
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é.
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.
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.
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.
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 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.
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.
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 :
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 :
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 :
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…)
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 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.
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 :
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.
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 :
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).
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.
Cette formule permet d’utiliser Elementor sur 100 sites et est facturée 499 $ annuels (475 €)
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.
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
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.