Castor Builder contre Divi 2022

Publié: 2017-03-06
Castor Builder contre Divi 2022

Avantages

Avantages du constructeur de castor

Une interface simple et conviviale. Les mises en page, les lignes et les modules se chargent tous rapidement. La qualité des modèles de page de destination et des modèles de page de contenu est élevée. Chaque partie de votre mise en page peut être enregistrée pour une utilisation ultérieure.

Les plus de Divi

Inclut un éditeur de page frontal et principal polyvalent. Une immense bibliothèque de mises en page prédéfinies et de packs de mise en page. Des milliers d'options de personnalisation sont disponibles dans Divi Builder. Un abonnement à Elegant Themes offre un excellent rapport qualité-prix.

Les inconvénients

Inconvénients du constructeur de castors

L'accès au thème Beaver Builder coûte beaucoup plus cher. Les modules de contenu ne sont pas aussi stylés que ceux de Divi Builder. Les mises en page prédéfinies ont fière allure, mais il n'y en a pas autant parmi lesquelles choisir.

Inconvénients de Divi

Il faut un peu plus de temps pour apprendre comment fonctionne Divi Builder. Divi nécessite plus de ressources pour fonctionner efficacement. Pas aussi rapide que Beaver Builder.

Résumé

Beaver Builder et Divi sont deux des meilleures solutions de création de pages par glisser-déposer dans le monde WordPress. Il est facile de recommander les deux solutions, mais un abonnement à Elegant Themes offre généralement un meilleur rapport qualité-prix en raison des autres produits WordPress premium inclus dans le package.

Beaver Builder et Divi sont deux des meilleures solutions de création de pages par glisser-déposer dans le monde WordPress. Il est facile de recommander les deux solutions, mais un abonnement à Elegant Themes offre généralement un meilleur rapport qualité-prix en raison des autres produits WordPress premium inclus dans le package.

Les éditeurs What You See Is What You Get (WYSIWYG) sont un incontournable des logiciels informatiques depuis les années 1970, mais dans le monde WordPress, nous voyons de plus en plus de propriétaires de sites Web passer aux constructeurs de pages par glisser-déposer pour les aider à créer des pages élégantes. articles de blog et pages professionnelles.

Cette adoption s'est intensifiée depuis que WordPress a introduit le nouvel éditeur de blocs appelé Gutenberg dans WordPress 5.0 en 2018. Bien sûr, l'éditeur classique est toujours disponible pour ceux qui préfèrent l'ancien éditeur visuel.

Le nouvel éditeur de blocs est gratuit, dispose d'une interface conviviale et de nombreux blocs de contenu utiles disponibles pour la sélection.

J'aime la simplicité de l'éditeur de blocs WordPress, mais il est indéniable qu'il s'agit d'une solution de base. Ses blocs de contenu ont peu d'options de personnalisation et il n'y a pas de système de modèles intégré. Cela limite considérablement ce que vous pouvez créer.

Si vous cherchez à faire passer votre site Web au niveau supérieur, je vous recommande d'utiliser une solution avancée de création de pages par glisser-déposer telle que Beaver Builder ou Divi.

Ces plugins WordPress réactifs vous donnent un meilleur contrôle sur la façon dont vous stylisez vos articles de blog, vos pages et vos types de publication personnalisés.

Dans cet article, je voudrais vous montrer comment ces plugins de création de pages se comparent pour vous aider à voir lequel est le mieux pour vous et vos projets.

Une version allégée de Beaver Builder est disponible sur WordPress.org, mais comme la version gratuite manque de nombreuses fonctionnalités, cet article se concentrera plutôt sur la version complète de Beaver Builder.

L'interface du constructeur de castor

Beaver Builder est un éditeur frontal qui peut être lancé à partir de différentes zones de WordPress.

Lorsque vous créez un nouvel article de blog, une page ou un type d'article personnalisé dans l'éditeur de blocs WordPress, vous verrez une option pour "Lancer Beaver Builder" ou "Utiliser l'éditeur standard".

Lancer Beaver Builder

Le bouton "Lancer Beaver Builder" ne s'affiche pas automatiquement dans l'éditeur Gutenberg. Il n'apparaît que lorsque vous ajoutez un bloc Beaver Builder à votre page.

Si le bloc Beaver Builder n'est pas disponible, consultez la page des paramètres de Beaver Builder pour vous assurer que le type de publication correspondant est activé.

Bloc de construction de castor

Beaver Builder peut également être lancé à partir de l'éditeur classique et de la page principale de la liste des publications, des pages et des types de publication personnalisés.

Une fois connecté, vous verrez également une option pour modifier une page dans la barre d'administration de WordPress.

Lancer Beaver Builder depuis la barre d'administration de WordPress

Lorsque Beaver Builder se charge, vous verrez un menu sur le côté droit qui affiche les modules disponibles. Les onglets pour les lignes, les modèles et les mises en page enregistrées sont également affichés ici.

Cliquer sur le symbole X ci-dessus ferme le menu, mais vous pouvez recharger le menu en cliquant sur le symbole + qui est maintenant affiché.

L'interface du constructeur de castor

En haut à droite de la page, vous verrez un rappel indiquant que votre page a été modifiée et contient des modifications non publiées. Si vous cliquez sur le bouton Terminé, des options s'afficheront pour vous permettre de supprimer votre mise en page, d'enregistrer un brouillon ou de publier votre mise en page.

Boutons d'enregistrement de Beaver Builder

