Depuis avril 2018, le Divi Builder propose une option permettant de modifier les rendus au survol (hover) d’une grande majorité d’éléments.
En mars 2019 est venu s’ajouter une fonctionnalité fortement attendue : les effets de transformations.

Je vous propose de faire un rapide point sur l’utilisation de ces options, puis de voir comment il est possible de s’en servir pour obtenir des effets créatifs afin d’agrémenter vos sites Divi.

Avant-propos

Bien que les fonctionnalités de survol et de transformations soient conçues pour ne pas avoir à saisir de code, il y a néanmoins certains cas de figure qui nécessitent l’ajout de quelques lignes de CSS supplémentaires.
Pour ce faire, nous utiliserons des propriétés telles que transform, transition, box-shadow, linear-gradient… qui requièrent des préfixes CSS afin d’être reconnues par les différents navigateurs.

Afin de ne pas surcharger le code présenté dans cet article, je n’inclurai pas ces préfixes. Je vous invite donc à les générer vous-mêmes en utilisant le site Autoprefixer.

Enfin, sachez que la majorité des règles CSS que je propose dans ce tuto est à placer directement dans les CSS personnalisées du module.
Pour les autres cas, les règles iront dans le fichier style.css de votre thème enfant ou dans les CSS personnalisées du thème ou de la page.
Si vous vous posez des questions sur le sujet, je vous invite à lire mon article 7 manières d’ajouter des CSS à Divi.

Comprendre les effets au survol

Les effets au survol correspondent à l’ensemble des règles de styles que l’on attribue via la pseudo-classe CSS :hover.

Dans le Divi Builder, pour savoir si un élément offre la possibilité de paramétrer son effet au survol, il vous suffit de positionner le curseur de votre souris sur l’intitulé de cet élément.
Si une petite flèche noire s’affiche, cliquez dessus et un onglet Hover apparaitra. Il vous suffira ensuite de préciser la valeur souhaitée, différente bien sûr de celle présente dans l’onglet Défaut.

Ainsi, vous pourrez modifier la couleur des textes ou des fonds, changer les valeurs des marges internes ou externes, des ombres, des filtres, de divers attributs de texte, des CSS personnalisées, etc.

Vous remarquerez que toutes les options ne sont pas modifiables au survol. Pas exemple, on ne peut pas changer le style des bordures ou encore utiliser un fond autre qu’une couleur unie…
Mais vous verrez dans les exemples que je vais vous présenter qu’il y a déjà matière à s’amuser.

Comprendre les effets de transformations

Les effets de transformations proposés par le Divi Builder correspondent à la propriété CSS transform et ses valeurs scale, translate, rotate et skew ainsi qu’à la propriété transform-origin.

Cette option est accessible à partir des paramètres des sections, lignes ou modules du Divi Builder, onglet Style -> Transform.

Avant que nous entrions dans le vif du sujet, le schéma ci-dessus est un petit rappel du système de coordonnées x, y et z permettant de situer un point dans l’espace en 3 dimensions.
Il vous permettra de vous repérer si vous avez du mal à visualiser les transformations évoquées en lisant l’article.

La mise à l’échelle (scale)

La mise à l’échelle permet d’augmenter ou de diminuer la taille d’un objet dans son intégralité.

1. Cliquez-glissez la poignée pour modifier l’échelle.
2. Pour être plus précis, vous pouvez saisir la valeur de votre choix en pourcentage ou utiliser les curseurs.
3. Par défaut, la transformation est homothétique, c’est-à-dire que la largeur et la hauteur seront modifiées de pair et l’objet ne sera pas déformé. Cliquez sur l’icone de lien pour passer en transformation manuelle et déformer l’objet à votre convenance.

La translation (translate)

La translation permet de déplacer un objet sur un axe x ou y.

1. Cliquez-glissez le carré bleu pour déplacer l’objet à votre guise.
2. Pour être plus précis, vous pouvez saisir la valeur de votre choix en pixels ou utiliser les curseurs.
3. Par défaut, les valeurs x et y sont liées, donc si vous saisissez un chiffre ou bougez les curseurs, votre objet se déplacera en diagonale. Cliquez sur l’icone de lien pour déplacer l’objet indépendamment sur l’axe horizontal ou vertical.

