Elementor – L’ultime Page Builder WordPress

WordPress a été conçu comme un moteur de blog. Aujourd’hui, il est utilisé par des millions de sites internet, pour sa simplicité d’installation et d’utilisation. Toutefois, bien que ce moteur de blog est devenu le premier CMS utilisé au monde, il n’intègre toujours pas un véritable constructeur de page nous permettant de construire des pages de qualités avec des structures avancées. Il existe des dizaines de plugins Page Builder afin de palier à l’absence de ce système.

J’avais lancé un rapide sondage sur Twitter :

On retient les plus connus Visual Composer et Beaver Builder (vous remarquez que je ne mets pas de liens vers ces outils). À mon sens, ces plugins sont tout simplement à l’opposer de l’esprit de WordPress. Des outils bien que fonctionnels sont tout simplement inutilisables sur le long terme et met en péril votre activité. Je retiens principalement dans ce sondage que 41% n’ont pas encore trouvé LE Page Builder.


Aujourd’hui, je souhaite vous présenter Elementor, l’ultime Page Builder pour WordPress. Il est gratuit, entièrement fonctionnel et évolutif. Nous verrons en détail de quoi il est capable, mais je vous rassure : il s’agit du Page Builder dont WordPress a besoin.

Elementor Page Builder WordPress

Qu’est-ce qu’un Page Builder ?

Aujourd’hui WordPress n’intègre aucune option pour construire des pages avec des mises en pages précises et structurées. En ce sens, de nombreux constructeurs de pages sont maintenant disponibles, du gratuit au payant, afin de répondre à un besoin des utilisateurs du CMS WordPress. Le but étant de ne pas toucher au code, de se focaliser sur le contenu et à l’aide d’outils de construction en glisser/déposer de structurer sa page et donc ses contenus.

Page Builder optimisé front-end

Elementor est à mon sens l’outil idéal, car il intègre une visualisation en direct, directement depuis le Front de votre site à l’aide d’une colonne de widget. Un peu comme l’outil de personnalisation des thèmes. Par rapport aux autres Page Builder, qui généralement intègre une personnalisation sous forme de page de configuration où la visualisation en temps réel n’est pas possible.

Elementor est gratuit, évolutif et open-source. Plus rapide que ces concurrents premium et beaucoup léger, il est facile d’utilisation et aucun besoin de savoir coder pour l’utiliser. Tout fonctionne via un glisser/déposer depuis le front-end de votre site.

Compatible avec tous les thèmes

Il vous suffit d’installer le plugin afin de le rendre compatible avec votre site. Automatiquement, vous pouvez éditer votre page et utiliser Elementor afin de créer une page structurée.

Les options avant de commencer

Lors de l’activation du plugin, vous pouvez choisir les Post Types compatibles ainsi que les rôles. Une fois les paramètres enregistrés, vous pouvez vous rendre directement dans une page afin de tester ce nouveau Page Builder.

Elementor, le Page Builder dont WordPress a besoin

Un bouton « Edit with Elementor » apparait dans les Posts Types sélectionnés et permet de switcher entre l’éditeur par défaut de WordPress et la personnalisation en Front-End proposé par Elementor. Côté gauche, une sidebar de widget permettant de contrôler l’ajout d’éléments ainsi que les options et à droite la visualisation en direct.

Elementor en action (GIF)

Dès le départ vous devez sélectionner la structure de votre page. Soit à l’aide d’une Section soit à l’aide d’un Template. La grande force d’Elementor et de justement proposer des Templates. Et cela est entièrement ouvert aux développeurs. Les templates sont des structures déjà toutes faites, vous n’avez rien à faire sauf à créer votre contenu et le mettre en forme dans les bonnes colonnes et sections. Les sections sont à la base d’Elementor. Grâce à elles, vous définissez la structure de votre page : colonne simple, double, triple etc.

Comme vous le voyez sur le gif, ma structure est faite en a peine dix secondes, difficile de faire mieux. Du côté gauche nous avons les Éléments à ajouter à vos sections : vous disposez d’une vingtaine d’outils de personnalisations pré-définis : colonnes, textes, images, vidéos Youtube, bouton, compteur, icônes, onglets, espaces etc.

Options d’Elementor

La personnalisation d’Elementor

Une fois votre structure ajoutée, il est simple de la personnaliser. Les éléments à gauche sont là pour ça. Tel que montré ci-dessus, vous disposez de nombreuses options et d’un simple glisser/déposer vous construisez vos pages. Vous pouvez par exemple ajuster à votre convenance la largeur de vos colonnes :

J’ai utilisé pour ce test par exemple un template déjà configuré. Je n’avais plus qu’à le personnaliser. J’ai pu profiter de l’option « Layout » afin de configurer la largeur de mon contenu, de type de largeur, les colonnes, la hauteur, la position des contenus et bien plus :

J’ai par exemple découvert un widget pré-configuré très utile à mon sens : le compteur, très présent dans les tendances web. En un glisser/déposer j’ai pu configurer et personnaliser l’affichage de deux compteurs avec animation pour dynamiser la page (puis finalement j’ai supprimé celui de gauche).

