6 microinteracciones que harán que su sitio web sea más agradable (tutorial + descarga gratuita)

Las microinteracciones son una excelente manera de mejorar la experiencia del usuario a medida que interactúan con su sitio. Las animaciones ligeras de iconos, botones o imágenes pueden hacer que el usuario actúe de manera divertida e intencional. Hay innumerables micro-interacciones que puede incluir en su sitio, pero una buena regla es mantenerlas “micro”. No quieres exagerar. Hoy le mostraré algunas microinteracciones simples que puede agregar a su sitio web. Divica usando Div Builder y CSS personalizado (sin jQuery). Me centraré en aquellos elementos con los que los usuarios normalmente interactúan: botones, iconos, imágenes.
Vamos a empezar. Él dibuja el ojo es un vistazo rápido a las microinteracciones que construiremos en este tutorial. # 1 Imagen de cambio de tamaño en flotante

Comience a construir MicrinterAction # 1 # 2 icono desplegable

Comience a construir Microtedraction # 2 # 3 Rotación de iconos de propaganda y botón en el flotador



Comience a construir MicrotedRaction # 3 # 4 iconos de botón deslizante para mostrar y ocultar el texto del botón


Comience a construir microtedraction # 4 # 5 Perspectiva de imagen 3D giratoria

Comience a construir microtedraction # 5 # 6 Microinteraction con botones Slusor

Comience a construir Micrinteraction # 6 suscribir a nuestro canal de YouTube lo que necesita para comenzar a comenzar, todo lo que necesita es Div. Seremos nuestros ejemplos desde cero usando el Builder Div en el frente. Descargue los archivos para facilitar el acceso, incluí una descarga en la parte inferior de este artículo para aquellos de ustedes que desean tener un ejemplo de trabajo de estas micro-instancias que se ejecutan en su sitio de una manera rápida y fácil. De esta manera, puede tener un ejemplo de trabajo a medida que sigue con el tutorial. Descargar el cambio de tamaño # 1 de las imágenes en robo se refiere a ajustar el tamaño de un elemento. Entonces, si quisiéramos hacer crecer la imagen en Hover (por ejemplo), todo lo que tenemos que hacer es agregar un fragmento CSS pequeño para escalar nuestra imagen con un cierto porcentaje. Esto nos permite crear una microinteracción pequeña pero efectiva, cuando un usuario pasa sobre una imagen. Permítame mostrarle cómo puede aplicar esto a tres módulos de división populares que usan imágenes: el módulo de imagen, el módulo de la propaganda y el módulo de persona. Continúe y cree una nueva sección con una fila con tres columnas para que podamos agregar cada uno de nuestros ejemplos a cada columna.

Escalando una imagen en el flotador utilizando el módulo de imagen para agregar la microtracción de escala de imagen a una imagen usando el módulo de imagen, primero agregue un módulo de imagen en la primera columna.
Luego agregue una imagen al módulo de su elección.

Luego agregue la siguiente clase CSS en la pestaña avanzada desde la configuración de la imagen: CSS CLASE: SCALE-IMAgine Esto nos permite dirigir este módulo específico al agregar CSS a la configuración de la página. Para agregar CSS necesario para escalar la imagen, abrir la configuración de la página y agregar el siguiente CSS personalizado:/** Esta escala la imagen en el módulo de imagen con la clase CSS “escala-imagen” **/

.
Desbordamiento: oculto;
}
.Scale-Image img {
Transición: todos 0.2s;
}
.Scale-Image: Hover IMG {
Transformar: escala (1.3)
}
Ahora verifique el resultado.
Dimitale la imagen del módulo de la propaganda en el flujo para agregar el mismo efecto a una imagen en un módulo de propaganda, primero agregue un módulo de propaganda a la segunda columna.
Luego agregue una imagen de su elección al módulo de la propaganda.

Luego agregue la siguiente clase CSS al módulo de propaganda. Clase CSS: escala-blurb-imagen

Con esta clase CSS, ahora podemos agregar nuestro CSS personalizado que se refiere a la imagen de la propaganda. Abra la configuración de la página y agregue el siguiente CSS personalizado:

/** Esto escala la imagen en el módulo BL con la clase CSS “escala-blurb-imagen” **/