La rotation (rotate)

La rotation permet de faire tourner un objet sur un axe x, y ou z.

1. Cliquez-glissez le curseur ou saisissez une valeur pour effectuer une rotation sur l’axe z.
2. Cliquez-glissez le curseur ou saisissez une valeur pour effectuer une rotation sur l’axe x.
3. Cliquez-glissez le curseur ou saisissez une valeur pour effectuer une rotation sur l’axe y.

L’inclinaison (skew)

L’inclinaison permet de distordre un objet sur un axe x ou y.

1. Cliquez-glissez les poignées du carré bleu pour déformer votre objet.
2. Pour être plus précis, vous pouvez saisir la valeur de votre choix en degrés ou utiliser les curseurs.
3. Par défaut, les valeurs x et y sont liées, donc si vous saisissez un chiffre ou bougez les curseurs, votre objet se déformera sur les 2 axes. Cliquez sur l’icone de lien pour déformer l’objet indépendamment sur l’axe horizontal ou vertical.

Le point d’origine

Le point d’origine permet de sélectionner le point à partir duquel la transformation s’appliquera à l’objet.

1. Cliquez sur un des angles ou déplacez le point bleu pour choisir l’origine de la transformation.
2. Pour être plus précis, vous pouvez utiliser les curseurs ou saisir la valeur de votre choix, soit en pourcents, soit avec top, bottom, center, left ou right.

Des exemples graphiques

J’imagine que c’est la partie du tuto que vous attendiez le plus.
Je vous ai donc préparé toute une série d’exemples en démonstration, que je vais détailler point par point.

Vous pouvez d’ores et déjà visionner la page de démo pour apprécier le rendu en live.

Écrivez un titre en escalier

Voici un effet de texte original que vous pouvez utiliser pour un titre de page dans un header.

Le principe

L’idée est de jouer avec la rotation en appliquant des valeurs identiques à un élément sur deux.
Ensuite, vous pouvez ajouter l’effet de votre choix au survol. Pour ma part, j’ai opté pour une ombre blanche (type “lueur externe” pour les habitués de Photoshop).

Les réglages

Dans mon exemple :

• les lignes 1 et 3 ont les valeurs de rotation suivantes :
  • z = -20 deg
  • x = 290 deg
  • y = 0 deg
• les lignes 2 et 4 ont les valeurs suivantes :
  • z = 8 deg
  • x = 30 deg
  • y = 332 deg

Enfin, pour placer correctement les 4 lignes les unes par rapport aux autres, j’ai réduit la marge externe inférieure à 0 et ai utilisé l’effet de translation pour affiner le positionnement.

Petit bonus, si vous passez votre curseur sur la section qui contient ce titre, vous remarquerez que j’ai ajouté un effet au survol s’appliquant sur le divider inférieur. Il s’agit ici de la hauteur du divider qui varie ; ce qui peut donner des effets bien sympathiques…

Animez une image au survol

Il est toujours intéressant d’ajouter des interactions au survol des images afin de dynamiser votre mise en page.

Le principe

Dans mon exemple ci-dessus, j’ai joué sur les transformations, les angles arrondis et l’ombre portée, en modifiant simplement les différentes valeurs entre l’état par défaut et l’état au survol.

Quelques astuces sur les ombres portées

Pour bien utiliser les ombres portées et obtenir un rendu élégant, il y a quelques règles à respecter.

• Utilisez une valeur d’opacité assez faible avec un flou important, ceci pour ne pas avoir d’ombres trop marquées. Sauf si bien sûr vous souhaitez une ombre opaque et nette dans un style BD par exemple.
• N’utilisez pas de noir, c’est trop agressif. Partez de la couleur dominante de votre site ou du fond de la page et adaptez la teinte en désaturant, en fonçant et en réduisant l’opacité pour trouver la valeur idéale.
• Uniformisez le sens des ombres. Imaginez la position de votre source lumineuse et paramétrez toutes vos ombres pour qu’elles respectent la même direction.
• Si, comme dans mon exemple, vous souhaitez donner l’impression qu’un objet s’approche et s’éloigne d’un plan imaginaire, appliquez ces règles :
  • proche du sol : ombre plus opaque, plus courte et plus nette
  • loin du sol : ombre plus transparent, plus longue et plus floue

