Si c'était un album de musique on aurait certainement dit "Enfin dans les bacs !" tellement cette version est attendue. Mais elle est là et bien là, alors profitons-en !

Dans cet article nous vous proposons de découvrir cette nouvelle version de Divi. Comme vous pourrez le voir, l'UI Design (Interface Utilisateur) a beaucoup changé ! Mais pas de panique ! Car on retrouve toutes les fonctionnalités de Divi 4 et des nouveautés !

Avant d'aller plus loin, gardez à l'esprit qu'il s'agit d'une version "Alpha" il est déconseillé de l'utiliser pour un travail de production. Ne l'utiliser que pour la tester car il reste, d'après Elegant Themes®, encore ( un peu - beaucoup ? ) de travail à réaliser.

Votre première impression va être de vous dire "Wouhaaa ! Mais ils ont tout changé !". C'est pas faux. La plupart des  fonctionnalités restent les mêmes avec déjà quelques nouveautés. Mais oui au premier abord c'est un peu "déroutant" surtout si vous utilisez Divi 4 régulièrement.

La nouvelle interface de Divi est vraiment plus "épurée". C'est d'ailleurs ce que l'on retrouve dans de nombreux logiciels et systèmes d'exploitation. Des interfaces "minimalistes"  contrastées, espacées, facilement lisibles et donc accessibles. Fini les gros blocs de couleur, les icônes épaisses et criardes, place à la finesse, aux couleurs contrastées, la tendance actuelle est au "filaire épuré".

Le nouveau thème Divi adopte donc les codes de certaines tendances et se rapproche visuellement d'autres constructeurs de page pour WordPress et autres CMS.

Cette liste n'est bien sûr pas complète, je la modifierai au fur et à mesure des mises à jour :

• La première évidence, c'est la rapidité, la fluidité ! Il y a eu un gros travail sur ces points, c'est vraiment visible. Il est facile de déplacer les modules, les lignes et les sections.
• Je n'ai "pas encore" rencontré le phénomène bien connu de l'icône qui "tourne et tourne et tourne..." parfois pendant longtemps lorsque l'on charge une page.
• Je n'ai pas non plus rencontré le "double rechargement" de la page, même sur un deuxième site de test où j'ai activé de nombreuses extensions, une quinzaine, mais je vous en parlerai dans le prochain article.
• L'interface est plus "aérée", moins chargée, moins de blocs de couleurs.
• Disparition de la barre modifiable ou l'on trouve le bouton "Sauvegarder" ainsi que les "Paramètres du constructeur" et autres fonctions (voir image ci-dessous) je trouve ça bien, cette "barre" était peu pratique à mon goût.

• L'affichage "filaire" est moins lourd, les couleurs sont plus nettes avec plus de contraste, le zoom est simple à utiliser.
• Je n'ai pas encore rencontré de page qui se "fige".
• Pas encore eu non plus le fameux "Ooopsss ! Une erreur est survenue !".

Pour les nouveautés elles n'y sont bien sûr pas encore toutes dans cette version, mais cela va venir au fur et à mesure :

• le bouton "X-Ray" qui permet de visualiser les "blocs" grâce à des lignes fines autour de ceux-ci est vraiment pratique pour voir les espacements, les marges, les distances et autres.
  
• Les deux boutons "Action Icons on Hover" et "Parent Action Icons on Hover" qui permettent de visualiser, ou pas, les blocs "parents". Pratique quand les pages sont chargées en blocs avec parfois des marges négatives.
  
• L'accès aux trois affichages - Ordi, Tablette, Tel -  en haut de la page qui permettent de réaliser des modifications directement dans l'affichage souhaité ! Rapide et super pratique ! Indispensable quand vous l'aurez testé plusieurs fois ! (image ci-dessous)
  
• Le zoom du haut de page, rapide, simple, efficace !
  
• Dans le même genre vous avez aussi un mini menu dans les sections, lignes et modules qui permet de sélectionner les 3 tailles d'écrans pour y faire des modifications directes ! De plus, le mode "Hover" qui rend la page et tout ce qu'elle contient, modifiable intégralement pour un affichage différent en survol ! Génial ! Mais nous parlerons de cette fonction plus tard. (photo ci-dessous)
  
• Le mode "Nocturne", que l'on voit maintenant partout, arrive aussi sur Divi.
  
• Le changement possible de couleur du constructeur, qui rend bien plus visible le module, la ligne, la section et autres, sur lesquels on travaille.
  
• L'Undo et le Redo directement en haut de page sont franchement pratiques !
  
