Le quatrième trimestre de 2015 a vu Elegant Themes présenter son plugin Divi Builder. Conçu comme un constructeur de page complet par glisser-déposer, le plugin tant attendu d'Elegant Theme cherchait à résoudre l'une des plaintes les plus courantes concernant leur thème Divi.

Autant les clients aimaient le thème Divi, autant ils étaient préoccupés par sa portabilité. Si jamais vous vouliez changer de thème, il vous resterait à démêler un désordre désastreux de codes abrégés pour toutes les pages ou publications construites avec le thème Divi.

Examen du constructeur Divi

Le plugin Divi builder a pour but de résoudre le problème de portabilité pour tous les utilisateurs pensant qu'ils pourraient vouloir changer de thème à un moment donné sur la route. Dans le même temps, Divi Builder s'est efforcé de faciliter plus que jamais la création de superbes mises en page de pages et de publications qui auraient fière allure sur n'importe quel appareil.

Visiter Divi Builder »

Dans cet article, nous allons examiner de plus près ce que le plugin Divi Builder a à offrir, à la fois en termes de fonctionnalités et de fonctionnalités. Il y a beaucoup à couvrir et j'aborderai autant d'aspects du plugin que possible, mais soyez prévenu : même après avoir passé quelques jours avec ce plugin, vous découvrirez toujours de nouvelles fonctionnalités dont vous n'aviez pas connaissance.

Plugin Divi-Builder

Installation et configuration

L'installation et l'activation du plugin Divi Builder ne pourraient pas être beaucoup plus simples. Vous pouvez télécharger le fichier zip via le programme d'installation WordPress par défaut ou via votre client FTP préféré, cliquez sur “Activer” et vous êtes prêt à commencer. Oh, et vous voudrez également vous assurer de télécharger et d'installer le plugin Elegant Themes Updater et d'entrer votre nom d'utilisateur et votre clé API Elegant Themes. Cela garantira que tous vos plugins et thèmes Elegant Themes reçoivent des mises à jour automatiques chaque fois qu'une mise à jour est poussée.

Installer Divi Builder

Une fois activé, vous remarquerez un bouton pratique “Utiliser le Divi Builder” qui apparaît au-dessus de l'éditeur WordPress par défaut. Vous pouvez activer le générateur pour n'importe quelle page ou publication individuelle ou utiliser l'éditeur par défaut si vous le souhaitez.

Plugin Divi Builder activé

Principales caractéristiques

Avant d'aborder l'utilisation réelle de Divi Builder, couvrons certaines des fonctionnalités clés. Vous devez savoir que ce plugin est livré avec des fonctionnalités adaptées aux débutants et aux utilisateurs plus avancés. L'interface est assez facile à utiliser même si cela peut prendre un certain temps pour se mettre à niveau.

1. Bibliothèque / Importer / Exporter

Mises en page du constructeur Divi

La possibilité d'importer et d'exporter des éléments individuels, des lignes, des modules et des mises en page entières peut être un énorme gain de temps. Le constructeur Divi rend le processus extrêmement simple et convivial. Que vous dupliquiez une mise en page de page de destination sur un autre site Web, copiez une ligne et des modules spécifiques sur une autre page ou dupliquiez les paramètres d'options de thème, vous aimerez rapidement la portabilité.

En plus de la possibilité d'importer, d'exporter et de créer votre propre bibliothèque de mises en page, le plugin Divi Builder est également livré avec plus de 30 mises en page prédéfinies.

2. Pistes Divi

Test fractionné Divi Builder

Dans la version la plus récente du plug-in Divi Builder (1.3 au moment de la rédaction de cet article), Elegant Themes a introduit Divi Leads. Une fonctionnalité conçue pour vous aider à tester différentes mises en page et à optimiser votre site Web pour les conversions. Par exemple, vous pouvez tester 2 titres différents sur votre page d'accueil pour tenter de déterminer lequel entraîne le plus grand nombre de personnes à cliquer sur un bouton “Prendre un rendez-vous”.

Divi mène 1

Une fois que suffisamment de données ont été collectées, Divi Builder mettra les statistiques pertinentes à disposition pour analyse. Vos objectifs individuels peuvent varier en fonction de votre objectif, mais vous pourrez suivre des éléments tels que :

  • Le nombre de fois qu'un élément a été cliqué
  • Combien de ventes ont été générées
  • Soumissions de formulaire
  • Combien de visiteurs ont réellement “lu” votre message (indiqué par une cible de défilement)

