Considéré par beaucoup comme le thème WordPress ultime. Divi a développé une tonne de nouvelles fonctionnalités en 2017 afin d’entériner son hégémonie sur le secteur et pour simplifier votre vie.

Même si Gutenberg – le nouvel éditeur de contenu en bloc de WordPress – fait son apparition et risque de mettre à mal beaucoup de constructeur de page. Divi à pris une tel avance qu’il sera simple pour lui de rester au top. Pour mon agence Pop Startup, je n’utilise plus que lui. À la fois pour sa simplicité de création de site avec son constructeur de page mais aussi pour sa prise en main optimale par les clients.

A l’heure des bilans de début d’année, revenons sur une année 2017 extrêmement chargée pour le constructeur de page Divi avec une tonne de nouveautés que nous allons vous présenter.

Et à croire Nick Roach, le patron d’Elegant Themes, ce n’est que le début…

Le nombre de nouveautés étant énorme, je les ai divisées en 4 thèmes :

• Design
• Modules
• Optimisation du code
• Fonctionnalité du Visual Builder.

D’autres options complètent les nouveautés typographiques telles que :

• la transformation majuscule/minuscule,
• le barré,
• la prévisualisation de la police lorsque vous passez votre souris par dessus,
• le paramétrage plus fin des liens,
• la personnalisation de vos listes à puces et vos citations.

Mais aussi une option qui faisait défaut, c’est l’impossibilité de paramétrer vos titres H2, H3, H4, H5 et H6. C’est désormais possible. Et c’est votre référencement Google qui va être content… 😘 

Rendez-vivant votre site internet avec des animations

C’est peut-être le petit plus de votre site internet qui permettra de se souvenir de vous et d’accrocher le visiteur. Elegant Themes a mis à jour les options d’animations proposant 7 styles d’animations uniques et paramétrables (durée, répétitions, directions…) :

• Fade : Créez un fondu de votre élément, le faisant apparaitre au fur et à mesure
• Slide : Fais glisser votre élément d’un côté de l’écran.
• Bounce : Fera rebondir votre élément
• Zoom : Agrandis votre élément
• Flip : Retourne votre élément d’un côté et de l’autre
• Fold : Plie votre élément à la manière d’une page qui se tourne
• Roll : Fais rouler votre élément. Vous trouverez bien une utilité à celui là 😉

L’avantage de cette mise à jour est sa disponibilité sur les sections, lignes et l’ensemble des modules. Voilà une bonne manière de créer de l’interaction avec votre visiteur. Attention à ne pas en faire trop non plus, votre site n’est pas un parc d’attraction !

Et si Divi remplaçait Photoshop avec ses filtres ?

Pour la fin de l’année, Divi nous a régalé avec une optimisation design vraiment top. Ils ont ajouté un panneau de contrôle offrant des filtres couleurs complètement personnalisables.

Teinte, luminosité, contraste, inversement, flou, opacité et sépia avec la possibilité de tout mélanger. Alors plus besoin de Photoshop ?! Je ne sais pas. Mais plus que jamais vous aurez un site unique avec Divi comme vous pouvez le voir ci-dessous.

À qui sont destinées ces nouveautés ?

Ces nouvelles fonctions vont réjouir les utilisateurs de WordPress néophytes qui n’ont pas de compétence en CSS. Avec ces options, Divi ouvre la porte d’une personnalisation infinie avec des possibilités visuelles jusqu’alors non atteignables pour un débutant.

Les designers chevronnés pourraient également se prendre au jeu avec une limitation des allers-retours dans Photoshop. Si vous réalisez un site où l’esthétique a une importance majeure, foncez pour Divi les yeux fermés (lien sponsorisé).

Un formulaire de contact plus performant

Grosse mise à jour du formulaire Divi puisque jusqu’ici il n’était possible d’avoir uniquement que des champs textes. Désormais, vous pourrez avoir :

• des boutons radio,
• des menus déroulants
• des cases à cocher.

Ce qui vous offre nettement plus d’options créatives.

Mais la grosse nouveauté est l’ajout de condition. Ainsi, vous pourrez afficher ou cacher certains champs selon les informations données par votre visiteur dans le formulaire.

Par exemple : Si vous souhaitez obtenir uniquement des adresses e-mails professionnels, vous pourrez utiliser la condition “ne contient pas” @yahoo.com @gmail.com @hotmail.com etc…