.Scale-Blurb-Image .et_pb_main_blurb_image {
Desbordamiento: oculto;
}
.Scale-Blurb-Image .et_pb_main_blurb_image img {
Transición: todos 0.2s;
}
.Scale-Blurb-Image .et_pb_main_blurb_image: hover img {
Transformar: escalas (1.3);
}
Aquí está el resultado.
Escalando una imagen del módulo de persona en el rondado para cambiar el tamaño de una imagen del módulo de persona en el flotador, agregue un módulo de persona a la tercera columna y agregue una carga de la imagen a su elección.

Luego agregue la siguiente clase CSS al módulo de persona.

Clase CSS: escala-persona-imagina

Ahora abra la configuración de la página y agregue el siguiente CSS personalizado. /** Esto escala la imagen en el módulo de persona con la clase CSS “escala-persona-image” **/. Escala-persona-image .et_pb_team_member_image {
Desbordamiento: oculto;

}
.Scale-Person-Image IMG {
Transición: todos 0.2s;
}
.Scale-Person-Image IMG: Hover {
Transformar: escalas (1.3);
}
Verifique el resultado de los tres módulos con escala de imagen
# 2 icono desplegable
La siguiente microinteracción agrega una animación salta al icono de rodadura hacia abajo incorporado en el módulo de encabezado de ancho completo. Esta es una forma sutil de informar aún más al visitante que hay más información en la parte inferior de la página. Y puede elegir tener este efecto de rechazo por defecto o mientras viaja.
Aquí le mostramos cómo hacerlo. Primero agregue una nueva sección con un ancho completo con un módulo de encabezado de ancho completo.

Luego actualice lo siguiente: Texto y Orientación del logotipo: Botón de pantalla central Botón ABAJO: DA Icono: [Seleccione el icono en su elección] Luego agregue la siguiente clase CSS: CSS CLASS: Bounce-Scroll-icon Esta clase nos permitirá apuntar al desplazamiento del desplazamiento del desplazamiento icono con CSS para animar el icono de forma predeterminada al cargar la página.

Luego copie el módulo de encabezado de ancho completo y actualice la clase CSS a lo siguiente: Clase CSS: Bounce-Scroll-icon-Hover
Esta clase nos permitirá apuntar al icono de desplazamiento CSS para animar el icono en el lugar de colocación.

Luego abra la configuración de la página y agregue el siguiente CSS personalizado para activar la animación de rechazo para nuestros dos ejemplos …

Posición: Absoluto;

Arriba: -10px;
Izquierda: 0;
Derecha: 0;
}
.Bounce-scroll-icon-hobver .et-pb-icon: hover {
Duración de animación: 2s;
Nombre de animación: Bounce;
Animación -iteración -conteo: infinito;
Animación-Timing-Function: Lineal;
Transición: todos .2s;
}
.Bounce-scroll-icon .et-pb-icon {
Posición: Absoluto;
Arriba: -10px;
Izquierda: 0;
Derecha: 0;
Duración de animación: 2s;
Nombre de animación: Bounce;
Animación -iteración -conteo: infinito;
Animación-Timing-Function: Lineal;
Transición: todos .2s;
}
.Bounce-scroll-icon .et-pb-icon: hover {
Nombre de animación: ninguno;
}
@Keyframes Bounce {
0% {top: -10px;Opacidad: 1;}
50% {arriba: 15px;Opacidad: 0;}
100% {superior: -10px; opacidad: 1;}
}
Verifique el resultado de los dos ejemplos.El ícono del encabezado superior se animará de forma predeterminada, y el icono del encabezado inferior se animará durante el viaje.
# 3 íconos rotativos en flotación
Agregar una ligera rotación a un icono puede ser una microinstrucción efectiva para atraer a los usuarios a hacer clic en un elemento. Dado que los dos módulos de división más populares que tienen íconos incorporados son el botón y el módulo de la propaganda, pensé en mostrarle cómo agregar rotación a esos iconos de desplazamiento. Rotar un icono de botón en Hover Div ya viene con una microinteracción útil para los iconos de botones de forma predeterminada. Cuando pasa el mouse 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, será redirigido a otra página. Pero si desea ser un poco más creativo con él, puede rotar el icono para una microinteracción completamente nueva. Para rotar un icono de botón en el flotador, primero agregue una nueva sección con una fila con una columna. Luego agregue un módulo de botón en una fila. Luego, actualice la configuración del botón de la siguiente manera: use estilos personalizados para el botón: Sí, visite el icono solo en el botón: Sin icono del botón: [Elija el icono para elegir] Luego agregue la siguiente clase CSS: CSS: Rotate-Neton-Pictogram por Tener el icono y la clase. CSS en su lugar, todo lo que tenemos que hacer es agregar la siguiente configuración de CSS personalizada a la configuración de la página:/** Esto gira el botón en el flotador para el botón con la clase CSS “Rotate-Button”*** */