Divi Leads est une fonctionnalité relativement nouvelle, donc je n'ai pas eu beaucoup de temps pour l'expérimenter, mais ma première impression est qu'elle semble très prometteuse. J'aime particulièrement la possibilité de suivre les objectifs sur différentes pages, ce qui vous permet de configurer et de suivre les entonnoirs de vente de base.

3. Sections / Lignes / Colonnes

Dans chaque page, vous pouvez créer un nombre illimité de sections. Chacun pouvant contenir des lignes, des colonnes et bien sûr des modules. Chaque ligne individuelle peut être configurée avec 1 à 4 colonnes par incréments de ¼. Le résultat final est une mise en page hautement personnalisable qui ne prend que quelques minutes à configurer. La hiérarchie globale ressemble à ceci :

  1. Page / Article
  2. Sections
  3. Lignes
  4. Colonnes
  5. Modules

Options de colonne du générateur de div

4. Modules de contenu

Le plugin Divi Builder propose plus de 45 modules de contenu impressionnants qui couvrent à peu près tout ce que vous pourriez souhaiter. Quelques-uns des modules inclus :

  • Modules de texte
  • Boutons
  • Portefeuilles
  • Formulaires d'options de courrier électronique (compatibles avec Aweber et MailChimp)
  • Google Maps
  • Accordéons, bascule et onglets
  • Appels à l'action
  • Tableaux de prix
  • Témoignages

Cette liste n'est littéralement que la pointe de l'iceberg – il y en a des dizaines d'autres parmi lesquelles choisir.

Modules de contenu Divi

Grâce à ces modules et combinés à la capacité de Divi Builder d'ajouter des sections, des lignes et des colonnes, vous pouvez créer un nombre pratiquement illimité d'options de mise en page.

5. Personnalisation

Bien que le fait d'avoir plus de 45 modules disponibles soit une fonctionnalité intéressante, ce qui est vraiment génial, c'est la possibilité de personnaliser individuellement pratiquement n'importe quel module utilisé.

Par exemple, dans un module de texte simple, il existe des options pour configurer les éléments suivants :

  • Couleur du texte
  • Alignement du texte
  • Police de caractère
  • Le style de police
  • Taille de police
  • Espacement des lettres du texte et hauteur de ligne
  • Arrière-plans et bordures
  • Marges et remplissage personnalisés

La profondeur des personnalisations potentielles est impressionnante. Vous pouvez même ajuster la taille du texte individuellement pour les ordinateurs de bureau, les tablettes et les appareils mobiles, ce qui élimine pratiquement le besoin de créer des requêtes multimédia individuelles. Oh, et au cas où il n'y aurait pas de paramètre préconfiguré disponible, vous pouvez également utiliser un CSS personnalisé.

Personnalisation du module de texte Divi Builder

Une fois vos mises en page créées, il est facile d'activer et de désactiver des éléments spécifiques (même pour des tailles d'appareils spécifiques), de les verrouiller pour empêcher toute modification, de les copier ou de les enregistrer dans votre bibliothèque.

6. Éditeur de rôles Divi

Rien n'est plus frustrant que de passer des heures à concevoir et à peaufiner plusieurs mises en page pour que quelqu'un d'autre vienne modifier vos paramètres ou, pire encore, supprime vos mises en page.

Le Divi Role Editor résout ce problème en permettant à l'administrateur du site de personnaliser les privilèges pour chaque rôle d'utilisateur. Cela signifie que vous pouvez empêcher les auteurs et les contributeurs de modifier la mise en page des articles tout en permettant à un éditeur d'activer ou de désactiver certains éléments de la page en fonction des besoins. Les options fournies sont vraiment impressionnantes, ce que vous voyez ci-dessous n'est qu'un petit échantillon :

Options de l'éditeur de rôles Divi

Utiliser le plugin Divi Builder

L'aspect le plus précieux du plugin Divi Builder est probablement son compatibilité avec presque tous les thèmes WordPress. Personnellement, j'ai utilisé le plugin sur divers thèmes enfants Genesis et, pour la plupart, le processus est transparent.

Une chose importante à prendre en compte est la largeur des pages individuelles ou des publications avec lesquelles vous travaillez. Le plugin Divi Builder ne peut fonctionner que dans les limites de votre structure de mise en page préexistante. Par exemple, si la largeur de votre zone de contenu est de 960 pixels, c'est la largeur maximale avec laquelle Divi Builder peut fonctionner.

Une façon de contourner ce problème consiste à créer un modèle de page pleine largeur séparé que vous pouvez utiliser selon vos besoins ou utiliser.

