Les mises à jour de Divi

Mise à jour mineure : Les dégradés avancés

Alors même qu’Elegant Themes a de gros chantiers en cours, ils continuent sur leur lancée avec de petites mises à jour qui permettent de faire des sites plus beaux. 

Ainsi, ils nous font patienter avec une nouvelle gestion des dégradés :

• On peut maintenant aller au-delà de 2 couleurs et contrôler chaque « point » indépendamment ;
• Et on peut répéter un dégradé pour des effets sacrément créatifs, à essayer !

Attention toutefois à bien maîtriser votre charte et à ne pas tomber dans le kitsch… un site sobre permet de gagner la confiance des visiteurs plus facilement.

Mise à jour mineure : Les masques et motifs d’arrière-plan

Cela fait 4 mois que nous n’avions pas eu droit à de nouvelles fonctionnalités. Alors pendant ce temps, quelque chose d’énorme devait se tramer, n’est-ce pas ?

Eh bien sûrement… mais ce n’est probablement pas cette mise à jour.

En effet, nous avons droit à 2 nouvelles fonctionnalités sympathiques pour faire des sites plus modernes :

• Les masques d’arrière-plan tout d’abord qui permettent de jouer avec les images d’arrière-plan, les dégradés que l’on aurait mis par-dessus… bien utilisé, ça peut être magnifique.
• Et les motifs d’arrière-plan ensuite qui, il me semble, sont moins originaux et risquent de se faire ressembler beaucoup de sites Divi entre eux.

C’est d’ailleurs un point qui a vite été remonté par la communauté : les graphistes aimeraient bien envoyer leurs propres formes en SVG.

Mais en attendant, c’est déjà bien que les utilisateurs lambda (je me mets dedans) puissent utiliser des formes préconçues et les personnaliser un minimum.

Mise à jour mineure : Les modules Woo Panier et Commande

Alors ça c’est une nouveauté qui fait plaisir puisque Divi était à la traîne du côté de WooCommerce !

Avec l’ajout de 8 modules qui nous permettent de composer les pages Panier et Commande, on va enfin pouvoir personnaliser leur design et être fiers de ces pages clés.

D’autant plus que j’ai été bluffé par le processus de conversion des pages WooCommerce par défaut : l’activation du Builder met les bons modules à la place du code court (qui se trouvait précédemment) et à nous de jouer !

Par contre :

• On ne contrôle que la mise en page et le style, pas les fonctionnalités ! Ce sont des options de WooCommerce ou des add-ons qui vont sur ce territoire. Ce n’est pas évident à comprendre au premier abord : si on veut retirer un champ en particulier (du formulaire de commande) ce n’est pas avec Divi qu’on pourra le faire.
• Et ces deux pages phares de WooCommerce c’est bien… mais ça m’a donné l’eau à la bouche pour le jour où ils feront de même pour la page Mon Compte. Celle-ci a besoin d’encore plus de soin !

Et sinon, au-delà de ces nouveautés, nous avons divers correctifs et améliorations, notamment dans la détection des icônes (pour la performance) ou l’utilisation du Builder de manière générale.

Mise à jour mineure : Les icônes FontAwesome

Je ne peux que saluer l’arrivée d’autant d’icônes dans Divi sans avoir à recourir à des add-ons payants. Enfin !

D’ailleurs, ce retard est comblé avec quelques ajouts intéressants :

• Tout d’abord, le fichier de police FontAwesome est embarqué dans Divi, il n’y a pas d’appel externe pour le récupérer ;
• Ensuite, cet ajout est compatible avec les optimisations de performance sorties en août dernier : si aucune icône FontAwesome n’est présente dans une page, la police n’est pas chargée ;
• Le sélecteur d’icône est également amélioré pour nous permettre des recherches plus faciles ;
• Et enfin, un module Icône fait son apparition afin qu’on puisse en insérer plus facilement dans nos pages. On n’a pas forcément besoin d’utiliser le module composé Blurb (Résumé/Accroche en fonction des traductions).

Mais cette mise à jour contient également une dizaine de correctifs qui permettent de consolider la stabilité de Divi suite aux dernières mises à jour mineures.

Mise à jour mineure : Le Theme Builder plus facilement accessible

En grande fanfare, Elegant Themes a annoncé l’arrivée du « Full Site Front-End Editing » qui n’est rien de plus que le constructeur d’en-tête et de pied de page du Theme Builder accessible sur chaque page.

Il n’y a plus besoin de sortir de l’édition d’une page pour se rendre dans le Theme Builder, on peut tout faire dans le même onglet.

