6 microinteractions qui rendront votre site Divi plus agréable (Tutoriel + Téléchargement gratuit)
Publié: 2019-02-14Les microinteractions sont un excellent moyen d'améliorer l'expérience des utilisateurs lorsqu'ils interagissent avec votre site. De légères animations d'icônes, de boutons ou d'images peuvent inciter l'utilisateur à agir de manière amusante et ciblée. Il existe d'innombrables microinteractions que vous pouvez inclure sur votre site, mais une bonne règle de base est de les garder "micro". Vous ne voulez pas en faire trop.
Aujourd'hui, je vais vous montrer quelques micro-interactions simples que vous pouvez ajouter à votre site Web Divi à l'aide du Divi Builder et du CSS personnalisé (pas de jquery). Je vais me concentrer sur les éléments avec lesquels les utilisateurs interagissent normalement – boutons, icônes, images.
Commençons.
Aperçu
Voici un aperçu des microinteractions que nous allons construire dans ce tutoriel.
#1 Mise à l'échelle des images au survol
Commencez à créer une microinteraction #1
#2 Icône de défilement vers le bas
Commencez à créer une microinteraction #2
#3 Rotation des icônes Blurb et Button en survol
Commencez à créer une micro-interaction n° 3
#4 Icônes de bouton coulissant pour afficher et masquer le texte du bouton
Commencez à créer une microinteraction n° 4
#5 Rotation de la perspective de l'image 3D
Commencez à créer une microinteraction #5
#6 Micro-interaction du curseur du bouton
Commencez à créer une microinteraction #6
Abonnez-vous à notre chaîne Youtube
Ce dont vous avez besoin pour commencer
Pour commencer, tout ce dont vous avez vraiment besoin est Divi. Nous serons nos exemples à partir de zéro en utilisant le Divi Builder sur le front-end.
Téléchargez les fichiers pour un accès facile
J'ai inclus un téléchargement au bas de cet article pour ceux d'entre vous qui souhaitent avoir un exemple fonctionnel de ces micro-interactions en cours d'exécution sur votre site Web de manière rapide et facile. De cette façon, vous pouvez avoir un exemple de travail en suivant le didacticiel.
Télécharger
#1 Mise à l'échelle des images au survol
La mise à l'échelle fait référence à l'ajustement de la taille d'un élément. Donc, si nous voulions agrandir une image au survol (par exemple), il nous suffit d'ajouter un petit extrait CSS pour redimensionner notre image d'un certain pourcentage. Cela nous permet de créer une micro-interaction petite mais efficace lorsqu'un utilisateur survole une image. Laissez-moi vous montrer comment vous pouvez appliquer cela à trois modules Divi populaires qui utilisent des images – le module image, le module blurb et le module person.
Allez-y et créez une nouvelle section avec une ligne de trois colonnes afin que nous puissions ajouter chacun de nos exemples à chaque colonne.
Mise à l'échelle d'une image au survol à l'aide du module Image
Pour ajouter la microinteraction d'image de mise à l'échelle à une image à l'aide du module d'image, ajoutez d'abord un module d'image à la première colonne.
Ajoutez ensuite une image au module de votre choix.
Ensuite, ajoutez la classe CSS suivante sous l'onglet avancé dans vos paramètres d'image :
Classe CSS : scale-image
Cela nous permet de cibler ce module spécifique lors de l'ajout de notre CSS personnalisé aux paramètres de la page. Pour ajouter le CSS nécessaire à la mise à l'échelle de l'image, ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant :
/**This scales the image in the image module with the CSS class "scale-image" **/
.scale-image {
overflow:hidden;
}
.scale-image img{
transition: all 0.2s;
}
.scale-image:hover img {
transform: scale(1.3)
}
Vérifiez maintenant le résultat.
Mise à l'échelle d'une image de module Blurb au survol
Pour ajouter le même effet à une image dans un module de présentation, ajoutez d'abord un module de présentation à la deuxième colonne.
Ajoutez ensuite une image de votre choix au module de présentation.
Ajoutez ensuite la classe CSS suivante au module de présentation.
Classe CSS : scale-blurb-image
Avec cette classe CSS en place, nous pouvons maintenant ajouter notre CSS personnalisé qui cible l'image de présentation. Ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant :
/**This scales the image in the bl module with the CSS class "scale-blurb-image" **/
.scale-blurb-image .et_pb_main_blurb_image {
overflow:hidden;
}
.scale-blurb-image .et_pb_main_blurb_image img {
transition: all 0.2s;
}
.scale-blurb-image .et_pb_main_blurb_image:hover img {
transform: scale(1.3);
}
Voici le résultat.
Mise à l'échelle d'une image de module Personne au survol
Pour mettre à l'échelle une image de module de personne au survol, ajoutez un module de personne à la troisième colonne et ajoutez un téléchargement d'une image de votre choix dans le module.
Ajoutez ensuite la classe CSS suivante au module person.
Classe CSS : scale-person-image
Ouvrez maintenant les paramètres de la page et ajoutez le CSS personnalisé suivant.
/**This scales the image in the person module with the CSS class "scale-person-image" **/
.scale-person-image .et_pb_team_member_image {
overflow:hidden;
}
.scale-person-image img {
transition: all 0.2s;
}
.scale-person-image img:hover {
transform: scale(1.3);
}
Découvrez le résultat des trois modules avec la microinteraction d'image de mise à l'échelle.
#2 Icône de défilement vers le bas
Cette prochaine micro-interaction ajoute une animation rebondissante à l'icône de défilement vers le bas intégrée au module d'en-tête pleine largeur. C'est une manière subtile d'informer davantage le visiteur qu'il y a plus d'informations plus bas sur la page. Et vous pouvez choisir d'avoir cet effet de rebond par défaut ou en survol.
Voici comment procéder.
Ajoutez d'abord une nouvelle section pleine largeur avec un module d'en-tête pleine largeur.
Ensuite, mettez à jour les éléments suivants :
Orientation du texte et du logo : Centre
Afficher le bouton de défilement vers le bas : OUI
Icône : [sélectionnez l'icône de votre choix]
Ajoutez ensuite la classe CSS suivante :
Classe CSS : bounce-scroll-icon
Cette classe va nous permettre de cibler l'icône de défilement avec css pour animer l'icône par défaut au chargement de la page.
Ensuite, dupliquez le module d'en-tête pleine largeur et mettez à jour la classe CSS comme suit :
Classe CSS : bounce-scroll-icon-hover
Cette classe va nous permettre de cibler l'icône de défilement avec css pour animer l'icône au survol.
Ensuite, ouvrez les paramètres de la page et ajoutez le CSS personnalisé suivant pour activer l'animation de rebond pour nos deux exemples.
.bounce-scroll-icon-hover .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
}
.bounce-scroll-icon-hover .et-pb-icon:hover {
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon {
position: absolute;
top:-10px;
left:0;
right:0;
animation-duration: 2s;
animation-name: bounce;
animation-iteration-count: infinite;
animation-timing-function: linear;
transition: all .2s;
}
.bounce-scroll-icon .et-pb-icon:hover {
animation-name: none;
}
@keyframes bounce {
0% {top: -10px; opacity: 1;}
50% {top: 15px; opacity:0;}
100% {top: -10px;opacity:1;}
}
Découvrez le résultat des deux exemples. L'icône de défilement d'en-tête supérieur s'animera par défaut et l'icône de défilement d'en-tête inférieur s'animera au survol.
#3 Icônes rotatives au survol
L'ajout d'une légère rotation à une icône peut être une micro-interaction efficace pour inciter les utilisateurs à cliquer sur un élément. Étant donné que les deux modules Divi les plus populaires dotés d'icônes intégrées sont le module de boutons et le module de présentation, j'ai pensé vous montrer comment ajouter une rotation à ces icônes en survol.
Faire pivoter une icône de bouton au survol
Divi est déjà livré avec une micro-interaction utile pour les icônes de bouton par défaut. Lorsque vous survolez le bouton, l'icône du bouton apparaît et se déplace vers la droite indiquant qu'en cliquant sur le bouton, vous serez redirigé vers une autre page. Mais, si vous vouliez être un peu plus créatif avec, vous pouvez faire pivoter l'icône pour une toute nouvelle micro-interaction.
Pour faire pivoter une icône de bouton au survol, ajoutez d'abord une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module de boutons à la ligne.
Mettez ensuite à jour les paramètres des boutons comme suit :
Utiliser des styles personnalisés pour le bouton : OUI
Afficher uniquement l'icône au survol pour le bouton : NON
Icône du bouton : [choisissez l'icône de votre choix]
Ajoutez ensuite la classe CSS suivante :
Classe CSS : rotate-button-icon
Avec notre icône et notre classe CSS en place, tout ce que nous avons à faire est d'ajouter le CSS personnalisé suivant aux paramètres de la page :
/** This rotates the button icon on hover for the button module with the CSS class "rotate-button-icon" **/
.rotate-button-icon:after {
transform: rotate(-90deg);
}
.rotate-button-icon:hover:after {
transform: rotate(0deg);
}
Cela fera pivoter l'icône dans le sens inverse des aiguilles d'une montre de 90 degrés initialement, puis de nouveau à 0 degré en survol.
Voici le résultat.
Faire pivoter une icône de module Blurb
Pour faire pivoter une icône de module de présentation, créons d'abord une nouvelle section avec une ligne à trois colonnes. Ajoutez ensuite un module de présentation à la colonne 1 et mettez à jour les paramètres de présentation suivants.
Utiliser l'icône : OUI
Icône : [ajouter l'icône de votre choix]
Orientation du texte : centre
Classe CSS : rotate-blurb-icon
Ajoutez maintenant le CSS personnalisé suivant aux paramètres de page :
/** This rotates a blurb icon with the css class "rotate-blurb-icon" **/
.rotate-blurb-icon .et-pb-icon {
transition: 0.2s ease-out;
transform: rotateZ(-90deg);
}
.rotate-blurb-icon .et_pb_blurb_content:hover .et-pb-icon {
transform: rotateZ(0deg);
}
Voici le résultat.
Cela fonctionne également avec l'icône placée à gauche du titre. Tout ce que vous avez à faire est de mettre à jour les paramètres du texte de présentation comme suit :
Placement des images/icônes : à gauche
Hauteur de la ligne de titre : 1,7 em
Découvrez le résultat.
#4 Icônes de bouton coulissant pour afficher et masquer le texte du bouton
Texte du bouton vers l'icône au survol
Cette microinteraction affiche le texte du bouton avec une icône par défaut, puis déplace l'icône pour couvrir le texte au survol.
Voici comment procéder.
Ajoutez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module de bouton à la ligne et mettez à jour les paramètres de bouton suivants :
Utiliser des styles personnalisés pour le bouton : OUI
Couleur d'arrière-plan du bouton : #0c71c3
Largeur de la bordure du bouton : 0px
Couleur de l'icône du bouton : #ffffff
Classe CSS : bouton-texte-à-icône
Ajoutez maintenant le CSS personnalisé suivant aux paramètres de page :
/** This styles button to cover button text with icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-text-to-icon:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
}
body #page-container .et_pb_button.button-text-to-icon:hover:after {
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button:hover:after {
color: #ffffff;
margin-left: 0px;
left: 0;
width: 100%;
text-align: center;
transform: scale(1.5);
}
Vérifiez maintenant le résultat.
Icône de bouton en texte au survol
Vous pouvez également créer l'effet inverse en affichant d'abord l'icône du bouton, puis en faisant glisser l'icône pour révéler le texte du bouton. Pour ce faire, dupliquez le module de boutons et mettez à jour les paramètres de bouton suivants :
Couleur du texte du bouton (par défaut) : #0c71c3
Couleur du texte du bouton (survol): #ffffff
Remplacez ensuite la classe CSS par ce qui suit :
Classe CSS : bouton-icône en texte
Ajoutez ensuite le CSS personnalisé suivant aux paramètres de la page :
/** This styles button to reveal button text from icon on hover when button has class "button-text-to-icon" **/
body #page-container .et_pb_button.button-icon-to-text:after {
width: 1em;
transition: all .3s !important;
margin-left: 0;
border-left: 1px solid transparent;
left: calc(50% - 0.5em);
transform: scale(1.3);
}
body #page-container .et_pb_button.button-icon-to-text:hover:after {
border-left: 1px solid #dddddd;
left: calc(100% - 1em);
transform: scale(1);
}
Vérifiez maintenant le résultat.
#5 Rotation de la perspective de l'image 3D
Cette microinteraction commence par une image de module d'image stylisée avec une perspective et une rotation d'image 3D par défaut. Puis au survol, l'image recourt à un affichage normal de l'image.
Voici comment procéder.
Tout d'abord, créez une nouvelle section avec une ligne à trois colonnes. Ajoutez ensuite un module image à la colonne 1 et ajoutez une image au module image de votre choix.
Pour cet effet, nous pouvons ajouter notre CSS personnalisé directement au module. Accédez à l'onglet avancé et ajoutez le CSS personnalisé suivant sous l'élément principal :
Élément principal CSS (par défaut) :
transform: perspective(700px) rotateY(45deg); transition: all .2s;
Ce CSS fait deux choses à notre image en utilisant la propriété Transform CSS. Tout d'abord, il ajoute une perspective de 700px qui correspond à la distance entre l'image et la perspective de l'utilisateur lors de la visualisation de la page. Le CSS ajoute également une rotation à l'image. Le rotateY(45deg) fait pivoter l'image sur l'axe Y de 45 degrés (dans le sens des aiguilles d'une montre). Et avec la perspective en place, l'image a maintenant une apparence tridimensionnelle.
Élément principal CSS (survol):
transform: perspective(700px) rotateY(0deg);
Cela supprime la rotation de l'image au survol afin qu'elle ait l'air normale afin que les utilisateurs puissent mieux voir l'image.
Voyons maintenant le résultat.
Faisons quelques autres exemples de cette microinteraction. Allez-y, copiez le module image et collez-le dans les colonnes 2 et 3. Dans le module image en double dans la colonne 2, mettez à jour le CSS personnalisé comme suit :
Élément principal CSS (par défaut) :
transform: perspective(700px) rotateX(45deg); transition: all .2s;
Élément principal CSS (survol):
transform: perspective(700px) rotateX(0deg);
Notez que la seule différence ici est la lettre "X" après "rotation". Cela indique à l'image de pivoter sur l'axe x à 45 degrés. Ensuite, nous définissons la valeur du degré à 0 en survol pour le ramener à la normale.
Voici le résultat.
Dans le module d'image en double dans la colonne 3, mettez à jour le CSS personnalisé comme suit :
Élément principal CSS (par défaut) :
transform: perspective(700px) rotateY(-45deg); transition: all .2s;
Élément principal CSS (survol):
transform: perspective(700px) rotateY(0deg);
Notez que la seule différence entre ce CSS et le CSS utilisé dans l'image de la colonne 1 est la valeur "-45deg". Cela fait pivoter l'image sur l'axe Y dans le sens inverse des aiguilles d'une montre.
Voici le résultat final des trois microinteractions d'images utilisant la perspective et la rotation.
N'oubliez pas d'ajouter encore plus d'effets de survol et de conceptions intégrées à l'aide du paramètre intégré du module d'image. Par exemple, ce serait également un endroit idéal pour ajouter un effet d'ombre de boîte.
#6 Micro-interaction du curseur du bouton
Pour cette dernière microinteraction, nous allons créer un curseur de bouton qui affiche des informations supplémentaires (en fait un tout nouveau bouton) au survol. L'idée de base est de donner à votre colonne une hauteur personnalisée, puis d'empiler deux modules de boutons à l'intérieur de la colonne. Le bouton du haut sera ce que l'utilisateur verra par défaut, mais le deuxième bouton sera le bouton avec des "informations supplémentaires" que l'utilisateur verra lorsqu'il survolera le bouton.
Voici comment le créer.
Ce bouton s'étendra sur toute la largeur de la colonne de ligne, il fonctionnera donc mieux si vous ajoutez votre bouton à une ligne avec une colonne qui ne devient pas trop large. Pour cet exemple, je vais utiliser une ligne à une colonne, puis définir une largeur maximale sur ma ligne afin que le bouton ne devienne pas trop large sur les grands navigateurs.
Créez une nouvelle section avec une ligne à une colonne. Ajoutez ensuite un module de bouton à la ligne et mettez à jour les paramètres de bouton suivants :
Texte du bouton : « Télécharger »
Alignement des boutons : centre
Utiliser des styles personnalisés pour le bouton : OUI
Couleur du texte du bouton : #ffffff
Couleur d'arrière-plan du bouton : #0c71c3
Largeur de la bordure du bouton : 0px
Rayon de la bordure du bouton : 0px
Icône du bouton : voir capture d'écran
Couleur de l'icône du bouton : #ffffff
Emplacement de l'icône du bouton : à gauche
Afficher uniquement l'icône au survol pour le bouton : NON
Marge personnalisée : 0px en bas
Ensuite, dupliquez le bouton que vous venez de créer afin que le doublon s'empile juste en dessous du bouton que vous venez de créer. Mettez ensuite à jour les paramètres du bouton en double comme suit :
Texte du bouton : MP3 (3,5 mb)
Couleur du texte du bouton : #0c71c3
Couleur d'arrière-plan du bouton : #ffffff
Icône du bouton : voir capture d'écran
Couleur de l'icône du bouton : #0c71c3
Avant de styliser notre ligne, nous devons ajouter une classe CSS au bouton du haut. Ouvrez les paramètres du bouton supérieur et ajoutez la classe CSS suivante :
Classe CSS : bouton du haut
Maintenant que les deux boutons sont en place, mettons à jour les paramètres de ligne avec une largeur personnalisée qui servira de largeur maximale de nos boutons et une classe CSS de colonne pour notre CSS personnalisé que nous ajouterons aux paramètres de page. Ouvrez les paramètres de ligne et mettez à jour les éléments suivants :
Largeur personnalisée : 200px
Classe CSS de la colonne : curseur-bouton
Assurez-vous d'ajouter la classe CSS à la colonne et non à la ligne.
Nous sommes maintenant prêts à ajouter le CSS personnalisé. Ouvrez les paramètres de la page et ajoutez le CSS suivant :
/** This styles the slider button **/
.slider-button {
height: 50px;
overflow:hidden;
border:2px solid #0c71c3;
}
.slider-button .et_pb_button {
display:block;
margin: 0 !important;
}
.slider-button:hover .top-button {
margin-top: -48px !important;
}
Ce CSS ne fonctionnera qu'avec le bouton à la taille par défaut. C'est parce que nous devons donner à la colonne une hauteur fixe afin de masquer le deuxième bouton jusqu'au survol. À l'heure actuelle, la hauteur de la colonne (avec la classe « bouton de curseur ») est de 50 px. Cela explique également la bordure 2px donnée à la colonne. Au survol, le bouton du haut (avec la classe "top-button" est déplacé vers le haut avec une marge supérieure de -48px (la hauteur du bouton moins l'une des bordures de 2px). Mais, si vous changez la police- taille ou le rembourrage des boutons, vous devrez ajuster la hauteur de la classe curseur-bouton ainsi que la marge du bouton supérieur en conséquence.
Voici le résultat final.
N'oubliez pas que vous pouvez styliser les boutons avec différents textes/informations et icônes pour votre propre usage. C'est un excellent moyen d'éduquer les utilisateurs avec des informations supplémentaires dans un appel à l'action unique.
Téléchargement GRATUIT : obtenez la mise en page prédéfinie et le fichier CSS pour ce didacticiel
Si vous souhaitez savoir à quoi ressembleront ces microinteractions sur votre site Web, vous pouvez télécharger le fichier zip ci-dessous. Une fois le fichier zip téléchargé, localisez le fichier sur votre disque dur. Il s'appellera « microinteraction-examples.zip ». Lorsque vous décompressez le fichier, vous verrez deux fichiers. Le fichier nommé « microinteraction-examples.json » est la mise en page Divi. Il devra être téléchargé dans votre bibliothèque Divi. Vous pouvez le faire à partir de votre tableau de bord WordPress en accédant à Divi > Bibliothèque Divi, puis en cliquant sur le bouton importer en haut de la page. Le fichier nommé « microinteractions.css » contient le CSS personnalisé utilisé dans le didacticiel. Ce CSS devra être copié dans le CSS personnalisé des paramètres de page ou dans la zone CSS supplémentaire du personnalisateur de thème. Vous pouvez également utiliser la fonction glisser-déposer de Divi pour faire glisser le fichier microinteractions.css directement dans le Divi Builder une fois votre mise en page chargée. Cela ajoutera automatiquement le css aux paramètres de votre page.
Télécharger gratuitement
Rejoignez la newsletter Divi et nous vous enverrons par e-mail une copie du pack ultime de mise en page de la page de destination Divi, ainsi que des tonnes d'autres ressources, trucs et astuces Divi incroyables et gratuits. Suivez-le et vous serez un maître Divi en un rien de temps. Si vous êtes déjà abonné, saisissez simplement votre adresse e-mail ci-dessous et cliquez sur télécharger pour accéder au pack de mise en page.
Vous vous êtes enregistré avec succès. Veuillez vérifier votre adresse e-mail pour confirmer votre abonnement et accéder aux packs de mise en page Divi hebdomadaires gratuits !
Dernières pensées
J'espère que vous trouverez ces microinteractions utiles. Ils sont simples à utiliser avec Divi (en utilisant uniquement du CSS) sur l'ensemble de votre site. Par souci de temps et de simplicité, j'ai utilisé les styles de base par défaut des modules, mais n'hésitez pas à ajuster les options de conception au besoin pour des styles plus créatifs. N'hésitez pas non plus à ajuster le CSS de ces exemples pour répondre à vos besoins ou proposer quelque chose de complètement nouveau.
J'ai hâte de vous entendre dans les commentaires.
À votre santé!