Le côté supérieur gauche de la page affiche la publication, la page ou le type de publication personnalisée que vous modifiez. Cliquer dessus chargera le menu des outils de Beaver Builder.

Il y a beaucoup de paramètres et de fonctionnalités cachés dans ce menu.

À partir de là, vous pouvez publier votre mise en page, enregistrer la mise en page en tant que modèle, dupliquer la mise en page, voir toutes vos révisions, vérifier votre historique des modifications, etc.

Les paramètres globaux et les paramètres Javascript et CSS sont également accessibles à partir de ce menu, et le bas du menu affiche des raccourcis vers la zone d'administration WordPress et les pages de support.

Outils de construction de castors

À droite du menu Outils se trouve une cloche de notification qui affiche les mises à jour du plugin et les derniers articles du blog Beaver Builder.

Notifications des constructeurs de castors

Pour ajouter un nouveau module ou une nouvelle ligne dans votre mise en page, il vous suffit de le faire glisser et de le déposer dans la zone de canevas principale.

Plusieurs configurations de colonnes préconfigurées sont disponibles pour les lignes, ainsi que des dispositions de colonnes enregistrées, des lignes enregistrées et des lignes prédéfinies.

Colonnes de constructeur de castor

Une fois que vous avez ajouté de nouvelles lignes, un aperçu de la structure s'affiche sur votre page. Vous pouvez faire glisser et déposer un module de contenu dans n'importe laquelle de ces cases.

Contour des lignes et des colonnes

En haut à gauche des lignes et des modules, vous verrez des options pour déplacer l'élément vers une autre partie de votre mise en page. La ligne ou le module en question peut également être dupliqué ou supprimé à partir d'ici.

Les lignes et les colonnes ont un bouton de paramètres et un bouton d'actions qui vous permettent de réinitialiser les largeurs de ligne et de colonne.

Les largeurs, les couleurs, les arrière-plans, les bordures, etc. peuvent être ajustés dans l'onglet style de la boîte de paramètres. En plus des marges et du rembourrage, l'onglet avancé vous permet de restreindre la visibilité aux utilisateurs connectés et d'ajuster le point d'arrêt pour les utilisateurs mobiles.

Paramètres de ligne Beaver Builder

Il faut un peu de temps pour se familiariser avec n'importe quel constructeur de pages WordPress, mais Beaver Builder est sans aucun doute l'une des solutions les plus faciles à prendre en main. C'est aussi l'un des plus rapides, avec les modifications que vous apportez qui se chargent presque instantanément.

Beaver Builder vous permet de styliser chaque aspect de votre mise en page, mais comme vous le verrez, Divi offre de nombreuses autres options de personnalisation lors de la création de mises en page.

L'interface du constructeur Divi

Les thèmes élégants utilisent le mot Divi pour décrire à la fois leur thème WordPress populaire et leur constructeur de pages par glisser-déposer.

Cela provoque une petite confusion chez ceux qui découvrent Elegant Themes, c'est pourquoi ils distinguent parfois les produits en appelant le design "Divi Theme" et le constructeur de page "Divi Builder".

Pour l'instant, je voudrais me concentrer sur Divi Builder. Ce constructeur de pages est intégré au thème Divi mais est également disponible en tant que plugin WordPress autonome pour ceux qui souhaitent l'utiliser avec d'autres thèmes WordPress.

Une fois Divi Builder activé, vous verrez une option "Utiliser Divi Builder" lorsque vous ajoutez une nouvelle publication, une page ou un type de publication personnalisé.

Cela lancera le constructeur visuel frontal, mais un éditeur principal appelé Legacy Builder sera également disponible.

Créez votre mise en page avec Divi

Vous pouvez basculer vers Divi Builder à tout moment depuis l'éditeur de blocs WordPress par défaut.

Utiliser le bouton Divi Builder

Divi Builder peut également être lancé à partir des principales pages de liste des publications, des pages et des types de publication personnalisés.

Comme Beaver Builder, si vous êtes connecté, vous verrez une option pour activer Divi Builder depuis la barre d'administration de WordPress.

Activer le constructeur visuel

Les thèmes élégants ont également un bloc de mise en page Divi.

Ce bloc vous permet d'insérer n'importe quelle mise en page Divi directement dans une mise en page que vous avez créée avec l'éditeur de blocs WordPress par défaut.

Bloc de mise en page Divi

Lorsque vous lancez Divi Builder pour la première fois, il vous sera demandé si vous souhaitez créer une mise en page à partir de rien, choisir une mise en page prédéfinie ou cloner une autre page que vous avez déjà créée.

L'écran de sélection de Divi Builder

Si vous partez de zéro, Divi Builder chargera votre canevas vierge et affichera une case pour insérer une nouvelle ligne.

Il y a 20 lignes disponibles pour la sélection, et chacune a une structure de colonne différente.

Insérer une nouvelle ligne dans Divi

Une fois que vous avez inséré une ligne, Divi Builder vous demande de sélectionner un module à ajouter à votre page.

Insérer un nouveau module dans Divi

Divi Builder charge alors la boîte de paramètres du module que vous avez sélectionné.

Paramètres des boutons

Si vous êtes nouveau sur Divi Builder, je vous recommande de vous familiariser avec le fonctionnement de l'éditeur en sélectionnant une mise en page prédéfinie, car cela vous donne quelque chose à jouer.

Les utilisateurs expérimentés peuvent préférer commencer avec une toile vierge, mais sachez que le menu principal ne se charge pas automatiquement lorsque vous sélectionnez cette option.

Pour charger le menu principal, cliquez sur le bouton avec les trois points horizontaux en bas de la page.

