Gutenberg et la nouvelle expérience Divi Builder

La saison du changement est à nos portes. L'arrivée récente de WordPress 5.0 introduit un tout nouvel éditeur de blocs (alias Gutenberg). Et, la sortie de notre nouvelle expérience Divi Builder a non seulement offert une intégration fluide avec Gutenberg, mais elle a également amélioré toute l'expérience de conception de sites Web avec Divi.

Ces nouveaux changements entraîneront sans aucun doute des inquiétudes et de la confusion sur la façon dont Divi et Gutenberg fonctionnent ensemble et sur la meilleure façon d'utiliser Divi avec tous ces changements. Ce didacticiel vise à atténuer le choc du changement en vous expliquant les options disponibles et les étapes nécessaires pour que la nouvelle expérience Divi Builder soit opérationnelle avec succès sur WordPress 5.0.

Pour ceux d'entre vous qui ne sont pas prêts pour Gutenberg ou la nouvelle expérience Divi Builder, ne vous inquiétez pas. Je vais discuter des options disponibles pour que les choses continuent de fonctionner comme d'habitude. Et pour ceux d'entre vous prêts à partir à l'aventure dans l'inconnu passionnant, ce guide vous aidera à trouver le chemin.

Voici ce que je vais couvrir dans ce tutoriel:

• L'importance d'installer la dernière version de Divi lors de la mise à niveau vers WordPress 5.0
• Comment le nouveau Divi Builder fonctionne avec Gutenberg par défaut
• Comment activer le nouveau Divi Builder sur le backend avec WordPress 5.0 (méthode préférée)
• Modification d'une nouvelle page avec la nouvelle interface utilisateur de Divi Backend Builder
• Utiliser le Classic Divi Builder avec le nouveau Divi

L'importance d'installer la dernière version de Divi lors de la mise à niveau vers WordPress 5.0

La dernière version de Divi est compatible avec WordPress 5.0. Donc, si vous effectuez une mise à niveau vers WordPress 5.0, assurez-vous également de mettre à jour Divi vers la version 3.18+. Cette nouvelle version résout de nombreux problèmes de compatibilité avec le nouvel éditeur de blocs Gutenberg. Si vous conservez une ancienne version de Divi, vous aurez du mal à accéder au Divi Builder et aux autres paramètres de la page jusqu'à la mise à niveau.

Les dernières versions d'Extra, Bloom, Monarch et du plugin Divi Builder sont également compatibles avec WordPress 5.0, il est donc préférable de les mettre à jour également lors de la mise à niveau.

Comment le nouveau Divi Builder fonctionne avec Gutenberg par défaut

Une fois que vous avez mis à jour vers WordPress 5.0 et installé Divi 3.18 (dernière version), vous êtes prêt à commencer à créer votre site Web. Si vous ajoutez une nouvelle page, vous serez accueilli par une fenêtre contextuelle vous permettant d'utiliser le Divi Builder ou l'éditeur WordPress par défaut (maintenant Gutenberg). Cliquez simplement sur « Utiliser Divi Builder ».

Vous remarquerez que vous serez lancé directement dans Visual Builder sur le front-end.

Si vous quittez Visual Builder et modifiez la page sur le backend, vous verrez qu'il n'y a pas de Classic Divi Builder disponible. Vous n'aurez la possibilité de lancer le Divi Builder que sur le front end.

En effet, WordPress 5.0 a supprimé l'éditeur classique et l'a remplacé par l'éditeur de blocs (Gutenberg). Par conséquent, toutes les applications connectées, y compris le Classic Divi Builder, ont été supprimées. En bref, il n'y a pas de Classic Divi Builder sans Classic WordPress Editor.

Comment activer le nouveau Divi Builder sur le backend avec WordPress 5.0 (méthode préférée)

Pour accéder au nouveau Divi Builder sur le backend, il suffit de quelques clics. Depuis votre tableau de bord WordPress, accédez à Divi > Options du thème. Une fois là-bas, cliquez sur l'onglet Générateur. Sous les options du générateur, cliquez sur l'onglet Avancé. Vous y trouverez les options pour activer la dernière expérience Divi Builder et pour activer l'éditeur classique (WordPress). Vous devrez activer ces deux options pour profiter du nouveau Divi Builder sur le backend . Cliquez ensuite sur Enregistrer les modifications.

Remarque : l'option permettant d'activer l'éditeur classique dans les options de thème de Divi remplace le besoin d'utiliser le plugin Classic Editor fourni par les contributeurs WordPress à ceux qui ne sont pas prêts à utiliser Gutenberg.

