Tester Divi 5 c’est enfin possible (version Alpha)

L’équipe d’Elegant theme revient en ce début mai avec une nouvelle qui va ravire tous les utilisateurs de DIVI : la version 5 du constructeur de thème est disponible à l’essai. Une fois les derniers bug corrigés vous pourrez télécharger l’Alpha publique et la tester sur vos sites web. Cette dernière sera mise à jour régulièrement, en moyenne tous les 15 jours.

Ils ont également mis en place une nouvelle page de présentation pour Divi 5, où vous trouverez un lien vers le site de démonstration ainsi qu’une liste de toutes mes mises à jour mensuelles de Divi 5.

Obtenez tous les détails dans la vidéo ci-dessous. 👇

Découvrez la démo de Divi 5

Vous remarquerez que la nouvelle version du Visual Builder est presque terminée. Quelques fonctionnalités manquantes incluent les actions rapides, la recherche et le remplacement, les préréglages, les modules WooCommerce et certaines options de condition. Si il manque des fonctionnalités dans la démo, ce n’est pas parce qu’elles ont été supprimées ; elles n’ont tout simplement pas encore été ajoutées.

Notez bien qu’il s’agit d’une version pré-alpha. Vous rencontrerez des bogues et des bizarreries dans l’interface, dont la plupart sont déjà dans leur ligne de mire. Si vous remarquez un bogue, vous pouvez les signaler à équipe de support d’Elegant Theme.

Qu’est ce qui change avec Divi 5 ?

Tout fonctionne à peu près de la même manière que Divi 4, mais il y a quelques changements à noter :

• Interface personnalisable : Divi 5 prend en charge plusieurs panneaux, des fenêtres de panneaux combinés et des configurations de docking personnalisées.
• Édition responsive plus facile : Au lieu d’activer l’édition responsive au niveau de l’option, l’édition responsive est contrôlée au niveau de l’application. Passez à n’importe quelle vue, et les modifications que vous apportez dans cette vue s’appliqueront automatiquement.
• Nouveaux modes d’interaction : Les modes d’interaction sont également différents dans Divi 5. Désormais appelées « couches d’interaction », vous pouvez sélectionner quelles couches d’éléments apparaissent au survol, y compris les options d’élément, les options d’élément parent et les contours d’élément. En cliquant sur n’importe quel élément, son panneau de réglages s’ouvrira. Vous n’avez pas besoin de double-cliquer ou de cliquer sur l’icône d’engrenage. Toutes les actions sont disponibles via un clic droit, donc si vous voulez tout masquer pour simplifier l’interface et éviter les chevauchements, c’est une option viable.
• Navigation intuitive : Il est également plus facile de naviguer sur la page, grâce au panneau de couches docké et aux miettes de pain dans le panneau de réglages.
• Performance incroyable : Divi 5 est beaucoup plus rapide, ce que vous remarquerez immédiatement. De plus, il ne sera pas ralenti par des designs grands et complexes. Essayez de cliquer partout, de dupliquer rapidement des éléments et d’expérimenter avec différents réglages, et vous verrez à quel point il est rapide.
• Interface simple et épurée : L’interface de Divi 5 est plus épurée. Elle est plus petite et plus efficace. Elle est plus réactive et dépourvue d’animations et d’effets inutiles. Elle ne comporte pas les boutons de sauvegarde et d’annulation désuets dans chaque panneau. Elle dispose également d’un mode sombre. Vous vous sentirez peut-être chez vous dans le design plus grand, plus lent et plus ludique de Divi 4, mais une fois que vous vous serez habitué à Divi 5, vous apprécierez ses nouvelles forces.

Divi 5 : Un regard vers l’avenir

Les changements les plus critiques dans Divi 5 sont ceux que vous ne pouvez pas voir. Une nouvelle fondation en coulisses rend Divi plus capable d’un point de vue développement, permettant à à la communauté de créer de nouvelles fonctionnalités qui n’étaient pas possibles dans Divi 4.

