Votre prochain site : Gutenberg ou constructeur de pages?

Les dernières années ont vu leur lot de constructeurs de pages faire leur apparition. La raison : l’éditeur classique de WordPress n’était tout simplement plus assez puissant.

Comme nous avons récemment refait notre propre site web, nous avons été confrontés à faire un choix. Cet article explore les possibilités et celle que nous avons retenues.

Quels sont vos choix ?

Tout d’abord, il faut savoir que si vous songez à une refonte de votre site WordPress, les techniques pour y sont diversifiées pour arriver.

De manière générale (et non officielle), vous pouvez :

1. Créer un thème personnalisé via une agence web;
2. Utiliser un thème classique (gratuit ou premium) qui permet d’y insérer son contenu;
3. Recourir à un constructeur de pages.

Il ne reste plus qu’à explorer les avantages et inconvénients de chaque solution et faire un choix!

Création d’un thème personnalisé

Il y a quelques années, c’était la façon d’avoir un site totalement personnalisé qui correspond à toutes nos exigences.

De nos jours, les outils disponibles ont évolué et, de manière générale, le temps et le budget nécessaire pour créer un thème personnalisé n’en valent pas la peine.

Chez SatelliteWP, nous avons l’expertise pour créer un thème personnalisé, mais si vous observez attentivement ce site, vous constaterez qu’il ne contient rien qui soit « hors norme ». Nous avons donc considéré l’option, mais elle ne fut finalement pas retenue.

Avantages

• Plein contrôle sur le design.
• Possibilité d’optimiser chaque décision technique.

Désavantages

• Les coûts grimpent généralement plus rapidement.
• Le temps de création est plus long.
• Les bogues et la maintenance sont plus coûteux puisque 100% des coûts vous sont relayés.

Utilisation d’un thème existant

Le marché regorge de créateurs qui créent des thèmes dans le but de vous permettre de les utiliser. Alors que certains vous sont offerts gratuitement, il est possible dans bien de cas de payer pour avoir accès à des fonctionnalités supplémentaires.

Avant l’arrivée de Gutenberg, les thèmes existants offraient généralement peu de flexibilité ou, s’ils étaient flexibles, ils étaient accompagnés d’une lourdeur globale (performance, nombre d’extensions à intégrer, choix techniques douteux, etc.).

L’utilisation d’un thème existant permet par contre une forte accélération du temps requis à la mise en place du site tout en réduisant le coût.

Avantages

• Solution rapide à mettre en place.
• Coût de développement et maintenance répartis sur l’ensemble des utilisateurs.
• Très souvent compatible avec les constructeurs de pages.

Désavantages

• Certaines personnalisations peuvent être coûteuses, voire impossibles.
• Si le thème est « abandonné » par l’auteur, une refonte est à prévoir.
• Souvent rempli de fonctionnalités inutiles qui alourdissent le site.

Constructeur de pages

Les constructeurs de pages existent depuis un bon moment. Au départ, il fallait insérer des [shortcode] directement dans l’éditeur de WordPress pour arriver à nos fins. Cela rendait l’expérience d’édition plus que pénible.

Selon notre souvenir, c’est Divi qui a changé la donne à la fin de 2013 avec son éditeur dynamique. Depuis, plusieurs outils ont vu le jour et il est maintenant possible de construire une page en voyant, en temps réel, le résultat qui sera publié.

Les constructeurs de pages considérés pour notre refonte :

• Divi
• Visual Composer
• Beaver Builder
• Oxygen
• Elementor
• Gutenberg

Ce qu’il faut savoir est qu’il existe de nombreux articles sur le web qui tentent de comparer les différents constructeurs de pages. Nous ne ferons pas cet exercice ici.

Par contre, nous énoncerons les raisons qui nous ont poussés à considérer ou écarter un constructeur de pages. Nous avons des clients qui utilisent toutes les options ci-haut. Nous avons donc des cas d’utilisation concrets nous permettant de faire un choix éclairé.

Avantages

• Grande flexibilité au niveau du design.
• Présence de modules prédéfinis et de modèles augmente la rapidité et la qualité de l’intégration.
• Il n’est pas nécessaire de savoir programmer pour créer un site.
• Coût de développement et maintenance répartis sur l’ensemble des utilisateurs.

Désavantages

• La courbe d’apprentissage de l’outil peut être intense pour plusieurs.
• L’uniformité du design dépend du souci du détail de l’intégrateur.
• Le constructeur de pages peut donner l’impression que c’est accessible à n’importe qui alors que « créer un site » est un métier.

Divi

Divi fut le premier constructeur de pages que nous avons utilisé. Si, au départ, il a révolutionné le marché, il est rapidement devenu lourd à utiliser. Bien que plusieurs l’adorent, notre expérience (sur nos anciens sites et ceux de nos clients) nous a montré qu’il était peu intuitif et que plusieurs « hacks » étaient nécessaires pour arriver à faire des opérations simples.

Par exemple, pendant trop longtemps, il n’était pas possible de mettre le nom du site dans l’entête. Il fallait absolument spécifier un logo (image).

Il faut toutefois donner une mention honorable à Divi qui peut être utilisé comme thème ou comme extension. Ça peut amener une confusion pour certains, mais pour les puristes, tout le monde y trouve son compte!

Résultat : écarté

Visual Composer

Visual Composer est un constructeur de pages souvent confondu avec l’extension WP Bakery. Le rebranding fait par l’entreprise a fait que, malgré les experts que nous sommes dans l’environnement WordPress, il n’était pas clair en quoi consistaient les différences entre les deux outils! Pour votre information, Visual Composer permet de créer un site de toute pièce alors que WP Bakery ne s’attarde qu’à la partie « contenu » d’une publication.