Menu principal de Divi Builder

Les options du menu principal sont divisées en trois colonnes.

Vous pouvez charger les paramètres du constructeur via l'icône des trois points verticaux sur le côté gauche du menu.

Trois modes d'affichage différents peuvent être ajoutés à votre menu à partir d'ici : le mode survol, le mode clic et le mode grille. Ces modes modifient la façon dont vous interagissez avec votre mise en page et apportez des modifications. Par exemple, en mode survol, le simple fait de survoler une partie de votre page mettra en surbrillance les modules, les colonnes, les lignes et les sections, et vous pourrez ensuite apporter des modifications.

Les autres paramètres de la zone des paramètres du générateur incluent le mode d'affichage par défaut, l'intervalle d'état de l'historique et le flux de création de page.

Paramètres du constructeur visuel

Si vous avez créé une mise en page complexe, il peut arriver que la mauvaise partie de la page soit mise en surbrillance. Par exemple, vous pouvez vouloir déplacer une colonne, mais vous sélectionnez accidentellement la ligne à laquelle elle appartient.

Une façon de résoudre ce problème consiste à utiliser le mode d'affichage filaire. Cela supprime les éléments de conception inutiles de votre vue pour vous aider à voir plus facilement la structure de votre page. C'est incroyablement utile pour déplacer des éléments dans une mise en page complexe.

Le côté gauche du menu propose également des options pour vous permettre de voir votre conception en mode bureau, tablette et mobile.

Vue filaire de Divi Builder

Il y a sept options dans le menu du milieu. Le bouton X au milieu ferme le menu.

Sur la gauche, vous pouvez charger une mise en page à partir de la bibliothèque, enregistrer votre mise en page actuelle et effacer votre mise en page. Sur la droite, vous pouvez afficher les paramètres de la page, l'historique des modifications et la portabilité.

La boîte de paramètres de publication / page vous permet de modifier le titre, l'extrait, l'image en vedette et les catégories. Une multitude de paramètres de conception sont également disponibles ici, tels que l'espacement, la palette de couleurs, le CSS personnalisé et la visibilité.

La boîte d'historique d'édition vous permet d'annuler et de rétablir facilement les modifications récentes et d'afficher un historique complet de toutes les modifications que vous avez apportées.

Les mises en page peuvent être exportées et importées au format JSON via la boîte de paramètres de portabilité. Ceci est utile pour transférer des mises en page vers d'autres sites Web.

Historique d'édition de Divi Builder

Votre mise en page peut être enregistrée et publiée sur le côté droit de la page.

Des didacticiels vidéo et des raccourcis clavier peuvent également être affichés via la boîte Divi Helper dans cette zone. Il existe également une fonction de recherche qui vous aide à trouver des fonctionnalités et de la documentation.

Le côté droit du menu principal

Les interfaces utilisateur de Beaver Builder et Divi Builder fonctionnent différemment, mais lorsqu'il s'agit d'ajuster les lignes et les colonnes, elles fonctionnent en fait de la même manière.

Les deux solutions affichent les paramètres dans le coin supérieur gauche et vous permettent de déplacer, dupliquer et ajuster les lignes et les colonnes. Divi a cependant plus d'options de personnalisation.

Un exemple de lignes et de colonnes dans Divi Builder

Divi Builder a un élément au-dessus des lignes, appelé sections.

Les sections peuvent contenir plusieurs lignes et chaque ligne peut contenir plusieurs colonnes. Cela vous donne un peu plus de flexibilité dans la façon dont vous construisez les pages.

Insérer une section dans Divi Builder

Dans les versions antérieures de Divi Builder, les mises en page étaient créées directement à partir de l'éditeur WordPress, mais le constructeur visuel frontal est désormais le moyen standard de créer des mises en page avec Divi.

Heureusement, l'ancien éditeur est toujours disponible dans Divi Builder.

Pour activer le Legacy Builder, vous devez d'abord vous rendre dans la section avancée de la zone des options du plugin Divi, désactiver la dernière expérience Divi Builder et activer l'éditeur classique.

Activation de Legacy Builder

L'interface utilisateur de Legacy Builder ressemble au mode d'affichage filaire disponible dans l'éditeur visuel.

Bien qu'il ne vous permette pas de prévisualiser les modifications que vous apportez en temps réel, j'aime sa rapidité et son efficacité. Tout se charge un peu plus vite que dans l'éditeur frontal, et il est plus facile de voir la structure de votre page.

Interface héritée de Divi Builder

Beaver Builder charge tout un peu plus rapidement que Divi Builder, et son interface utilisateur est plus facile à prendre en main, cependant Divi Builder offre beaucoup plus de paramètres de personnalisation et de fonctionnalités supplémentaires qui manquent dans Beaver Builder.

L'inclusion du mode filaire et de Legacy Builder fait sans doute de Divi Builder une solution plus flexible également.

Pour un aperçu plus complet du fonctionnement de Divi Builder, veuillez consulter notre examen complet de Divi Builder.

Dispositions prédéfinies de Beaver Builder

Je suis un grand fan des mises en page prédéfinies car elles réduisent considérablement le temps nécessaire à la création de contenu élégant. Ils vous aident également à comprendre comment créer des mises en page avancées.

Beaver Builder ne propose pas autant de mises en page prédéfinies que Divi, mais la qualité de chaque modèle est tout aussi élevée.

Les modèles de page de destination et les modèles de page de contenu sont disponibles dans l'onglet Modèles du menu de contenu principal, à côté de tous les modèles enregistrés dont vous disposez.