Vous pourrez également choisir un type de format pour les réponses tels que nombre, lettre et un minimum ou maximum de caractères.

17 nouveaux fournisseurs intégrés au module optin e-mail

Vous envoyez sûrement des newsletters à vos abonnés !? Pour cela, vous pouvez utiliser le module opt-in email de Divi. Cependant jusqu’ici celui ne proposait que 3 fournisseurs.

Désormais, 17 nouveaux fournisseurs d’emailing ont été ajoutés dont le français SendinBlue. Cocorico.

À qui sont destinées ces nouveautés ?

Qu’on se le dise, les modules de Divi ne remplaceront pas un plugin dédié qui sera toujours plus performant tel qu’un Caldera Form ou Gravity Form pour les formulaires.

Cependant, si vous ne souhaitez pas multiplier les plugins, ces modules feront le travail !

Un site plus rapide grâce aux fichiers statiques CSS

La vitesse d’exécution est souvent reprochée aux constructeurs de page c’est pourquoi Divi optimise également les performances de son thème en supportant désormais les fichiers CSS Static.

Ceci permettra d’avoir votre CSS enregistré en cache dans le navigateur de votre visiteur et ainsi obtenir un site plus rapide lors du chargement.

Fichier CSS et Javascript minifiés

Dans leur volonté d’optimiser les performance de leur thème, les développeurs d’Elegant Themes ont a inclus une minification automatique des fichiers CSS et Javascript. Ceci permet de réduire de 13% la taille des fichiers et d’accélérer le chargement des pages.

Ensuite, les fichiers CSS et JS seront compilés en un seul et même fichier, ce qui réduit encore plus le temps de chargement et améliore votre Google Page Speed Score.

Mise à jour du code sous React 16

L’optimisation de l’expérience utilisateur est au coeur des objectifs d’Elegant Themes. Leur mission est d’aider les designers à être plus productifs et d’améliorer leur processus de travail au quotidien.

Pour cela, ils ont mis à jour le code de leur Visual Builder sous React 16 qui est une bibliothèque JavaScript libre développée par Facebook utilisé entre autres par Netflix, Yahoo, Airbnb ou Instagram.

Ceci permet d’obtenir un Visual Builder beaucoup plus rapide lorsque vous réalisez des modifications sur votre page. Le ressenti de cette mise à jour est d’avoir un outil encore plus dynamique offrant un véritable confort de travail.

À qui sont destinées ces nouveautés ?

Alors que les constructeurs de pages sont taxés de ralentir les sites, Divi va de l’avant en répondant aux critiques qui lui sont faites.

Là aussi, ça ne remplacera pas un plugin tel que WP Rocket mais permettra d’accélérer sensiblement votre site.

Intégration du Visual Builder dans le plugin Divi Builder

La première étape de l’année 2017 fut l’intégration du Visual Builder dans le plugin Divi Builder. Quel que soit le thème que vous utilisez, vous pourrez ajouter le constructeur de page Divi incluant son Visual Builder.

Ceci vous permet désormais de construire ou d’éditer votre site visuellement depuis votre page afin de voir à quoi ressemblent vos modifications directement sans aller-retour dans le back-office WordPress.  

Ajouter, supprimer et déplacer vos éléments de manière plus intuitive

Elegant Themes a pris en compte qu’il pouvait parfois être compliqué de déplacer des éléments en bas de pages vers le haut avec le Visual Builder, c’est pourquoi ils ont introduit le Wireframe View.

En cliquant sur le bouton dédié, vous accéderez à l’armature de votre site telle que vous la voyez dans le back office sans avoir a faire d’aller retour et ajouter, supprimer, déplacer vos éléments comme bon vous semble.

Deux autres modes de vue intégrés

Par défaut, lorsque vous passez votre curseur sur un élément, les boutons de contrôle s’affichent. Parfois, ceci peut ne pas être évident, c’est pourquoi deux nouveaux modes d’interactions ont été ajoutés au Visual Builder afin de vous faciliter la mise en page.

• Click mode, où vous devez cliquez sur les éléments pour faire apparaitre les options
• Grid Mode, où tous les éléments et options sont apparents.

Un pop-up de présentation du Thème Divi à l’installation

