Beaver Builder vs Divi - Quel WordPress Builder est bon pour vous, et lequel ne l'est pas ? (2021)

Beaver Builder contre Divi

Alors, vous cherchez un nouveau plugin de création de pages WordPress, n'est-ce pas ? Comment choisir entre Beaver Builder vs Divi quand ce sont les produits les plus populaires ?

Vous avez effectué des recherches préliminaires et avez découvert que ces deux choix sont les plus vantés pour la création de sites Web. Vous pouvez également avoir une certaine expérience dans l'utilisation de l'un de ces plugins de création de page.

Vous voulez maintenant savoir lequel de ces plugins populaires est le meilleur. Et surtout, qui vaut votre argent?

Dans ce cas, vous êtes au bon endroit. Dans le post d'aujourd'hui sur CollectiveRay, nous allons explorer toutes les fonctionnalités importantes de ces plugins de création de pages et les comparer pour vous aider à trouver le meilleur pour you - et où dépenser votre argent.

Lisez la suite pour savoir quel est le meilleur plugin de création de page pour WordPress. Si vous êtes intéressé par les plugins WordPress en général, vous voudrez peut-être consulter nos autres critiques et résumés présentés sur Collectiveray.

Nous avons des sites fonctionnant avec ces deux produits installés, nous avons donc revisité cet article dans Octobre 2021 pour mettre à jour tous les détails pertinents si nécessaire.

Beaver Builder contre Divi

Beaver Builder est très facile à utiliser mais Divi a plus d'options de personnalisation. Les deux produits vous donnent accès à des mises en page d'aspect professionnel. Divi a plus de 140 mises en page par rapport à Beaver Builder's 50 modèles. Divi est légèrement moins cher que Beaver Builder à 89 $ qui comprend tous les produits de ElegantThemes.

Récapitulatif

  Constructeur Divi beaver builder logo
Prix 89 $ (comprend tous les plugins ET et les thèmes WordPress) $99
Version gratuite Non Oui
Editeur en temps réel Oui Oui
Frontend / Backend Les deux Les deux
Public cible Développeur / Designer / Utilisateur Web Developer / Designer
Éléments pris en charge 46  31 
Code propre Oui Oui
Modèles / mises en page prédéfinis Plus de 140 Plus de 50
Fonctionnalité cool Test A / B Castor Themer
Performance
Ce que nous avons aimé  Une solution très puissante pour créer tout type de mise en page  Une interface utilisateur simple
   Options de gestion de la mise en page supérieures  Le contenu reste intact même après la désactivation du plugin
   Prix ​​attractifs avec accès à de nombreux autres thèmes et plugins WordPress  Mode éditeur unique pour les clients
   De nouvelles améliorations de performances changent la donne  Vous permet d'utiliser des widgets WordPress dans les mises en page
Ce que nous n'avons pas aimé  Il faut du temps pour s'habituer  Plus cher que les autres constructeurs de pages
   L'éditeur frontal prend un certain temps à se charger.  
Général
Gagnant ?????  
Site Entreprise Visit Elegant Themes (10% OFF) Visit Beaver Builder 

Pourquoi utiliser Beaver ou Divi Builder?

Logo BBSi vous êtes relativement nouveau dans le monde WordPress, vous ne connaissez peut-être pas l'histoire complète des constructeurs de pages et comment ils sont nés.

Essentiellement, jusqu'à il y a quelques années, WP pouvait créer des pages ou des articles. Ces deux éléments de contenu sont très similaires.

Ils prenaient en charge principalement des textes et des images et le contenu de votre site Web ordinaire tel que la vidéo, etc.

Si vous vouliez quelque chose de plus sophistiqué, vous deviez utiliser des plugins et / ou des shortcodes si nécessaire.

Désormais, les codes courts étaient excellents, car ils vous permettaient d'insérer des fonctionnalités et des fonctions spécifiques où vous le souhaitiez sur une page.

Mais ils avaient toujours leurs limites - vous deviez toujours installer un tas de plugins différents pour pouvoir atteindre et utiliser plusieurs éléments différents sur une page.

Si vous vouliez des curseurs, des boutons d'appel à l'action, des vidéos, des galeries d'images et d'autres choses, vous deviez continuer à ajouter de plus en plus de plugins.

Cela entraînait un autre problème: plus vous ajoutez de produits à votre installation, plus votre site Web serait lourd et plus il était sujet à des vulnérabilités de sécurité provenant des différents éléments que vous deviez installer.

C'était un problème.

Il y avait un autre problème. Vous n'avez pas pu créer de page ou de message visuellement. Vous deviez concevoir une page en utilisant des shortcodes et après plusieurs itérations de modifications, vous arriviez à un résultat proche de ce que vous souhaitiez.

Finalement, les développeurs et les fournisseurs de WP ont commencé à se rendre compte que la plupart des gens voulaient la possibilité de concevoir et de définir leurs propres pages sans contraintes - pas d'utiliser des modèles, ce qui rendait tous les sites Web identiques.

Et ainsi, le concept de constructeurs de pages est né.

C'est essentiellement le cœur d'une telle fonctionnalité - la possibilité de faire glisser et déposer différents éléments pour concevoir et définir une page ou un article de la manière que VOUS le souhaitez.

Divi builder

Nous ne savons pas trop qui a créé le produit de création de première page, mais certainement, Elegant Themes ont été l'un des vendeurs à rendre ce concept très très réussi.

Dès que les gens ont vu le potentiel, tous les principaux fournisseurs ont commencé à prendre le train en marche.

Aujourd'hui, la plupart des principaux fournisseurs intégreront une sorte de constructeur de page visuel dans leur thèmes - s'ils n'en ont pas eux-mêmes, ils s'associeront à quelqu'un et intégreront / activeront cette fonctionnalité dans leur thème.

Alors qu'en est-il de Divi et Beaver Builder?

ElegantThemes sont dans ce créneau depuis si longtemps qu'ils ont vraiment compris ce que les gens veulent et le leur ont donné - leur produit est l'un des plus populaires, avec plus de 600,000, 701,600 XNUMX ventes.

Ils se concentrent sur les utilisateurs qui veulent créer un site Web mais ne sont pas dérangés par ce qui se passe sous le capot - ils veulent juste que les choses fonctionnent et ne veulent pas devenir techniques à ce sujet ou jouer avec du code.

Elegant Themes Audience cible: 

