6 microinteracciones que harán que su sitio Divi sea más agradable (y cómo lograrlas)
Empecemos.
6 microinteracciones que harán que su sitio Divi sea más agradable (y cómo lograrlas)
Suscríbete a nuestro canal de Youtube
Implementando el diseño en Divi
1. Animación de iconos de Blurb al pasar el mouse por encima
Divi viene con una biblioteca de íconos que se pueden agregar a su sitio fácilmente con el Módulo Blurb. Esto es útil para agregar una ilustración a esos fragmentos de información importantes, como características o habilidades. Si desea llamar la atención sobre su información, puede animar el ícono sobre su contenido.
Le mostraré dos formas de activar la animación del icono. En este primer ejemplo, la animación del icono se activa al pasar el cursor sobre el icono real. Los tipos de animación que estoy usando son rotar, agitar y escalar.
Primero agregue sus módulos publicitarios. Usando Divi Builder, agregue una sección estándar con un diseño de tres columnas e inserte un módulo de publicidad en la primera columna.
En la configuración del módulo de Blurb, actualice la siguiente configuración:
Ingrese el título
Ingrese la URL (estoy usando # por ahora)
Use el ícono: SÍ
Seleccione un
ícono Color del ícono: #0c71c3
Imagen/Icono Animación: No
Contenido de la animación: [agregue su contenido]
En CSS personalizado, agregue una clase de CSS llamada «rotar». Esto se usará para activar la animación de rotación.
Guardar la salida
Antes de agregar nuestro CSS personalizado, configura las siguientes dos notas publicitarias duplicando la que hiciste anteriormente dos veces y arrastrándolas a las dos columnas vacías.
Haga clic en el icono de la hamburguesa en la segunda publicidad (del medio) para editar la configuración. En la configuración del módulo de Blurb, vaya a la sección CSS personalizado y reemplace la clase CSS «rotar» con la nueva clase «agitar».
Guardar la salida
Repita el mismo proceso para la tercera publicidad en la columna de la derecha y reemplace la clase CSS «rotar» con una nueva clase llamada «escala».
Ahora que sus anuncios publicitarios están en su lugar. Vaya a Divi → Opciones de tema y agregue lo siguiente en el cuadro CSS personalizado:
|
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
35
36
37
38
39
40
41
42
43
44
45
|
.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon { -webkit-transition: all .2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;}.rotate .et-pb-icon:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}.shake .et-pb-icon:hover { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px;}@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); }}.scale .et-pb-icon:hover {-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);} |
Echa un vistazo a tu página y pasa el cursor sobre los iconos para ver el efecto en acción.
La segunda forma de activar la animación del icono es pasar el cursor sobre el área del módulo de publicidad.
Para hacer eso, reemplace el CSS que acaba de agregar con lo siguiente:
|
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
35
36
37
38
39
40
41
42
43
44
45
|
.rotate .et-pb-icon, .scale .et-pb-icon, .shake .et-pb-icon { -webkit-transition: all .2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.5s ease-out;}.rotate:hover .et-pb-icon {-moz-transform: rotate(360deg);-webkit-transform: rotate(360deg);-o-transform: rotate(360deg);transform: rotate(360deg);}.scale:hover .et-pb-icon {-moz-transform: scale(1.2);-webkit-transform: scale(1.2);-o-transform: scale(1.2);transform: scale(1.2);}.shake:hover .et-pb-icon { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; transform: translate3d(0, 0, 0); backface-visibility: hidden; perspective: 1000px;}@keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); }} |
Este efecto es realmente útil cuando se presenta contenido sin un botón. Hacer que el ícono se mueva al pasar el mouse es una microinteracción útil que involucra al usuario para que haga clic en el ícono.
Agregar una animación de pulso en su botón CTA puede ser un captador de atención efectivo. El truco es hacerlo lo suficientemente sutil para que capte la atención del usuario sin convertirse en una distracción.
Primero, agregue una sección estándar con una columna de ancho completo. Luego agregue un módulo de llamada a la acción. En la Configuración del módulo de llamada a la acción, en Configuración general, cambie lo siguiente:
Ingrese el título
Ingrese la URL del botón (estoy usando «#» por ahora)
Ingrese el texto del botón (estoy usando «¡Haz clic en mí!»)
Usar color de fondo: SÍ
Color de fondo: #dddddd
En Configuración avanzada, cambie lo siguiente:
Usar estilos personalizados para el botón: SÍ
Color del texto del botón: #ffffff
Color de fondo del botón: #2ea3f2
Añadir icono de botón: NO
En CSS personalizado, agregue el «pulso» de la clase CSS.
Ahora ve a Divi → Opciones de tema e ingresa el siguiente CSS personalizado para tu efecto de pulso:
.pulse .et_pb_button {
nombre de la animación: pulso;
animación-duración: 5000ms;
transformar-origen: 70% 70%;
animación-iteración-recuento: infinito;
función de temporización de animación: lineal;
}
@keyframes pulso {
0% { transformar: escala (1); }
30% { transformar: escala(1); }
40% { transformar: escala (1.08); }
50% { transformar: escala(1); }
60% { transformar: escala(1); }
70% { transformar: escala (1.05); }
80% { transformar: escala(1); }
100% { transformar: escala(1); }
}
.pulse .et_pb_button:hover {
animación: ninguno;
}
Ahora su botón CTA pulsará dos veces cada 5 segundos.
El siguiente efecto levanta el botón CTA en lugar de hacerlo pulsar. Al pasar el mouse, eleva ligeramente el botón con una sombra debajo para crear la percepción de elevación.
Ahora que ya tenemos una sección de CTA creada, haz un duplicado de toda la sección que acabas de crear para el CTA de pulso.
Haga clic para editar la configuración del módulo de sección de su nueva sección duplicada y cambie el color de fondo a #ffffff.
Guardar la salida
Ahora edite la configuración del módulo de llamada a la acción. En Configuración de diseño avanzada, cambie lo siguiente:
Agregar ícono de botón: SÍ
Elija ícono de botón (una flecha hacia abajo funciona bien para este ejemplo)
Color de ícono de botón: #ffffff
Solo mostrar ícono al pasar el mouse por botón: NO
En CSS personalizado, agregue una clase de CSS llamada «lift» en la pestaña CSS personalizado.
Vaya a Divi → Opciones de tema y agregue el siguiente CSS personalizado:
|
01
02
03
04
05
|
.lift .et_pb_button:hover{box-shadow: 0 25px 55px 0 rgba(0, 0, 0, 0.21), 0 16px 28px 0 rgba(0, 0, 0, 0.22);margin-top: -5px;margin-bottom: 5px !important;} |
Mira los resultados.
Para hacer que el ícono del botón gire al pasar el mouse, regrese a la configuración del módulo de llamada a la acción y agregue el «icono de rotación» de la clase CSS (un espacio después de la clase «levantar») en CSS personalizado.
Luego ve a Divi → Opciones de tema y agrega el siguiente CSS personalizado:
.rotate-icon .et_pb_button:hover:después de {
-webkit-transform: rotar(-90deg);
transformar: rotar (-90 grados);
}
Ve a ver tu botón. Observe que el icono del botón gira 90 grados en el sentido contrario a las agujas del reloj, creando una microinteracción para el usuario que, literalmente, da instrucciones.
#5 Agregar microinteracciones con imágenes
Agregar Microinteracciones con imágenes es como la guinda del pastel. Las imágenes ya son atractivas, y agregar otra dimensión de interacción les brinda esa calidad adicional en la que se puede hacer clic que puede necesitar.
Empecemos. Agregue una sección estándar con un diseño de tres columnas e inserte un módulo de imagen en la primera columna.
Haga clic para editar la configuración del módulo de imagen. En Configuración general, cargue una imagen y cambie la opción «Abrir en Lightbox» a SÍ.
En CSS personalizado, agregue la «inclinación» de la clase CSS.
Guardar la salida
Duplica tu módulo de imagen dos veces y arrástralo a las otras dos columnas en tu fila.
Ahora agregue el CSS personalizado en Divi → Opciones de tema:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
|
.tilt.et_pb_image { -webkit-transition: all .2s ease-out; -moz-transition: all 0.2s ease-out; -ms-transition: all 0.2s ease-out; -o-transition: all 0.2s ease-out; transition: all 0.2s ease-out;border: 1px solid #fff;}.tilt.et_pb_image:hover {-moz-transform: rotate(5deg) scale(1.1);-webkit-transform: rotate(5deg) scale(1.1);-o-transform: rotate(5deg) scale(1.1);transform: rotate(5deg) scale(1.1);box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);border: 1px solid #fff;} |
Ahora ve a ver tu fila de imágenes en tu página.
Al pasar el mouse, las imágenes aumentan su tamaño en un 10 %, rotan 5 grados y salen de la página con el uso de una sombra.
Ahora agreguemos un efecto opuesto. Esta vez, las imágenes comenzarán inclinadas y sombreadas. Luego, al pasar el mouse, las imágenes volverán al estado normal.
Duplica la fila de imágenes que acabas de hacer.
Ahora revise cada una de las tres fotos nuevas en la fila y cambie la clase CSS personalizada de «inclinación» a la nueva clase «recta».
Luego agregue el CSS personalizado en Divi → Opciones de tema:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
dieciséis
17
18
19
20
21
22
|
.straight.et_pb_image {-webkit-transition: all .2s ease-out;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;-moz-transform: rotate(-5deg) scale(0.8);-webkit-transform: rotate(-5deg) scale(0.8);-o-transform: rotate(-5deg) scale(0.8);transform: rotate(-5deg) scale(0.8);box-shadow: 0 3px 10px rgba(0, 0, 0, 0.43), 0 3px 10px rgba(0, 0, 0, 0.36);border: 1px solid #fff;}.straight.et_pb_image:hover {-moz-transform: rotate(0deg) scale(1);-webkit-transform: rotate(0deg) scale(1);-o-transform: rotate(0deg) scale(1);transform: rotate(0deg) scale(1);border: 1px solid #fff;box-shadow: none;} |
<
#6 Animando campos de formulario de contacto
Esta última microinteracción agrega algo de animación a los campos de entrada en el formulario de contacto de Divi. El propósito de esta microinteracción es ayudar al usuario en el proceso de completar información importante. El efecto de desplazamiento y enfoque en los campos de entrada ayuda con la identificación y la seguridad a lo largo del proceso. Y es fácil de implementar.
Primero, agregue un módulo de formulario de contacto a una sección estándar con un diseño de columna de ancho completo. Edite la configuración del módulo de hileras. En Configuración general, configure «Usar ancho personalizado» en SÍ y configure el Ancho personalizado en 600 px.
Guardar la salida
A continuación, edite la configuración del formulario de contacto.
En Configuración general, cambie «Mostrar Captcha» a NO. (opcional)
En CSS personalizado, agregue una clase de CSS llamada «borde izquierdo».
Vaya a Divi → Opciones de tema e ingrese el siguiente CSS personalizado:
|
01
02
03
04
05
06
07
08
09
10
11
12
13
|
.border-left .et_pb_contact p input, .border-left .et_pb_contact p textarea {height: 60px;border-left: 4px solid #ddd;-moz-transition: all 0.2s ease-out;-ms-transition: all 0.2s ease-out;-o-transition: all 0.2s ease-out;transition: all 0.2s ease-out;}.border-left .et_pb_contact p input:hover,.border-left .et_pb_contact p textarea:hover, .border-left .et_pb_contact p input:focus, .border-left .et_pb_contact p textarea:focus {border-left: 8px solid #2ea3f2;font-size: 16px;} |
Eso es todo. Ahora tiene un formulario de contacto simple pero interactivo que agrega un efecto de pestaña de color en combinación con un ligero aumento del tamaño de fuente del campo de entrada tanto al pasar el mouse como al enfocar.
Pensamientos finales
Espero que encuentres útiles estas microinteracciones. Son fáciles de usar con Divi (usando solo CSS) en todo su sitio. Siéntete libre de ajustar el CSS de estos ejemplos para que se ajusten a tus necesidades o crea algo completamente nuevo.
¡Disfrutar!
Como siempre, no dude en publicar sus ideas, comentarios y/o preguntas a continuación.