Les modèles de page de destination sont des modèles complets de page entière. Un total de 15 modèles de page de destination sont disponibles avec un modèle de page de canevas vierge.

Il existe des modèles pour les petites entreprises, les salles de sport, les avocats, les musiciens, les photographes, les restaurants, les livres électroniques, etc.

Sélection d'un modèle de page de destination

Lorsque vous sélectionnez un modèle de page de destination, il vous est demandé si vous souhaitez remplacer votre mise en page existante ou l'ajouter à celle que vous avez déjà.

Ajouter ou remplacer la mise en page

Les mises en page prédéfinies sont insérées dans votre mise en page en quelques secondes.

Une fois qu'ils ont été ajoutés, vous pouvez les ajuster comme bon vous semble et les enregistrer en tant que modèles personnalisés.

Modèle de page de destination inséré

Les modèles de page de contenu sont des modèles universels pour une partie d'une page qui conviennent à tout type de site Web.

25 modèles de page de contenu sont disponibles. Il existe des mises en page pour vous aider à insérer une zone à propos, des informations sur l'équipe, des services, un formulaire de contact, des tableaux de prix, un formulaire d'inscription, etc.

Modèles de page de contenu

Beaver Builder propose également des dizaines de lignes pré-construites. Ces mises en page peuvent être facilement insérées dans n'importe quelle partie de votre page.

Vous les trouverez sous les onglets de lignes du menu de contenu principal.

Lignes pré-construites

Si vous utilisez le système de modèles de Beaver Builder, vous pouvez réduire considérablement le temps nécessaire pour créer de nouvelles mises en page.

Les mises en page peuvent être enregistrées à tout moment et réutilisées autant de fois que vous le souhaitez.

Enregistrez votre mise en page

Tous les modèles enregistrés peuvent être gérés à partir du menu d'administration principal de Beaver Builder et modifiés ultérieurement si nécessaire.

Vous pouvez enregistrer des modèles, des lignes, des colonnes et des modules, et chaque mise en page enregistrée peut être affectée à des catégories.

Menu d'administration de Beaver Builder

Beaver Builder a fait un travail fantastique en intégrant des mises en page prédéfinies dans son interface utilisateur. Les mises en page peuvent être insérées en quelques secondes et les personnalisations peuvent être enregistrées et réutilisées maintes et maintes fois.

Dispositions pré-faites Divi

Comme Beaver Builder, Divi offre aux utilisateurs une grande variété de mises en page prédéfinies.

Plus de 1 100 packs de mise en page sont disponibles pour la sélection.

150 de ces mises en page sont des packs de mise en page qui incluent des conceptions pour un certain nombre de zones de votre site Web, telles que votre page à propos, votre blog, votre page de destination et votre galerie.

Comme indiqué précédemment, lorsque vous lancez Divi Builder sur une nouvelle page, l'une des options disponibles consiste à choisir une mise en page prédéfinie.

L'écran de sélection de Divi Builder

La bibliothèque Divi peut également être chargée depuis le menu principal.

Charger depuis la bibliothèque

Divi Library vous permet d'insérer des mises en page prédéfinies, des mises en page enregistrées et des pages entières.

Vous pouvez affiner votre recherche d'une mise en page appropriée en utilisant le champ de recherche ou en sélectionnant l'une des 13 catégories auxquelles les mises en page sont attribuées.

Assurez-vous de sauvegarder votre mise en page actuelle avant d'insérer une mise en page prédéfinie, car Divi Builder l'écrasera.

Pack de mise en page Divi Builder

Les packs de mise en page mettent en évidence toutes les mises en page incluses dans le pack, mais je vous recommande fortement de cliquer sur le bouton "Afficher la démo en direct" pour voir exactement à quoi ressemblera votre site Web si vous sélectionnez un design.

Pour aider à illustrer ce point, jetez un œil à la zone de démonstration de la conception de Divi Web Freelancer qui est illustrée dans la capture d'écran ci-dessous.

Conception de site Web indépendant

Selon la configuration de votre hébergement, Divi Builder peut prendre jusqu'à une minute pour importer toutes les mises en page dans un pack de mise en page.

Une fois que vous avez inséré une mise en page dans votre page, vous pouvez la personnaliser et vous l'approprier en modifiant les couleurs, en ajoutant des modules et en supprimant les sections qui ne vous concernent pas.

Modification de mon pack de mise en page

Les mises en page peuvent être enregistrées dans la bibliothèque Divi à tout moment depuis le menu principal de Divi.

Vous pouvez nommer chaque mise en page et les regrouper en catégories.

Enregistrer une mise en page dans la bibliothèque Divi

Le menu d'administration de Divi renvoie à la page principale des options du plug-in, au Divi Theme Builder, à la bibliothèque Divi et à quelques autres pages de paramètres (dont nous parlerons plus tard).

Menu administrateur de Divi Builder

Divi Theme Builder est un outil fantastique qui vous permet de créer des modèles de page personnalisés. Vous pouvez ensuite attribuer les modèles aux publications, aux pages et aux types de publication personnalisés.

Pour chaque modèle, vous pouvez attribuer une mise en page à l'en-tête, au corps et au pied de page. Vous pouvez ensuite spécifier exactement quelles zones de votre site Web ces modèles doivent être utilisés.

Par exemple, vous pouvez créer un design unique pour votre blog, mais l'exclure de certaines catégories de publications. Vous pouvez également créer des modèles uniques pour votre page de résultats de recherche, votre page 404, vos archives, votre page d'accueil, etc.