• Le bouton "Clear Layout" est pratique pour recommencer la page de zéro.
  
• Dans le genre génial, vous découvrirez aussi "Le Clic Direct". Simple, vous cliquez sur une section, ligne ou module et... la boîte de paramétrage s'ouvre immédiatement ! Magique !
  De plus vous n'êtes même pas obligé de la fermer pour ouvrir une autre boîte de paramétrage d'un autre module par exemple, il vous juste de cliquer sur l'autre module ! Super pratique !

Elegant Theme® annonce encore plus de nouveauté pour les futures mises à jour.

Afin que vous puissiez tester sereinement cette alpha de Divi 5, il est nécessaire de prendre quelques précautions :

• Installez WordPress sans extensions pour éviter toute source de conflit éventuel, du moins dans vos premiers tests de construction.
• Utiliser un navigateur internet sans extensions et paramétré correctement. D'ailleurs, que ce soit avec Divi ou un autre constructeur de page comme Elementor®, Beaver®, etc., vous devriez utiliser un navigateur "vierge" lorsque vous construisez votre site. Cela vous épargnera de nombreux problèmes.

S'agissant d'une "Alpha" il aurait été un peu étrange de ne pas rencontrer de difficultés ! Voici celles que j'ai rencontrées :

• Tout d'abord, le navigateur. J'ai eu des ennuis avec certains navigateurs : Opéra GX, Brave, Chrome et FireFox. Je ne pouvais pas enregistrer la page que je créais, une erreur s'affichait. Cependant, une fois toutes les extensions désactivées, cela fonctionnait très bien. C'est pourquoi il est important de développer votre site sur un navigateur "vierge". Pour information, j'utilise Chromium et FireFox Dev. Ces navigateurs fonctionnent avec Linux, Windows et Mac.
•  Comme le montre une photographie ci-dessous, j'ai eu, comme avec Divi 4, quelques échecs d'enregistrement. Toutefois, comme pour Divi 4, ces erreurs d'enregistrement ne sont pas toutes imputables à Divi. Le navigateur, le serveur, le cache du navigateur, les réglages, etc., ont aussi un impact.
• Et puis... c'est tout ! Vraiment pas grand chose pour le moment. Mais il n'y a que 3 pages sur ce site et seulement deux extensions, donc à voir plus tard.

 Une chose importante à prendre en compte est que Divi se devait d'évoluer, c'était même impératif ! Divi 4 a quand même 10 ans ! Bien sûr, de très nombreuses améliorations ont été apportées à Divi 4, mais le système de construction par "shortcodes" n'est vraiment plus adapté au WordPress que nous connaissons. D'ailleurs, Elegant Themes® ne s'en cache pas dans ses nombreux articles depuis la mise à disposition de cette Alpha de Divi 5. Notamment dans cet article.

Alors, pour ma part, cette première conclusion (partielle) est assez simple : Divi 5 est nettement meilleur que son prédécesseur, sans aucun doute ! Certaines fonctions manquent encore, mais elles arriveront.

• La construction d'une page est beaucoup plus agréable, il n'y a pas de "latence" dans les mouvements des modules ou des sections.
• Tout est fluide, bien défini, visible et accessible.
• Il est aussi beaucoup, beaucoup plus rapide ! Lorsque vous cliquez, tout se passe instantanément ! Faites un essai avec les "layers ou couches" et vous verrez la différence, c'est flagrant !
• Le redimensionnement de la fenêtre des paramètres, des modules, des sections et des lignes ne fige pas, c'est souple !
• Les nouveautés, comme l'ouverture instantanée d'un module, d'une ligne ou d'une section juste en cliquant dessus, sont vraiment magiques ! On se demande même comment on a fait pour s'en passer ! Le mode "X-Ray" est franchement pratique, le mode sombre, le survol avec ou sans affichage des "parents" (sections et lignes), le fil d’ariane en haut de chaque module, le réglage du constructeur, etc.

Vous l'avez compris, je suis conquis ! Tout simplement ! D'ailleurs je dois vous avouer que de retourner sur Divi 4 après ces premiers tests est "un peu" difficile, vraiment.

Nous construisons d'ailleurs un site de 30/40 pages pour le tester encore plus et voir sa réaction au fur et à mesure des mises à jour et des ajouts de fonctionnalités.

Voila donc pour ce premier test, d'autres suivront au fur et à mesure de mes découvertes et des avancées de Elegant Themes®.

Merci de votre lecture et laissez un commentaire en-dessous si vous voulez apporter votre avis, à bientôt pour le prochain test de Divi 5.