Affichez plus de texte au survol

Dans certains cas, vous pouvez être amenés à ne vouloir afficher qu’une brève partie d’un texte. Pour rendre visible la suite de ce texte, il est possible d’utiliser Javascript avec une interaction au clic, ou plus simplement un effet de survol en CSS.

Le principe

On attribue à un module Texte une hauteur fixe, volontairement inférieure à la densité de texte présente. En complément, on modifie l’overflow de manière à ce qu’aucune barre de scroll n’apparaisse.
Enfin, on ajoute un bloc avec un fond en dégradé par-dessus pour donner un effet de fondu sur la partie basse du texte.
Au survol, le module Texte retrouvera sa taille normale et le dégradé disparaitra.

Le code CSS

Pour réaliser cet exemple, il vous faut ajouter quelques règles CSS personnalisées dans les paramètres du module Texte.

Tout d’abord pour l’élément principal, état par défaut

height: 200px;
overflow: hidden;
transition: all .3s;
cursor: s-resize;

Remarquez ligne 3 que j’ai ajouté un petite transition pour rendre l’effet plus fluide.
Et ligne 4, j’ai changé le curseur pour un pointeur “flèche vers le bas”, ceci dans un souci d’ergonomie.

Toujours pour l’élément principal, mais cette fois au survol

height: 100%;

On rétablit juste la hauteur du module Texte sur 100%.

Ensuite pour le “après” (:after), état par défaut

Il s’agit ici du dégradé qui vient masquer la partie inférieure du texte.

content:"";
position: absolute;
bottom: 0;
display: block;
width: 100%;
height: 70%;
background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(211,227,237,1) 90%);

Pour créer facilement votre dégradé, vous pouvez utiliser un générateur en ligne tel que celui de CSSgradient.io par exemple.

Enfin, pour le “après” (:after), état au survol

display: none;

Au survol, on masque tout simplement le bloc contenant le dégradé.

Créez une galerie d’images en perspective

Pour présenter ses photos, il peut parfois être compliqué de trouver une idée qui se démarque des autres. Je vous propose donc un principe de galerie en perspective avec les images qui se soulèvent au survol.

Le principe

À partir d’un module Galerie de Divi, on applique une transformation de manière à le “plaquer au sol”.
Lorsque le pointeur de la souris survole une image, celle-ci entre en lévitation au-dessus de ses voisines.

En détails

Le module Ligne

Passez votre ligne en pleine largeur et réduisez la largeur de la gouttière (espace entre les colonnes) au minimum, de manière à ce que les images de la galerie se touchent.

Le module Galerie

Paramètres généraux de la galerie

Tout d’abord, sélectionnez un modèle de galerie en grille et masquez la pagination, les titres et les légendes des images.

Ensuite, appliquez au module les transformations suivantes :

• Rotation :
  • z = 25 deg
  • x = 50 deg
  • y = 355 deg
• Inclinaison :
  • x = -20 deg
  • y = 0 deg

Paramètres des images

Dans les paramètres du module Galerie -> Style -> Image, ajoutez une bordure de 5px à droite et en bas pour donner une impression d’épaisseur à vos images.
Ne forcez pas trop cette valeur, car si elle trop élevée l’angle partira en biseau et ça faussera la perspective.
Appliquez une couleur à peine plus foncée sur la bordure du bas. Même conseil que pour les ombres, utilisez une couleur similaire à la couleur du fond de la page.

Vous pouvez également ajouter des effets sur les images.
Dans mon exemple, j’ai paramétré l’état par défaut en réduisant la saturation et l’opacité et en précisant un très léger flou.
Pour l’état au survol, rétablissez les valeurs à 100% (et 0px pour le flou).

Ainsi, en passant votre curseur sur chaque image, vous aurez l’impression que celle-ci sera plus nette et plus visible.

Maintenant, je vais vous expliquer comment ajouter une ombre portée par image et faire que les images “se soulèvent” au survol.

Toujours dans les paramètres du module Galerie -> Avancé -> Personnaliser CSS -> Élément de la galerie, ajoutez les styles CSS suivants pour l’état par défaut :

