Constructeurs de pages pour WordPress

A l'occasion du WordCamp Paris 2015, j'ai eu le privilège d'être conférencier. Ma conférence portait sur les constructeurs de pages pour WordPress, cet article est le sujet commenté de cette conférence.

constructeur-h-page

Les Constructeurs de page

La tendance est de plus en plus marquée en 2015, les utilisateurs veulent du simple, du rapide et du facile, tout en obtenant de très bons résultats sur le rendu visuel de leur site WordPress.

Les constructeurs de page sont en plein essor, avec les meilleurs on peut très rapidement créer des pages aux mises en formes complexes (colonnes, onglets tabulaires, filtres, etc), et ce, sans aucune connaissance particulière!

Oui mais… que valent-ils ? Quels sont les meilleurs constructeurs du moment ? Quels sont les avantages pour vous et votre client ? Quid de la qualité du code généré ? Et enfin, est-ce un frein à votre référencement ?

Autant de questions auxquelles nous allons essayer de répondre dans cet article...

 

Définition d'un constructeur de page

Les builders ou constructeurs de page servent à construire des pages (voire même des articles). Ils vous permettent avec une interface très simple et intuitive (souvent drag & drop) de créer des mises en forme complexes pour vos pages.

Il existe de nombreux constructeurs de page, sous forme de plugins le plus souvent, certains sont même partie intégrante des thèmes.

 

Une vraie sale réputation...

Si l'idée est séduisante, faire simple et rendre accessible la mise en forme des pages sans aucune connaissance en CSS, l'une des premières choses que l'on entend quand on parle des constructeurs de page, c'est...

Arghhhh pas ça ! C'est codé avec les pieds, c'est mauvais pour mon SEO, c'est long à charger, les pages builder c'est le mal...

reputation constructeurs

 

...Et pourtant ^^

constructeurs-page

Non, ce n'est malheureusement pas mon salaire mais les ventes générées par l'un de ces builders tant décriés.  En l’occurrence, il s'agit ici de Visual Composer. Ce plugin vendu seulement 33$ sur CodeCanyon est l'un des plus connus et surtout l'un des plus vendus.

constructeurs-page

Plus de 52 000 ventes et une note de 4,5/5. Ce n'est pas parce que tout le monde l'achète qu'il est bien, mais cela a au moins le mérite de montrer qu'il y a une vraie demande et un réel besoin.

 

Mais pourquoi ça marche ?

Les utilisateurs veulent du simple ! Tout le monde ne s'extasie pas devant du code, ni devant un shortcode... Alors forcément la simplicité désarmante de ces constructeurs ne peut que plaire. Démonstration simple en 3 images :

Ceci est un shortcode :

shortcode

Ceci est un constructeur :

builder

Et un petit dernier pour la route :

beaver-builder

Visuellement c'est assez parlant ! Glisser, déposer, WYSIWYG (What You See Is What You Get), modifications en front, modèles et layouts préréglés sont autant d'atouts pour les constructeurs de page.

L'avantage évident des builders, c'est que l'utilisateur visualise immédiatement ses colonnes et ses contenus. Certains poussent le wysiwyg encore plus loin et proposent même l'édition en front.

 

Le poids et la vitesse

Parmi les reproches que l'on fait souvent aux builders, le poids ajouté au site et la lenteur supposée arrivent en tête ! En moyenne sur les six constructeurs que j'ai testé, voici ce que j'ai obtenu :

  • 2 à 5 requêtes de plus
  • Poids de la page augmenté de 7 à 14%
  • Temps de chargement + 4 à 11 %

vitesse-poids-constructeurs

Le test est très simple, un WordPress lambda mesuré une fois sans builder et la fois suivante avec.  On peut noter une augmentation globale mais pas aussi catastrophique qu'on aurait pu le penser. De plus, tout dépendra de votre optimisation WordPress (cache, plugins, thème...).

 

Avec les constructeurs, point de SEO ?

Autre reproche récurrent, le SEO ! Les constructeurs de page nuiraient à votre SEO principalement à cause de l'ajout de code parasite et de leur poids ^^

La première des choses à se rappeler, c'est que Google sait parfaitement lire et différencier le code et les contenus ;) Ce n'est donc pas l'ajout de quelques balises div qui va horripiler le moteur.

Le poids de la page est un facteur important mais principalement pour le Google Bot. Plus c’est long à crawler, moins c’est bon ! Nous avons vu que les builders rajoute un peu de poids aux pages mais c'est dérisoire au regard de certaines images non optimisées.

