Codex

Astuces et codes à emporter.

Wordpress

Page builder comparaison.

Avant-propos

Pour comparer ces pages builders, j'ai mis l'accent sur l'implémentation des balises et les performances d'affichage. Un page builder ca peut ^tre un régal, autant pour nous webdesigners que pour nos clients pour qui cela facilite grandement la création de pages, produits ou articles. Mais tout n'est pas si simple. Si le côté visible est relativement intéressant, la face cachée peut avoir des failles.

Elementor

Elementor est un page builder énormément utilisé. Son intérêt réside dans le fait qu'il s'implémente avec tout type de thèmes. Il est très facile d'utilisation et la prise en main est rapide.

Cependant, il y a des bémols. Si on ne regarde que le côté front (utilisation), on est gâté mais si on se tourne vers le côté technique et plus particulièrement le balisage HTML, ça fait peur.

En effet, Elementor a une prédilection pour générer des balises HTML inutiles et redondantes quant on peut faire simple.

Il va ajouter des elementor-wrapper à tout va et des inner, outter aussi pour englober des éléments simples à représenter... normalement.

Divi

Je ne connais pas assez Divi pour être un bon juge. Il est énormément plébiscité pour le panel d'outils qu'il offre en terme de mise en page, de styles, de texte, de positionnement, de médias.

Cependant, sur la toile, nombre de commentaires et de retours expriment leur positivisme quant à l'utilisation (qui est toutefois plus délicate qu'avec Elementor) mais leur négativisme quand on s'intéresse aux qualités intrinsèques de l'outil (SEO et webdesigners). Plusieurs remontées d'utilisation le qualifie de lent en terme de vitesse d'affichage.

Quand on sait qu'aujourd'hui, la rapidité d'affichage d'un site est un élément clé d'un bon référencement, cela fait un peu peur.

Divi rajoute 3 à 4 balises pour entourer des éléments simples.

LiveCanvas

Quand on regarde les vidéos et exemples sur leur site, on se rend tout de suite compte, qu'il respecte le balisage bootstrap à la lettre.

1 ligne qui contient 1 colonne avec un H1 centré horizontalement, ça nous donne :

<div class="container-fluid">
   <div class="container"> /* Si on veut jouer sur un background full-width */
      <div class="row">
         <div class="col-12">
            <h1 class="text-center">Ceci est un H1</h1>
         </div>
      </div>
   </div>

Ensuite au niveau des performances qu'il prétend avoir, je pense qu'ils disent vrai. Si on imagine, que l'utilisation de l'outil est basé sur bootstrap et donc qu'il déduit selon le balisage donné quelles balises utiliser, cela réduit déjà grandement la génération de styles très spécifiques. Ensuite, le code étant moins pollué, il est plus léger. Et l'implémentation des Js nécessaires est moindre.

Quand on sait que pour avoir un site avec outils d'analyses, statistiques, seo, etc, les plug-ins à implémenter sont vite nombreux. Si on peut éviter de rajouter une couche (CSS / JS / APPELS / STYLES DÉFINIS) sur notre wordpress, on y gagne grandement.

Attention, je ne dis pas que l'utilisation de tel ou tel outil n'est pas bien. Quand on voit ce qu'offre toutes ces solutions embarquées, on a envie d'y toucher. Mais je m'intéresse autant à la partie visble que cachée. Après, chacun prend sa décision.