Du coup, il n’y a absolument rien de fantastique dans cette mise à jour (surtout quand on n’utilise pas le Theme Builder). Ce n’est que du sensationnalisme pour rattraper une fonctionnalité qu’Elementor propose déjà depuis des lustres !

Cela pose même un problème : un client pourrait trop facilement modifier l’en-tête de son site maintenant que c’est disponible en 2 clics.

Pour ça, il faudra désactiver le Theme Builder dans les options du gestionnaire de rôles et donc veiller à ce que ledit client ait un rôle d’éditeur ou un rôle sur-mesure.

Mise à jour mineure : Les conditions logiques

En complément du Theme Builder, pour des encarts saisonniers ou pour du contenu réservé aux membres d’un site, on a parfois besoin d’ajouter une touche de logique à nos mises en pages.

Et ça tombe bien, il existe aussi bien des add-ons gratuits que payants pour le faire ! Depuis plusieurs années déjà.

Mais Elegant Themes a décidé d’incorporer ces fonctionnalités dans le Builder, à leur sauce et sans aller trop loin.

On peut ainsi définir l’affichage de tout élément du Builder en fonction de plusieurs types de conditions :

• Le statut du visiteur (connecté ou non, son rôle) ;
• Les interactions avec le site (quel jour, quelle heure, via quelle page, avec quels produits WooCommerce) ;
• L’appareil utilisé (navigateur, système d’exploitation, cookies présents) ;
• Les publications (quel type, appartenant à quelle taxonomie, écrit par quel auteur) ;
• L’emplacement exact (publication, taxonomie, résultats de recherche).

Donc si vous aviez besoin d’aller vers de telles logiques sur vos sites, vous pouvez maintenant le faire nativement, sans forcément passer par un add-on.

Mais si vous souhaitez aller plus loin, vous savez également que d’autres solutions le permettent en se branchant sur ACF, avec des codes courts, des conditions logiques en PHP… 

Et pour finir, attention à vos règles de cache : certaines conditions logiques ne sont pas compatibles. Divi saura vous le dire afin que vous puissiez le purger à une fréquence plus élevée ou que vous le désactiviez sur certaines publications données.

Mise à jour mineure : Grosse amélioration des performances

Divi n’a eu de cesse de s’alourdir avec le temps, Elegant Themes a donc entrepris un énorme chantier d’amélioration des performances.

En janvier dernier, c’est le back-end qui a eu droit à une dose de rapidité ; c’est maintenant au tour de l’interface publique !

Avec l’incitation de Google à drastiquement améliorer les performances au travers des Core Web Vitals, il fallait bien que l’écosystème se mette à la page.

C’est maintenant chose faite pour Divi avec de multiples fonctionnalités qui nous aideront à avoir de très bons scores sur PageSpeed Insights.

Cela ne remplace toutefois pas d’autres optimisations, il faudra toujours une extension de cache et de compression d’images !

Mais au moins, en cas de lourdeur, ce ne sera plus la faute de Divi.

Mise à jour mineure : Les couleurs globales

Elementor les a depuis le mois d’août, elles ont été entraperçues en octobre sur Facebook et elles arrivent maintenant… les couleurs globales !

On peut dorénavant se créer une palette synchronisée : si on modifie une couleur globale, tous les endroits où elle a été utilisée seront modifiés également.

Par contre, c’est décorrélé de la palette présente dans les Options du thème. Nick a bien insisté sur le fait que petit à petit, tout se trouvera dans le Builder.

Je lance même une prédiction un peu hasardeuse : pour moi, Divi 5.0 finira de couper les ponts avec ces options d’un autre temps ainsi que l’outil de personnalisation.

Pour finir, la mise en place des couleurs globales sur un site existant sera fastidieuse. Malgré le fabuleux « rechercher/remplacer », il faudra quand même passer sur toutes les pages pour définir chaque couleur globale à son emplacement.

À mon avis, il vaut mieux utiliser ce nouveau système sur de nouveaux sites plutôt que de passer des heures à le faire sur d’autres qui ont déjà une charte bien établie.

Mise à jour mineure : L’amélioration des performances du Builder

Les voilà les optimisations tant attendues… en tout cas, en voici la première fournée.

En effet, cette mise à jour se concentre sur les performances du Builder, donc quand vous éditez votre site seulement. Ce n’est pas pour vos visiteurs.

D’après leurs chiffres, de nombreuses manipulations devraient maintenant se faire plus rapidement. Le Builder devrait être plus réactif, les modales devraient s’ouvrir plus vite…

Et dans les faits, c’est plutôt vrai. Mais j’ai fait des tests sur plusieurs sites et les gains observés sont vraiment hétérogènes.