.Rotate-Button-Icon: después de {

Transformación: rotado (-90deg);

}

.Rotate-Button-icon: Hover: After {
Transformación: rotado (0deg);
}
Esto girará el icono en la dirección opuesta a las agujas del reloj con 90 grados inicialmente y luego volverá a 0 grados cuando viaja.
Aquí está el resultado.
Girar un icono del módulo de propaganda para rotar un icono del módulo de propaganda, primero para crear una nueva sección con una fila con tres columnas. Luego agregue un módulo de propaganda a la columna 1 y actualice la siguiente configuración de la propaganda. Use el icono: Sí Icono: [Agregue el icono para elegir] Orientación de texto: CSS Class Center: Rotación-Blurb-iconacum Agregue los siguientes CSS personalizados a la configuración de la página: /** Esto gira un icono de propaganda con la clase CSS “Rotado -BlebRen. “**/
.Rotate-blurb-icon .et-pb-icon {
Transición: 0.2s Fase-Out;

Transformación: rotatez (-90deg);

}

.Rotate-Blurb-icon .et_pb_blurb_content: hover .et-pb-icon {
Transformación: rotatez (0deg);
}
Aquí está el resultado.
Esto también funciona con el ícono colocado a la izquierda del título. Todo lo que tiene que hacer es actualizar la configuración de la propaganda de la siguiente manera: Imagen / Ubicación del icono: Título de la izquierda Altura de línea: 1.7em
Mira el resultado.
# 4 iconos con botón deslizante para mostrar y ocultar el texto del botón
El botón de texto al icono de desplazamiento en esta microinteracción muestra el texto del botón con un icono de forma predeterminada y luego mueva el icono para cubrir el texto al flotador. Aquí le mostramos cómo hacerlo. Agregue una nueva sección con una fila con una columna. Luego agregue un módulo de botón en una fila y actualice la siguiente configuración del botón: Use estilos personalizados: Sí, el color de fondo del color: # 0C71C3 Ancho del botón: 0 PX icono de color: #FFFFF Class CSS: Text-Pictogragra