Les personnes qui souhaitent concevoir et faire fonctionner un site Web sans impliquer un développeur or en savoir plus sur le code.

Exemples d'utilisateurs:

  1. Propriétaires de petites entreprises
  2. Bloggers
  3. SEO
  4. Propriétaires de sites Web affiliés
  5. Rédacteurs de contenu qui créent des sites Web
  6. Concepteurs de sites Web
  7. Agences de marketing digital

Si vous deviez jeter un œil à l'image ci-dessous, Divi s'adresse au concepteur. En fait, vous voudrez peut-être vérifier certains exemples de thèmes Divi en direct ici.

Designer vs développeur

Beaver Builder a un type d'utilisateur différent. Tandis que ElegantThemes cible ceux qui sont less "technique", BB s'attaque aux utilisateurs qui sont des concepteurs et des développeurs dans l'âme. Divi a certaines limitations que ces types de développeurs trouvent frustrantes, et BB identifie et résout correctement ces problèmes. 

Cela a permis à ce produit de bien décoller avec ceux qui s'identifient davantage en tant que développeurs.

Si vous souhaitez savoir comment les produits ET se comparent aux autres options populaires disponibles, vous voudrez peut-être consulter les deux articles suivants que nous avons également écrits:

https://www.collectiveray.com/wp/themes/divi-vs-genesis-website.html

à ces émotions et de

https://www.collectiveray.com/wp/themes/divi-vs-avada

En continuant sur l'image ci-dessus, BB serait plus à l'aise avec le développeur.

Public cible de BeaverBulder:

Développeurs Web et designers qui aiment à bricoler avec le code, avoir le contrôle total de ce qui se passe et pouvoir modifier les choses pour les faire fonctionner comme ils le souhaitent, et non comme le fournisseur l'a conçu.

Exemples d'utilisateurs:

  1. Les développeurs Web
  2. Les concepteurs Web qui veulent bricoler le code
  3. Agences numériques
  4. Freelancers

Une fois cette introduction terminée, commençons à creuser dans chaque produit, afin que nous puissions voir les caractéristiques, les fonctions, les avantages et les inconvénients de l'utilisation de l'un de ces deux éléments.

Commençons par discuter de l'interface utilisateur de ces deux produits.

L'interface utilisateur et l'expérience utilisateur de WordPress PageBuilder

L'équipe de Divi Builder Interface

ElegantThemes travaillent sur leur produit depuis plusieurs années à ce stade. Avec une forte communauté qui les soutient, leur donne beaucoup de bons commentaires - ces gars savent comment rester à l'écoute de leurs utilisateurs.

Ils ont construit une interface entièrement axée sur une grande expérience utilisateur.

Ils n'ont pas construit des tas de fans par accident. Leur concentration stricte sur la conception et la convivialité de leur produit a été l'un des aspects clés du succès de ce constructeur.

Jetez un œil à cette courte vidéo d'introduction (2 minutes). C'est à partir de la toute première version de Divi (2015), beaucoup de choses ont changé depuis, mais c'est super d'avoir un rapide résumé des possibilités.

zH0xUAb3Yws

Mais jetons un coup d'œil à l'interface utilisateur.

Après avoir installé Divi, vous pourrez accéder au constructeur en créant un nouvel article ou une nouvelle page. La première chose que vous allez voir est la suivante:

interface divi

En cliquant sur le Utiliser Divi Builder Le bouton vous redirigera vers le nouvel éditeur visuel, qui a été introduit dans Divi 3.18.

Cette fonction est en réponse à WordPress 5.0 après l'introduction du nouvel éditeur Gutenberg comme vous pouvez le voir sur l'image ci-dessus. L'ancien éditeur back-end de Divi n'est désormais plus disponible pour une utilisation avec le nouvel éditeur de publication WordPress.

Voilà pourquoi Elegant Themes se sont concentrés sur l'amélioration de leur éditeur visuel front-end et ont fait en sorte que le back-end et le front-end soient désormais jointslessment intégrés les uns aux autres.

Cependant, vous avez toujours la possibilité de revenir non seulement à l'éditeur backend classique de Divi, mais également à l'éditeur de publication WordPress classique. Tout ce que tu as à faire est d'aller à Divi > Options du plugin > Avancé.

activer l'éditeur classique

Basculez le "Activer l'éditeur classique»Sur Activé pour ramener l'éditeur de publication WordPress d'origine.

L'activation de cette option ramènera également l'éditeur back-end complet de Divi. Ensuite, basculez le « Activer les dernières Divi Builder De l'expérience" to disabled ramènera le constructeur de backend pré-Gutenberg Divi (cependant, gardez à l'esprit que vous perdrez certaines des dernières fonctionnalités et améliorations du constructeur moderne).

L'éditeur en temps réel frontal vous permet désormais de concevoir et de visualiser la page sur laquelle vous travaillez à la volée.

C'est franchement une fonctionnalité intéressante car vous n'avez pas à "deviner" ou à actualiser le frontal pour voir le résultat de la conception sur laquelle vous travaillez.

Vous pouvez le voir au fur et à mesure que vous le concevez.

C'est quoi ElegantThemes appellent "Une nouvelle expérience visuelle".

Interface utilisateur

Ils ont récemment travaillé à la création d'une nouvelle version du Builder (qui a été publiée en tant que version 3.0). Le nœud de cette version était qu'au lieu d'avoir deux "vues" séparées, une vue backend et une vue en direct, les deux se fondraient dans la même chose. L'éditeur principal affiche la version en direct pendant que vous travaillez.

Le nouveau constructeur visuel de Divi a remplacé les anciens éditeurs back-end / front-end.

Ci-dessous, vous pouvez voir à quoi ressemble le nouveau constructeur. Remarquez comment vous pouvez coudrelessBasculez simplement entre la vue principale (filaire) et la vue frontale d'un simple clic de souris.

vue filaire

Il s'agit d'une expérience WYSIWYG complète (ce que vous voyez est ce que vous obtenez). 

Jetez un œil à l'image ci-dessous - voyez cette conception dans le backend? C'est exactement ce à quoi il ressemblera une fois publié.

Pour accéder au constructeur de pages à partir du backend, accédez à Publications > Ajouter un nouveau. Sur la page résultante, cliquez sur le bouton « Utiliser le Divi Builder" bouton. Cela ouvrira l'interface, qui ressemble à ce qui suit

 