Tous sont plus rapides, c’est sûr. Mais c’est surtout sur des sites vierges en local que j’ai pu constater le plaisir d’avoir une interface très réactive.

Sur des sites plus anciens, avec beaucoup d’extensions… on ressent moins cet effet « wouahou ». 

Quoi qu’il en soit, le résultat est là : les développeurs ont refactorisé leur code en profondeur pour nous proposer une meilleure expérience d’édition.

C’est un bon début et on attend maintenant la suite !

Mise à jour mineure : Les aperçus responsive

Il est vrai que les finitions responsive ne sont jamais évidentes… alors Elegant Themes nous propose de fusionner l’inspecteur responsive de Chrome avec le système de Divi.

Ainsi, nous avons la possibilité de prévisualiser nos sites pour différentes tailles de tablettes et de mobiles.

Sauf que c’est bien joli tout ça… mais ce sont des paillettes.

• Tout d’abord parce qu’on parle d’aperçu, pas de « vrai rendu ». Si vous allez voir votre site sur un appareil donné, il ne sera pas identique à la prévisualisation dans le Builder Visuel.
• Ensuite parce qu’un fois encore, ce n’est qu’un aperçu. On n’a pas de contrôle supplémentaires sur les points de rupture. On ne peut pas modifier des valeurs pour tel ou tel appareil.
• Et pour finir, les ordinateurs sont les grands oubliés de cette histoire ! Pourtant, il est souvent utile de faire des finitions pour les très grands écrans ou certaines tailles courantes d’écran d’ordinateurs portables.

Sur le papier, c’est bien joli… mais au final, ça ne change pas grand-chose.

Et a contrario, l’add-on Divi Responsive Helper est lui, bien plus intéressant et pousse ces concepts bien plus loin !

Mise à jour mineure : Les options Sticky

Il y a 10 mois, Elegant Themes sortait le Theme Builder et la communauté a vite fait part de sa grogne quant aux options d’en-tête très limitées comparées à celles proposées côté thème.

10 mois plus tard, nous voilà avec les options Sticky à la sauce « Elegant Themes », c’est à dire une interface très pertinente, bien soignée et qui s’intègre parfaitement avec tous les autres réglages.

On peut ainsi rendre n’importe quel élément sticky, définir sa position et les contraintes dans lesquelles il peut changer d’état, modifier son style une fois qu’il passe en sticky… Tout ce que l’on pouvait attendre de telles options.

Mais comme souvent, attention à ces fonctionnalités avancées qui peuvent très facilement ruiner l’ergonomie d’un site. Ce sera à manipuler avec précaution !

Mise à jour mineure : Les pré-réglages

Il y a quasiment un an jour pour jour, Elegant Themes sortait les réglages globaux. Alors quoi de mieux pour fêter leur anniversaire que de le faire disparaître au profit d’un système encore plus intéressant ? 

En effet, les préréglages vont maintenant nous permettre de configurer plusieurs jeux de réglages que l’on va pouvoir assigner à chaque élément.

Le cas le plus évident est celui des boutons : vous pouvez ainsi définir un style A, un  style B, un style C… et dès la création d’un nouveau bouton, vous pouvez sélectionner le style que vous souhaitez.

Le gain de temps va être énorme !

Et en plus, ce système remplace les réglages globaux puisque n’importe quel réglage pourra être défini comme global. Attention toutefois : tout votre site s’en trouvera modifié d’un claquement de doigt et le retour en arrière ne sera pas évident.

C’est donc une belle nouveauté pour gagner en productivité sur tous nos prochains sites !

Mise à jour mineure : La modale des calques

Elegant Themes nous propose une nouvelle façon de travailler avec le Divi Builder et je dois vous avouer qu’elle fonctionne à merveille.

Lorsque l’on lance la modale des calques, on peut tout faire plus vite. On arrive au bon endroit d’une page, on ajoute des éléments, on les renomme, on les modifie, on les déplace… 

Je l’ai utilisée sur cette page pour rédiger cette analyse et je dois dire qu’elle est bien pensée et bien exécutée.  

On retrouve là leur talent de créateurs d’interfaces et ça fait plaisir.

Mais vous savez aussi ce qui se cache dans les changements de cette version ? Les galeries vont ENFIN récupérer les textes alternatifs de la bibliothèque de WordPress plutôt que les titres !

Ça fait quoi, 6 ans qu’on attend ça ? C’était pas trop tôt.

Mise à jour mineure : Les effets de défilement

C’est bon, Elegant Themes a sorti sa version des Motion Effects d’Elementor (pas tous pour autant) et presque dans les temps puisqu’il était question de fin janvier.