Ajouter un nouveau modèle

Toutes les mises en page enregistrées peuvent être consultées à partir de la page "Bibliothèque Divi" qui est liée dans le menu principal d'administration de Divi.

Les mises en page peuvent être importées et exportées à partir de cette page. Vous pouvez également gérer vos catégories de mise en page à partir d'ici.

Dispositions enregistrées de Divi Builder

Lorsque vous cliquez pour modifier une mise en page à partir de la page principale de la bibliothèque Divi, vous serez redirigé vers un aperçu de votre conception en mode vue filaire.

Ce mode est utile pour ajuster la structure de votre mise en page, mais si vous souhaitez apporter des modifications plus spécifiques, vous pouvez basculer vers la vue du bureau, la vue de la tablette ou la vue du téléphone. Cela vous permet de modifier votre mise en page enregistrée à l'aide de l'éditeur visuel.

Si vous préférez, vous pouvez lancer l'éditeur visuel frontal habituel et effectuer des personnalisations sur la page elle-même.

Modifier une mise en page enregistrée dans Divi

Côte à côte, je ne pense pas que la qualité des mises en page prédéfinies de Divi Builder soit meilleure que les conceptions disponibles dans Beaver Builder, mais l'ensemble de la configuration dans Divi Builder est nettement meilleur.

Les packs de mise en page de Divi Builder vous offrent jusqu'à une douzaine de modèles pour vous aider à créer un site Web complet, tandis que Beaver Builder ne propose que des mises en page d'une seule page et des mises en page pour des sections spécifiques de votre page.

Il y a aussi beaucoup plus de choix dans Divi Builder, avec le plugin offrant 950 modèles de page de destination contre 15 de Beaver Builder. Une large sélection de mises en page tierces est également disponible pour Divi.

Il est important de noter, cependant, que Beaver Builder a tendance à insérer des mises en page dans votre page un peu plus rapidement que Divi Builder.

Consultez la page Divi Layouts pour voir quelles mises en page prédéfinies sont disponibles avec Divi Builder.

Modules de contenu Beaver Builder

Un total de 29 modules sont disponibles dans Beaver Builder. Les modules sont divisés en six catégories : Basique, Médias, Actions, Mise en page, Infos et Publications.

Il existe une bonne variété de modules pour ajouter du contenu riche, ajuster votre mise en page et extraire du contenu de votre blog.

Liste des modules Beaver Builder

L'un des modules de la catégorie mise en page est le module de la barre latérale, qui vous permet d'insérer des widgets WordPress. Cela ouvre de nombreuses possibilités pour intégrer des fonctionnalités dans vos mises en page à partir d'autres plugins WordPress.

Widgets WordPress dans Beaver Builder

Lorsqu'un module a été glissé et déposé dans votre zone de canevas, sa boîte de paramètres apparaîtra.

Vous trouverez des paramètres communs dans tous les modules pour le style, l'espacement, la visibilité, les animations, etc. Cependant, chaque module a des paramètres uniques pour vous permettre de modifier ce qui est affiché.

Par exemple, dans le module de carte, il existe des champs pour entrer l'adresse de la carte, la hauteur de la carte et l'attribut de titre de la carte.

Le module Carte

Beaver Builder ne possède pas la plus grande collection de modules de contenu et n'offre pas autant d'options de personnalisation que Divi.

Je crois cependant que Beaver Builder a tout ce dont vous avez besoin pour créer de belles mises en page, car les fonctionnalités manquantes peuvent être insérées dans les mises en page via les widgets WordPress.

Modules de contenu Divi Builder

38 modules de contenu sont disponibles à la sélection dans Divi Builder.

Outre les modules essentiels tels que l'image, la vidéo, le portfolio et le témoignage, il existe des modules utiles pour ajouter des compteurs de barres, des présentations, des curseurs et des appels à l'action.

Divi Builder ajoute également un nouveau type de publication personnalisé pour les projets.

Comme Beaver Builder, Divi dispose d'un module de barre latérale afin que vous puissiez intégrer des widgets WordPress dans vos mises en page.

Modules de contenu Divi Builder

Divi Builder utilise un système de code couleur pour vous aider à créer des mises en page élégantes.

Les sections sont bleues, les rangées sont vertes et les modules sont gris foncé (presque noirs).

Vous pouvez ajouter un nouveau module en survolant une colonne et en cliquant sur le bouton "Ajouter un nouveau module".

Ajout d'un nouveau module

Comme je l'ai montré plus tôt, lorsque vous sélectionnez un module, la boîte de paramètres du module apparaîtra automatiquement afin que vous puissiez entrer des valeurs et ajuster le style.

Toutes les personnalisations que vous effectuez peuvent être enregistrées dans la bibliothèque Divi. Cela peut vous faire gagner beaucoup de temps lors de la création de pages.

Par exemple, vous pouvez modifier le module de carte afin qu'il affiche une carte de l'adresse de votre entreprise. Vous pouvez ensuite facilement enregistrer la carte et l'insérer dans votre page à propos, votre formulaire de contact, vos articles de blog, etc.

Insérer le module enregistré

Divi Builder offre plus d'options de style et de personnalisation que Beaver Builder et dispose de neuf modules de contenu supplémentaires, mais je ne pense pas que quiconque se sentira limité par ce qui est disponible dans l'un ou l'autre des plugins WordPress, d'autant plus que les widgets WordPress peuvent être insérés dans les mises en page à l'aide du module de la barre latérale.

Configuration de Beaver Builder