Frontend Divi 3 Pagebuilder

 

Divi (que nous avons déjà examiné ici) vous permet de créer des sections distinctes pour différentes parties de la page. Il prend en charge trois types de sections: standard, pleine largeur et spécialisée.

Pour les sections standard et pleine largeur, vous pouvez choisir une structure basée sur des colonnes. Il existe de nombreuses combinaisons dont deux, trois, quatre colonnes de tailles différentes. La section spécialisée comprend neuf structures de colonnes spécialement créées. Vous pouvez ajouter plusieurs lignes à l'intérieur d'une section pour avoir plusieurs structures de colonnes.

Colonnes

Une fois que vous avez choisi une mise en page, vous pouvez ajouter des modules aux colonnes individuelles. Vous trouverez des options distinctes pour fournir le contenu du module, configurer les options de conception et fournir un CSS personnalisé.

Vous pouvez repositionner les modules, colonnes, lignes et sections en les faisant glisser et en les déposant aux emplacements souhaités. Il existe des boutons dédiés pour supprimer, dupliquer et ouvrir la section des paramètres pour chacun de ces éléments. Il est également possible d'annuler, de refaire les dernières actions et de revenir aux actions précédentes en utilisant la fonction d'historique.

Pour utiliser le constructeur de pages depuis le frontend, visitez la page que vous souhaitez modifier et cliquez sur le bouton «Activer Visual Builder».

Selon le contenu de la page, le chargement de l'interface peut prendre un certain temps (attention, l'éditeur frontal est assez lourd et a besoin de temps pour télécharger et rendre).

Interface frontale de Divi

Une fois que le constructeur de pages frontal est chargé, vous pouvez commencer à personnaliser la page.

Comme l'interface backend, vous pouvez ajouter une nouvelle section, choisir la structure des colonnes et profiter d'un accès complet à toutes les options de paramètres du module.

Bien sûr, un designer sans glisser-déposer est mort dans l'eau, mais bien sûr, ce produit gère très bien D & D.

En fait, non seulement le glisser-déposer, mais il maintient également la réactivité lors de la conception.

Étant donné que vous travaillerez sur les blocs de contenu et d'éléments en direct, vous allez faire glisser les éléments de contenu réels.

Et bien sûr, tout est toujours totalement réactif.

Jetez un œil à la courte démo suivante de blocs réactifs en direct.

 

 Édition réactive

 

Vous pouvez faire glisser et déposer les modules, les lignes, les colonnes et également les copier, coller, supprimer ou modifier ceux-ci en fonction de vos besoins. 

Obtenez 10% de réduction sur Divi jusqu'au Octobre 2021

PS. L'offre ci-dessus est uniquement disponible via CollectiveRay.

Alors, qu'en est-il? ElegantThemes concurrent? A-t-il la même flexibilité ? Est-ce que cela fonctionne en temps réel dans le front-end ?

Lisez le reste de cet article pour trouver la réponse à ces questions. 

Comment utiliser ce service Beaver Builder

Ne voulant pas être laissé pour compte dans la course à la domination des constructeurs de pages, BB est sorti avec toutes les armes à feu.

Ou des grincements de dents, si nous voulons garder l'analogie du castor. 😀

BB propose à la fois l'édition dans le frontend et le backend, donc il ne traîne pas à cet égard.

Il peut être utilisé sur les pages, les articles et la plupart des autres types personnalisés WP, tant qu'ils ont été activés.

En cliquant sur l'onglet Admin pour le type personnalisé approprié, vous verrez le générateur en cours de chargement afin que vous puissiez l'utiliser pour concevoir votre contenu.

Avant de continuer, vous voudrez peut-être visionner la courte vidéo suivante (2 minutes) sur l'utilisation de BB.

tCNDDQ7Jrs8

Essentiellement, dans la méthode backend, après vous être d'abord connecté à votre tableau de bord, allez dans Publications> Ajouter nouveau, et cliquez sur le bouton «Page Builder». Cela fera apparaître l'interface du constructeur de pages - quelque chose de similaire à celui ci-dessous.

Interface utilisateur de BB PageBuilder

La première étape consiste à choisir un modèle pour la page. Vous pouvez choisir l'un des modèles prêts à l'emploi ou commencer avec le modèle vierge pour créer votre propre modèle. Une fois que vous avez choisi le modèle, l'étape suivante consiste à choisir la disposition des lignes.

Vous pouvez choisir la disposition des lignes dans la barre latérale gauche. Ouvrez la barre latérale en cliquant sur le bouton «Ajouter du contenu» dans le menu en haut à gauche de la page. Le menu propose également quelques autres boutons pour changer le modèle, ouvrir les outils, la section, publier la page et un bouton d'aide dédié.

BeaverBuilder propose plusieurs structures de colonnes, dont une, deux, trois, quatre, cinq ou six colonnes et des lignes avec des barres latérales gauche, droite ou les deux.

Faites simplement glisser la disposition des lignes dans la position souhaitée sur la page.

Structure des rangées de castors

L'étape suivante consiste à ajouter des modules aux colonnes. Vous trouverez les modules dans la barre latérale gauche.

Choisissez le module que vous souhaitez utiliser et faites-le glisser vers la colonne souhaitée sur la page. À ce stade, la fenêtre des paramètres du module vous sera fournie. Il existe plusieurs sections pour gérer le contenu et le style du module.

Vous pouvez faire glisser et déposer les lignes et les modules pour modifier leurs positions. Il existe des boutons séparés pour supprimer, dupliquer ou ouvrir les paramètres de n'importe quelle ligne ou module. Il est également possible de modifier la structure de colonne d'une ligne.

Pour accéder au constructeur de pages depuis le frontend, visitez la page que vous souhaitez modifier et cliquez sur le bouton «Page Builder». Cela ouvrira la même interface que la création de la page à partir du backend.

BeaverBuilder interface frontale

Vous pouvez travailler avec la conception existante ou choisir une nouvelle disposition. Toutes les autres options telles que l'ajout de différentes lignes, modules, widgets et leur gestion sont exactement les mêmes que le backend.

Souhaitez-vous voir une démo gratuite en direct de BeaverBuilder à présent? Cliquez sur le bouton ci-dessous. (Ouvre dans une nouvelle fenêtre)

Essayez le BeaverBuilder démo maintenant

 

Les modules disponibles pour Beaver Builder / Divi