Ahora agregue la siguiente configuración de CSS personalizada a la configuración de la página: /** Este estilo para cubrir el texto del botón en el flotador cuando el botón tiene clase “Button-TIXT-TO-ICON” /

Body #Page-Container .ET_PB_BUTTON.BUTTON-TEXT-TO-IICON: After {width: 1em;

Transición: ¡todos .3s! IMPORTANTES;

Margen-izquierda: 0;


Border-izquierda: 1px Solid #DDDDD;

Izquierda: Calc (100% – 1em);
}
Body #Page-Container .ET_PB_BUTTON.BUTTON-TEXT-TO-ion: Hover: After {
Border-izquierda: 1px sólido transparente;
Izquierda: Calc (50% – 0.5em);
Transformar: escalas (1.3);
}
Body #Page-Container .ET_PB_BUTTON: Hover: After {
Color: #ffffff;
Margen-izquierda: 0px;
Izquierda: 0;
Ancho: 100%;
Text-Align: Center;
Transformación: escalas (1.5);
}
Ahora verifique el resultado.
El icono del botón de texto también en el flotador, también puede crear el efecto opuesto de mostrar el botón de icono original y luego deslizar el icono para revelar el texto del botón. Para esto, copie el módulo de botón y actualice la siguiente configuración del botón: Botón de texto (predeterminado): # 0C71C3 Color del botón (Hover): #FFFFFFF
Luego reemplace la clase CSS con lo siguiente: Clase CSS: botón de texto del botón
Luego agregue los siguientes CSS personalizados a la configuración de la página: /** Este estilo de estilos para revelar el texto del botón desde el icono en el flotador cuando el botón tiene la clase “Button-Text-to-icon” /
Body #Page-Container .et_pb_button.button-icon-to-text: After {
Ancho: 1em;
Transición: ¡todos .3s! IMPORTANTES;

Margen-izquierda: 0;

Border-izquierda: 1px sólido transparente;

Izquierda: Calc (50% – 0.5em);
Transformar: escalas (1.3);
}
Body #Page-Container .et_pb_button.button-icon-to-text: hover: después {
Border-izquierda: 1px Solid #DDDDD;
Izquierda: Calc (100% – 1em);
Transformación: escalas (1);
}
Ahora verifique el resultado.
# 5 Rotación de la prensa del dolor 3D
Esta microinteracción comienza con una imagen del módulo de imagen de estilo predeterminado con perspectiva 3D y rotación. Luego, para caminar, la imagen recurre a una pantalla de imagen normal. Aquí le mostramos cómo hacerlo. Primero, cree una nueva sección con una fila con tres columnas. Luego agregue un módulo de imagen en la columna 1 y agregue una imagen al módulo de imagen de su elección. Para este efecto, podemos agregar CSS personalizado directamente al módulo. Acceda a la pestaña avanzada y agregue los siguientes CSS personalizados en el elemento principal: Elemento principal CSS (predeterminado): Transformación: Perspectivas (700px) rotadas (45 DEG);
Transición: todos .2s;
Este CSS hace dos cosas a nuestra imagen utilizando la propiedad transformada. En primer lugar, agregue una perspectiva de 700 px, que es la cantidad de distancia entre la imagen y la perspectiva del usuario al visualizar la página. CSS también agrega rotación de imágenes. Rotatey (45 grados) gira la imagen en el eje Y con 45 grados (en sentido horario). Y teniendo la perspectiva en su lugar, la imagen ahora tiene una apariencia de tres dimensiones. Elemento principal CSS (cursor): transformación: perspectivas (700px) rotar (0deg);
Esto elimina la rotación de la imagen en la carrera, para que se vea normal, para que los usuarios puedan verse mejor.

Ahora verifiquemos el resultado.

Hagamos algunos otros ejemplos de esta microinteracción. Continúe y copie el módulo de imagen y péguelo en la columna 2 y la columna 3. En el módulo de imagen duplicada 2, actualice CSS personalizado de la siguiente manera: CSS principal (predeterminado): Transforma: Perspectivas (700px) Rotatex (45deg);

Transición: todos .2s;

Elemento principal CSS (cursor): transformación: perspectivas (700px) rotatex (0deg);
Observe la única diferencia aquí es la letra “x” después de “rotación”. Esto le dice a la imagen que gire en el eje x a 45 grados. Luego, establecemos el valor del grado en 0 en la partida para volver a la normalidad.

En el módulo de imagen duplicada en la columna 3, actualice CSS personalizado de la siguiente manera: CSS principal (predeterminado): transformación: Perspectivas (700px) rotadas (-45deg);
Transición: todos .2s;

Elemento principal CSS (cursor): transformación: perspectivas (700px) rotar (0deg);

Observe que la única diferencia entre este CSS y CSS utilizado en la imagen de la columna 1 es el valor “-45deg”. Esto gira la imagen en el eje y en la dirección opuesta a las agujas del reloj. Aquí está el resultado final de las tres microinteracciones de imagen utilizando perspectiva y rotación.
No olvide agregar más efecto y modelos de desplazamiento con la configuración incorporada del módulo de imagen. Por ejemplo, este sería un lugar maravilloso para agregar el efecto de sombra de la caja. # 6 Microinstrucción con diapositivas de botones
Para esta última microinteracción, crearemos una diapositiva de botón que muestre información adicional (en realidad un botón completamente nuevo) en el rondado. La idea básica es darle a la 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 “Información adicional” que el usuario verá al pasar sobre el botón. Aquí le mostramos cómo crearlo. Este botón cubrirá todo el ancho de la columna vertebral, por lo que funciona mejor si agrega el botón a una fila con una columna que no se extiende demasiado. Para este ejemplo, usaré una sola fila de columna y luego estableceré un ancho máximo en mi turno, para que el botón no se extienda demasiado en los grandes navegadores. Cree una nueva sección con una fila con una columna. Luego agregue un módulo de botón en una fila y actualice la siguiente configuración del botón: Botón de texto: Botón “Descargar”: Centro Use Styings personalizados para el botón: Sí Color del botón: #fffff El color de fondo Color: # 0C71C3 Ancho del botón: 0 PX Raza Raza Raza . Botón: 0 PX icono del botón: consulte el icono de color de captura de pantalla icono del icono: #fffffffff icono icono: icono de pantalla izquierda solo en el cursor: sin margen personalizado: 0 px a continuación
Luego duplique el botón que acaba de crear, para que el duplicado esté apilado justo debajo del botón que acaba de crear. Luego actualice la configuración del botón duplicada de la siguiente manera: Botón de texto: MP3 (3.5 mb) Color de texto del botón: # 0C71C3 Color del botón: #ffffff icon icono: consulte el icono de color de captura de pantalla: # 0C71C3 Antes de continuar con la fila de estilización, necesitamos agregar un CSS CSS un CSS. clase 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, para actualizar la configuración con un ancho personalizado que servirá como el ancho máximo de nuestros botones y una clase CSS 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 CSS Class Columna: Ghestor-Nutton Asegúrese de agregar clase CSS a la columna y no en una fila.

Ahora estamos listos para agregar CSS personalizado. Abra la configuración de la página y agregue el siguiente CSS: /** Este estiliza el botón Slider ** /
.Slider-Button {
Altura: 50px;

Desbordamiento: oculto;

Borde: 2px sólido #0c71c3;

}

.Slider-button .et_pb_button {

Bloqueo de pantalla;

Margen: 0! IMPORTANTE;

}
.Slider-Button: Hover .Top-Button {
margen -top: -48px! importante;
}
Este CSS solo funcionará con el botón al tamaño predeterminado.Esto se debe al hecho de que debemos darle a la columna una altura fija para ocultar el segundo botón hasta que el movimiento.En este momento, la altura de la columna (con la clase “Glisor-Note”) tiene una altura de 50 px.Esto también representa el marco de 2 px dado a la columna.En la salida, el botón superior (con la clase “botón superior” se mueve desde la vista con un margen del -48px (la altura del menos uno de los bordes de 2px). Pero si cambia el tamaño de la fuente o Con el revestimiento de los botones, deberá ajustar la altura de la clase de botones deslizantes con el borde del botón superior en consecuencia. Aquí está el resultado final.
Recuerde que puede estilizar los botones con texto / información e iconos para su propio uso. Es una excelente manera de educar a los usuarios con información adicional en una acción única. Descarga gratuita: Obtenga el archivo de diseño premiado y CSS para este tutorial Si desea comenzar a ver cómo se verán estas microinstricciones en su sitio web, puede descargar el archivo zip a continuación. Después de descargar el archivo zip, ubique el archivo en el disco duro. Se llamará “microinteracción-exame.zip”. Cuando descomprima el archivo, verá dos archivos. El archivo llamado “MicroIntection-Examples.json” es el aspecto de la división. Tendrá que cargarse en la biblioteca de la Divica. Puede hacer esto desde el tablero de WordPress navegando en la biblioteca Divi> Div y luego haciendo clic en el botón Importar en la parte superior de la página. El archivo llamado “Microinteractions.css” contiene CSS personalizado utilizado en el tutorial. Este CSS deberá copiarse en la configuración de la página CSS personalizada o en el personalizador del tema del cuadro CSS CSS. También puede usar la función deslizante de deslizamiento y arreglo para extraer el archivo Microinteracciones.css directamente en la división del constructor una vez que se ha cargado su apariencia. Esto agregará automáticamente CSS a la configuración de su página, asigne archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia. Se ha suscrito correctamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
Pensamientos finales Espero que encuentres útiles estas microinteracciones. Son fáciles de usar con Div (usando solo CSS) en todo su sitio para el tiempo y la simplicidad, utilizamos los estilos básicos de los módulos, pero no dude en ajustar las opciones de diseño según sea necesario para más estilos. Creative. Además, no dude en ajustar CSS para estos ejemplos para que se ajusten a sus necesidades o creen algo completamente nuevo. Espero tener noticias suyas en los comentarios. ¡Suerte!