Les bonnes nouvelles ne s’arrêtent pas là. Une fois Divi 5 publié les développement continueront et l’équipe d’Elegant Theme nous réserve encore de belles surprises avec l’arrive de nombreuses fonctionnalités essentielles : un constructeur de boucles, des boîtes flexibles et des grilles CSS, une accessibilité améliorée, plus de modules, de meilleures options de menu et d’en-tête.

Extrait du patchnote de mai pour Divi 5

Ajout du composant de sélection de préréglage dans VB.
Ajout de la classe d'élément de préréglage au module dans VB.
Correction du décalage de marge supérieure incorrect lorsque la barre d'administration est désactivée.
Correction d'un bogue dans le rendu CSS, qui faisait que le CSS des points d'arrêt et des états n'était pas dans la séquence appropriée dans certains cas.
Mise à jour du style de saisie de police Télécharger.
Correction de l'erreur lors de l'enregistrement/aperçu de n'importe quel module dans VB.
Correction de l'erreur dans les styles de la fenêtre contextuelle de sauvegarde.
Correction des dimensions et du positionnement incorrects du sélecteur d'icônes élargi.
Correction du rendu de la vue des couches étant rendu plusieurs fois sur le volet gauche lorsque vous cliquez sur clic droit > Aller à la couche option sont cliqués sur plusieurs modules.
Réglez la hauteur modale Ajouter pour s'adapter automatiquement à la hauteur de la fenêtre d'affichage disponible.
Correction d'un problème où lorsque vous n'avez pas/aucune couleur globale, le bouton Ajouter une couleur n'est pas visible, et si vous avez une couleur globale, la couleur est cachée, et seul le bouton Ajouter une couleur est visible.
Correction du problème où l'ajout de couleur globale entraîne la désactivation de l'interaction/piegeage de la zone du module.
Correction du problème d'étiquette d'action dynamique pour l'onglet d'importation et d'exportation dans la fenêtre contextuelle de portabilité.
Correction du problème du panneau de paramètres dans lequel le bouton Activer la redirection est désactivé, mais le champ URL est visible.
Correction de la taille de la fenêtre contextuelle de suppression de couche passée à la composante d'enrobage.
Nettoyage de quelques codes en arrière-plan lors de l'enregistrement d'un article/page
Correction d'un problème où la synchronisation des couleurs globales était uniquement effectuée sur le brouillon et non sur la publication/aperçu.
Correction d'un problème où les couleurs globales supprimées n'étaient pas supprimées de la mise en page lors de l'enregistrement.
Correction du scintillement du sélecteur de couleur de noir à blanc.
Correction : L'ouverture de modèles modifie les valeurs des paramètres du module.
Correction d'un problème où si vous avez beaucoup de couleurs globales, l'expansion de l'onglet Couleurs enregistrées/Récentes et l'ouverture de l'onglet Couleurs globales entraînent le chevauchement des échantillons de couleur sur les titres des onglets enregistrés/globaux/récents.
Ajout de tests pour la fonctionnalité de copier/coller du presse-papiers pour vérifier que les valeurs d'attribut de couleur globale sont copiées/collées.
Ajout de la prise en charge de l'attribut showPlaceholderOnEmpty dans le composant de champ de texte de zone de texte.
Ajout de la fonction pour masquer les paramètres dans le module de blog lorsque la longueur du contenu est définie sur "Afficher le contenu".
Correction du bogue où l'utilisateur supprime une colonne de la vue des couches, elle est supprimée.
Correction de la position incorrecte et imprévisible de la barre d'outils de l'éditeur en ligne lorsque les utilisateurs sélectionnent certains textes dans le constructeur.
Correction d'un problème où l'option "Afficher la pagination" dans le module de blog D5 ne masquait pas la pagination dans le front-end lorsqu'elle était désactivée.
Correction du problème où la désactivation de l'option "Afficher l'extrait" dans le module de blog D5 ne masquait pas l'extrait dans l'aperçu du Visual Builder.
Correction de la rupture de contenu responsive en raison du déplacement de @wordpress/hooks vers des dépendances externes en l'enregistrant comme dépendance pour le script multi-vue dans le FE.
Correction de la séquence de mise à jour incorrecte sur le champ de texte enrichi.
Correction de l'ajout indésirable de soulignement de texte au bouton en raison de l'ordre incorrect de rendu de style statique divi.
Ajout des raccourcis manquants de page (enregistrer la page, enregistrer la page en tant que brouillon, quitter le constructeur visuel, ouvrir la portabilité, zoom avant/arrière réactif, basculer en mode filaire)
Correction de la position incorrecte de la portabilité et de la sauvegarde dans la bibliothèque lorsqu'ils sont ouverts pour la première fois.
Correction du problème où la réinitialisation des styles de survol réinitialise les styles de bureau à la place.
Correction du problème où le dégradé du bouton s'arrête à l'état de bureau et changerait la valeur à celle utilisée par l'arrêt de dégradé de survol.
Correction de la dissimulation de la partie visible de l'élément dans sa position d'origine tout en le faisant glisser.
Correction de l'icône de réinitialisation "Désactiver sur" masquant/affichant en fonction des vérifications/décoches visibles.
Correction de l'erreur lors de l'exécution de raccourcis clavier.
Correction du bouton de réinitialisation ne fonctionnant pas avec les cases à cocher.
Ajout de la fonctionnalité de colonnes manquantes dans les sections spécialisées.
Ajout de l'option de paramètres du constructeur pour désactiver la barre d'administration
Ajout de la possibilité de faire défiler le module déposé dans VB après l'avoir glissé et déposé dans la vue des couches.
Ajout de la possibilité de faire défiler le module déposé dans VB après l'avoir glissé et déposé dans la vue des couches.
Un bouton d'effacement de mise en page a été ajouté à la barre de page.
Ajout du basculement du mode couleur sur la barre de page.
Ajout de la fonctionnalité garantit que le groupe de calques est développé uniquement lorsque le module glissé est le descendant de module correct.
Ajout de la fonctionnalité pour développer le calque lorsqu'un utilisateur fait glisser un module et passe le curseur sur le groupe de calques après 200ms.
Ajout de la fonctionnalité pour mettre en surbrillance le module réel dans la mise en page lorsqu'il est survolé dans la fenêtre modale des couches.
Ajout d'un mécanisme pour déclarer les attributs par défaut et defaultPrintedStyle du module dans son propre fichier JSON.
Ajout d'un mécanisme pour extraire les attributs qui génèrent des données HTML, de style et de script.
Ajout du bouton de la barre de page pour quitter le constructeur visuel
Un bouton de la barre de page a été ajouté pour prévisualiser l'état actuel du constructeur sur le front end.
Ajout de la prévention pour garantir que la seule colonne dans une rangée ne sera pas supprimée ou déplacée vers une autre rangée.
Ajout du prototype de la fenêtre modale des paramètres prédéfinis
Ancrer automatiquement la vue des couches à gauche du volet lorsqu'elle est ouverte.
Assurez-vous que la fenêtre modale "Ajouter depuis la bibliothèque" apparaît maintenant centrée dans la zone de la page avec une largeur et une hauteur maximales égales à 32px de chaque bord du cadre sur les quatre côtés.
Correction d'un bogue dans le module de bafouille pour les sélecteurs de survol, provoquant le non-render des styles dans VB lorsque l'état de survol était sélectionné.
Correction d'un bogue dans Divi 5 où les styles d'état collant n'étaient pas rendus dans VB lors de la sélection de l'état collant dans les paramètres du module.
Correction d'un message obsolète en PHP 8.3 lié aux propriétés dynamiques.
Correction d'un avis de dépréciation PHP dans le module d'optin d'email survenu dans PHP 8.2+.
Correction du label d'administration non synchronisé dans la fenêtre modale des couches lorsque celui-ci est modifié à partir des paramètres du module ou du mode filaire.
Correction d'un problème où tous les articles étaient affichés dans le module de blog dans le constructeur visuel, même lorsque certaines catégories étaient sélectionnées.
Correction d'un problème où la couleur de fond de superposition et l'icône de superposition n'étaient pas correctement rendues sur le front end.
Correction du défilement automatique interrompu lors du glisser-déposer du module près du haut/bas du viewport de la fenêtre
Correction de la couleur de fond du bouton et de la couleur du texte du bouton dans les champs de compte de messagerie et de protection contre le spam dans le panneau des paramètres des modules de formulaire de contact et d'optin d'email.
Correction de la sélection d'icône par défaut dans le module d'icône lors de son chargement initial.
Affichage du contenu dynamique sur les paramètres pour le titre sur l'élément enfant pour les modules comme un accordéon.
Correction de l'erreur rencontrée lors de l'exécution de la commande yarn test-unit.
Correction du nom de classe de module de témoignage incorrect
Correction de la position incorrecte fixe de l'éditeur en ligne.
Correction du problème où enregistrer le brouillon publie toujours la page à la place.
Correction d'un problème où certains modèles et menus déroulants clignotaient de la position initiale incorrecte à la position correcte.
Correction d'un problème où les onglets n'apparaissaient pas sur le module d'onglets.
Correction du glisser-déposer saccadé dans la vue filaire
Correction des classes d'animation d'images manquantes dans le module de personne.
Correction des info-bulles manquantes des onglets d'arrière-plan.
Correction de l'action des options de module qui ne fonctionne pas lorsqu'elle est cliquée ; ouvre plutôt les paramètres du module.
Correction de l'espace inférieur supplémentaire affiché dans le module d'accordéon en état de survol.
Correction du défilement fluide lorsque la couche est glissée du bas vers le haut.
Correction de la couleur du texte dans le contenu de l'éditeur de texte riche en mode sombre.
Correction du problème de survol de l'icône du module de bafouille.
Correction du problème de zone de dépôt pour la zone inférieure qui nous a amenés à déposer les modules au bas de la liste des modules de couche.
Correction du problème d'affichage des options de module même si le module de couche n'était plus survolé.
Correction du problème d'affichage d'images de galerie de basse qualité dans le module de galerie FE.
Correction de la mise à jour des noms de colonnes enfants dans les paramètres de rangée et de la réorganisation des colonnes lors du glisser-déposer.
Introduit des améliorations au composant de sélection de couleur, permettant une plus grande extensibilité et modularité.
Introduction d'un nouveau composant de base pour les champs de transformation, qui résout les CSS de transformation redondants.
Conserver l'état d'amarrage/désamarrage de la fenêtre modale afin qu'elle soit rouverte en fonction de son dernier état fermé.
Initialiser le glisser-déposer de modules à partir de n'importe quelle zone de surface de module.
Supprimez le bouton de sortie de la barre d'administration
Suppression de la possibilité de faire glisser et redimensionner à partir de la fenêtre modale de chargement de la bibliothèque.
Suppression des options de module de la colonne de la section spécialisée dans la fenêtre modale des couches.
Suppression du sélecteur de survol redondant pour le module de connexion suite à la correction appropriée du problème.
Suppression du raccourci clavier inutilisé.
Remplacement de l'UX basé sur le mode de Divi 4 par l'UX de couches d'interaction.
Interface utilisateur du constructeur visuel rationalisée (composants de champ et de fenêtre modale)
Masquer temporairement les boutons Annuler et Rétablir de la barre de page jusqu'à ce que l'historique soit développé
Mise à jour et affinement de la fonctionnalité de couleurs globales, introduction d'un nouveau format d'ID de couleur globale et meilleur support pour les attributs de module.
Utilisation de variables CSS pour définir les couleurs de vue des couches, remplacement de l'utilisation inutile de selectSelect dans la composante de poignée de glisser de calque pour optimiser les performances, et utilisation systématique de selectStore pour nommer le sélecteur à l'intérieur de l'utilisation selectSelect de la vue des couches.

Retrouvez l’article original en anglais sur le Blog d’Elegant theme.