Elementor

Comment fonctionne Elementor ?

Elementor remplace l’éditeur de contenu par défaut de WordPress par un éditeur visuel en temps réel (WYSIWYG — What You See Is What You Get). Vous voyez exactement le résultat final pendant que vous construisez votre page, sans avoir besoin de basculer entre un mode édition et un mode aperçu.

L’interface se divise en deux parties : un panneau latéral à gauche avec les widgets et les réglages, et la zone de prévisualisation à droite qui affiche votre page en direct. Vous construisez la page en glissant des widgets (blocs de contenu) depuis le panneau vers la zone de prévisualisation, puis vous les personnalisez via les options de style, de contenu et de disposition.

La structure d’une page Elementor repose sur trois niveaux hiérarchiques : les sections (conteneurs principaux qui occupent toute la largeur), les colonnes (subdivisions horizontales à l’intérieur d’une section), et les widgets (les éléments de contenu eux-mêmes : titre, texte, image, bouton, formulaire, etc.).

Elementor gratuit vs Elementor Pro

• Elementor gratuit — offre une trentaine de widgets de base (titre, texte, image, bouton, icône, espacement, séparateur…) et les contrôles de style essentiels. Suffisant pour des pages simples mais limité pour un site professionnel complet.
• Elementor Pro — ajoute plus de 50 widgets avancés (formulaires, sliders, galeries, tableaux de prix, compte à rebours, témoignages), le Theme Builder (personnalisation du header, footer et templates d’archives), les Pop-ups, les formulaires avec intégrations CRM/email, les effets de mouvement avancés, et le WooCommerce Builder pour personnaliser les pages boutique.

Le Theme Builder d’Elementor Pro

Le Theme Builder est probablement la fonctionnalité la plus puissante d’Elementor Pro. Il permet de personnaliser visuellement les éléments du thème qui étaient traditionnellement modifiables uniquement via le code PHP :

• Header personnalisé — créez votre en-tête sur mesure avec votre logo, votre menu de navigation, vos informations de contact et vos boutons d’action. Possibilité de créer des headers différents pour mobile et desktop.
• Footer personnalisé — concevez votre pied de page avec vos coordonnées, vos liens utiles, vos réseaux sociaux et votre formulaire de newsletter.
• Template d’article — définissez la mise en page de tous vos articles de blog : emplacement de l’image mise en avant, du titre, de la date, de l’auteur et du contenu.
• Template d’archive — personnalisez les pages de catégories, d’étiquettes et de résultats de recherche.
• Page 404 personnalisée — créez une page d’erreur attractive qui redirige les visiteurs perdus vers du contenu pertinent.

Elementor et les performances

Elementor a longtemps été critiqué pour son impact sur les performances : code HTML volumineux avec de nombreuses divs imbriquées, CSS et JavaScript abondants, chargement de bibliothèques entières même quand quelques widgets sont utilisés. Ces critiques étaient en partie justifiées sur les anciennes versions.

Les versions récentes d’Elementor ont considérablement amélioré les performances : chargement conditionnel des CSS et JS (seuls les assets des widgets utilisés sont chargés), nouveau système de conteneurs Flexbox plus léger, optimisation du DOM, et compatibilité améliorée avec les plugins de cache comme WP Rocket.

Pour obtenir de bonnes performances avec Elementor, il est recommandé de : limiter le nombre de sections et colonnes imbriquées, utiliser les nouveaux conteneurs Flexbox plutôt que les sections classiques, optimiser les images avant de les uploader, et configurer correctement WP Rocket pour la minification et le cache.

Alternatives à Elementor

Elementor n’est pas le seul constructeur de pages pour WordPress, mais c’est le plus populaire et le mieux supporté :

• Gutenberg — l’éditeur de blocs natif de WordPress. Gratuit et intégré, il progresse rapidement avec le Full Site Editing (FSE) qui permet de personnaliser l’ensemble du site via des blocs. De plus en plus viable comme alternative à Elementor pour les sites simples.
• Divi — constructeur visuel d’Elegant Themes. Interface différente d’Elementor mais fonctionnalités comparables. Licence unique pour un nombre illimité de sites.
• Beaver Builder — constructeur apprécié par les agences pour la propreté de son code et sa stabilité. Moins de widgets qu’Elementor mais plus léger.
• Bricks Builder — le nouveau venu qui monte, axé sur la performance et la propreté du code. Génère un HTML plus propre qu’Elementor mais écosystème encore jeune.

Besoin d’un site web professionnel et référencé ?