Beaver Builder est devenu – sans plus aucun doute – LE constructeur de pages à utiliser pour concevoir ses sites et pages WordPress. Une très grande facilité d’utilisation, une interface simple, intuitive et très conviviale, font de cette extension, un Must-Have qui se démarque de ses concurrents et qui tient toutes ses promesses.
Mais pourquoi donc ?
Parce que sa documentation est riche et le support très réactif, parce qu’il est un outil ergonomique et accessible sans connaissance approfondie des classes CSS. Et surtout, parce qu’il permet de développer ses pages et modèles en mode front-end à partir de n’importe quel thème.
Présentation des outils
Les développeurs de Beaver Builder proposent deux options : un thème (+ son thème enfant) à part entière et une extension. Les deux options sont accessibles en démo.
Le THÈME Beaver Builder
C’est un thème WordPress, avec toutes les fonctionnalités de l’extension de Beaver Builder. L’idée est de le traiter comme un thème parent puis de créer son thème enfant à partir duquel vous effectuerez vos modifications. L’essentiel de la personnalisation se fait par le Customizer de WordPress.
À noter que le thème n’est pas vendu seul, il fait partie du pack developpeur pro (199$). À titre d’exemple, la nouvelle version du site de WP Serveur est issue de ce couple Thème + Extension. Le résultat est parfait, à tous les niveaux.
Assez facile à prendre en main, il permet de concevoir un thème sur mesure en peu de temps. Il est gage d’un rendu professionnel de haute qualité graphique et permet un réel design sur mesure.
L’EXTENSION Beaver Builder
Complète et riche d’éléments interactifs pour composer vos pages et agrémenter vos contenus, l’extension est compatible sur n’importe quel thème dont le framework Genesis. Ce qui pourra plaire également aux développeurs.
Par simple drag & drop ou glisser-déposer, vous positionnez ainsi les modules où vous le souhaitez. Qu’il s’agisse d’un formulaire, de tableaux, de galerie d’images, de diaporama ou de fiches produits, etc…
Vous serez en mesure de concevoir rapidement des modèles complexes et si vous avez des connaissances en design et CSS, vous pourrez ajouter vos propres styles. Les modules sont déjà prêts à l’emploi et vous aurez accès à de très nombreuses options (choix des polices, tailles, couleurs etc…).
Sachez également que l’extension est disponible gratuitement (certaines options majeures sont cependant désactivées) et s’installe comme tout plugin WordPress.
Découvrir Beaver Builder :-)
Mais pourquoi cet outil est-il si intéressant ?
Afin de le mettre en perspective et avant de rentrer dans les détails, revenons sur ses principaux concurrents pour vous permettre d’y voir plus clair.
Petite comparaison aux pays des Builders…
Si vous utilisez déjà des constructeurs de pages, vous connaissez probablement les deux concurrents majeurs qui existaient bien avant Beaver Builder : Visual Composer et Divi.
Le builder selon Visual Composer
Le premier, même s’il est très correct et assez bien noté, peut se révéler rapidement complexe, une belle usine à gaz. Son prix est attractif, il a fait ses preuves. Je l’ai abandonné parce que je l’ai trouvé parfois trop gourmand en ressources et les performances d’affichage parfois sujettes à critique voire pire, la page ne s’ouvrant jamais. Ceci dit, il reste une valeur sûre au pays des Builders.
À titre d’illustration, l’interface de Visual Composer me semble plus ardue et j’ai trouvé souvent compliqué de savoir quel contenu se cachait derrière quel module (idem pour Divi).
Le builder selon DIVI
Quand au second – Divi – vaste et générique (il permettra de nombreux styles et types de sites), il est plutôt destiné à l’usage des non-développeurs et assez facile à prendre en main.
Il est développé par l’éditeur de thèmes ElegantThemes qui est une plateforme en ligne de Thèmes premium WordPress dont l’offre financière est vraiment intéressante (89€ pour un pack complet / abonnement annuel).
Divi se veut ultra-personnalisable, vous pourrez créer votre design par simple glisser-déposer. Le thème est 100% compatible WooCommerce et la plupart des extensions (re)connues.
A l’instar de Beaver Builder, Divi a dans sa boite à outils tout un tas de widgets et d’éléments qui vous aideront à composer vos pages : éditeur de texte, image, galerie, diaporama, table de prix, articles du blog, boutons, réseaux sociaux, onglets…
De même que l’aspect général (typographie, positionnement…) est personnalisable, les options ne différent guère des deux autres plateformes citées (Visual Composer et Beaver Builder).
Comme le montre la capture d’image ci-dessus, il est assez difficile de connaitre le contenu qui se cache derrière le module texte, par exemple.
Si vous maîtrisez l’anglais, cet article est assez bien écrit et compare « sans affection » ni parti pris, les différentes extensions ou bien encore lisez l’article de WPBeginner qui place Beaver dans le top 5 des builders.
Mais alors lequel choisir ?
Et bien la différence majeure se situe dans le développement front-end ! C’est ce qui fait la force de Beaver Builder.
Toutes les modifications avec Beaver Builder ont lieu sur la partie visible, « côté écran » de votre site internet. Vous pourrez ainsi valider un design particulier qui sera la réplique exacte des options choisies.
L’extension fonctionne par l’écriture des styles CSS directement en ligne, alors que Divi se base sur les shortcodes. C’est ici que l’un des grands inconvénients de Divi se profile, lorsque vous désactivez l’extension, les traces de ses shortcodes restent visibles. Cela peut devenir un véritable casse-tête de nettoyer ensuite vos pages.
Avec Beaver Builder, ce problème n’existe pas !
Plus techniquement, Beaver Builder propose un cache natif (CSS et Javascript pour les gabarits) qui améliore les performances et qui fait de ce builder l’un des plus réactifs et rapides (aucune latence dans la construction en cours et un rendu visuel quasi-immédiat).
L’extension de Beaver Builder offre également la possibilité aux développeurs de concevoir leurs propres modules sur mesure.
Enfin, à noter dans les spécificités de l’extension que toutes les dispositions sont responsives et l’éditeur visuel est compatible avec les articles, les pages et tous les autres types de contenu personnalisé.
Beaver Builder fonctionne bien avec la plupart des autres extensions WordPress. Par exemple, vous pouvez facilement intégrer des éléments provenant d’autres plugins dans vos mises en page, tels que des formulaires, des tables et/ou des galeries. WooCommerce, WordPress multilingue, WordPress multisite, l’essentiel est là pour travailler et les développeurs sont très actifs pour assurer la continuité du développement de cette belle extension.
Enfin, et c’est une option également formidable, vous pourrez utiliser des modèles prédéfinis pour servir de base à vos différents designs mais surtout, importer et exporter très simplement ces gabarits. Les bibliothèques sont immédiatement accessibles.
Résumé des principaux atouts de Beaver Builder
- Beaver Builder est un outil front-end, tout se passe en mode visuel (et non par le back-office de WordPress)
- Beaver Builder est compatible avec la majorité des thèmes (même premium)
- Beaver Builder est très complet (28 modules, 14 modèles de page d’accueil, 13 modèles de page de contenu…)
- Beaver Builder permet la conception de ses propres modules
- Beaver Builder est traduit en français
- Beaver Builder est 100% responsive et se base sur Boostrap et Less
- Beaver Builder est sémantique et SEO friendly
Dans la capture suivante, je vous propose de découvrir ce site d’agence réalisé avec le framework Genesis (recommandé pour les développeurs) et Beaver Builder pour la partie design.
Nous concentrer sur notre cœur de métier sans perdre trop de temps dans la construction de pages codées, un rêve ?
Non, réalisé !
J’ai, pour ma part, en tant que designer et graphiste, trouvé mon partenaire idéal avec Beaver Builder. Il me permet d’aller à l’essentiel : concevoir et créer. Même si j’ai appris à coder (thèmes, CSS), je peux rapidement concevoir des maquettes, prototypes et mockups sans passer par le code et en terme d’UX design, Beaver Builder peut s’avérer très utile.
Alors, est-ce que tout cela ne vous donne pas envie de l’essayer ? En vrai ?
Autres Ressources :
- La conférence sur les constructeurs de page Wordcamp Paris 2015 (Fr)
- Les meilleurs constructeurs de pages gratuits
- Précédente revue de presse pour présenter Beaver Builder (Fr)
- Vidéo de présentation de Beaver Builder (Fr)
