Las microinteracciones son una excelente manera de mejorar la experiencia del usuario mientras interactúan con su sitio. Ligeras animaciones de íconos, botones o imágenes pueden indicar al usuario que actúe de una manera divertida y útil. Hay innumerables microinteracciones que puede incluir en su sitio, pero una buena regla general es mantenerlas «micro». No querrás exagerar.
Hoy les mostraré algunas microinteracciones simples que pueden agregar a su sitio web Divi usando Divi Builder y Custom CSS (sin jquery). Me concentraré en aquellos elementos con los que los usuarios normalmente interactúan: botones, íconos, imágenes.
Empecemos.
Aquí hay un vistazo rápido a las microinteracciones que construiremos en este tutorial.
#1 Escalar imágenes al pasar el mouse
Empezar a construir microinteracción #1
#2 Ícono de desplazamiento hacia abajo que rebota
Empezar a construir microinteracción #2
Empezar a construir microinteracción #3
Empezar a construir microinteracción #4
#5 Rotación de perspectiva de imagen 3D
Empezar a construir microinteracción #5
Empezar a construir microinteracción #6
Suscríbete a nuestro canal de Youtube
Lo que necesitas para empezar
Para empezar, todo lo que realmente necesitas es Divi. Seremos nuestros ejemplos desde cero utilizando Divi Builder en la parte delantera.
Descargue los archivos para acceder fácilmente
He incluido una descarga al final de este artículo para aquellos de ustedes que quieran tener un ejemplo práctico de estas microinteracciones en ejecución en su sitio web de manera rápida y fácil. De esa manera, puede tener un ejemplo de trabajo a medida que sigue el tutorial.
Descargar
#1 Escalar imágenes al pasar el mouse
Escalar se refiere a ajustar el tamaño de un elemento. Entonces, si quisiéramos agrandar una imagen al pasar el mouse (por ejemplo), todo lo que tenemos que hacer es agregar un pequeño fragmento de CSS para escalar nuestra imagen en un cierto porcentaje. Esto nos permite crear una microinteracción pequeña pero efectiva cuando un usuario pasa el cursor sobre una imagen. Déjame mostrarte cómo puedes aplicar esto a tres módulos Divi populares que usan imágenes: el módulo de imagen, el módulo de publicidad y el módulo de persona.
Continúe y cree una nueva sección con una fila de tres columnas para que podamos agregar cada uno de nuestros ejemplos a cada columna.
Escalar una imagen al pasar el mouse usando el módulo de imagen
Para agregar la microinteracción de imagen de escala a una imagen usando el módulo de imagen, primero agregue un módulo de imagen a la primera columna.
Luego agregue una imagen al módulo de su elección.
A continuación, agregue la siguiente clase de CSS en la pestaña avanzada en la configuración de su imagen:
Clase CSS: escala-imagen
Esto nos permite apuntar a este módulo específico al agregar nuestro CSS personalizado a la configuración de la página. Para agregar el CSS necesario para escalar la imagen, abra la configuración de la página y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
|
/**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)} |
Ahora mira el resultado.
Escalar una imagen de módulo de Blurb al pasar el mouse
Para agregar el mismo efecto a una imagen en un módulo de publicidad, primero agregue un módulo de publicidad a la segunda columna.
Luego agregue una imagen de su elección al módulo de propaganda.
Luego agregue la siguiente clase CSS al módulo de publicidad.
Clase CSS: scale-blurb-image
Con esta clase de CSS en su lugar, ahora podemos agregar nuestro CSS personalizado que apunta a la imagen publicitaria. Abra la configuración de la página y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
|
/**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);} |
Aquí está el resultado.
Escalar una imagen de módulo de persona al pasar el mouse
Para escalar la imagen de un módulo de persona al pasar el mouse, agregue un módulo de persona a la tercera columna y agregue y cargue una imagen de su elección en el módulo.
Luego agregue la siguiente clase CSS al módulo de persona.
Clase CSS: escala-persona-imagen
Ahora abra la configuración de la página y agregue el siguiente CSS personalizado.
|
01
02
03
04
05
06
07
08
09
10
11
|
/**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);} |
Vea el resultado de los tres módulos con la microinteracción de imagen de escala.
#2 Ícono de desplazamiento hacia abajo que rebota
Esta siguiente microinteracción agrega una animación de rebote al icono de desplazamiento hacia abajo integrado en el módulo de encabezado de ancho completo. Esta es una forma sutil de informar al visitante que hay más información más abajo en la página. Y puede optar por tener este efecto de rebote de forma predeterminada o al pasar el mouse.
Aquí está cómo hacerlo.
Primero agregue una nueva sección de ancho completo con un módulo de encabezado de ancho completo.
Luego actualice lo siguiente:
Orientación del texto y el logotipo: Centro
Mostrar botón de desplazamiento hacia abajo: SÍ
Ícono: [seleccione el ícono de su elección]
Luego agregue la siguiente clase CSS:
Clase CSS: icono de desplazamiento de rebote
Esta clase nos permitirá apuntar al icono de desplazamiento con css para animar el icono de forma predeterminada al cargar la página.
Luego, duplique el módulo de encabezado de ancho completo y actualice la Clase CSS a lo siguiente:
Clase CSS: rebote-desplazamiento-icono-hover
Esta clase nos permitirá apuntar al ícono de desplazamiento con css para animar el ícono al pasar el mouse.
Luego abra la configuración de la página y agregue el siguiente CSS personalizado para activar la animación de rebote para nuestros dos ejemplos.
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
.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;}} |
Mira el resultado de los dos ejemplos. El ícono de desplazamiento del encabezado superior se animará de forma predeterminada y el ícono de desplazamiento del encabezado inferior se animará al pasar el mouse.
#3 Iconos giratorios al pasar el mouse
Agregar una ligera rotación a un ícono puede ser una microinteracción efectiva para lograr que los usuarios hagan clic en un elemento. Dado que los dos módulos Divi más populares que tienen íconos incorporados son el módulo de botón y el módulo de publicidad, pensé en mostrarle cómo agregar rotación a esos íconos al pasar el mouse.
Divi ya viene con una microinteracción útil para los iconos de los botones de forma predeterminada. Al pasar el cursor sobre el botón, aparece el icono del botón y se mueve hacia la derecha, lo que indica que al hacer clic en el botón se le redirigirá a otra página. Pero, si desea ser un poco más creativo, puede rotar el ícono para una microinteracción completamente nueva.
Para rotar un ícono de botón al pasar el mouse, primero agregue una nueva sección con una fila de una columna. Luego agregue un módulo de botón a la fila.
Luego actualice la configuración del botón de la siguiente manera:
Usar estilos personalizados para el botón: SÍ
Solo mostrar icono al pasar el mouse para botón: NO
Icono de botón: [elija el icono de su elección]
Luego agregue la siguiente clase CSS:
Clase CSS: rotar-botón-icono
Con nuestro ícono y Clase CSS en su lugar, todo lo que tenemos que hacer es agregar el siguiente CSS personalizado a la configuración de la página:
|
01
02
03
04
05
06
07
08
|
/** 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);} |
Esto rotará el icono en sentido contrario a las agujas del reloj 90 grados inicialmente y luego volverá a 0 grados al pasar el mouse por encima.
Aquí está el resultado.
Rotación de un icono de módulo de Blurb
Para rotar el icono de un módulo de publicidad, primero vamos a crear una nueva sección con una fila de tres columnas. Luego agregue un módulo de publicidad a la columna 1 y actualice la siguiente configuración de publicidad.
Ícono de uso: SÍ
Ícono: [agregar ícono de elección]
Orientación del texto: centro
Clase CSS: rotar-blurb-icon
Ahora agregue el siguiente CSS personalizado a la configuración de la página:
|
01
02
03
04
05
06
07
08
09
10
|
/** 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);} |
Aquí está el resultado.
Esto también funciona con el ícono colocado a la izquierda del título. Todo lo que necesita hacer es actualizar la configuración de publicidad de la siguiente manera:
Ubicación de la imagen/icono:
Altura de la línea de título izquierda: 1,7 em
Mira el resultado.
Esta microinteracción muestra el texto del botón con un ícono de forma predeterminada y luego mueve el ícono para cubrir el texto al pasar el mouse.
Aquí está cómo hacerlo.
Agregue una nueva sección con una fila de una columna. Luego agregue un módulo de botones a la fila y actualice la siguiente configuración de botones:
Usar estilos personalizados para el botón: SÍ
Color de fondo del botón: #0c71c3
Ancho del borde del botón: 0px
Color del icono del botón: #ffffff
Clase CSS: button-text-to-icon
Ahora agregue el siguiente CSS personalizado a la configuración de la página:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
23
24
|
/** 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);} |
Ahora mira el resultado.
También puede crear el efecto opuesto de mostrar el ícono del botón inicialmente y luego deslizar el ícono para revelar el texto del botón. Para hacer esto, duplique el módulo de botones y actualice la siguiente configuración de botones:
Color del texto del botón (predeterminado): #0c71c3
Color del texto del botón (desplazamiento): #ffffff
Luego reemplace la Clase CSS con lo siguiente:
Clase CSS: botón-icono-a-texto
Luego agregue el siguiente CSS personalizado a la configuración de la página:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
/** 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);} |
Ahora mira el resultado.
#5 Rotación de perspectiva de imagen 3D
Esta microinteracción comienza con una imagen de módulo de imagen diseñada con perspectiva de imagen 3D y rotación de forma predeterminada. Luego, al pasar el mouse, la imagen recurre a una visualización normal de la imagen.
Aquí está cómo hacerlo.
Primero, cree una nueva sección con una fila de tres columnas. Luego agregue un módulo de imagen a la columna 1 y agregue una imagen al módulo de imagen de su elección.
Para este efecto, podemos agregar nuestro CSS personalizado directamente al módulo. Vaya a la pestaña avanzada y agregue el siguiente CSS personalizado en el elemento principal:
Elemento principal CSS (predeterminado):
|
01
02
|
transform: perspective(700px) rotateY(45deg);transition: all .2s; |
Este css le está haciendo dos cosas a nuestra imagen usando la propiedad Transform CSS. Primero, agrega una perspectiva de 700px, que es la cantidad de distancia entre la imagen y la perspectiva del usuario cuando ve la página. El CSS también agrega rotación a la imagen. La rotación Y (45 grados) gira la imagen en el eje Y 45 grados (en el sentido de las agujas del reloj). Y con la perspectiva en su lugar, la imagen ahora tiene una apariencia tridimensional.
Elemento principal CSS (desplazamiento):
|
01
|
transform: perspective(700px) rotateY(0deg); |
Esto elimina la rotación de la imagen al pasar el mouse para que se vea normal y los usuarios puedan ver mejor la imagen.
Ahora veamos el resultado.
Hagamos un par de ejemplos más de esta microinteracción. Continúe, copie el módulo de imagen y péguelo en la columna 2 y la columna 3. En el módulo de imagen duplicado en la columna 2, actualice el CSS personalizado de la siguiente manera:
Elemento principal CSS (predeterminado):
|
01
02
|
transform: perspective(700px) rotateX(45deg);transition: all .2s; |
Elemento principal CSS (desplazamiento):
|
01
|
transform: perspective(700px) rotateX(0deg); |
Observe que la única diferencia aquí es la letra «X» después de «rotar». Esto le dice a la imagen que gire sobre el eje x a 45 grados. Luego, establecemos el valor de grado en 0 al pasar el mouse para que vuelva a la normalidad.
Aquí está el resultado.
En el módulo de imagen duplicada en la columna 3, actualice el CSS personalizado de la siguiente manera:
Elemento principal CSS (predeterminado):
|
01
02
|
transform: perspective(700px) rotateY(-45deg);transition: all .2s; |
Elemento principal CSS (desplazamiento):
|
01
|
transform: perspective(700px) rotateY(0deg); |
Observe que la única diferencia entre este CSS y el CSS utilizado en la imagen de la columna 1 es el valor «-45 grados». Esto gira la imagen en el eje Y en sentido contrario a las agujas del reloj.
Aquí está el resultado final de las tres microinteracciones de imágenes usando perspectiva y rotación.
No olvide agregar aún más diseños y efectos flotantes integrados utilizando la configuración integrada del módulo de imagen. Por ejemplo, este sería un gran lugar para agregar también un efecto de sombra de cuadro.
Para esta última microinteracción, vamos a crear un control deslizante de botón que muestra información adicional (en realidad, un botón completamente nuevo) al pasar el mouse por encima. La idea básica es darle a su columna una altura personalizada y luego apilar dos módulos de botones dentro de la columna. El botón superior será lo que el usuario ve de forma predeterminada, pero el segundo botón será el botón con «información adicional» que el usuario verá cuando se desplace sobre el botón.
Aquí se explica cómo crearlo.
Este botón abarcará todo el ancho de la columna de la fila, por lo que funciona mejor si agrega su botón a una fila con una columna que no sea demasiado ancha. Para este ejemplo, usaré una fila de una columna y luego estableceré un ancho máximo en mi fila para que el botón no se ensanche demasiado en navegadores grandes.
Cree una nueva sección con una fila de una columna. Luego agregue un módulo de botones a la fila y actualice la siguiente configuración de botones:
Texto del botón: «Descargar»
Alineación del botón: centro
Usar estilos personalizados para el botón: SÍ
Color del texto del botón: #ffffff
Color de fondo del botón: #0c71c3
Ancho del borde del botón: 0px
Radio del borde del botón: 0px
Icono del botón: ver captura de pantalla
Color del icono del botón: #ffffff
Ubicación del icono del botón:
Solo izquierda Mostrar icono al pasar el mouse sobre el botón: NO
Margen personalizado: 0px inferior
A continuación, duplique el botón que acaba de crear para que el duplicado se apila justo debajo del botón que acaba de crear. Luego actualice la configuración del botón duplicado de la siguiente manera:
Texto del botón: MP3 (3,5 mb)
Color del texto del botón: #0c71c3
Color de fondo del botón: #ffffff
Icono del botón: vea la captura de pantalla
Color del icono del botón: #0c71c3
Antes de continuar con el estilo de nuestra fila, debemos agregar una clase CSS al botón superior. Abra la configuración del botón superior y agregue la siguiente clase CSS:
Clase CSS: botón superior
Ahora que ambos botones están en su lugar, actualicemos la configuración de la fila con un ancho personalizado que servirá como el ancho máximo de nuestros botones y una clase CSS de columna para nuestro CSS personalizado que agregaremos a la configuración de la página. Abra la configuración de la fila y actualice lo siguiente:
Ancho personalizado: 200 px
Columna Clase CSS: botón deslizante
Asegúrese de agregar la clase CSS a la columna y no a la fila.
Ahora estamos listos para agregar el CSS personalizado. Abra la configuración de la página y agregue el siguiente CSS:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
|
/** 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;} |
Este CSS solo funcionará con el botón en el tamaño predeterminado. Esto se debe a que tenemos que darle a la columna una altura fija para ocultar el segundo botón hasta que se desplace. En este momento, la altura de la columna (con la clase «botón deslizante») tiene una altura de 50 px. Esto también explica el borde de 2px dado a la columna. Al pasar el mouse, el botón superior (con la clase «botón superior» se mueve hacia arriba fuera de la vista con un margen superior de -48px (la altura del botón menos uno de los bordes de 2px). Pero, si cambia la fuente- tamaño o relleno de los botones, deberá ajustar la altura de la clase del botón deslizante junto con el margen del botón superior en consecuencia.
Aquí esta el resultado final.
No olvide que puede diseñar los botones con diferente texto/información e íconos para su propio uso. Es una excelente manera de educar a los usuarios con información adicional en un llamado a la acción único.
Descarga GRATUITA: obtenga el diseño prefabricado y el archivo CSS para este tutorial
Si desea comenzar a ver cómo se verán estas microinteracciones en su sitio web, puede descargar el archivo zip a continuación. Una vez que descargue el archivo zip, ubique el archivo en su disco duro. Se llamará “microinteraction-examples.zip”. Cuando descomprima el archivo, verá dos archivos. El archivo llamado «microinteraction-examples.json» es el diseño de Divi. Deberá cargarse en su Biblioteca Divi. Puede hacer esto desde su Panel de WordPress navegando a Biblioteca Divi»>Divi > Biblioteca Divi y luego haciendo clic en el botón de importación en la parte superior de la página. El archivo llamado «microinteractions.css» contiene el CSS personalizado que se usa en el tutorial. Este CSS deberá copiarse en el CSS personalizado de configuración de la página o en el Personalizador de temasCuadro CSS adicional. También puede usar la función de arrastrar y soltar de Divi para arrastrar el archivo microinteractions.css directamente al Divi Builder una vez que se haya cargado su diseño. Esto agregará automáticamente el css a la configuración de su página.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Pensamientos finales
Espero que encuentres útiles estas microinteracciones. Son fáciles de usar con Divi (usando solo CSS) en todo su sitio. Por razones de tiempo y simplicidad, utilicé los estilos básicos predeterminados de los módulos, pero puede ajustar las opciones de diseño según sea necesario para estilos más creativos. Además, no dude en ajustar el CSS de estos ejemplos para que se ajuste a sus necesidades o crear algo completamente nuevo.
Espero escuchar de usted en los comentarios.
¡Salud!