Divi Builder

Ce plugin est actuellement livré avec 46 modules de contenu, mais étant donné l'ampleur du développement et des nouvelles versions, vous pourriez probablement en voir plus au moment de la lecture de cet article.

En parlant de nouvelles versions, la nouvelle mise à jour des performances de Divi lancée en août 2021 a envoyé Divi en tête de la file d'attente des thèmes WordPress.

La page construite à l'aide de la nouvelle version de Divi se charge plus rapidement que jamais grâce à une série d'améliorations de code sous le capot.

Ces améliorations comprennent :

  • 94% plus petit CSS
  • CSS intelligent qui ne charge que ce qui est nécessaire
  • Les styles intelligents réduisent la duplication entre les feuilles de style pour un chargement plus rapide
  • PHP dynamique pour un traitement plus rapide
  • Optimisation JavaScript
  • Report de la feuille de style Gutenberg
  • report jQuery

Parmi ceux-ci, vous trouverez les plus réguliers comme:

  • texte,
  • chercher,
  • accordéon,
  • ,
  • CTA,
  • audio,
  • vidéo,
  • code personnalisé,
  • cloison

Les choix avancés d'éléments incluent:

  • compteur,
  • opter,
  • portefeuille,
  • s'identifier,
  • carte,
  • personne,
  • tableau des prix,
  • témoignage, et
  • curseur vidéo

Bien sûr, ce ne sont pas les seuls modules disponibles, mais si nous continuions à les lister, étant donné qu'il y a plus de 46 éléments pris en charge, nous serions là pour toujours.

Disons simplement que vous êtes le plus susceptible de trouver un module pour toutes les exigences dont vous aurez besoin.

Si vous ne trouvez pas un tel module intégré, vous pouvez opter pour des éléments tiers développés spécifiquement pour des exigences particulières.

Avec la version 3.1, une API a été développée et publiée, vous pouvez vous attendre à ce que des éléments et des modules personnalisés commencent à apparaître partout.

Des moments amusants à venir!

Voyons ce que les autres développeurs proposeront. Restez à l'écoute.

Mais assez à ce sujet, voyons comment utiliser un module:

Divi builder modules

Cliquez sur le module souhaité pour l'ajouter à l'article. À ce stade, vous devez configurer les paramètres du module. 

Le constructeur de pages vous propose trois sections à cet effet:

  1. Contenu,
  2. Conception et
  3. Avancé.

L'équipe de du Paquet La section comprend toutes les options concernant le contenu du module choisi.

Design vous permet de choisir la couleur, la police, le style d'arrière-plan, la bordure, la marge et le remplissage du module.

Enfin, Avancé inclut des champs dédiés pour ajouter un ID CSS personnalisé, une classe et pour appliquer un CSS personnalisé avant ou après le module ou au contenu principal.

Souhaitez-vous lire plus d'informations sur ce plugin maintenant ? Cliquez sur le bouton ci-dessous pour visiter le ElegantThemes en ligne.

Obtenez 10% de réduction sur Divi jusqu'au Octobre 2021

PS. L'offre n'est disponible qu'à partir du lien ci-dessus. 

Beaver Builder

BB divise les modules en deux catégories -

  1. Modules de base et
  2. Modules avancés

Les modules de base comprennent:

  • éditeur de texte,
  • rubrique,
  • HTML,
  • ,
  • image,
  • vidéo, et ainsi de suite.

L'autre catégorie contient des modules plus avancés:

  • CTA,
  • curseur de contenu,
  • compte à rebours,
  • menu,
  • curseur de messages,
  • onglets,
  • et ainsi de suite

Modules BB

Le plugin propose trois sections pour gérer un module -

  1. Général,
  2. Style et
  3. Avancé.

Parmi ceux-ci, le Général: La section vous permet de configurer les paramètres liés au type de module.

L'équipe de Style La section vous permet de choisir la couleur, l'alignement, la police et d'autres styles pour les versions de bureau et mobiles.

Avancé comprend des options pour configurer la visibilité, l'animation ainsi que des champs dédiés pour l'ajout de classe CSS et d'ID.

Vous pouvez voir une démo plus claire du BeaverBuilder caractéristiques ci-dessous.

Visit BeaverBuilder Site Entreprise

La prochaine partie de notre Beaver Builder vs Divi review traitera des modèles de pages disponibles ou des mises en page prédéfinies. C'est quelque chose qui vous simplifiera la vie et vous permettra de concevoir de tout nouveaux sites Web en quelques heures, voire quelques minutes, au lieu de quelques semaines.

Voyez ci-dessous ce que nous voulons dire!

Modèles de page intégrés

Les modèles de page intégrés sont essentiellement là pour raccourcir votre temps de conception / développement. En les mettant en place, il vous suffit de modifier légèrement le contenu et la conception et vous êtes prêt à partir!

Divi Builder Modèles de page (alias mises en page)

Lors de la sortie de la version 3.0, elle était fournie avec plusieurs (plus de 100) modèles prêts à l'emploi pour vous aider à démarrer le plus rapidement possible.

Vous pouvez utiliser un modèle en cliquant sur le bouton «Charger à partir de la bibliothèque» dans l'éditeur de publication. Cela ouvrira une liste des modèles disponibles.

disposition prédéfinie de divi

Vous trouverez des mises en page professionnelles pour la page de destination, à venir, à propos de moi, contactez-nous, l'équipe, la page de maintenance ainsi que plusieurs variantes pour la page d'accueil, le blog, la boutique et les pages de portfolio.

Il est possible d'utiliser ces mises en page telles quelles ou de les personnaliser selon vos besoins.

Bien sûr, on peut avoir un assez grand nombre de mises en page de modèles (ou comme les appelle ET), mais la vraie question est de savoir si elles sont réellement bonnes et utilisables pour créer vos propres conceptions.

Essentiellement, l'idée de base est la suivante: vous chargez une mise en page prédéfinie, puis vous personnalisez le texte, les images et les autres contenus en fonction de votre entreprise et - voilà - vous avez un site Web "conçu" incroyable sans nécessiter de connaissances en conception réelles .

C'est une grande puissance entre les mains de ceux qui veulent mettre les choses en marche rapidement mais qui ne sont pas très à l'aise avec le code ou la conception en soi.

Juste un FYI - il y a plus de 250 mises en page disponibles au moment de la rédaction de cet article.