box-shadow: 10px 10px 30px rgba(11,184,198,0.3);
transition: all .3s;

Il s’agit donc de l’ombre portée (courte pour l’état par défaut car l’image est “près du sol”) et d’un effet de transition pour fluidifier le passage d’un état à l’autre (n’oubliez pas de préfixer !).

Ensuite, pour l’état au survol, ajoutez les lignes suivantes :

box-shadow: 40px 40px 60px rgba(11,184,198,0.2);
transition: all .3s;
transform: scale(1.05) translate3d(-10px, -45px, 0);
z-index: 1;

On trouve ici :

• notre ombre portée, mais plus large et plus diffuse
• notre transition
• l’effet de transformation que, dans ce cas de figure, nous devons configurer en CSS (l’option “Box Shadow” du Divi Builder s’appliquant à tout le module) :
  • scale : on agrandi légèrement l’image au survol
  • translate3d : c’est un raccourci qui permet de préciser avec un minimum de code les valeurs de translation sur les axes x, y et z
• un z-index à peine plus élevé que la normale afin que l’image survolée passe bien au-dessus de ses voisines

Un dernier détail

En fonction de la position et la largeur de votre module Galerie, si celui-ci dépasse de la page comme sur mon exemple, cela générera une barre de scroll horizontale. Ce qui n’est évidemment pas souhaitable…
Pour corriger cela, il vous suffit d’ajouter les 2 lignes de CSS suivantes dans les CSS personnalisées de la page :

#page-container {
	overflow-y: hidden;
}

Vous l’aurez compris, ceci permet d’interdir le défilement horizontal sur le conteneur principal de la page, si les éléments qu’il contient sont plus larges que lui.

Passez des modules en perspective

Ici aussi, je vous propose de jouer avec les effets de perspective sur des modules Résumé.
Vous allez voir que nous allons ajouter quelques petits détails supplémentaires pour aller un peu plus loin que ce que propose nativement Divi.

Le principe

Un module Résumé est placé dans chacune des colonnes d’une ligne à 3 colonnes.
Les modules des extrémités convergent vers un point de fuite central. Au survol, ils se tournent face à l’utilisateur afin que leur contenu soit facilement lisible.
Le module central, lui, se rapproche lors du survol, également dans un souci de lisibilité.
En complément, chaque module se voit attribuer une ombre portée détachée qui donne une impression de lévitation.
Enfin, au survol de l’un des modules, les 2 autres modules deviennent flous.

En détails

Insérez tout d’abord une ligne de 3 colonnes et placez dans chaque colonne un module Résumé. Bien sûr, selon vos besoins vous pouvez utiliser des modules Texte ou Image, etc.

Les transformations

Sur le module de gauche, appliquez une rotation 55 deg sur y pour l’état par défaut.
Pour l’état au survol, précisez 0 deg pour ce même champ.
Même chose pour le module de droite, mais avec une rotation de -55 deg par défaut et donc 0 deg au survol.

Avec ces réglages, vous obtenez le résultat ci-dessous :

C’est à ce moment que nous constatons les limites de l’option de transformations de Divi… Elegant Themes n’a pas inclus une propriété CSS très importante : perspective (tout savoir sur cette propriété).

Qu’à cela ne tienne, nous allons nous en charger nous-même en ajoutant une petite ligne de CSS dans les paramètres de Ligne -> Avancé -> Personnaliser CSS -> Colonne 1 Élément principal.
De même pour Colonne 2 Élément principal et Colonne 3 Élément principal.

perspective: 1000px;

Avec la propriété perspective, nous définissons un point de fuite, ce qui permet de donner une véritable notion d’espace en 3 dimensions.

Notez que plus la valeur de perspective est élevée, plus le point de fuite est éloigné. Et plus cette valeur est faible, plus le point de fuite sera proche et donc l’effet de perspective très marqué.

Vous obtenez désormais le résultat suivant :

Comme je l’ai symbolisé avec les tracés en pointillés, le module central apparait très en avant dans la perspective.
Nous conserverons donc cette position pour l’effet au survol, mais pour l’état par défaut nous allons éloigner le module sur l’axe z.