Il est cependant vrai que certains builders peuvent altérer la sémantique de votre WordPress (cf image ci-après qui contient 2 balises h1). Il vous faudra vérifier cette dernière et optimiser votre thème et votre plugin SEO favori.

semantique seo

 

Les constructeurs et leur code :/

Il faut être clair, la majorité des constructeurs en met partout ! Ajout de div, div vides, des feuilles de styles, des shortcodes à foison... Il en y a vraiment pour tout le monde, sic!

code-div-constructeurs

Un autre véritable problème sur certains builders, c'est lorsqu'on les désactive, on se retrouve avec des dizaines de shortcodes et il faudra tout nettoyer!

avant-apres-builders

 

Quelques constructeurs de page WordPress

Cette liste est bien évidemment non exhaustive. J'ai également dissocié les plugins des thèmes avec constructeur intégré.

Plugins constructeurs

Page Builder / Siteorigin.com (Gratuit)
Visual Composer / Codecanyon.net (33$)
MotoPress / Getmotopress.com (29$)
Themify Builder / Themify.me (39$)
Elegant Builder / Elegantthemes.com (89$)
Velocity Page / Velocitypage.com (97$)
Beaver Builder / Wpbeaverbuilder.com (99$)

Thèmes avec constructeur

Make + / Thethemefoundry.com (Gratuit)
Salient & Enfold Themeforest.net (58$)
Qards / Designmodo.com (69$)
Divi 2 / Elegantthemes.com (89$)
Carrington Build / Crowdfavorite.com (299$)

 

Et si je devais choisir ?

C'est bien beau d'en parler mais il faut se mouiller et ça tombe bien, j'aime plutôt ça ! Personnellement j'en retiendrais deux, l'un pour le rapport qualité/prix et l'autre pour ses fonctionnalités.

Visual Composer pour le prix

Pour les débutants et ceux qui ont un budget limité , Visual Composer est un bon choix et ses nombreux add-ons pourront combler quasiment tous vos besoins de mise en forme.

AVANTAGES :
Le faible prix
Les nombreux add-ons disponibles
Templatera (modèles), EasyTables
Simplicité prise en main
Edition possible en Front & Back
INCONVÉNIENTS :
Le contenu restant, une fois le plugin désactivé
Les add-ons qui alourdissent le plugin
Le code généré (poids, chargement)

 

Beaver Builder, le coup de cœur !

Pour tous les autres, je conseillerais Beaver Builder ! Simple à prendre en main, réactif, propre et doté de nombreuses fonctionnalités, ce fût clairement la bonne surprise lors de mes tests pour préparer cette conférence.

AVANTAGES :
Le rapport qualité/prix
Le code, une fois le plugin désactivé
Sémantique et CSS minifié
Les nombreux templates fournis
Add-ons intégrés
La réactivité du builder
Marque blanche & Multisites
INCONVÉNIENTS :
La prise en main
Le prix.. et encore ^^

Démonstration en vidéo de Beaverbuilder, vous pouvez aussi l'essayer !

 

Conclusion

Tout le monde n'aura pas la nécessité d'utiliser un constructeur de page (les shortcodes c'est bien aussi;) mais nous l'avons vu, la simplicité et l'ergonomie des builders permettent une ouverture grand public.

Voici d'autres reviews (eng) sur les constructeurs :

Cet article se termine, vous pouvez retrouver ici la vidéo de ma conférence sur les constructeurs de page au WordCamp Paris 2015, en attendant je vous dis à très bientôt sur WPFormation;)

A propos de l'auteur...

WPFormation

Fabrice Ducarme, formateur WordPress je suis éditeur, auteur et fondateur du site WP Formation.com. Conférencier lors des WordCamp Paris 2013 & 2015 ainsi qu'au WP Tech Nantes 2014, je vous propose plus de 400 articles & tutoriaux à propos de WordPress, mes trucs & astuces mais aussi des coups de gueule...