Voyons rapidement ce qui est disponible en termes de mises en page.

Packs de sites Web complets

Il s'agit ici d'une fonctionnalité qui, selon nous, est idéale pour le public cible auquel ce produit est destiné. Étant donné que nous avons mentionné que le public était constitué de personnes qui souhaitent lancer quelque chose rapidement, la disponibilité de packs de sites Web complets est vraiment ablessING.

Essentiellement, il s'agit d'un ensemble des 7 à 8 pages essentielles conçues individuellement pour que quelqu'un puisse simplement lancer un site complet en quelques minutes. 

Regardez comment Nick Roach d'ET décrit la valeur que les mises en page apportent à ce produit. (Oui, vous remarquerez que les cheveux de Nick sont plus longs, un certain temps s'est écoulé entre les deux vidéos!).

Y31_8DPOqlY

Les pages sont personnalisées pour le créneau / l'industrie spécifique, avec les éléments essentiels requis pour ce type d'entreprise spécifique.

Tout ce que vous devez faire en tant qu'utilisateur est d'importer la conception et de modifier le contenu en fonction de vos besoins spécifiques.

Voici quelques-unes des niches disponibles sous forme de packs de sites Web. À l'heure actuelle, 31 packs de mise en page sont disponibles avec un total de 250 pages conçues.

  • Page de destination du restaurant - il s'agit d'un pack composé de 8 pages pour fournir tout ce qu'un restaurant ou une entreprise alimentaire pour lancer sa présence en ligne, y compris les heures d'ouverture dans le pied de page pour un accès facile par les clients.

 Page de destination du restaurant

  • Agence de design - le pack agence de design est un ensemble de 9 pages de pages conçues de manière créative et professionnelle pour une agence numérique ou de design. Bien sûr, la priorité est donnée au travail et au style, mettant en valeur les compétences de l'entreprise d'une manière qui convertit
  • Page de destination de la mode - Un secteur qui doit sûrement avoir une belle apparence en ligne est un blog de mode. Ce pack de mise en page de 8 pages vise à permettre au blogueur de marquer son image si nécessaire. Tout est parfait pour les photographes et autres entreprises visuelles.
  • Agence de voyage - la conception ici met fortement l'accent sur l'utilisateur visitant le site qui prend des mesures, poussant et exhortant le spectateur actuel à appeler ou à réserver maintenant avec des boutons d'appel à l'action attrayants.
  • Page d'accueil de mariage - un moyen idéal pour lancer rapidement une vitrine de mariage. Il se concentre bien sûr beaucoup sur l'esthétique et de nombreuses autres fonctionnalités personnalisées spécifiques aux mariages.
  • Entreprise SaaS - un autre type d'entreprise, généralement des startups, qui ont généralement peu de temps à perdre et doivent se mettre en marche rapidement. Ce pack de mise en page leur donne tout ce dont ils ont besoin pour être opérationnels et obtenir les informations nécessaires.

Mises en page Divi

Il existe de nombreuses autres mises en page disponibles, y compris, mais sans s'y limiter:

  • Apprentissage système de gestion
  • Café
  • Marché des fermiers
  • Studio de yoga ou de fitness
  • Marché de la photo
  • Copywriter
  • Fleuriste
  • Agence Web
  • Entreprise de design d'intérieur
  • Activité de paiements numériques
  • Atelier de poterie et d'artisanat
  • Agence de référencement
  • Conseil aux entreprises
  • Conférence de design
  • Recettes alimentaires
  • Law Firm
  • Author
  • etc.

Au fil du temps, ET continue d'ajouter de plus en plus de mises en page à sa bibliothèque pour répondre à des niches spécifiques. Même si votre secteur d'activité spécifique n'a pas été pris en compte pour le moment, vous serez certainement en mesure de personnaliser l'une des mises en page existantes et conçue pour répondre à vos besoins.

Découvrez toutes les mises en page maintenant

 

Beaver Builder Page Templates

BB est également livré avec de nombreux modèles conçus par des professionnels. Il vous sera demandé de choisir un modèle lors de la création d'un nouveau message. Il est également possible de changer le modèle actuel en cliquant sur le bouton «Modèles».

BeaverBuilder modèles

Il existe deux types de mises en page -

  • Pages de destination et
  • Pages de contenu.

Les pages de destination inclure des modèles pour les produits physiques, les applications, les professionnels, les restaurants, la technologie, la mode, la photographie, le mobile, la musique, l'automobile, etc.

Pages de contenu inclure des modèles pour les pages de site Web nécessaires comme le à propos de nous, les services, le portefeuille, l'équipe, le contact, la FAQ, le blog, etc. La plupart de ces modèles sont disponibles dans différents styles. Comme les modèles sont fournis avec une image, vous pouvez facilement choisir le meilleur en fonction de vos besoins.

Examinons un peu plus en profondeur ce qui est disponible pour vous en tant que client de BB.

Landing Pages

BB a conçu plusieurs modèles de pages de destination prêts à l'emploi. Parmi ceux-ci, nous pouvons trouver:

  • Modèle de petite entreprise - basé sur le modèle Probiz, cela vous aidera à créer rapidement une présence pour une petite entreprise.
  • Modèle Fitness, Gym ou Sporty - Le fitness et le sport sont toujours un créneau en vogue et le modèle The Body Factory est spécialement conçu pour les clients de ce secteur. Le yoga, la gym ou toute autre industrie du fitness fonctionne bien avec cela.
  • Magazine, Blogger, Modèle de blogueur de mode - Une autre industrie toujours en vogue, le modèle Fashion Freaks est juste comme un look et une sensation haut de gamme qui crient classe, sophistication et luxe.
  • Avocat, modèle de cabinet d'avocats - Autre créneau en vogue, les avocats et les cabinets d'avocats sont des clients lucratifs, qui exigent une présence capable de convertir des clients bien rémunérés. La présence professionnelle sur le Web peut être facilement adaptée à d'autres industries basées sur la pratique.
    Nous ne mentionnerons que brièvement le reste des modèles
    Modèle DJ Beaver
  • Modèle de portfolio de photographie
  • Modèle DJ / Musicien / Groupe
  • Modèle de restaurant / café
  • Modèle de mise en page plein écran
  • Création, modèle d'agence Web
  • Modèle de livre électronique
  • Modèle d'éducation ou d'université
  • Modèle de voitures / automobile
  • Modèle d'application mobile
  • Modèle commercial général
  • Modèle de construction
  • Modèle à venir