La boîte de paramètres globaux peut être chargée à partir du menu des outils dans l'interface utilisateur de Beaver Builder.

Il vous permet d'activer et de désactiver l'en-tête de page ainsi que les marges et le remplissage des lignes, des colonnes et des modules. Les mises en page réactives peuvent également être ajustées à partir de cette zone, et il existe des cases pour insérer du code CSS et Javascript.

Paramètres globaux de Beaver Builder

La page principale des paramètres de Beaver Builder est divisée en plusieurs sections.

Pour recevoir les mises à jour automatiques du plugin, vous devez entrer votre clé de licence dans la section licence. Les modules et les types de publication peuvent être activés et désactivés dans la section suivante.

Paramètres de type de poteau Beaver Builder

L'accès au système de modèles peut être ajusté dans la section suivante. Vous pouvez activer les modèles principaux, les modèles utilisateur ou tous les modèles. Les modèles peuvent également être désactivés.

La zone des paramètres d'accès utilisateur vous permet de définir quels groupes d'utilisateurs WordPress peuvent utiliser Beaver Builder. Les autorisations sont divisées en cinq zones différentes telles que l'accès au constructeur et au menu d'administration de Beaver Builder.

La page des paramètres généraux vous permet également d'activer et de désactiver les jeux d'icônes, la personnalisation du plug-in, la personnalisation du thème et les paramètres d'aide. La mise en cache et le débogage sont disponibles dans la section outils.

Paramètres d'accès utilisateur de Beaver Builder

Je recommande de vérifier la page des paramètres de Beaver Builder après avoir installé Beaver Builder, mais la plupart des personnalisations que vous ferez auront lieu dans l'interface principale de Beaver Builder.

Configurer Divi Builder

Comme Beaver Builder, la plupart de votre temps sera consacré à la personnalisation des mises en page dans l'éditeur Divi Builder lui-même, mais il existe quelques paramètres importants qui peuvent être trouvés dans le menu principal d'administration de Divi.

La page principale des options du plug-in comporte un onglet permettant de saisir votre nom d'utilisateur et votre clé API Elegant Themes. Vous devez le faire pour recevoir les mises à jour automatiques du plugin.

Dans l'onglet suivant, vous pouvez entrer votre clé API Google. Ceci est nécessaire si vous souhaitez utiliser le module de carte. Les polices Google peuvent également être désactivées à partir de cette page.

L'onglet suivant vous permet d'activer et de désactiver Divi Builder pour des types de publication WordPress spécifiques. Ceci est utile si vous souhaitez restreindre l'accès à Divi Builder pour certains types de publication tels que votre galerie.

Options d'intégration des types de publication

Dans l'onglet avancé, vous pouvez activer et désactiver la minification CSS et Javascript. C'est également ici que vous pouvez activer l'éditeur Legacy Builder.

Options avancées du constructeur Divi

Divi Builder vous donne un contrôle total sur ce que chaque groupe d'utilisateurs de votre site Web peut et ne peut pas faire.

Alors que Beaver Builder vous permet de restreindre l'accès à quelques zones clés, Divi Builder vous permet de définir exactement les fonctionnalités auxquelles les utilisateurs peuvent accéder.

Par exemple, vous pouvez empêcher les utilisateurs de charger des mises en page ou de désactiver des fonctionnalités dans Divi Builder.

Éditeur de rôles Divi

Le centre de support de Divi fournit un rapport sur votre système. Cela peut vous aider à diagnostiquer tout problème lié à la configuration de votre hébergement.

Par exemple, pour mon site Web de test WordPress, le rapport a montré que mon installation WordPress disposait d'une quantité limitée de ressources.

L'accès à distance est également disponible sur cette page. Cela peut aider l'équipe d'assistance d'Elegant Themes à résoudre tous les problèmes que vous rencontrez avec Divi Builder.

Centre d'aide et de support de Divi Builder

Le centre de support contient également des liens vers des didacticiels vidéo utiles, et il existe un mode sans échec qui désactive les fonctionnalités qui pourraient causer des problèmes avec d'autres plugins et thèmes WordPress.

Les erreurs sont également affichées sur cette page si WP_DEBUG_LOG est activé.

Centre d'aide et de support de Divi Builder

Divi Builder est un plugin WordPress simple à mettre en place, avec seulement quelques réglages à vérifier après installation.

La fonctionnalité hors concours dans la zone des paramètres est l'éditeur de rôle Divi. C'est quelque chose que les propriétaires de grands sites Web WordPress avec plusieurs employés apprécieront.

Le thème du constructeur de castor

Le thème Beaver Builder est un framework WordPress HTML5 et Bootstrap inclus dans les plans Beaver Builder Pro et Agency.

Il s'agit d'une conception WordPress minimale qui agit comme une toile vierge pour créer des conceptions avec Beaver Builder. Des crochets et des filtres sont disponibles dans le thème pour aider les développeurs à modifier la conception du site Web, et il offre un excellent support pour WooCommerce.

Activation du thème Beaver Builder

Tous les paramètres du thème Beaver Builder sont contenus dans le personnalisateur WordPress.

Le style et la position peuvent être ajustés pour des dizaines de zones de votre page. Il existe également des mises en page pour votre en-tête, votre menu de navigation, votre blog, vos archives, vos articles de blog, vos pages WooCommerce et votre pied de page.

Personnalisateur de thème Beaver Builder

Bien qu'à la base, Beaver Builder reste un thème WordPress minimal, les développeurs ont fait un effort supplémentaire pour ajouter de nombreuses options de personnalisation supplémentaires.