L’optimisation Code/SEO du Page Builder Elementor

Elementor est puissant par son utilisation, mais également par son optimisation. Le code est Open-Source ce qui permet donc à la communauté d’enrichir le projet. Le code est également de grande qualité et si vous êtes adepte des Page Builder, vous verrez immédiatement la différence. Il est possible de traduire Elementor, de créer vos propres Templates et widget et d’ajouter votre CSS.

C’est le premier Page Builder pour WordPress, conçu dans une approche de qualité du code & optimisation de la vitesse de chargement. En l’utilisant, vous bénéficierez donc de pages optimisés pour le référencement. Il utilise les derniers standards d’optimisations et reste le Page Builder le plus rapide.

Elementor est avant tout un plugin

Bien évidemment Elementor est un plugin WordPress. Il peut ce désactiver. Lorsque vous utilisez la plupart des Page Builder, lorsque vous désactivez le plugin, vous vous retrouvez facilement à tout refaire, des shortcodes dans vos différents contenus et vous devez donc revoir l’ensemble de vos contenus. Avec Elementor, vous gardez l’essentiel, votre contenu, sans surcharge de code ou autre. En gros, si vous ne souhaitez plus l »utiliser, vos contenus resterons les mêmes à part la mise en page structurée que vous aviez avec Elementor… et le code source de vos pages également nettoyés.

Les performances d’Elementor

Pour finir, voici les mesures de performances avec et sans Elementor

Avec Elementor

Sans Elementor

Partager sur facebook
Facebook
Partager sur whatsapp
WhatsApp
Partager sur linkedin
LinkedIn
Partager sur twitter
Twitter

Allez plus loins

