Ceci est la version simplifiée (AMP ) de l'article Le page builder Elementor : les principes de base, les forces et les limites | Notre avis de développeur.
C’est quoi Elementor ?
Né en 2016, Elementor est un logiciel libre, sous licence GPLv3 disponible en version gratuite et en mode Pro. Elementor vise à simplifier à l’extrême la conception et la maintenance des pages WordPress sous forme de processus visuel drag’n drop. On appelle cela un page builder. En mai 2020, Elementor comptabilise près de 5 millions d’installations actives ce qui représenterait jusque 7% des utilisateurs du CMS WordPress.
A quoi servent les pages builders ?
Créer ou refondre un site web page par page, en tenant compte de l’UX design, des fonctionnalités et de l’interface utilisateur sous WordPress est un processus laborieux.
Et quand il s’agit de travailler de manière rationnelle, rapide et pratique pour des sites web sur mesure, un éditeur WYSIWYG, en tant que tel ne suffit plus. Chaque changement mineur implique la modification de plusieurs lignes de code.
C’est là que les pages builders, ou constructeurs de page, entrent en jeu. Ce sont des plug-ins dont la fonction principale est de construire et structurer les pages web avec un minimum d’efforts et de temps – et avec la possibilité de prévisualiser le résultat en temps réel.
Le but ? Faire de la conception de site sous WordPress un véritable processus visuel. Adieu le scénario standard des pages WordPress natives dépendant du thème !
Dans cet article, nous parlons de Elementor :
- Pour le concepteur, c’est une plateforme de design au pixel près qui génère du code 100 % propre
- Pour le digital marketer, c’est un outil d’acquisition de trafics qualifiés, de leads, et de conversion assurée
- Pour le développeur, un environnement de travail extensible et convivial pour créer des thèmes, des add-ons personnalisés, etc.
Alors, explorons les coulisses de Elementor et les pages builders
Elementor, le premier page builder au monde, pourquoi vous devez vous en servir
Un plug-in de création de pages par drag-and-drop pour WordPress
Cela signifie plusieurs choses :
- Création d’articles et de pages uniques, contrairement aux modèles d’articles/pages standard fournis avec le thème WordPress.
- Interface 100 % indépendante de l’éditeur standard du système de gestion de contenu
- Simple et interactif. Inutile d’être un as du codage HTML/CSS/PHP.
- Fonctionnalité en amont de votre site web. En gros, un éditeur WYSIWYG.
- Flexibilité absolue : libre à vous de concevoir n’importe quelle mise en page, ou disposition de contenus – indépendamment du thème installé sur votre site. La fonction Drag-and-drop se charge de la réorganisation
- Une maintenance de site simplifiée. Tout se fera en drag’n drop. Précieux pour gagner du temps
Les pages web conçu à partir de ce constructeur de page sont facilement adaptables pour être mobile-responsive et SEO-friendly.
Source : https://www.a2hosting.com/blog/elementor-page-builder/
Vous disposez également du module open-source WooCommerce qui sert à gérer la partie e-commerce du site comme le système de paiement, les statistiques de vente.
Gestion dynamique de contenu provenant de sources différentes
Le générateur de page web Elementor dispose d’un widget Post Title utilisé pour afficher le titre d’une page ou d’un article. Il change en fonction de la page ou du message sur lequel il est utilisé. C’est valable pour une variété de contenus : image, couleur, image à la une, logo, auteur de l’article, commentaire client, etc.
Depuis Element Pro 2.7, les commandes numériques telles que des widgets compteur, tableaux de prix, classement par étoile, etc. peuvent utiliser des nombres dynamiques.
Elementor est un plug-in de champ personnalisé. Vous pouvez intégrer des contenus ACF (Advanced Custom Fields), Pods, Toolset.
Configuration des couleurs et de la typographie
Avec la sortie d’Elementor 3.0, l’objectif est de créer un website design system. Le plugin vous aide alors à améliorer le style de votre site. L’atout majeur de cette nouvelle version est la configuration des couleurs et de la typographie. Désormais, vous pouvez définir les couleurs et les polices d’écriture utilisées sur votre site. En les nommant (par exemple, primaire, secondaire, etc), vous les retrouverez beaucoup plus facilement.
Une fois définie, Elementor les adapte pour l’ensemble du site vous évitant d’avoir à revenir sur toutes les pages.
Comment créer un site avec Elementor ?
Elementor étant un plugin de WordPress, il faut d’abord l’installer via la méthode d’installation standard des plug-in.
Pour construire une page avec Elementor, vous devez en créer une avec WordPress. Un onglet « Modifier avec Elementor » apparaît. Il vous suffit de cliquer dessus. Dès lors, vous accédez à l’interface de l’extension. Ici, vous verrez le canva principal où vous pouvez glisser les différents éléments. Ces derniers se trouvent sur le côté gauche. Vous pouvez ainsi ajouter des sections internes, des titres, des images, des vidéos, des boutons, etc.
Attention, la création d’une page avec Elementor nécessite d’en comprendre la structure :
- la page se divise en section ;
- la section en colonne ;
- la colonne peut comprendre plusieurs éléments de contenu ;
- chaque élément doit être conçu de manière individuelle.
Le plugin vous propose également de passer votre site en responsive. De cette manière, l’affichage est optimal aussi bien sur mobile que sur ordinateur.
Dès que votre page est prête, il vous suffit de la publier.
Elementor 2.0 : Faut-il migrer vers Elementor Pro ?
La version gratuite d’Elementor est disponible sur le site officiel. Ses caractéristiques :
- Drag & Drop page builder : qui s’intègre à une quantité de widgets prête à l’emploi
- Template de page pré-défini
- Toolset totalement responsive
- Elément de canevas : modèle de page personnalisé ne tenant pas compte des limites du thème installé
- Mode maintenance / page de Coming Soon : inutile d’installer d’autre plug-in pour gérer la page mode maintenance
En tout, 50 % des fonctionnalités totales de la page builder Elementor qu’un utilisateur standard a besoin.
En revanche, les utilisateurs expérimentés se reconnaîtront devant les fonctionnalités disponibles dans la version Pro :
- Module Popup Builder : pour créer des pop-ups et de les intégrer à un formulaire d’adhésion, à une offre ou réduction spéciale
- Visual Form Builder : livré avec des intégrations d’outils marketing populaires
- Theme Builder : pour modifier les éléments clefs du thème – header (même plusieurs headers pour différentes pages), footer, modèle de message, archivage
- Conception des pages 404 : extrêmement importante
- Fonction d’ajout de feuille de style CSS personnalisée à n’importe quel bloc Elementor
- Déploiement d’éléments Elementor au niveau des barres latérales et des widgets
Elementor Pro : pour une stratégie marketing réussie
Si l’e-mail marketing est votre canal d’acquisition client clef pour votre site web, sachez que la version Pro d’Elementor peut interagir avec les outils d’e-mailing les plus sollicités du marché : Zapier, MailChimp, HubSpot, ConvertKit et GetResponse. Une hausse de taux de conversion quasi assurée !
Les limites de Elementor
Limites #1 Elementor dispose d’un script render-blocking (les fameux scripts bloquants) JavaScript et CSS qui ralentit l’affichage de la page web. Ce problème peut être résolu avec un peu de code dans le fichier .HTACCESS. ou le bon plug-in de mise en cache comme W3 Total Cache ou WP Rocket,
Autres alternatives plus simples ? Retardez l’exécution de ces render-blocking avec les attributs async et defer. Un affichage lazy-loading peut aussi régler le problème.
Limite #2 Les modifications sont quasi illimitées sur chaque page sauf qu’il est impossible de définir de nombreux styles globaux à l’échelle du site sans recourir à un abonnement premium. Un travail fastidieux pour ceux qui veulent rester sur la version gratuite.
Limite #3 Instable. Il arrive que vous deviez systématiquement quitter et réintégrer le plug-in après chaque bug constaté.
Limite #4 La mise à jour à vie n’existe pas. Contrairement au constructeur de page Wpbakery, Elementor Pro ne dispose d’aucun éditeur back-end. Ainsi, pour obtenir un site web parfait au pixel près, il faut se plonger dans le back-end traditionnel.
Limite #5 Il n’y a aucune édition orientée développeur. Ce qui paraît coûteux pour un débutant ou un développeur intermédiaire qui devront faire ces efforts chaque année.
Quel budget à prévoir pour un page builder ? Elementor et ses concurrents
Elementor a vu arriver de nombreux concurrents. Voici un rapide tour d’horizon
DIVI – Ses avantages
- Plus de fonctions
- Moins cher
- Grande communauté
- Globalement un code plus léger qu’Elementor
BEAVER BUILDER – Ses avantages
- Des prix moins chers.
- C’est assez identique à Elementor.
- Forfait.
- Excellent service client.
- Temps de chargement plus rapide que Elementor
GUTENBERG (il ne faut pas l’oublier !)
- Gratuit
- Nativement installé et supporté par WordPress
- Solution légère sans chargement de JS externes
- En négatif, un éditeur souvent lourd et frustre
| Page Builder | Particularités et Fonctionnalités incluses | Prix |
| Elementor Pro | 50 widget pro / 300 templates / Support | De 49$ à 199$ par an |
| Live Composer | Video / Formulaire / ACF / Support | Licence unitaire : de 49$ à 99$ |
| Beaver Builder | Themes / Multisites / Templates | Licence unitaire : de 99$ à 399$ |
| Divi Builder | Websites pack / Premium support | 89$ / an ou 249$ « one time licence » |
| Brizy Pro | Premium design / Support | 49$ / an ou 99$ / an ou « one time licence » 299$ |
A terme, Elementor peut-il gagner contre Gutenberg ?
Comme mentionné plus haut, l’énorme force de Gutenberg est d’être le page builder natif de WordPress. Fortement décrié à ses débuts, Gutenberg ne cesse de s’améliorer. Certains plug-in (comme celui qui permet de faire des Google Web Story) exigent l’usage de Gutenberg. De plus, des bloggueurs ont détecté de grosses différences de performances entre Elementor et Gutenberg. A suivre…
Si vous pensez à refondre votre site avec un page builder, n’hésitez pas à nous contacter