15 commentaires pertinents à ce jour ;)

  • Yvan dit :
    Bel article, utile. Merci. Les Builders ont considérablement fait bouger les lignes de nos métiers. Ils nous permettent de mieux accompagner nos clients vers plus de maîtrise et d’autonomie dans leur communication. C’est donc un grand +.
    Tout n’est pas blanc ou noir, on peut par exemple reprocher outre le poids des pages, une tendance à la création de sites un peu trop uniformisés.
    Toutefois le principal étant que nos clients puissent eux même en faire le maximum. Cela fait plaisir de les voir manipuler ces builders et de « développer » les contenus et formes de leur site.
  • Isabelle O dit :
    Merci pour cet article très complet et pertinent. Même si je n’aime pas Visual Composer que je ne trouve ni fiable ni très user friendly. Mais du coup je réessayerai Beaver un de ces 4.
  • WPFormation dit :
    Merci de ton retour. Certes, l’uniformisation peut être dérangeante, cependant de nombreux buiders proposent des styles personnalisés pour qui s’en préoccupe ;)

    Je ne peux que t’inviter à essayer Beaver qui fût LA bonne surprise de mes tests!

  • Cyril C. dit :
    je suis toujours à l’affût des conseils de plugins de Fabrice. Donc à tester prochainement: Beaver Builder !
    Merci pour ton article ;)
  • Merci pour ce récap! J’étais assez sceptique à l’utilisation des Pages Builders, mais ça c’était avant d’avoir suivi ta présentation au WCamp qui m’a rassuré.
    Du coup, je me suis lancé, et j’avoue qu’outre la facilité d’utilisation, ils font gagner du temps..
    Quant au SEO, je reste encore mitigé, je n’ai pas encore assez de recul à long terme, et ne les ai utilisés que pour des petits sites.
    Pour avoir utilisé Visual Composer et Page Builder by SiteOrigin, je retrouve ce que tu décris : des à tire-l’arigot, hiérarchie des hgroup non respectée, etc. Par contre concernant la vitesse de la page, je n’ai pas de grande différence.
    Petite préférence pour Visual Composer qui propose plus de souplesse et de fonctionnalités que le second.
  • WPFormation dit :
    Merci de ton retour ! Ravi que ma présentation ai pu convaincre, tout du moins ai pu donner l’envie d’essayer ;)

    Pour la vitesse et le temps de chargement, c’est une moyenne constatée et c’est fonction de ce que tu fais tourner, plugins, cache, hébergement, etc…

  • Martial dit :
    Merci pour les informations ! On développe pas mal de sites en agence ici. Et avec ces outils, on a peur que l’utilisateur bousille le site et l’ergonomie… En plus des autres problèmes cités dans l’article bien entendu.

    En revanche, ça fait un ptit temps que je recherche du front end editor MAIS compatible avec les custom fields (pouvoir en éditer en front aussi)

  • Aurélie dit :
    Bonjour, j’ai un blog en version gratuite depuis 6 mois sur wordpress et n’étant pas dans l’informatique j’avoue que la prise en main a été difficile. En fait je ne comprends pas trop j’ai été sur le site de Beaver, c’est une sorte de logiciel qu’on achète pour mettre en forme son site c’est ça ? (ex. si je l’achète, pas besoin d’installer wordpress, le server et de faire toutes les actions avec le serveur et mysql ?)

    Sinon merci pour votre site, il m’a aidé à comprendre comment tout cela fonctionnait.

  • WPFormation dit :
    Bonjour Beaver Buider est qu’un plugin constructeur de pages, vous aurez donc besoin d’installer WordPress, d’un hébergement, etc…
  • Aurélie dit :
    Merci de votre retour. D’accord, donc en fait il évite juste de faire du code pour modifier les pages c’est bien ça ? Je me sens un peu stupide mais je ne suis vraiment pas du milieu…
  • WPFormation dit :
    Exactement c’est bien ça mais il le fait très bien ;)
  • Aurélie dit :
    Super, merci beaucoup :)
  • Je préfère largement intervenir sur une page générée par un constructeur, qu’une page généré par un modèle de page unique bourré de PHP et de code maison. Au début ça surprend et on met du temps, mais une fois la logique assimilée ça va vite. Et pour ce qui est du poids, ça reste anecdotique comparé aux excès de poids de certaines images ou CSS.
  • JMDP dit :
    Bonjour,
    merci pour cet article. Personnellement je travaille beaucoup avec Enfold ou Avada, et leur page builder est très agréable aussi.

    Existe t-il un moyen de construire les pages, ou la page principale, d’admin avec un page builder par exemple. Hors WP White label et autres, par exemple, qui sont bien, mais trop restrictif en terme de mise en page.
    En gros, pouvoir livrer un outil d’admin esthétique à mes clients, simplifiée et plus fonctionnelle. A la façon d’une page web.
    J’ai bien vu qu’il y avait des UI chez Envato mais je ne vois pas comment m’en servir ?

    Peut-on construire une page admin avec un page builder ou comment trouver et utiliser des templates tout faits ?

    Merci.

    PS : Et Un article sur le sujet serait…Top !

Tweet60
Share31
Share11
Buffer72