Prenez le logo de votre site Web, par exemple. Vous pouvez télécharger une image de logo standard, une pour les appareils Retina, des logos en fondu pour les appareils standard et les appareils Retina, et un autre logo pour les appareils mobiles.

Téléchargement d'un logo dans le thème Beaver Builder

Dans de nombreux autres thèmes WordPress, différentes parties de la conception telles que l'en-tête, la barre latérale et le pied de page peuvent empêcher Beaver Builder d'afficher correctement les mises en page. C'est pourquoi de nombreux utilisateurs de Beaver Builder sont passés au thème Beaver Builder.

C'est un excellent choix si vous cherchez à utiliser les mises en page Beaver Builder sur votre site Web.

Le thème Divi

Beaver Builder commercialise sa conception en tant que thème de cadre pour Beaver Builder, tandis que Elegant Themes commercialise Divi Theme en tant que thème WordPress tout-en-un polyvalent.

Cela met en évidence à quel point le marketing peut être influent, car il existe plus de similitudes entre le thème Beaver Builder et le thème Divi que les gens ne le pensent.

Au début, Divi était un thème WordPress tout-en-un, mais la plupart de la polyvalence que tout le monde associait à Divi Theme a ensuite été migrée vers Divi Builder. C'était sans aucun doute la bonne chose à faire.

Ainsi, la plupart des fonctionnalités étant intégrées à Divi Builder, Divi Theme peut être considéré comme un framework comme Beaver Builder Theme. Par conséquent, si vous possédez les deux produits, vous pouvez utiliser le thème Divi avec Beaver Builder ou le thème Beaver Builder avec Divi Builder.

Activation du thème Divi

Une fois le thème Divi activé, vous verrez quelques changements subtils dans le menu d'administration de Divi.

Cela inclut le remplacement de la page d'options du plugin par une page d'options de thème et un lien vers le personnalisateur WordPress.

Mis à part la zone de paramètres en cours d'expansion, tout le reste reste le même.

