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. 😉
Bonjour, merci pour ce tuto qui permet d’affiner le rendu d’une page. Cela a son importance pour l’internaute qui vient sur votre site.
Excellent pour rendre cliquable une carte entièrement designée à la main !! Merci pour le tuto
Pour les liens, je suis perturbé par le choix
Dans la même fenêtre / dans le même onglet
erreur de traduction ?
ce ne serait pas “Dans un nouvel Onglet” ?
Salut. Tu as raison, cela fait partie des traductions hasardeuses de Divi 😉
Super tuto !
ET aurait pu ajouter cette fonctionnalité à la partie box shadow pour permettre de faire apparaître une ombre au passage de la souris. Le CSS est encore utile 🙂
bonjour et merci pour le tuto… mais lorsque je regarde dans mes paramètres de module je ne vois pas cette possibilité. il y a un paramétrage a activer ?
Non, c’est inclus nativement dans Divi depuis la version 3.16.
Il suffit de survoler les diverses fonctionnalités pour voir s’afficher l’icone, comme le montre la première capture d’écran de cet article.
Bonjour, j’aimerais ajouter du texte lorsque ma souris passe sur une image. Et pour compliqué l’affaire je suis sur une image de produit woocommerce. Savez-vous si je peux le faire ?
Avec la propriété CSS content:”ton texte”; et les attributs de taille et positionnement adéquats, ça devrait le faire.
Bonjour Pierre, POurriez-vous m’en dire plus. J’ai des notions de CSS mais je ne les ai jamais appliquée dans Divi. Je n’arrive pas à mettre du texte sur mon image. Auriez-vous un tuto ou quelques explications ?
Merci !
Bonjour Pauline, je t’invite à venir nous exposer ton problème sur notre groupe d’entraide Facebook. 🙂
Merci pour cet article, ça correspond bien à ce que je cherchais
Bonjour, comment faire quand on ne veut aucune transition pour que la page se charge instantannément sans que délais de transition. j’ai tout mise à 0ms et même -50ms et rien n’y fait… Pouvez-vous m’aider ?
Bonjour, je pense que tu parles d’optimisations techniques ici et non de Divi ?
Bonjour Julien, je parle bien de Divi et de ses transitions. J’ai utilisé le modèle Agency (Divi for business), et même en mettant la jauge “transition” à 0, j’ai toujours un aspect fondu au scroll quand mes éléments (images texte) apparaissent.