Nous vous recommandons vivement de consulter les démos disponibles avec chacun de ces modèles, pour voir à quel point il est facile de commencer avec ces modèles.

Pages de contenu

Bien que les modèles de sites Web complets soient fantastiques, nous souhaitons parfois encore modifier ou créer des pages spécifiques. Pour cette raison, BB propose également de nombreuses pages de contenu conçues et prêtes à l'emploi.

Les pages de contenu

Voici quelques-unes des pages disponibles:

  • À propos de nous (plusieurs versions)
  • Nos services 
  • Portfolio de photos
  • Portfolio de conception
  • Notre équipe (plusieurs versions)
  • Contact (plusieurs versions)
  • Tarifs (plusieurs versions)
  • Blog (plusieurs versions)

Bien sûr, nous nous attendons à ce que ceux-ci augmentent avec le temps.

Cliquez sur le lien ci-dessous pour accéder directement à la page des modèles. 

PAIEMENT BeaverBuilder modèles

 

Paramètres de PageBuilder 

Divi Builder Paramètres

La configuration de ce plugin est très simple.

Une fois que vous avez installé et activé le plugin, accédez à Options du plugin, et indiquez votre nom d'utilisateur et votre clé API dans la section «Mises à jour» pour recevoir des mises à jour automatiques.

divi builder options de paramètres

Vous pouvez voir des paramètres supplémentaires ici, tels que les paramètres de l'API, l'intégration du type de poste et avancé.

Les paramètres de l'API contiennent des options pour l'intégration de Google Fonts et de Google Maps.

Sous Post Type Integration, vous pourrez activer ou désactiver Divi builder sur certains types de poste.

Sous l'onglet Avancé, vous pouvez trouver des options pour la minification, le générateur de fichiers CSS statiques, etc. et les options pour activer l'éditeur WordPress classique et le constructeur classique de back-end Divi.

L'élément le plus récent ici est la page «Générateur de thèmes».

Ici, vous pouvez trouver les modèles de générateur de thème que vous avez créés ou importés, ainsi que des options pour les importer et les exporter, afficher l'historique de modification du générateur de thème, etc. Nous aborderons cette nouvelle fonctionnalité plus en détail plus loin dans cet article.

Vous trouverez une liste de toutes les mises en page personnalisées dans le Bibliothèque Divi page. Il existe des boutons séparés pour gérer la catégorie de mise en page et pour importer ou exporter les mises en page. Aller à Éditeur de rôle Divi pour définir le niveau d'accès dont disposeront les différents rôles d'utilisateur.

Enfin, dans le centre de support, vous pouvez vérifier l'état de votre serveur système, essentiellement, il affiche des informations importantes sur votre serveur.

S'il y a des options qui ne sont pas réglées sur certaines valeurs recommandées, Divi vous en informera ici afin que vous puissiez les corriger.

C'est également là que vous pouvez configurer «l'accès à distance», permettant à l'équipe d'assistance d'Elegant Theme d'accéder directement à votre tableau de bord d'administration pour vous aider à corriger les erreurs que vous pourriez avoir.

Les autres éléments incluent le mode sans échec et la journalisation.

Beaver Builder Paramètres

Les options de configuration de BB se trouvent dans la page Paramètres> Page Builder. Fournissez votre clé de licence dans la section Licence pour activer les mises à jour automatiques du plugin.

Dans Modules, vous pouvez activer ou désactiver les modules. Les types de publication vous permettent de définir les types de publication pouvant être utilisés BeaverBuilder. Dans Modèles, vous pouvez décider quels modèles seront disponibles dans l'interface du constructeur de pages.

beaver builder options de paramètres

La section Icônes vous permet de décider quelles icônes doivent être disponibles dans l'interface.

Les options disponibles comprennent

  • PoliceSuper,
  • Fondation, et
  • Dashicons. 

Ceci est un exemple de la façon dont BB vous permet de personnaliser et de bricoler toutes les options dont vous avez besoin. Si vous n'êtes pas satisfait d'utiliser FontAwesome, choisissez quelque chose que vous aimez.

Vous trouverez également des sections séparées pour vider le cache, ce qui supprimera tout CSS et Javascript générés dynamiquement.

Enfin, vous trouverez une option pour désinstaller Beaver Builder. Ces fonctions suppriment toutes les données liées à BB de votre base de données WordPress - faites donc des sauvegardes avant de l'utiliser et assurez-vous de savoir ce que vous faites.

Lectures recommandées: https://www.collectiveray.com/beaver-builder-vs-elementor

Options de Lentilles Supplémentaires

Thème Divi

Le plugin de Elegant Themes est livré avec plusieurs autres fonctionnalités intéressantes. Par exemple, la bibliothèque PageBuilder vous permet d'enregistrer des modules et des mises en page personnalisés afin de pouvoir les réutiliser ultérieurement. De plus, il est également possible d'importer ou d'exporter ces éléments vers et depuis d'autres sites Web.

Les options d'espacement de mise en page supérieures exigent également une mention spéciale. Ces options facilitent grandement l'application de l'espacement exact souhaité entre les lignes, les éléments et les sections. Vous trouverez des options dédiées pour définir la marge, le remplissage, l'espacement vertical et horizontal. Il est également possible de configurer les largeurs de ligne et de colonne.

Options d'espacement Divi

Dans certains cas, vous devrez peut-être utiliser le même module à plusieurs endroits. Vous pouvez facilement copier et coller n'importe quel module, ligne ou colonne dans d'autres articles ou pages. De plus, vous pouvez les marquer comme des éléments globaux. Cela vous permet d'apporter des modifications à un seul élément global, et les modifications seront automatiquement appliquées aux autres emplacements également. 

Générateur de thèmes Divi

L'une des plus grandes mises à jour Elegant Themes sorti pour Divi ces dernières années est le Theme Builder.