Pour ce faire, rendez-vous dans les paramètres du module Résumé central, dans Avancé -> Personnaliser CSS -> Élément principal et collez le code ci-dessous pour l’état par défaut :

transform: translateZ(-120px);
transition: all .3s;

En plus de la translation sur z, j’ajoute une transition, une fois encore afin de fluidifier le passage d’un état à l’autre.

Ensuite, réinitialisez la position du module lors du survol avec le code suivant :

transform: translateZ(0);
transition: all .3s;

L’ombre au sol

Les ombres détachées qui se trouvent sous les modules donnent une impression de lévitation en définissant la position de l’objet par rapport au sol.
Plus l’ombre est éloignée de l’objet, plus celui-ci parait flotter en hauteur.

Pour réaliser ce type d’ombre, il n’est pas possible d’utiliser l’option “Box Shadow” du Divi Builder.
L’idée est d’ajouter un élément :after à chaque module, de le remplir d’une couleur, puis de le flouter pour créer une ombre de toutes pièces.

Pour chaque module Résumé, dans Avancé -> ID et Classe CSS -> Classe CSS, ajoutez la classe ombre_au_sol.
Ensuite, dans le fichier CSS de votre thème enfant ou dans les CSS personnalisées du thème ou de la page, ajoutez le code suivant :

.ombre_au_sol:after {
	display: block;
	content: "";
	position: absolute;
	left:0;
	margin: 50px auto;
	width: 100%;
	height: 40px;
	background-color: rgba(11,184,198,0.4);
	filter: blur(10px);
	border-radius: 50%;
}

Ces CSS signifient que nous ajoutons un élément après son parent et qu’il est de type block, sans contenu.
Il est placé en position absolue, calé à gauche, mais à 50 px sous son parent.
Il mesure 100% de la largeur disponible et 40 px de haut.
Il a un fond de couleur gris bleu un peu transparent, avec un flou de 10 px et un arrondi de 50%, ce qui le rend plutôt ovale.

Le flou des éléments frères

Il s’agit ici d’un effet extrêmement intéressant, car ce n’est pas l’objet survolé qui réagit mais ses éléments frères.
Ceci permet de mettre en valeur un élément en modifiant conséquemment les éléments du même type.

Pour mettre en place cet effet, attribuez l’ID CSS ligne_avec_blurbs à la ligne contenant vos modules Résumé (Paramètres de la ligne -> Avancé -> ID et classes CSS -> ID CSS).

Puis, dans le fichier CSS de votre thème enfant ou dans les CSS personnalisées du thème ou de la page, ajoutez les 2 lignes suivantes :

#ligne_avec_blurbs:hover .et_pb_blurb:not(:hover) {
	filter: blur(5px);
}

Cet effet tient dans un simple tour de passe-passe de ciblage CSS.
Toute la magie se situe dans la première ligne avec l’utilisation de :hover et :not(:hover).
En clair, comprenez : au survol de la ligne, on style les modules Résumé qui s’y trouvent, mais seulement s’ils ne sont pas survolés.

Notez que cet effet peut être utilisé dans plein de cas de figure.
Voici quelques idées :

• pour une barre de navigation : au survol d’un élément du menu, les autres items du menu s’estompent
• pour une galerie photos : au survol d’une photo, les autres images passent en noir et blanc
• pour un formulaire : au survol ou au focus d’un champ, les autres champs s’estompent

Affichez un élément en slide-in

Un slide-in, littéralement, est un élément qui “glisse” pour rentrer dans la page.
Il peut être utilisé pour afficher des informations diverses : formulaire de contact, coordonnées, boutons de partage, présentation d’une personne…

Le principe

Généralement, ce type d’effet nécessite du Javascript afin que lorsque l’utilisateur clique sur le bouton, l’élément qui est masqué s’affiche.
Vous allez voir qu’il est possible d’obtenir le même résultat avec seulement les effets de survol. C’est un peu moins ergonomique, car si le curseur de la souris ne survole plus l’élément, celui-ci se masquera à nouveau. Mais cette méthode à l’avantage d’être très simple à mettre en place avec les paramètres du Divi Builder et quelques lignes de CSS.

