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.
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…
…Et pourtant ^^
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.
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 :
Ceci est un constructeur :
Et un petit dernier pour la route :
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 %
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.
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!
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!
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.
Le faible prix
Les nombreux add-ons disponibles
Templatera (modèles), EasyTables
Simplicité prise en main
Edition possible en Front & Back
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.
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
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 :
- http://premium.wpmudev.org/10-drag-and-drop-page-builders-wordpress/
- http://chrislema.com/wordpress-page-builders/
- http://www.codeinwp.com/best-drag-and-drop-theme-builders/
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;)
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.
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.
@yvan 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 ;)
@isabelle-o Je ne peux que t’inviter à essayer Beaver qui fût LA bonne surprise de mes tests!
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.
@julien-z 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…
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)
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.
Bonjour @aurelie Beaver Buider est qu’un plugin constructeur de pages, vous aurez donc besoin d’installer WordPress, d’un hébergement, etc…
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…
Exactement @aurelie c’est bien ça mais il le fait très bien ;)
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.
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 !
@jmdp non pas de possibilité de construire une page Admin avec ces 2 là ! Il faut passer par des plugins dédiés. On peut aussi regarder du côté de https://wpchannel.com/wp-admin-ui-personnaliser-optimiser-back-office-wordpress-clients/ ou https://wordpress.org/plugins/adminimize/
Ps/ pour l’article, je le note ;)