Refondre un site web
03 octobre 2020
7minutes

Le page builder Elementor : les principes de base, les limites, les avis des utilisateurs | Tout savoir sur le constructeur de page Elementor

 

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. En mai 2020, Elementor comptabilise près de 5 millions d’installations actives ce qui représenterait jusque 7% des utilisateurs du CMS WordPress.

 

Un peu de background sur 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 PAGE builder : Définition et pourquoi s’en servir

 

Né en 2016, Elementor est un logiciel libre, sous licence GPLv3 disponible en version gratuite et en mode Pro. En mai 2020, il comptabilise près de 5 millions d’installations actives réparties dans 30 % d’utilisateurs du CMS WordPress.

 

Interface Elementor

Source : https://elementor.com/blog/behind-the-design/

 

 

Il est à noter qu’Elementor 3.0 est sorti le 25 août 2020. C’est une version majeure qui comprend des changements substantiels d’infrastructure. Avant de migrer à la version 3.0, assurez-vous de sauvegarder votre site, d’utiliser des modules complémentaires tiers pour Elementor compatible avec Elementor 3.0.

 

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.

 

Elementor templates

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.

 

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 page builder

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$

 

 

Si vous pensez à refondre votre site avec un page builder, n’hésitez pas à nous contacter

 

 

 

Vous avez aimé ? Notez-nous !