Il suffit d’ajouter un ligne d’une seule colonne, dans laquelle on insère par exemple un module Formulaire ainsi qu’un module Bouton.
Nous allons ensuite positionner la ligne pour la faire sortir de la page (elle devient un élément off-canvas) et placer le bouton visible en limite de page.

En détails

Commencez par insérer une ligne d’une seule colonne dans laquelle vous ajouterez par exemple un module Formulaire (ou un autre module de votre choix) et un module Bouton.

Paramétrez la ligne

Onglet Contenu

Dans les paramètres de la ligne, dans Contenu -> Fond, attribuez un fond de couleur à votre ligne.
Puis rendez-vous dans l’onglet Style pour la suite des réglages.

Onglet Style

Dans Alignement, sélectionnez l’alignement à gauche.

Dans Dimensionnement, utilisez la largeur personnalisée, en pixels et précisez comme valeur : 450px.

Dans Espacement, passez la marge interne haut et bas de la ligne à 0 et celle de la colonne à 30px pour chaque côté.

Et pour terminer avec l’onglet Style, ajoutez une ombre portée qui sera uniquement visible au survol de la ligne ; ceci afin qu’elle ne dépasse pas sur la page alors que le reste de la ligne est masqué.
Vous pouvez effectuer les réglages comme sur la capture d’écran ci-dessus.
Pour l’état par défaut, il vous suffit juste de sélectionner aucune couleur pour Shadow Color.

Onglet Avancé

Allez maintenant dans l’onglet Avancé -> Personnaliser CSS -> Élément principal et collez les lignes suivantes pour l’état par défaut :

position: fixed;
left: -450px;
top: 40vh;
transition: all 1s;

Ces règles CSS auront pour but de placer la ligne en position fixe, à 450 px en dehors de la page (soit la largeur de la ligne) et environ à la moitié de la hauteur de l’écran.
Une fois encore, on ajoute une transition, ce qui permettra ici d’obtenir cet effet de glissement.

Toujours dans les CSS de l’élément principal, mais cette fois pour l’état au survol, ajoutez les lignes suivantes :

position: fixed;
left: 0;
top: 40vh;

Au survol, notre ligne conserve sa position fixe à la moitié de la hauteur de l’écran, mais en étant désormais “collée” au bord de la page.

Pour terminer avec les réglages de la ligne, nous allons utiliser l’option de z-index qui a été implémentée dans le Divi Builder en même que les options de transformations.
Dans Visibilité -> z-index, précisez 999 pour l’état par défaut et l’état au survol.
Ceci pour être sûr que votre slide-in s’affiche bien en superposition par-dessus les autres éléments du site.

Paramétrez le bouton

Onglet Style

Faites effectuer au bouton une rotation de 270 deg sur l’axe z.

Sélectionnez le point d’origine de la transformation pour qu’il soit situé en haut à droite. Ceci permet de simplifier son positionnement à l’étape suivante.

Onglet Avancé

Dans Personnaliser CSS -> Élément principal, ajoutez les lignes suivantes afin de placer le bouton en position absolue, en haut à droite de la ligne.

position: absolute;
top:0;
right:0;

Astuce

Si vous souhaitez répliquer facilement un slide-in (ou un autre élément) sur toutes les pages de votre site, vous pouvez le faire très simplement avec mon plugin Divi Visual Footer.
Il vous suffit d’insérer la ligne contenant votre élément dans la section qui vous sert de footer et celui sera présent sur l’ensemble de votre site.

Le mot de la fin

Nous arrivons enfin au terme de ce long article qui regroupe plusieurs tutoriels en un.
Vous en savez maintenant un peu plus sur ce qu’il possible de faire avec les effets de transformations et de survol dans le Divi Builder.
À vous désormais de laisser libre cours à votre créativité.

Gardez néanmoins à l’esprit que les effets de survol ne sont pas vraiment adaptés pour une navigation sur un appareil à écran tactile. Prévoyez donc une alternative si nécessaire.

Si vous recherchez l’inspiration pour d’autres effets au survol, il y a quelques tutoriels intéressants sur le blog d’Elegant Themes.

À l’heure où j’écris ces lignes, il n’y a encore rien de publié sur les effets de transformations, l’option étant très récente. Mais une série de tutoriels sur le sujet a de grandes chances de voir le jour sur le blog d’Elegant Themes.

Partager