Fait intéressant, si Divi Theme est activé, le plugin Divi Builder sera automatiquement désactivé. Cela est nécessaire puisque la fonctionnalité de Divi Builder est intégrée directement dans le thème Divi (et le thème WordPress supplémentaire d'Elegant Themes).

Menu d'administration du thème Divi

Vous trouverez des centaines d'options utiles dans WordPress Customizer, réparties sur une douzaine de sections. Ceux-ci peuvent être utilisés pour contrôler des zones telles que votre en-tête, votre pied de page et vos barres latérales.

La zone de contenu principale pour les publications, les pages et les types de publication personnalisés est toujours contrôlée par Divi Builder.

Personnalisateur de thème WordPress Divi Theme

En ce qui concerne la personnalisation de la conception de votre site Web, je ne pense pas que le thème Divi soit meilleur ou pire que le thème Beaver Builder. Il y a quelques domaines dans lesquels le thème Divi vous offre plus d'options et quelques domaines où le thème Beaver Builder en donne plus.

Paramètres de mise en page du thème Divi

Toutes les options de plug-in de Divi Builder ont été intégrées dans la zone d'options plus étendue de Divi Theme.

Par exemple, les paramètres de type de publication sont désormais disponibles dans l'onglet Générateur et les options de la page des paramètres avancés se trouvent désormais dans la page des options générales.

La page des paramètres généraux comporte également des champs pour les icônes de médias sociaux, le défilement, le code CSS personnalisé, etc.

Options générales du thème Divi

Des options supplémentaires sont également disponibles pour les utilisateurs de Divi Theme.

Il existe une zone d'options dédiée pour le menu de navigation de votre site Web et une page de mise en page où vous pouvez indiquer quelles fonctionnalités doivent être activées sur les publications et les pages.

Il existe également des pages pour ajouter une bannière de 468 × 60 pixels et des détails généraux sur le référencement de votre site Web.

Options de navigation du thème Divi

Comme Beaver Builder Theme, Divi Theme est un thème WordPress minimal qui a été optimisé pour être utilisé avec Divi Builder.

Je recommande fortement d'utiliser cette conception si vous souhaitez profiter de la vaste gamme de mises en page prédéfinies de Divi.

Le coût de Beaver Builder

Les caractéristiques et les fonctionnalités sont deux facteurs que vous devez prendre en compte lors de l'examen de Beaver Builder et de Divi, mais vous devez également tenir compte du coût de ces produits et du budget dont vous disposez pour vos projets.

De nombreuses entreprises WordPress premium facturent plus pour l'utilisation de leurs produits sur des sites Web supplémentaires. Par exemple, le plan d'entrée de gamme peut prendre en charge un site Web, le plan intermédiaire peut prendre en charge trois sites Web et le plan avancé peut prendre en charge dix sites Web.

Beaver Builder et Elegant Themes sont plus généreux, offrant un support et des mises à jour pour un nombre illimité de sites Web.

Bien que cet article se concentre principalement sur la version premium de Beaver Builder, je recommanderais toujours de consulter Beaver Builder Lite.

C'est une bonne solution pour les sites Web simples et cela vous aide également à voir comment fonctionne l'interface Beaver Builder.

Veuillez noter, cependant, que la version gratuite de Beaver Builder manque de modules utiles tels que le formulaire de contact, le tableau des prix et la carte. There is no access to the Beaver Builder templating system or pre-made layouts either.

Upgrading Beaver Builder Lite

For the vast majority of projects, the full version of Beaver Builder is a better fit than the lite version.

Three different premium plans are available: Standard, Pro, and Agency. All plans come with one year of premium support and access to premium modules and templates.

The standard plan retails at $99 per year. To get WordPress multisite support and access to the Beaver Builder Theme, you need to upgrade to the $199 per year Pro plan.

The $399 per year Agency plan adds white labeling. Web design companies may be interested in this plan as it allows you to rebrand the plugin as your own and change all references to Beaver Builder in templates and the admin area.

Tarification du constructeur de castor

Beaver Builder offre une garantie satisfait ou remboursé de 30 jours.

Tous les membres Beaver Builder bénéficient également d'un rabais de 40 % après un an. Cela fait baisser le prix des plans de Beaver Builder au cours des années suivantes à 59,40 $ par an, 119,40 $ par an et 239,40 $ par an.

Si vous n'êtes pas sûr de tout aspect de l'utilisation de Beaver Builder, je vous recommande fortement de consulter leur base de connaissances détaillée. Vous pouvez également demander de l'aide via l'assistance par ticket et dans le forum de la communauté Beaver Builder, le groupe Facebook Beaver Builder et la salle Beaver Builder Slack.

Zone de soutien aux constructeurs de castors

Le coût de Divi

La politique de tarification d'un abonnement à Elegant Themes est plus simple.

Deux plans sont disponibles, et les deux plans vous donnent un accès complet à tous les produits Elegant Themes.

L'adhésion annuelle à Elegant Themes coûte 89 $ par an.

Comme Beaver Builder, vous pouvez continuer à utiliser des produits tels que Divi Builder une fois votre abonnement expiré, mais vous ne recevrez pas de support et de mises à jour si vous ne renouvelez pas.

Si vous pensez renouveler votre adhésion pour quelques années, vous voudrez peut-être envisager d'obtenir le plan d'accès à vie. Pour des frais uniques de 249 $, vous bénéficierez d'un accès, d'une assistance et de mises à jour à vie pour tous les produits Elegant Themes.

Plans de thèmes élégants

Elegant Themes offre également une garantie de remboursement de 30 jours à tous les nouveaux clients.

Pour vous aider à mieux comprendre leurs produits, Elegant Themes a créé l'une des zones de documentation les plus complètes que j'aie jamais vues. Il existe des centaines de didacticiels écrits et de didacticiels vidéo qui expliquent le fonctionnement des thèmes et plugins WordPress Elegant Themes.

Les membres peuvent également demander de l'aide via le support des tickets, et il existe également un grand forum communautaire, un réseau Meetup et un groupe Facebook populaire.

Zone de support des thèmes élégants

Il est difficile de comparer le coût de Beaver Builder et Divi car ils ont des modèles de tarification légèrement différents.

Bien qu'il soit plus limité, j'apprécie le fait qu'une version gratuite de Beaver Builder soit disponible, car Beaver Builder Lite est suffisant pour les blogs de base et les projets de sites Web simples.

Je pense cependant que la version complète de Beaver Builder est la meilleure option pour la majorité des utilisateurs de WordPress.

À 99 $, une licence standard pour Beaver Builder coûte 10 $ de plus que les thèmes élégants, mais les renouvellements ultérieurs ne sont facturés qu'à 59,40 $ par an.

Il s'agit d'une remise généreuse pour les membres fidèles, mais un plan à vie Elegant Themes peut toujours être moins cher pour de nombreux propriétaires de sites Web.

Un abonnement à Elegant Themes inclut également le thème Divi, tandis que vous devrez payer 199 $ pour accéder au thème Beaver Builder.

Plus important encore, un abonnement à Elegant Themes comprend cinq produits de haute qualité : Divi Theme, Divi Builder, le thème de magazine WordPress Extra, le plugin WordPress opt-in pour les e-mails Bloom et le plugin WordPress de médias sociaux Monarch.

Pour cette raison, je pense qu'un abonnement à Elegant Themes offre un meilleur rapport qualité-prix pour la plupart des utilisateurs de WordPress.

Dernières pensées

Les constructeurs de pages par glisser-déposer peuvent aider les utilisateurs de WordPress à créer de superbes mises en page de sites Web en quelques minutes via une interface conviviale.

Dans un article de comparaison comme celui-ci, il est de ma responsabilité de montrer les forces et les faiblesses de Beaver Builder et de Divi, mais il est important de rappeler que ces deux solutions sont des produits raffinés et qu'il existe de nombreuses similitudes entre elles.

Le processus de création de nouvelles lignes et colonnes est similaire dans les deux produits, mais je pense que l'interface de Beaver Builder est plus facile à apprendre et un peu plus rapide aussi.

Divi propose de nombreuses autres options de personnalisation et davantage de mises en page prédéfinies. Avec cinq produits inclus dans un abonnement à Elegant Themes, je dirais qu'il offre également un meilleur rapport qualité-prix.

J'espère que vous avez apprécié notre examen approfondi de Beaver Builder et Divi.

Pour en savoir plus sur Beaver Builder, consultez la page de vente officielle ou lisez notre examen complet de Beaver Builder. Vous pouvez également mieux comprendre le fonctionnement de Beaver Builder en visitant la page de démonstration de Beaver Builder ou en testant la version gratuite du plugin.

Vous pouvez en savoir plus sur le fonctionnement de Divi sur le site Web Elegant Themes et dans notre examen complet de Divi Builder. Bien qu'aucune version gratuite de Divi Builder ne soit disponible, vous pouvez tester le plugin sur la page de démonstration de Divi Builder. Cela vous aidera à voir ce que Divi Builder peut faire.

Merci d'avoir lu.
Kévin