Cette solution ne semble pas avoir de réelle traction et nous n’avons eu aucun plaisir à l’utiliser sur les sites de nos clients. L’édition ne pourrait apporter plus de confusion.

Notre impression est qu’elle était populaire quand il n’y avait rien d’autre sur le marché.

Résultat : écarté

Oxygen

Présentée comme une excellente solution par un partenaire, nous avons fait nos devoirs de nous informer sur ce qu’elle avait à offrir. Nous avions très peu de clients utilisant cette solution.

Nous avons été refroidis par le fait qu’Oxygen désactive tout simplement le thème en cours. Son approche par extension est intéressante, mais nous avions la crainte d’être limités, à un certain moment, par le fait que la solution contournait certains principes au cœur de WordPress.

Nos essais ne nous ont pas convaincus de tenter notre chance avec cette solution.

Beaver Builder

Notre site précédent était bâti avec Beaver Builder. Très complet, nous avons hésité avant de changer. La suite de Beaver Builder inclut une extension gratuite, une payante (optionnel) ainsi qu’un thème (Beaver Themer).

Honnêtement, la décision de ne pas retenir Beaver Builder était liée à la performance principalement. Le code HTML généré était devenu peu performant. Puis, suite à notre décision, des mises à jour sont venues changer la donne au point où, si nous avions eu à prendre notre décision plus tard, nous aurions probablement poursuivi avec l’outil.

Résultat : écarté

Elementor

Lorsqu’un partenaire nous a montré les prouesses visuelles d’Elementor, nous avons été charmés. Presque aussi puissant que Beaver Builder, son avantage principal était son raffinement : une présentation visuelle plus soignée, des options plus complètes et une facilité d’utilisation impressionnante.

Puis, nous avons travaillé avec l’outil sur quelques mandats… ça nous a convaincus que c’était l’outil idéal pour notre projet.

Résultat : élu !!

Mais attendez!

Alors que 70% du site était complété, les problèmes ont commencé. L’outil Elementor utilisé dans quelques projets a subi des mises à jour majeures et les problèmes ont apparu. L’outil prenait soudainement beaucoup de temps à charger, montrait des problèmes d’affichage, des comportements problématiques intermittents, etc.

Les complications étaient si intenses que nous avons décidé de reconsidérer notre choix.

En parallèle, nous avions eu des demandes de partenaires pour déployer des sites utilisant Elementor. Ces sites tout neufs faisaient ont parfois planté suite à nos tests après le déploiement.

Tout ça nous a confirmé qu’Elementor n’était pas un bon choix pour nous.

Résultat : écarté

Gutenberg

Lors de la sortie de WordPress 5.0 en décembre 2018, l’éditeur classique a été remplacé par Gutenberg. Ce nouvel éditeur allait agir comme un constructeur de pages… sans outil supplémentaire.

Quand nous avons choisi d’opter pour Elementor, WordPress 5.4 était alors à la version la plus récente. Bien que Gutenberg avait évolué, il ne semblait pas encore assez avancé pour être considéré.

Environ un an plus tard (oui, la pandémie a étiré notre projet interne!), lorsque nous avons choisi de ne plus utiliser Elementor, les améliorations à Gutenberg disponibles dans WordPress 5.7 ainsi que l’article publié par WP Rocket nous ont convaincus que c’était l’outil à utiliser.

Gutenberg est là pour de bon et il répondait à tous nos critères. Nous étions conscients que nous aurions peut-être à personnaliser certains aspects ou vivre avec quelques limitations.

Depuis la sortie de WordPress 5.9, la maturité de Gutenberg a atteint un nouveau sommet. La quasi-totalité des problèmes que nous avons vécus avec 5.8 a été corrigée. Il n’y a, à notre avis, pas de meilleur temps pour considérer Gutenberg comme constructeur de pages!

Au final, le site sur lequel vous vous trouvez utilise uniquement Gutenberg pour l’affichage visuel! Nous avons créé un seul bloc en utilisant Advanced Custom Fields pour nos flèches de appel à l’action (call to action) :

Flèche personnalisée

Peu importe l’outil choisi, nous aurions eu à créer du coder pour arriver à ce résultat.

Résultat : élu!

Combinaison

La beauté de l’environnement WordPress est qu’il est possible de combiner plusieurs solutions énoncées dans cet article. C’est d’ailleurs ce que nous avons fait.

Nous avons choisi d’utiliser Gutenberg qui est natif à WordPress avec le thème KadenceWP, un thème vanille permettant l’intégration de bloc Gutenberg.

Nous pourrions également combiner un autre constructeur de pages comme Elementor si nous le souhaitions. Notre suggestion est de fortement éviter l’utilisation de plusieurs constructeurs de pages afin d’éviter les problèmes de performance, la confusion et les conflits entre les divers outils.

Mais si vous le voulez vraiment… c’est possible!

Avantages

• Flexibilité ultime à tous les niveaux.
• Possibilité d’aller chercher le meilleur de chaque outil.

Désavantages

• Combiner plusieurs outils augmente les risques de conflits.
• Analyse technique souvent nécessaire si on ne veut pas affecter la performance du site.
• Temps de développement plus long puisque les dilemmes entre deux façons de faire sont fréquents.

Conclusion

Malgré notre analyse exhaustive avant le début du projet, nous nous sommes butés à une évolution que nous n’avions pas vue venir du côté d’Elementor. L’outil semblait avoir le vent dans les voiles, mais il semble que le vent ait tombé.

Si vous avez le choix, nous recommandons de rester le plus près possible des outils natifs de WordPress. Ce n’est pas toujours possible, mais lorsque ce l’est, c’est payant : plus rapide, plus performant, moins de conflits, etc.

Quels outils considérerez-vous pour votre future refonte ?