Une fois que vous avez activé le dernier Divi Builder et l'éditeur classique à partir des options de thème, vous êtes prêt à commencer à créer vos pages avec la nouvelle expérience Divi Builder.

Modification d'une nouvelle page avec la nouvelle interface utilisateur de Divi Backend Builder

Avec le nouveau Divi Builder activé sur WordPress Classic Editor, vous verrez le bouton familier « Utiliser le Divi Builder ». Cliquez sur ce bouton comme d'habitude pour déployer le Divi Builder.

Sélectionnez ensuite comment vous souhaitez commencer à concevoir votre page parmi les trois options qui s'affichent.

Vous êtes maintenant opérationnel avec la nouvelle expérience Divi Builder en plein effet. Vous remarquerez que le nouveau Divi Backend Builder ressemble au Classic Backend Divi Builder avec de nouvelles fonctionnalités puissantes à portée de main.

Voici quelques fonctionnalités notables de l'interface utilisateur de l'éditeur de page qui vous aideront à mieux comprendre la nouvelle expérience.

Le bouton « Construire sur le front-end »

Le bouton « Build On The Front End » a remplacé le bouton traditionnel « Use the Visual Builder », mais la fonctionnalité est la même. Il déploiera le Divi Builder sur le front-end pour une expérience de construction visuelle complète comme avant. La raison principale de la formulation de ce bouton est que techniquement, il n'y a plus de constructeur visuel séparé. Il n'y a qu'un seul Divi Builder qui est désormais accessible sur le backend et le front-end.

Les modes d'affichage maintenant disponibles sur le backend

Le nouveau Divi Builder a introduit le Visual Builder et toutes ses fonctionnalités dans le backend. Désormais, vous n'avez plus à faire des allers-retours pour éditer votre page. Pour activer l'expérience du constructeur visuel sur le backend, vous pouvez basculer entre les différents modes d'affichage en haut du constructeur. Par défaut, le mode d'affichage filaire est actif, ce qui est logique car il correspond étroitement à l'apparence et à la convivialité du constructeur de backend classique que nous avons l'habitude de voir. Cependant, vous pouvez basculer entre les différents modes d'affichage (ordinateur de bureau, tablette et smartphone) afin de modifier visuellement votre page (comme vous l'avez fait avec Visual Builder) sur le backend sans avoir à quitter la page.

La nouvelle interface utilisateur de Divi Builder

En plus d'avoir la possibilité de basculer entre différents modes d'affichage sur le backend, l'interface utilisateur de Divi Builder fonctionne de manière transparente sur le backend lors de la modification de votre page. Par exemple, lors de la modification des paramètres d'un élément sur le backend, le modal des paramètres peut être déplacé vers n'importe quel emplacement dans toute la fenêtre du navigateur, vous donnant l'espacement nécessaire pour apporter des modifications sur le backend tout en voyant vos modifications en temps réel.

Revenir à Classic Divi Builder

Si vous n'êtes pas tout à fait prêt pour la nouvelle expérience Divi Builder, vous pouvez toujours utiliser le Classic Divi Builder comme avant. La dernière version de Divi a incorporé un moyen extrêmement simple de déployer le Classic Divi Builder qui se trouve juste en bas de l'interface utilisateur de Divi Builder sur le backend lors de l'édition de votre page. Vous y verrez un lien qui vous permettra de revenir au Classic Divi Builder en un simple clic.

Remarque : vous pouvez également basculer vers le Classic Divi Builder sous Options du thème. Cliquez sur l'onglet Générateur puis sur l'onglet Options avancées. Vous y trouverez la possibilité d'activer ou de désactiver la dernière expérience Divi Builder. Désactivez simplement cette option pour conserver le Classic Divi Builder comme avant. Mais rappelez-vous, pour voir le Classic Divi Builder sur le backend, vous devez également vous assurer et activer l'option Classic Editor.

Les nouvelles fonctionnalités de Divi Builder

Le nouveau Divi Backend Builder comprend également toutes les nouvelles fonctionnalités puissantes qui n'étaient auparavant disponibles que sur le Visual Builder. Et si cela ne suffisait pas, vous bénéficiez également de nouvelles améliorations de performances et de convivialité avec ce nouveau Divi Builder. Ces mises à niveau comprennent :

• Une expérience de création plus rapide que jamais grâce à l'exploitation du cache
• Une représentation 100% précise de votre page sur tous les modes d'affichage à l'aide de React Portal
• La possibilité de copier et coller entre les pages dans Visual Builder comme vous le pouvez dans Classic Builder.

