Elegant Themes vient de publier une mise à jour contenant deux fonctionnalités majeures qui vont réjouir la plupart d’entre vous : la possibilité d’ajouter des effets sur vos éléments au passage de la souris et de rendre n’importe quelle section ou rangée cliquable .

La réaction du CSS à l’annonce de ces nouvelles fonctionnalités

Et oui, cela correspond à une énorme avancée pour notre builder préféré et va permettre à quasiment n’importe qui d’ajouter de superbes effets à ses sites sans pour autant avoir besoin de connaitre ou savoir modifier le code CSS.

Nous allons donc voir ensemble ce que cela va apporter de concret.

Commençons par la première partie de ces mises à jour…

Les effets au survol

Lorsque vous ouvrez un module et parcourez les options, vous avez maintenant un nouvel icône de souris disponible à coté de chacun des items.

En cliquant dessus vous allez avoir la possibilité de définir des options qui s’afficheront de manière standard et de les redéfinir au passage de la souris :

Vous pouvez ainsi agir sur la couleur de fond, les marges, les ombres, les dimensions, les tailles de texte mais aussi tous les filtres disponibles par exemple pour créer des effets d’animations sur vos images à la manière du plugin Content Intense :

La dernière nouveauté de cette partie concerne les transitions.

Les transitions CSS permettent de rendre vos animations plus fluides et d’en définir la durée et la vitesse d’exécution. 

Par exemple, lorsque vous utilisiez avant un bout de code CSS pour modifier la couleur d’un lien au passage de la souris, celui-ci apparaissait instantanément.

Et bien si vous utilisez une transition CSS, vous pouvez dire par exemple:

• Ok, je veux que mon lien mette 1 seconde à changer de couleur et que la vitesse de changement soit linéaire.

Avant il fallait faire tout ça directement dans le code. Ça n’était pas forcément compliqué mais ça prenait quelques lignes et un peu de temps.

Maintenant, Elegant Themes a directement implémenté un onglet permettant de les définir sans toucher au code :

Pour info :

• Transition Duration : cette option correspond à la durée de l’animation en millisecondes.
• Transition Delay : cette option correspond au délai entre le moment où vous passerez la souris sur l’élément et le moment où l’animation débutera.
• Transition Speed Curve : cette option correspond à la vitesse de l’animation durant son exécution.

Les différentes valeurs sont les suivantes :

• Ease-In-Out : départ et fin lentes de l’animation
• Ease : début rapide et fin ralentie
• Ease-In : l’animation aura un début lent puis accélère à la fin
• Ease-out : l’animation sera rapide puis lente à la fin
• Linéaire : l’animation aura une vitesse constante

Vous voila donc en possession de moyens infinis de rendre vos sites beaucoup plus dynamiques et originaux même sans aucune connaissance en développement.

Attention cependant à ne pas abuser de ces effets en les appliquant à un trop grand nombre d’éléments.

Rendre cliquable n’importe quelle section ou rangée de ses pages

Pierre vous avait fait un tutoriel pour ajouter cette fonctionnalité à vos sites il y a quelques temps, mais Elegant Themes a finalement décidé de l’implémenter à Divi (coïncidence ? Je ne crois pas…).

À nouveau, lorsque vous ouvrez un module, une section ou une rangée, une nouvelle option est disponible dans l’onglet Contenu. Une partie “Lien” y fait son apparition et vous propose de saisir le lien de la page de destination du module, section ou rangée et si celle-ci doit s’ouvrir dans une nouvelle fenêtre ou un nouvel onglet :

Conclusion

Elegant Themes nous offre à nouveau une mise à jour majeure pour la suite de l’utilisation de Divi en nous facilitant énormément la tâche en terme d’ergonomie, de possibilités de design et d’animations.

Le CSS n’est pas encore mort, mais malgré tout son utilisation deviendra sans doute de plus en plus anecdotique dans le futur.

Toutes ces fonctionnalités en quelques clics vous feront gagner sans aucun doute de nombreuses heures de développement si vous créez régulièrement des sites, en amenant un coté moderne sans avoir besoin de se casser la tête pour savoir comment faire.

Attention cependant encore une fois à ne pas abuser de ces nouvelles fonctionnalités de d’appliquer des effets à tous les éléments de vos pages. 😉

Partager