Beaver Builder, constructeur de page WordPress

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.

beaver-builder-WP

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.

theme-beaver-builder-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).

Découvrir Beaver Builder :-)

beaver-builder-extension

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).

visual-composer-wordpress

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

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).

divi-grille

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.

beaver-builder-bouton-before beaver-builder-bouton-after

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.

gabarit-beaver-builder-wordpress

 

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.

agence-communication-colormyweb

 

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 :

A propos de l'auteur...

Frédérique Game

Designer, [web]graphiste et consultante web depuis plus de 18 ans, Frédérique a travaillé dans plusieurs secteurs d’activité, notamment celui de la communication et de l’édition. Frédérique évolue dans la communauté WordPress depuis 4 ans et donne également des conférences et formations. L’écosystème construit autour de cette plate-forme répond en tous points à sa vision d’un Web ouvert et innovant.

24 commentaires pertinents à ce jour ;)

  • WPFormation dit :
    Bravo Frédérique pour cet article concis et précis sur l’un des meilleurs constructeurs de page pour WordPress.

    Comme tu le mentionnes, nous l’avons utilisé avec l’équipe de WP Serveur pour la refonte d’un premium ElegantThemes, nous avons refait le site à l’identique grâce à Beaver (en moins d’une journée) avec un rendu visuel identique et une bien meilleure réactivité.

  • Merci Fabrice pour cette invitation. Je suis [presque] fâchée avec les themes premium et je cherchais une solution qui soit toujours la plus légère et propre possible en terme de sémantique et accessibilité. Je suis encore au stade de tests mais j’adopte maintenant plus l’idée d’un cadre fixe avec un theme très léger (comme Underscores) ou en tous cas très bien structuré (comme le Framework Genesis), sur lequel je vais construire mon contenu. C’est vraiment Beaver Builder qui m’y a aidée. Donc suite au prochain épisode probablement avec des tutoriels sur « comment créer des themes légers et épurés en privilégiant toujours ce dont on a besoin et « not more » ?!
  • WPFormation dit :
    ce serait TOP ! Tu vas arriver un jour à la sortir ta formation sur : Apprendre à créer son thème WordPress ;)
  • Bérangère dit :
    Merci pour cet article très fouillé !
    Une autre grande force de BB, c’est qu’il permet de manipuler tous les post types et taxonomies y compris custom. Et on a une grande variété de choix des données à afficher et des options de présentations, contrairement à Divi qui est particulièment faible en ce domaine.
    Sais-tu si le back-office de BB existe en français ? J’ai l’impression que non et ça peut être gênant pour les non anglophone.
    Bérangère
  • frederique dit :
    Merci . Est-ce que tu entends juste réglages du Back-Office car oui, il est en français. Ensuite, tout se passant essentiellement en front, il reste peu de choses non traduites car le front est généralement bien traduit et à jour. Une équipe de traducteurs s’est constituée, notamment au Canada. En back, peu de choses finalement à traiter…
  • WPFormation dit :
    et pour interagir ou pour mentionner un commentateur(rice), tapez « @ » et sélectionnez le/la dans la liste ;) #JDCJDR
  • Cristophe dit :
    Ce blog ne devrait pas s’intituler wpformation mais wppromotion (publicitaire). Et quand un commentateur signant wpformation félicite l’auteure d’un billet publié sur wpformation, ça devient wp-autopromotion. d:-)
  • WPFormation dit :
    Ahhh merci de ce commentaire très pertinent ! Je félicite sincèrement car elle a fait un vrai boulot pour cet article, elle propose aux lecteurs de WP Formation de découvrir un constructeur de page performant tout en le comparant aux autres solutions plus connues et si elle a mis son lien affilié, c’est uniquement avec mon accord !
  • Merci pour cet article,
    L’’écriture des styles CSS directement en ligne et les imports et exports me paraissent bien intéressants.
    Si j’ai bien compris on peut donc avec Beaver Builder, enrichir un thème sans être obligée de livrer ce dernier avec l’extension ?
  • frederique dit :
    Bonjour , Beaver Builder reste cependant attaché à votre theme. Si vous le désactiver, vous perdez les styles mais le contenu restera « propre ». Il vous « aide à construire vos pages » est peu être mal approprié, il – construit – vos pages et facilite 80% du travail… Ensuite, comme j’ai mes petites habitudes de designers, j’ai préparé mes propres classes et je les injecte pour ce qui m’intéresse mais nous sortons de la présentation de l’extension et j’espère bientôt partager ces expériences de conception de A à Z… Affaire à suivre :)
  • Merci pour cet article très complet. L’éditeur de Divi va évoluer pour offrir, dans la version 3.0 du thème annoncée pour dans moins d’une centaine de jours, la possibilité d’éditer en Front-End, ce qui le mettra probablement au niveau de Beaver Builder sur ce plan. Autre éditeur Front-End intéressant à connaître: le Content Builder de ThriveThemes.
  • Guy dit :
    Bonjour à tous et toutes. Merci pour les articles et les infos qu’on trouve ici et pour cet article sur Beaver Builder. Depuis des mois (et intensivement depuis plus de 5 jours) je cherche des solutions pour pouvoir démarrer moi-même un site (et fort possiblement Multisite) sur WP avec l’intention de remettre la gouverne à une équipe de jeunes par la suite (et pas forcément pro dans le domaine).

    Je suis donc intéressé par tout ce qui se fait et se dit sur les différents plugins (pardon: extensions!) et frameworks (décidément le canadien en moi se trouve confortable avec la langue anglaise!). Depuis que je lis et regarde les différents articles et vidéos par les différentes personnes – en en particulier Fabrice – je deviens de plus en plus sensible aux aspects de qualité du code, sécurité du produit, SEO et aussi compatibilité avec le Multisite et les autres offres d’extensions, etc. L’aspect front-end est aussi particulièrement intéressent pour un plugin (surtout si en Multisite on veut donner accès aux utilisateurs/admin de pages/site la possibilité de « jouer » un peu avec l’aspect de leur page/site).

    Bref, je n’ai pas encore fait de choix particulier. J’opterai bien pour Genesis avec Beaver Builder (ou autre bon plugin) pour la qualité globale de ce qui sera fait mais comme je ne m’y connais pas du tout en code (php, CSS, etc.) je ne m’y risque pas (pour Genesis j’entend). Je pencherais plutôt pour une combinaison Headway + Beaver Builder pour débuter. Si quelqu’un veut réagir à ça, bienvenu! Et, oui, je m’inscrit à ta newsletter avec plaisir Fabrice. Guy.

  • WPFormation dit :
    Bonjour merci de nous lire ;)
    Je suis également plus confortable avec plugin qu’extension et pourtant je suis un frenchie!

    Le combo qui me semble bien fonctionner est Beaver + son thème, ces 2 là permettent de faire pas mal de choses sans coder et semblent bien plus faciles à utiliser que Genesis. Les perfs sont bonnes, tant du point de vue de la vitesse que de la qualité du code.

  • Guy dit :
    . Merci pour le retour. Je vais garder ton conseil et voir à ça avec plus de détails. Je vais certainement aussi avoir besoin de me trouver un meilleur hébergeur (au vu de ce qui est dit de 1&1) car avec un multisite qui va grandir (je le souhaite!), va falloir donner du bon service! Et comme le site sera international (occidental francophone) faudra pouvoir gérer! En tout cas, merci pour l’info sur BB et son thème et je continue mon éducation pour la suite. Tout de bon.
  • caum dit :
    Merci pour votre article.
    Avez vous eu l’occasion de tester (et donc de comparer) Elementor qui semble très convivial et bien pensé ? Elementor est plus récent et certainement moins complet mais il a peut être des atouts différents.
    Il est très pratique d’utiliser des page builder pour s’affranchir du code et gagner en productivité. Mais reste le header (avec la gestion du menu), le footer et l’éventuelle sidebar. A ma connaissance aucun page builder n’en permet la gestion. Quid de BB à ce sujet ?
    Un article sur les outils ou plugins type type Mega Menu ou autres serait une super idée :o)
  • frederique dit :
    Bonjour Caum, j’ai en effet testé Elementor qui est très bien. Il est basé sur le noyau de Visual Composer, il me semble. Je n’ai pas encore testé les « traces » laissées dans la base de données par contre.

    Beaver Builder est mon chouchou actuellement car il est très « propre » au niveau du code car il fonctionne vraiment différemment côté loading et css. Par ailleurs, l’équipe propose une solution clé en main pour utiliser un theme beaver builder que l’on pourra customiser à souhait.
    Par exemple, mon propre site est aujourd’hui conçu sur cette base : http://www.frederiquegame.fr
    Et les performances sont vraiment optimales.

  • Christophe35 dit :
    J’utilise aussi BB depuis assez quelques temps. C’est clair que pour des mises en page complexes, c’est super pratique ! Le seul hic, ma home avec BB activé : 480 ms en moyenne sur pingdom., alors que je ne l’ai pas utilisé pour la home mais il est chargé quant même (fichiers JS…)
    BB désactivé : 330 ms de moyenne soit 150 ms de moins, pas négligeable ! Dommage qu’ont perde sa mise en page en le désactivant aussi, après oui, en matière de builder. J’ai testé visual composer, page builder et le fusion builder d’avada, et si j’avais à en choisir UN seul, sans hésiter une seconde ce serai beaver builder !

    Et aller, j’en profite pour faire moi aussi un peu de pub :
    même site en mut chez OVH 980 ms en moyenne, avec pourtant un bon CDN au derrière !
    1ère offre chez WP Serveur, site dupliqué au sus nommé : moins de la moitié, soit 480 !

  • Eric dit :
    Bonjour, ça me parait très bien en effet… S’il vous plaît, est-il possible de passer de visual composer a BB sans reprendre tout le site ?? Ce qui a été fait avec VC se transfère-t-il automatiquement à BB ?? Merci pour votre reponse.
  • WPFormation dit :
    malheureusement non ! Il faudra le faire à la main… La faute à Visual Composer qui, contrairement à Beaver Builder, laisse son code parasite même lorsqu’il est désactivé ;)
  • pierre1000 dit :
    ,
    Merci beaucoup pour cet article passionnant et pour vos nombreux articles que je suis très régulièrement !
    En effet, ce builder a l’air très intéressant mais vous n’avez pas du tout mentionné le multilangue dans votre article. Cet outil est-il compatible avec des plugins multilangues ? Après une petite recherche rapide, je constate que de nombreuses personnes sont inquiètes à ce sujet sur des forums.
    Avez vous trouvé des plugins ?
    Pour le reste, BB à l’air d’être très intéressant ! Encore merci pour cet article ! En espérant une réponse positive pour pouvoir commencer rapidement :-)
  • WPFormation dit :

    Après avoir installé Beaver Builder sur WPServeur, nous avons mis en place le multilangue avec Weglot et, cela fonctionne sans problème ;)
  • pierre1000 dit :
    Merci pour ce retour si rapide :-) merci pour ce plugin, je vais aller lire votre article ;-) vous avez testé avec WPML ?
  • WPFormation dit :
    non pas testé avec WPML ou polylang, toutefois vous pouvez poser directement la question auprès du support de Beaver Builder, cela sera + simple!
  • frederique dit :
    Bonjour merci pour votre commentaire.
    J’ai posé la question à la communauté utilisatrice de Beaver Builder et WPML se comporte très bien et aucun soucis n’a été relevé jusqu’à présent.
    Bon courage pour vos futurs tests.

Et si vous donniez votre avis ?

Tweet44
Share36
Share7
Buffer5