Cette nouvelle fonctionnalité (à partir d'octobre 2019) vous permet de créer, de concevoir et de personnaliser l'intégralité de votre site Web. Ce n'est plus seulement un constructeur de page, c'est un créateur de thème complet.

Vous pouvez créer des en-têtes et des pieds de page personnalisés globaux ou en définir un pour des zones individuelles de votre site.

Vous pouvez également définir des modèles de corps personnalisés qui vous permettent de créer des modèles de produits personnalisés, des modèles d'articles de blog, 404 pages, des pages de résultats de recherche ainsi que des pages d'archives personnalisées telles que des pages de catégories personnalisées, des pages d'auteur personnalisées, etc.

générateur de thème divi

Le générateur de thème étend la puissance du générateur de page à l'ensemble de votre site Web.

Lors de la création d'un nouveau modèle, vous avez accès à tous les outils et fonctionnalités du générateur de page, vous permettant de le créer et de le concevoir comme vous le souhaitez.

Cela signifie que vous pouvez créer des conceptions personnalisées pour les en-têtes et les pieds de page si vous le souhaitez. Pour compléter cela, le module de menu est livré avec des améliorations telles que des options de mise en page supplémentaires et un contrôle total de la conception pour vous aider à créer de beaux en-têtes et pieds de page avec un menu personnalisé.

Les nouveaux modèles de corps personnalisés vous permettent de modifier tous vos articles, produits ou la conception et la structure de vos pages à la fois.

Avant cela, vous deviez accéder à chaque article, produit ou page et les modifier à l'aide du générateur de page pour apporter des modifications. Il ne vous reste plus qu'à définir un modèle, à l'appliquer aux zones appropriées de votre site et vous avez terminé.

Vous pouvez même utiliser les modules WooCommerce pour créer des modèles de produits personnalisés pour votre boutique en ligne. Il existe également des modules de contenu dynamique équipés d'une boucle de publication mise à jour et d'options de filtrage que vous pouvez utiliser pour créer des pages d'archives personnalisées.

Bien sûr, vous disposez également de tous les moyens de contrôler où et comment votre modèle sera appliqué. Vous pouvez facilement inclure ou exclure certains éléments d'un modèle via des cases à cocher, comme on peut le voir ci-dessous:

logique conditionnelle

Depuis la version 4.0, Divi n'est plus un constructeur de pages, c'est un constructeur de thèmes.

Obtenez 10% de réduction sur Divi jusqu'au Octobre 2021

PS. L'offre ci-dessus est uniquement disponible via le lien ci-dessus à partir de CollectiveRay

Beaver Builder

D'un autre côté, BB a aussi quelques trucs dans ses manches.

Tout d'abord, l'édition frontale en direct est impressionnante. Il offre une expérience intuitive où vous pouvez modifier la page et obtenir la sortie exacte sans aucune conjecture. Il vous permet également d'utiliser les widgets WordPress par défaut et les widgets personnalisés dans vos mises en page.

Beaver Builder Widgets WordPress

Le mode éditeur sera pratique lors de la livraison d'un projet au client. Ce mode vous permet de limiter les capacités du client pour vous assurer qu'il n'effectue aucune modification indésirable dans la mise en page principale.

Une autre caractéristique importante de BB est que le contenu de la page reste intact même après la désactivation du plugin.

Vous perdrez les styles, mais la page affichera toujours le contenu. En revanche, la plupart des autres constructeurs de pages vous laisseront avec un désordre de codes courts lorsque vous désactivez ce plugin.

Visit BeaverBuilder site

 

Avantages et inconvénients

Thème Divi

Avantages

  1. Une solution très puissante pour créer tout type de mise en page,
  2. Une nouvelle mise à jour des performances (août 2021) rend Divi plus rapide que jamais,
  3. Prix ​​attractifs avec accès à de nombreux autres thèmes et plugins WordPress - l'acheter est une évidence, un excellent rapport qualité-prix
  4. De nombreux designs fantastiques, avec de nombreuses options de personnalisation,
  5. Générateur de thèmes puissant,
  6. Une documentation complète et un support performant et réactif

Inconvénients

  1. Prenez le temps de vous y habituer
  2. L'éditeur frontal prend un certain temps à se charger et l'ajout de modules aux pages est beaucoup plus lent que BB
  3. Vous êtes limité aux modules disponibles et développés par ET (bien que la version 3.1 prenne désormais en charge une API de développeur, ce qui signifie que les développeurs commenceront à y intégrer leurs plugins)
  4. Impossible de supprimer les données qu'il ajoute à la base de données, ce qui rend difficile de s'éloigner du thème Divi

Beaver Builder

Avantages

  1. Une interface utilisateur simple,
  2. Le contenu reste intact même après la désactivation du plugin,
  3. Mode éditeur unique pour les clients,
  4. Il vous permet d'utiliser des widgets WordPress dans les mises en page.
  5. Interface utilisateur rapide, dynamique et réactive avec une interface facile à comprendre
  6. Grand choix de modèles professionnels pour vous aider à démarrer votre conception
  7. Prend en charge les widgets natifs WP afin que vous puissiez utiliser tous les plugins disponibles pour WP dans BB

Inconvénients

  1. Plus cher que les autres constructeurs de pages WordPress

Prix ​​de Divi vs Beaver Builder

 

Les deux Beaver Builder et Divi sont compatibles GPL, ce qui signifie que vous pouvez les utiliser sur autant de sites que vous le souhaitez. produits afin que vous puissiez les utiliser sur autant de sites Web que vous le souhaitez.

Vous pouvez opter pour trois plans différents avec Beaver Builder à partir de 99 $ jusqu'à 399 $. Chaque plan ou licence vous donne un accès complet au Beaver Builder plugin et tous les modules et modèles, les niveaux supérieurs vous offrant des fonctionnalités plus avancées telles que Multisite, White labeling et Themer.

Avec Divi, vous n'avez que deux options, par an, à un prix standard de 89 $ qui nécessite un achat annuel, ou l'option à vie à 249 $. Les deux ont exactement le même accès, mais bien sûr, vous perdez l'accès au support et aux mises à niveau une fois l'année passée.

Jetons un coup d'œil plus détaillé. 

Divi Builder

Vous devez être un Elegant Themes membre d'utiliser leurs plugins - et l'accès se fait aux tarifs ci-dessous. 

Deux plans sont disponibles pour vous - Accès annuel et Accès à vie.

Le plan d'accès annuel est au prix de 89 $ par an. D'autre part, l'accès à vie vous permet de profiter de tous ces avantages pour un paiement unique de 249 $.

Heureusement, il y a une EXCLUSIVITÉ à CollectiveRay Offre de 10 % de réduction en cours en ce moment alors faites-vous une bonne affaire aujourd'hui. Tant que vous y êtes, autant obtenir l'accès à vie compte tenu de cette réduction limitée dans le temps!

Les deux plans offrent un accès illimité à tous les thèmes et plugins développés par ElegantThemes.

Vous bénéficierez également de mises à jour rapides, d'un support premium et d'une garantie de remboursement de 30 jours.

Obtenez 10% de réduction sur Divi jusqu'au Octobre 2021

 

Beaver Builder

Beaver Builder établissement des prix

Beaver Builder propose trois plans tarifaires. Le plan Standard est au prix de 99 $, ce qui vous permet d'utiliser le plug-in sur un site Web, vous offre un an d'assistance et un accès aux modules et modèles premium.

Pro est au prix de 199 $, ce qui comprend tous les avantages du plan standard, ainsi que le thème BB et la compatibilité multisite.

Enfin, Agency est au prix de 399 $ et bénéficie de toutes les fonctionnalités de Pro avec une autorisation complète d'étiquetage blanc.

Acheter BeaverBuilder Maintenant

Foire aux questions

Quel est le meilleur Divi ou Beaver Builder?

Divi vaut mieux que Beaver Builder dans certaines situations. Divi est idéal si vous souhaitez un contrôle total sur la conception de votre site Web et prévoyez de l'utiliser pendant longtemps. Beaver Builder a l'avantage d'être plus petit et facile à prendre en main. Alors qu'on dit que Divi c'est mieux, il n'y a pas grand-chose dedans !

Is Beaver Builder plus rapide que Divi ?

Beaver Builder n'est plus plus rapide que Divi. Il chargeait l'éditeur plus rapidement et est plus rapide à utiliser et à apprendre. Cependant, une nouvelle mise à jour des performances de Divi introduite en août 2021 a transformé le fonctionnement de Divi. C'est maintenant l'un des thèmes WordPress les plus rapides que vous puissiez acheter.

Quel est le meilleur - Divi ou Elementor?

Divi est meilleur que Elementor pour certaines choses tandis qu'Elementor est plus fort dans d'autres. Divi est meilleur pour l'accès aux plugins et aux fonctionnalités, à son plan d'agence et à la puissance du constructeur de pages. Elementor est meilleur pour être gratuit, avec des options premium et très facile à maîtriser.

Elementor est-il le meilleur constructeur de pages?

Elementor le meilleur constructeur de page si vous voulez un constructeur de page accessible gratuitement. Si vous recherchez un constructeur puissant et autonome pour créer un ou deux sites Web, vous ne pouvez tout simplement pas faire mieux qu'Elementor. C'est rapide, gratuit et facile à utiliser. De quoi pourriez-vous avoir besoin de plus?

 

 

 

Quel Pagebuilder devriez-vous choisir?

Nous arrivons maintenant à la partie (difficile) où nous devons choisir entre ces constructeurs de pages.

Comme vous l'avez remarqué, les deux plugins offrent un excellent rapport qualité-prix. Ils offrent une excellente interface utilisateur et vous permettent de créer beaucoup plus facilement des mises en page personnalisées.

Comme les deux plugins ont leurs cas d'utilisation, vous devez savoir lequel répond le plus à vos besoins. Laisse moi t'aider avec ça -

  • Choisissez des Divi si vous voulez un contrôle complet sur la mise en page. Une fois que vous vous êtes habitué aux options disponibles, c'est un outil très puissant vous permettant de créer n'importe quel type de mise en page que vous souhaitez.
    Résultat final: 5 sur 5.
  • Aller avec Beaver Builder si vous souhaitez vous lancer rapidement. Comme ce constructeur de pages n'utilise aucun code court, vous pouvez facilement supprimer le design actuel et en essayer un nouveau en quelques clics de souris.
     Résultat final: 4.5 sur 5

 

Si vous recherchez d'autres options, vous voudrez peut-être également vérifier Visual Composer or Elementor Pro, que nous avons tous deux traités séparément sur ce site. Elementor et Visual Composer sont tous deux des acteurs majeurs dans le créneau du constructeur de pages.

Mots finaux: Beaver Builder contre Divi

Divi et Beaver Builder sont deux des plugins de création de pages les plus populaires en ce moment. ONUless vous avez beaucoup utilisé les deux plugins, il est vraiment difficile de choisir l'un plutôt que l'autre. Cet article de comparaison devrait vous aider à prendre cette décision.

Nous pensons que Elegant Themes vous donne plus de valeur dans l'ensemble, étant donné que vous avez accès à une tonne de thèmes et de plugins WordPress, mais BB est également un excellent choix. De plus, cette nouvelle mise à niveau des performances qu'ils ont introduite a véritablement changé la donne. C'est vraiment difficile de choisir Beaver Builder sur Divi maintenant.

Obtenez 10% de réduction sur Divi jusqu'au Octobre 2021

Acheter BeaverBuilder Maintenant

Alors, lequel avez-vous choisi? Faites-nous savoir dans les commentaires ci-dessous. 

À propos de l’auteure
David Attard
Auteur: David AttardSite Web : https://www.linkedin.com/in/dattard/
David travaille dans ou autour de l'industrie en ligne / numérique depuis 18 ans. Il possède une vaste expérience dans les industries du logiciel et de la conception Web utilisant WordPress, Joomla et les niches qui les entourent. En tant que consultant numérique, son objectif est d'aider les entreprises à obtenir un avantage concurrentiel en utilisant une combinaison de leur site Web et des plates-formes numériques disponibles aujourd'hui.

Encore une chose ... Saviez-vous que les personnes qui partagent des informations utiles comme cet article ont l'air géniales aussi? ;-)
Si vous voulez, vous pouvez laisser un incontournable commentez vos pensées, puis partagez-les sur votre ou vos groupes Facebook qui trouveraient cela utile et récoltons ensemble les avantages. Merci d'avoir partagé et d'être gentil!

Divulgation: Cette page peut contenir des liens vers des sites externes pour des produits que nous aimons et que nous recommandons sans réserve. Si vous achetez des produits que nous suggérons, nous pouvons percevoir des frais de parrainage. Ces frais n'influencent pas nos recommandations et nous n'acceptons pas les paiements pour les avis positifs.

Auteur (s) présenté sur:  Logo du magazine Inc   Logo Sitepoint   Logo CSS Tricks    logo webdesignerdepot   Logo WPMU DEV   et beaucoup plus ...