Consultez l'article Nouvelle expérience Divi Builder pour en savoir plus sur les nouvelles fonctionnalités puissantes disponibles.

Utiliser le Divi Builder classique avec le nouveau Divi

Comme mentionné ci-dessus, vous pouvez passer à l'utilisation du Classic Divi Builder en utilisant le lien fourni dans le nouvel éditeur de page Divi Backend Builder ou en désactivant le dernier Divi Builder dans les options du thème. Une fois le changement effectué, l'éditeur de page principal aura presque exactement le même aspect qu'avant avec quelques modifications mineures. Vous remarquerez que l'ancien bouton « Utiliser le Visual Builder » indique désormais « Construire sur le front-end », mais la fonction est toujours la même qu'avant. Vous aurez également la possibilité de passer au nouveau Divi Builder en cliquant sur un lien fourni en bas du Divi Builder dans le backend.

Gardez à l'esprit que le Classic Divi Builder ne disposera toujours pas de toutes les nouvelles fonctionnalités désormais disponibles sur le backend du nouveau Divi Builder.

Récapitulatif et FAQ

Dois-je mettre à jour Divi ou passer à WordPress 5.0 ?

Pour ceux d'entre vous qui ne sont pas prêts pour Gutenberg ou la nouvelle expérience Divi Builder, ne vous inquiétez pas.

Vous n'avez pas besoin de mettre à jour vers WordPress 5.0, mais si vous le faites, vous devrez également mettre à jour Divi pour tous les correctifs de compatibilité que nous avons inclus pour la prise en charge de WP 5.
Donc, si vous ne voulez pas *avoir* à mettre à jour Divi maintenant, vous n'avez pas non plus besoin de mettre à jour WordPress maintenant.

Dans quel ordre dois-je effectuer les mises à jour ?

Vous n'avez pas besoin de le faire dans un ordre particulier, mais vous devrez vous assurer et mettre à jour Divi si vous mettez à jour WordPress 5.0.

Comment la nouvelle expérience Divi fonctionnera-t-elle sur les anciennes versions de WordPress ?

Tout comme avant, cependant, le nouveau Divi inclut le nouveau Divi Builder sur le backend avec toutes les nouvelles fonctionnalités qui n'étaient autrefois disponibles que sur le Visual Builder.

Et les bogues ?

Nous surveillons activement les bogues survenus en raison de la nature des changements importants apportés par Gutenberg, et nous publions des correctifs de bogues (essentiellement quotidiennement) pour nous assurer que les choses sont aussi stables que possible.

Maintenant que Guteberg est là, dois-je utiliser le Visual Builder ?

Non, vous pouvez désormais utiliser le nouveau Divi Builder sur le backend, qui comprend toutes les nouvelles fonctionnalités qui n'étaient auparavant disponibles que sur le Visual Builder.
(Voir ci-dessus : Comment activer le nouveau Divi Builder sur le backend avec WordPress 5.0 (méthode préférée))

Où est l'ancien constructeur de backend Divi classique (familier) ?

Le nouveau Divi Builder sur le backend possède toutes les fonctionnalités et sensations familières du Classic Divi Builder, ainsi que toutes les fonctionnalités de type «Visual Builder» et plus encore. Cependant, le nouveau Divi Builder vous permet de revenir au Classic Divi Builder à tout moment à partir de l'éditeur de page principal.

(Voir ci-dessus : Revenir à Classic Divi Builder)

Puis-je utiliser Gutenberg et Divi Builder en même temps ?

Ils sont tous les deux des « constructeurs de pages », vous devrez donc choisir l'un ou l'autre. Cependant, nous travaillons sur des intégrations passionnantes (à venir) où vous pouvez utiliser vos modules Divi préférés dans Gutenberg, ou utiliser n'importe quel bloc Gutenberg enregistré dans Divi Builder.

Dernières pensées

Le lancement de Gutenberg à lui seul est un peu écrasant pour la plupart. L'éditeur de page WordPress que nous connaissons tous est complètement différent ! Mais, heureusement, la sortie de notre nouvelle expérience Divi Builder s'intègre parfaitement à Gutenberg, vous permettant de conserver l'interface utilisateur familière que vous avez appris à aimer. Et avec toutes les puissantes fonctionnalités désormais disponibles sur le backend, le Divi Builder est plus rapide et plus fiable que jamais.

J'ai hâte d'entendre vos réflexions sur la nouvelle expérience Divi Builder avec Gutenberg dans les commentaires ci-dessous.

À votre santé!