On peut donc maintenant être encore plus créatif et créer un effet « Wow » sur nos sites avec 6 effets et plein de réglages pour les peaufiner.

C’est génial… mais ça ne concerne que les utilisateurs très avancés finalement. Il n’y a qu’à voir les exemples proposées (cf lien ci-dessous), il faut un sacré niveau en graphisme pour tirer le plein potentiel de cette nouveauté.

On ne va pas cracher dessus pour autant, Divi rattrape son retard sur Elementor, ce qui est une bonne chose.

Cette mise à jour corrige également divers bugs et problèmes autour du contenu dynamique. 

Mise à jour mineure : Les options de Position

Suite à la sortie du Theme Builder et du module Menu, un manque était apparu : il n’était plus possible de faire de menu fixe (déconseillé sur 95% des sites, mais bon…).

Cette mise à jour vient donc corriger ce problème en introduisant des options de position pour tous les éléments.

On peut ainsi les laisser en position statique (par défaut), ou les passer en position relative, absolue ou fixe. Et lorsqu’une des 3 positions est sélectionnée, une poignée apparaît en haut à droite pour nous permettre d’affiner la position finale.

Cela va ouvrir plein de possibilités (pour ceux qui ne le faisaient pas déjà en CSS) mais elles seraient trop longues à détailler ici. Par contre, allez voir l’annonce d’Elegant Themes (bouton ci-dessous).

Cette mise à jour apporte également un certain nombre de correctifs dont la compatibilité entre WPML et le Theme Builder.

Mise à jour mineure : L’intégration poussée à Gutenberg

Il y a un peu plus d’un an, WordPress 5.0 sortait et mettait le bazar dans les plans de développement de Divi.

Maintenant c’est bon, les développeurs nous montrent qu’ils vont réussir à concilier le meilleur des deux mondes et ce n’est qu’un début !

Grâce à cette mise à jour, on peut créer ou importer n’importe quelle mise en page faite avec Divi.

Et là où c’est fort c’est qu’il ne s’agit pas juste d’importer des éléments de bibliothèque, on peut également les modifier sans quitter la page.

On a ainsi une mini-instance de Divi qui se lance, on modifie tout ce que l’on souhaite et une fois terminé, on est de retour dans l’éditeur de WordPress.

Ce sera surtout intéressant pour toutes les publications où l’on n’utilisera pas le Divi Builder (je pense aux articles, notamment) mais dans lesquelles on pourra quand même ajouter une touche de Builder.

Au passage, les développeurs en ont profité pour que les styles de Divi soient mieux retranscris dans l’éditeur WordPress… mais c’est raté. Les polices définies ne sont même pas récupérées. Vivement que ce soit mieux fait.

Pour finir, cette mise à jour contient également divers correctifs et améliorations.

Mise à jour majeure : L’arrivée du Theme Builder

On l’attendait depuis plus d’un an et il est maintenant là : le Theme Builder.

Divi rattrape ainsi le retard qu’il avait sur d’autres constructeurs de pages (Elementor, mais pas que) et permet de construire des sites sur-mesure notamment en prenant le contrôle des en-têtes, pieds de pages et modèles de pages.

C‘était une évolution attendue par beaucoup… d’utilisateurs avancés.

Eh oui, beaucoup de sites n’en auront tout simplement pas besoin. Ce n’est pas parce qu’il y a un nouveau jouet qu’il faut se précipiter dessus !

D’autant plus que pour le moment, le Theme Builder a quelques manques :

• Le nouveau module de « Menu » n’arrive pas encore à la cheville de la gestion par l’outil de personnalisation : on ne peut pas le fixer et gérer son comportement au défilement ;
• Le module « Contenu de publication » (Post content) n’est pas vraiment compatible avec Gutenberg, il nettoie le code et nous prive de mises en pages plus évoluées (comparé à l’éditeur classique) ;
• Et la logique du Theme Builder nécessite de maîtriser le contenu dynamique, il y a une nouvelle courbe d’apprentissage qui n’est pas facile à gravir dans un premier temps.

Et puis il faut de sacrées compétences en ergonomie et en webdesign pour que ce soit réussi !

C’est pourquoi je recommande aux débutants ou à celles et ceux qui n’ont pas des sites complexes de ne pas toucher au Theme Builder. Ou à la limite, de ne s’en servir que pour personnaliser la page 404.

On peut également noter que dans cette mise à jour il y a un nombre ahurissant de correctifs qui auraient pu sortir de façon plus graduelle mais qui ont attendu cette version 4.0.