Un autre domaine de frustration que j'ai ressenti lors de l'utilisation du plugin Divi Builder, c'est sa tendance à gâcher le style des formulaires tiers. Par exemple, si j'utilise un plugin comme Contact Form 7 ou Ninja Forms, le style par défaut de Genesis est perdu lorsque j'utilise le même shortcode dans Divi Builder. Vous pouvez voir la différence dans l'image ci-dessous.

À gauche se trouve le shortcode de Contact Form 7 dans un module de texte Divi Builder et à droite se trouve le même shortcode dans l'éditeur de texte par défaut. Cela peut être résolu en ajoutant du CSS personnalisé, mais c'est toujours un problème. Là encore, il existe peut-être un moyen plus simple de résoudre ce problème qui me manque.

Style de formulaire Divi Builder

Interface utilisateur du constructeur Divi

Ayant utilisé le plugin Divi Builder sur de nombreux sites Web, on voit mal comment ils pourraient rendre l'interface plus facile à utiliser. Pour la plupart, la fonctionnalité glisser-déposer est extrêmement simple et presque toutes les fonctions sont facilement accessibles. De plus, les sections, les rangées et les modules peuvent être facilement dupliqués. L'interface est également rapide. J'ai utilisé quelques plugins de création de pages dans le passé où il y avait presque assez de temps pour faire une petite sieste entre les chargements de page – ce n'est pas du tout le cas avec Divi Builder.

Un petit inconvénient à souligner est que, comme Divi Builder fait tout son travail dans le back-end, il y a beaucoup de clics pour enregistrer et mettre à jour la page ou publier pour voir vos modifications. Divi Builder a un aperçu intégré mais honnêtement, je préfère voir la page réelle. Une fonctionnalité intéressante qu'Elegant Themes pourrait envisager d'implémenter est la possibilité d'enregistrer les modifications de Divi Builder et de mettre à jour la page/la publication en un seul clic.

Tarifs et assistance

Honnêtement, je pense qu'Elegant Themes a un sérieux avantage dans ce département, en particulier la tarification. Ils offrent 2 plans tout aussi impressionnants (le plan personnel n'inclut pas les plugins):

  • Licence de développeur – À 89 $, la licence de développeur annuelle vous donne accès à l'intégralité de la bibliothèque Elegant Themes, y compris les plugins. Je pense que c'est beaucoup, surtout compte tenu de la vitesse à laquelle Elegant Themes a introduit de nouvelles fonctionnalités. Même si ce prix n'incluait que leurs plugins, ce serait toujours une aubaine.
  • Accès à vie – À 249 $, il ne faut pas longtemps pour récupérer le coût d'une licence annuelle – 2,79 ans pour être exact. Si vous prévoyez que votre site Web sera en ligne pendant au moins aussi longtemps, il est difficile d'argumenter contre la valeur.

Avec toutes ces fonctionnalités, vous savez qu'il y aura une tonne de questions d'assistance. J'ai personnellement utilisé le support d'Elegant Themes et je ne peux pas vraiment me plaindre. L'un des problèmes auxquels j'ai dû faire face était l'ajout frustrant de sauts de ligne dans un formulaire InfusionSoft personnalisé. Il s'est avéré être un conflit de plugin qui a été rapidement diagnostiqué par le support technique.

Tarification des thèmes élégants

Dernières pensées

Globalement, J'aime beaucoup le plugin Divi Builder. Il vous permet de créer une grande variété de superbes pages et de mises en page avec une relative facilité. D'après mon expérience, il fonctionne bien avec d'autres frameworks comme Genesis – j'ai utilisé le plugin avec plusieurs thèmes enfants également.

Le plugin Divi Builder n'est pas parfait. Il y a certainement eu des moments de frustration alors que je luttais pour qu'un élément de conception fonctionne exactement comme je le voulais. Et le petit problème avec les formulaires tiers me rend fou.

N'oubliez pas d'utiliser notre coupon exclusif ElegantThemes pour obtenir 20% de réduction.

Obtenir Divi Builder

Dans l'ensemble, ce plugin m'a fait gagner des heures et m'a aidé à mettre en place une mise en page qui se serait autrement révélée très difficile.

J'ai un abonnement développeur chez Elegant Themes que j'ai l'intention de renouveler cette année. Même sans la valeur récemment ajoutée de Divi Leads, je m'inscrirais encore pour une autre année – sans poser de questions.

Si vous recherchez un plugin de création de page facile à utiliser qui offre également une grande valeur et un bon support, ne cherchez pas plus loin.