Si vous débutez avec le thème Divi, vous pourriez être un peu désabusé par toutes les fonctionnalités. C’est pourquoi l’équipe d’Elegant Themes a pensé à vous en rendant plus simple l’utilisation de leur thème.

Lors de la première installation, un pop-up de présentation s’affiche, vous guidant à travers les différentes fonctionnalités du thème.

Cette démonstration est dynamique et vous invite à agir directement avec le thème. C’est en faisant qu’on apprend.

Vous découvrirez comment charger une mise en page, ajouter des sections, éditer des modules, glisser / déposer, copier-coller, ajuster les réglages du design, prévisualiser votre page sur mobile, naviguer sur votre historique d’édition et sauvegarder votre page.

Toujours plus de formation avec 70 nouvelles vidéos tutoriels

Une fois de plus, Elegant Themes fait de l’expérience utilisateur une priorité. Evidemment, si vous n’arrivez pas à utiliser leur thème, c’est un échec.

C’est pourquoi ils ont ajouté plus de 70 tutoriels vidéos  dans leur documentation technique qui couvre l’ensemble des fonctionnalités de Divi. Toutes disponibles sur Youtube.

Le seul hic, c’est que ces vidéos sont en anglais mais juste en regardant le fonctionnement vous devriez facilement vous en sortir.

Accédez à la documentation Divi

À qui sont destinées ces nouveautés ?

Selon que vous soyez un débutant ou un professionnel de WordPress, vous trouverez un intérêt à ces optimisations, notamment le Pop Up post installation. Pour les débutants, ceci vous plongera directement dans l’essentiel à savoir et vous monterez rapidement en compétence.

Pour les professionnels, ceci offrira à vos clients une formation simple et efficace du thème/plugin sans qu’ils tâtonnent dans tous les sens tout en complétant également vos connaissances de Divi via leurs formations Youtube.

Encore une année chargée, semble t-il. Déjà un mois et demi écoulé en 2018 et Elegant Themes repart de plus belle.

• Ils ont intégré l’A/B Testing au Visual Builder. Ceci vous permet de tester plusieurs versions de votre site (titres, images ou couleurs différentes) et de voir lesquelles sont les plus performantes. Bien sûr, au préalable, vous aurez défini un objectif lié au module choisi : suivi des achats avec le module boutique, suivi des conversions avec le module email optin, envoi d’email avec le contact form. Après vos tests, vous aurez accès à une série de statistiques et graphiques pour déterminer quels tests ont le plus performé.
• Leurs vidéos tutoriels sont désormais intégrées directement dans le module correspondant. Ce qui vous permettra de consulter une aide vidéo en pleine action si vous êtes bloqué. Plutôt pratique.
• L’année commence en beauté avec 20 sites pré-fabriqués intégrés à votre constructeur de pages. En quelques cliques, vous importez un site de 7,8 pages classé par secteur d’activité. Il ne vous restera plus qu’à modifier le contenu texte et ajouter votre identité visuelle (logo et police de caractère). Les images et photos sont libre de droit, libre à vous de les garder. Et en bonus chaque semaine, un nouveau pack intégré à votre constructeur de page sans rien faire.
• Autre nouveauté 2018 datant de quelques jours, vous pouvez désormais ajouter des formes à vos sections. Comme je l’ai fait avec mes magnifiques vagues entre chacune des parties 🌊. Cela crée des transitions plus dynamiques entre vos blocs de contenus. Vous avez au choix 26 différentes formes qui peuvent être retournées, retaillées, répétées et combinées pour créer un style unique.
• Les dévelloppeurs devraient être contents car désormais l’éditeur de code CSS est enrichi des options colorimétriques, numérotées, messages d’erreurs ou encore autocomplétion. Ce qui va réelement changer la donne.

Pour la suite de l’année 2018, Elegant Themes a annoncé une fonctionnalité majeure liée à l’effet hover sur l’ensemble des modules. Cet effet se déclenche lorsque vous passez votre souris sur un élément et que celui-ci change ou un effet apparaît.

Le thème Divi ne s’arrête plus de se développer et je prédis qu’il n’a pas fini de nous surprendre…

Que pensez-vous de ces nouveautés ? Utilisez-vous Divi ? Partagez nous les fonctionnalités que vous trouvez utiles et celles que vous aimeriez voir apparaître en 2018.

Promis, on les transmet à Nick Roach 😉