22 réponses

  1. Eh éh… je viens de me rendre compte que le choix des termes est super important. Ce n’est pas « Theme builder » mais bien un « Page builder » 🙂

    Il a l’air pas mal du tout, intuitif et tout et tout, et je ne manquerai pas de l’essayer, sauf que… d’après ton test avant/après, il multiplie le poids de la page PAR 4 !?!

    Le côté open-source est l’argument qui lui laisse tout le loisir de progresser dans le bon sens.
    On ne peut qu’encourager l’initiative.

  2. Hello Gilles, oui c’est bien un PageBuilder ! Grosse grosse différence
    Oui le poids x4, mais en gros, le test de comparaison est en réalité d’une page avec du simple texte /vs/ une page avec un Template incluant photo et énormément de blocs. Vu la page de test, c’est correct.

    Merci de ton retour !

  3. Hello Valentin,
    Tu es sûr que le contenu créé avec ne dépend pas du plugin ?
    J’ai fait un test chez moi suite à ton post et chez moi tout le contenu créé et publié en front office sur une page avec Elementor n’apparaît dans mon back office que lorsque je l’édite avec Elementor, pas via l’éditeur WP. Et lorsque je désactive le plugin Elementor, c’est pire, le contenu créé avec n’apparaît même plus en front. ^^

  4. Je l’ai testé, je ne suis pas vraiment convaincu par cette extension. Je ne lui trouve pas de défaut particulier, elle fait le job (tant qu’on n’est pas aussi pointilleux que Pippin Williamson), et l’approche 100% Open Source est à saluer.

    Ok elle est relativement récente et elle peut devenir excellente au fil des versions, mais en toute honnêteté, aucun constructeur de page ne m’a réellement convaincu en dehors de solutions intégrées (dont celui du framework Unyson & celui du thème Enfold).

  5. Bonjour Valentin,

    Elementor peut-il gérer un flux d’article comme un blog classique ? car dans les pictos que tu montres on ne voit pas ce genre de proposition …

  6. Personnellement j’aurai une petite question. J’ai pris un thème forest vu avec un professionnel qui voulait refaire son site actuel avec du wordpress. Je maîtrise le HTML, CSS un peu de PHP, JS et j’ai quelque bonne base en ruby. Cependant je débute avec wordpress et cet émulateur de page à soit un sérieux défaut, soit j’ai oublié de cocher quelque chose… En effet lorsque je publie un template ou une page quelconque je me retrouve avec l’article de base + une copie dessous les icônes social:

    http://www.hostingpics.net/viewer.php?id=386061bug.png

    Avez-vous une idée pour y remédié ?

  7. Après avoir testé Elementor, je reste sur mon constructeur de page de prédilection, Beaver Builder. Je ne comprends pas pourquoi « À mon sens, ces plugins sont tout simplement à l’opposer de l’esprit de WordPress. Des outils bien que fonctionnels sont tout simplement inutilisables sur le long terme et met en péril votre activité. « . Cela fait maintenant 2 ans que j’utilise la version Agency et mon activité n’est pas en péril 🙂 Tu peux nous en dire plus Valentin ?

  8. Bonjour, je crois avoir decsellé une faille profitable dans elementor, qui me parait trop facile. Il est possible de creer ses pages et articles en front via elementor, revenir en back puis en editeur classique wordpress et de modifier le contenu de facon a optimiser le seo à la perfection. ensuite publier et de revenir en front/elementor sans réenregister. Resultat vous avez 1 seul page et 2 contenus differents: 1 back optmisé et un front plus simpliste. Ca fonctionne mais est ce que moteur de recherche va se laisser trompé ?

  9. Utilisant Enfold de manière très régulière car c’est le couple Thème/Page Builder que j’ai trouvé le mieux jusqu’à aujourd’hui, je cherche à me défaire de cette pratique, je suis conscient que c’est une impasse à long terme. Je teste régulièrement des Page Builder, gratuits ou payants, Visual Composer est une usine à gaz et sa productivité médiocre. CornerStone est joli mais peu pratique en fait, Beaver est finalement le meilleurs des Page Builder externes… mais Elementor lui fait carrément de l’ombre car sur plusieurs points je trouve l’ergonomie bien meilleure. Des petits détails dans l’interface qui sont finalement des plus, des petits clics bien placés qui font gagner du temps et occupent peu d’espace, en fait c’est ça qui m’a plu après 1 heure à produire un site pour un ami, l’interface est un bon compromis entre fonctionnalités et surface utile… la traduction en français et très bonne aussi… bref je suis convaincu qu’Elementor à un bel avenir devant lui.

  10. Bonjour, je cherche justement à éviter les themes premium pratiques mais très lourds qui proposent souvent Visual Composer, et Elementor apparait comme vraiment léger. Vous conseilleriez un thème particulier pour travailler avec, en restant simple, léger, puissant, en faisant de la CSS mais sans trop se prendre la tête dans le code?

  11. « le test de comparaison est en réalité d’une page avec du simple texte /vs/ une page avec un Template incluant photo et énormément de blocs. »

    Quel est l’intérêt de ce test !? Généralement on compare des choses à peu près équivalente…

  12. Si vous ne suivez pas l’actualité d’Elementor depuis la publication de cet article sachez que :
    – Il est activé et productif sur plus de 500 000 sites
    – Il intègre en version PRO de nombreuses fonctionnalités évolués (formulaire, login, call to action, Facebook…)
    – Aujourd’hui Elementor + PRO c’est 50 modules et il existe une quarantaine de modules tiers (gratuits ou payants)
    – L’écosystème de modules complémentaires à progressé nettement sur le Repo
    – L’écosystème de packs Premium suit aussi une belle effervescence
    – Elegant Themes propose des templates Elementor sur son shop (?!!)
    – De nombreux nouveaux thèmes Premium sur Themeforest sont proposés comme compatibles et conçus pour Elementor
    – Visual Composer, leader du marché, à refondu totalement son interface pour coller à l’ergonomie d’Elementor et propose maintenant une version gratuite
    Pour faire simple et étant participant sur plusieurs groupes Facebook Elementor, ce page builder monte rapidement en puissance comme les thèmes gratuits qui gravitent autour, OceanWP, Astra, Hestia, GeneratePress…
    La prochaine étape qui se murmure est de proposer un themer comme Beaver Builder.
    Pour ma part, depuis 1 an, j’ai refondu 12 sites qui étaient sous les thèmes Premium Enfold, Porto, Avada et Jarvis avec OceanWP + Elementor et je supervise 30 sites actuellement avec ce couple. Mon temps de développement à été divisé par 2,5 plutôt rapidement et je produit 80% de CSS en moins qu’auparavant pour personnaliser mes sites clients (notamment en responsif).

  13. Bonjour,
    Une personne qui utilise ce plugin, vient de mettre qu’il devait avoir la version gratuite et payante.
    Je trouve bizarre d’acheter un plugin et devoir garder, en plus, la version gratuite.
    Si c’est vrai, c’est pour moi, un mauvais point.

  14. Bonjour, J’ai commencé mon blog et je viens de découvrir votre article. J’ai déjà créé de nombreuses pages avec wordpress en passant par le menu classique. Est-il possible de créer un template avec Elementor et l’appliquer sans perdre (ou refaire) le contenu existant ? merci pour cet article et merci d’avance pour votre réponse.

  15. Bonjour,

    Pour le côté open source, il faut tout de même préciser que seule la version gratuite est open source. La version pro ne l’est pas ! C’est bien dommage, j’allais passez à la caisse sinon.

  16. Comme les autres, une clé pour pouvoir faire les mises à jour et l’accès au support.
    Elegant themes et de nombreux autres le font très bien. Open source ne veut pas dire gratuit.

  17. c’est le cas pourtant, key + et vérification au compte avec un login + support. Peut-être un choix de l’équipe technique

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

👋 Hello,

Bienvenue sur BlogInfos.com !

Vous êtes à un seul clic de découvrir des centaines d’articles concernant WordPress, Elegant Themes ou encore Elementor et tout cela gratuitement !

Divi 4.0 disponible !

20% de réduction aujourd'hui !

👋 Le site ElegantThemes.com propose une réduction de 20% et elle ne sera disponible que pendant quelques temps. Ne manquez pas ça !

En cliquant sur le lien « Accéder Maintenant » vous acceptez d’aider ce site et d’être redirigé vers notre partenaire ElegantThemes.