Cómo animar su módulo de llamada a la acción Divi

Nuestro tema característico, Divi, viene con varias opciones de estilo para su biblioteca de módulos nativos. Además de tener un control profundo sobre cómo se verán los elementos de su sitio web, también tiene la opción de agregar movimiento a sus páginas. Divi incluye varios efectos de animación que puedes agregar a tu próximo proyecto de diseño web. En esta publicación, veremos cómo usar las siguientes configuraciones de animación en Divi dentro del módulo de llamado a la acción nativo:

1. Flotar
2. Efectos de desplazamiento
3. Animación y
4. Pegajoso

Para este tutorial, recrearemos una sección dentro del paquete de diseño de agencia de marketing Divi. Trabajaremos con el diseño de la página de destino.

Instalación del diseño de la página de destino

Primero necesitamos crear una nueva página en WordPress para instalar el diseño de página. Hacemos esto colocando el cursor sobre el elemento del menú Páginas en el menú de la izquierda. Luego, hacemos clic en Agregar nuevo .

Una vez dentro del editor predeterminado de WordPress, Gutenberg, establece un título para tu nueva página. A continuación, haga clic en el botón morado Usar Divi Builder .

Luego se le presentarán tres opciones. Pulsaremos en el botón morado del medio, Examinar diseños .

Esto abrirá la amplia biblioteca de diseños de Divi, que viene repleta de páginas prediseñadas para que elijas. Seleccionaremos el paquete de diseño de agencia de marketing .

Desde dentro del paquete de diseño, usaremos el diseño de página de destino. Haga clic en el diseño y luego haga clic en el botón azul Usar este diseño para cargar el diseño en la página recién creada.

Una vez que se haya cargado el diseño, haga clic en el botón verde Guardar en la parte inferior derecha de la pantalla.

¡Ahora comienza el verdadero trabajo! ¡Creemos nuestro primer llamado a la acción!

Agregar nuestro módulo de llamado a la acción

A lo largo de este tutorial, usaremos un módulo de llamado a la acción para reemplazar los módulos de texto y botones utilizados en esta sección.

Para comenzar, primero eliminemos estos módulos. Pase el cursor sobre cada módulo y haga clic en el ícono de la papelera cuando aparezca el menú emergente gris. Queremos dejar el Módulo de Texto que dice Introducción, pero usaremos un Llamado a la Acción para reemplazar los módulos que hemos eliminado.

A continuación, queremos agregar un módulo de llamado a la acción a la fila. Hacemos esto colocando el cursor sobre el Módulo de texto y haciendo clic en el ícono gris más .

Esto luego abrirá la ventana emergente de módulos. Desde allí, hacemos clic en el ícono del Módulo de Llamado a la Acción .

Con el módulo agregado, podemos comenzar a diseñarlo para usarlo dentro de nuestro diseño.

Diseñar nuestro módulo de llamado a la acción

Usaremos la misma copia de los módulos originales para nuestro módulo de llamado a la acción recién agregado. Podemos ingresar este contenido en los campos Título, Botón y Cuerpo del módulo.

Aplicar estilo al texto de llamado a la acción

Ahora, comencemos a diseñar nuestro módulo. Comenzamos haciendo clic en la pestaña Diseño del Módulo de Llamado a la Acción. Primero, queremos establecer la alineación y el color de nuestro texto. Queremos tener nuestro texto alineado al Centro y el color establecido en Claro .

En segundo lugar, queremos empezar a diseñar nuestro texto de título. A continuación, encuentre las configuraciones que usaremos.

Configuración del texto del título:

• Fuente del título: Poppins
• Peso de fuente del título: Negrita
• Tamaño del texto del título: 55 px
• Altura de la línea de título: 1,2 em

Observe cómo se parece al texto que se utilizó anteriormente. Tomaremos nuestra guía de estilo de nuestro paquete de diseño para agencias de marketing Divi.

En tercer lugar, queremos darle estilo a nuestro cuerpo de texto. Usemos la configuración a continuación para obtener el texto del cuerpo de nuestro módulo.

Configuración del texto del cuerpo:

• Fuente del cuerpo: Raleway
• Peso de fuente del cuerpo: Regular
• Tamaño del texto del cuerpo: 16px
• Altura de la línea del cuerpo: 1,8 em

Estilos de botones dentro de nuestro módulo

Finalmente, usaremos las siguientes configuraciones para diseñar el botón del módulo de llamado a la acción.

Configuración de botones:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 14px
• Color del texto del botón: #000000
• Fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Radio del borde del botón: 10px
• Fuente del botón: Poppins
• Peso de fuente del botón: Negrita
• Relleno de botones:
  • Relleno superior e inferior: 20 px
  • Relleno izquierdo y derecho: 30px

Agregar relleno a nuestro módulo

Antes de abandonar la pestaña Diseño, agreguemos algo de relleno al contenido de nuestro módulo de llamado a la acción. Para hacer esto, desplácese hacia abajo hasta la pestaña Espaciado . Luego, ingrese 10% para el relleno izquierdo y derecho .

Cambiando nuestro color de fondo

Para terminar de diseñar nuestro módulo, saldremos de la pestaña Diseño y finalmente finalizaremos en la pestaña Contenido. Hacemos clic en la pestaña Contenido , luego nos desplazamos hacia abajo hasta la pestaña Fondo. Luego, desmarcamos la opción Usar color de fondo para eliminar el color de fondo predeterminado del módulo.

Una vez hecho esto, hacemos clic en la marca de verificación verde para guardar nuestro trabajo y cerrar nuestro Módulo de Llamado a la Acción.

Animando nuestro módulo con efectos de desplazamiento

Comenzaremos a animar nuestro primer módulo de llamado a la acción con una animación sutil al pasar el mouse. Puedes ver el producto final de nuestro trabajo a continuación.

Activar la configuración de desplazamiento

Para comenzar, ingresamos a la Configuración del módulo para nuestro nuevo módulo de llamado a la acción.

Luego, hacemos clic en la pestaña Diseño . Por último, nos desplazamos hacia abajo hasta la pestaña Transformar . Aquí es donde activaremos el efecto de desplazamiento para este módulo. Una vez que estemos en la sección Transformar, pasamos el cursor sobre Transformar para revelar un menú desplegable. Desde el menú, hacemos clic en el icono del Puntero . Este icono significa que podemos establecer configuraciones alternativas dentro de las opciones de Transformación que se activarán al pasar el cursor.

Una de las mejores cosas de Divi es que muchos elementos y opciones en Divi también pueden tener activado el mismo efecto de desplazamiento. En nuestro caso, queremos que el tamaño del módulo aumente un 5% cuando pasamos el cursor sobre él.

En primer lugar, haremos clic en la pestaña flotante . Esto nos mostrará las opciones que podemos utilizar para transformar nuestro módulo. En segundo lugar, pulsaremos sobre el icono de Escala . Queremos aumentar el tamaño total de nuestro módulo. A continuación, ingresamos la cantidad que queremos que aumente nuestro módulo. Queremos que sea un cinco por ciento más grande de lo que es actualmente, por lo que ingresamos 105 % en la opción de tamaño . Para guardar nuestros cambios, luego hacemos clic en nuestro botón de marca de verificación verde .

Uso de efectos de desplazamiento con el módulo de llamada a la acción

Veamos cómo podemos usar los efectos de desplazamiento para agregar una animación sutil a nuestro módulo de llamado a la acción. Esto es lo que lograremos a través de los efectos de desplazamiento nativos de Divi:

Comenzaremos desde nuestro módulo de llamado a la acción recién diseñado. A diferencia de nuestra configuración de Transformación, activaremos nuestros Efectos de desplazamiento en la pestaña Avanzado de nuestro módulo. Entonces, hacemos clic en la pestaña Avanzado , luego nos desplazamos hacia abajo hasta la pestaña Efectos de desplazamiento .

Una vez en la pestaña Efectos de desplazamiento, hay varias configuraciones que debemos tener en cuenta para crear este efecto sutil. Primero, mantendremos la Posición adhesiva como No pegar para este módulo. A continuación, usaremos el efecto de desplazamiento de aparición y desaparición gradual. Pulsamos sobre su icono para activarlo . En tercer lugar, queremos habilitar la configuración activando la palanca Habilitar aparición y desaparición gradual .

Una parte importante de este estilo de animación son las figuras utilizadas para la opacidad inicial, media y final. Estas configuraciones se activan cuando el módulo ingresa a las distintas secciones de la ventana gráfica de la pantalla. Para nuestro ejemplo, usaremos la siguiente configuración:

Configuración de aparición y desaparición gradual:

• Opacidad inicial: 10%
• Opacidad media: 99%
• Opacidad final: 20%

Para el activador del efecto de movimiento, queremos que la aparición y desaparición gradual comiencen cuando la mitad del elemento esté enfocada.

Al usar estas configuraciones, podemos crear un efecto de desplazamiento limpio dentro de nuestro módulo de llamado a la acción. A continuación, veamos cómo podemos animar la entrada de otro Módulo de Llamado a la Acción con la pestaña Animación.

Animaciones de entrada y Divi.

Se produce una animación de entrada cuando un módulo ingresa a la ventana gráfica de su pantalla. Si bien Scroll Effects le permite interactuar continuamente con el módulo cada vez que se desplaza por su ventana gráfica, una animación de entrada se activa una vez. Una animación de entrada se puede repetir; sin embargo, ya sea que te desplaces por ella, pases el cursor sobre ella, etc., no se volverá a animar. Así es como creas tu animación de entrada. Nos gustaría utilizar una animación de Zoom una vez que el módulo aparezca a la vista:

Dentro de nuestra ventana de configuración del Módulo de Llamado a la Acción, hacemos clic en la pestaña Diseño y nos desplazamos hacia abajo hasta Animación . Dentro, tenemos varias opciones de animación que podemos usar una vez que este módulo se enfoca. Haga clic en el estilo de animación de zoom. Para la Dirección de la animación, queremos dejarla en Centro (el valor predeterminado) y dejar todas las demás configuraciones predeterminadas.

Uso de efectos adhesivos con el módulo de llamado a la acción

Nuestro ejemplo final nos mostrará cómo utilizar los efectos adhesivos nativos de Divi. Para esto, necesitaremos crear una nueva fila y sección.

Haga clic en el icono azul más para agregar una nueva sección.

Luego, seleccione el diseño de fila de una columna .

Usaremos nuestro módulo de llamado a la acción prediseñado para poder cerrar la ventana Agregar nuevo módulo. Para la sección, comenzaremos ingresando a la configuración y estableciendo un color de fondo. Para hacer esto, haga clic en el ícono de ajustes para llegar a la sección de configuración.

A continuación, desplácese hacia abajo hasta la pestaña Fondo y establezca el color de fondo en #f1ede1 .

Con el fondo en su lugar, ahora necesitamos agregar configuraciones de espaciado para asegurarnos de que nuestro módulo de llamado a la acción adhesivo funcione como se muestra. Entonces, hacemos clic en la pestaña Diseño y luego nos desplazamos hasta la sección Espaciado . Esta parte es fundamental para garantizar que tengamos suficiente espacio para ver que nuestra animación Sticky surta efecto.

Usamos las siguientes configuraciones para modificar el espaciado de nuestra sección:

Configuración de espaciado de secciones:

• Margen superior: 0px
• Relleno superior: 0px
• Fondo acolchado: 300px

Una vez que hayamos ingresado estas configuraciones, podemos guardar nuestro trabajo haciendo clic en la marca de verificación verde. Ahora activaremos el efecto Sticky dentro de la fila de nuestra sección. En primer lugar, entramos en la configuración de la fila pulsando en el icono del engranaje .

Antes de navegar a la pestaña Avanzado, configuremos el color de fondo de la fila. De manera similar a como lo hicimos con la sección, nos desplazamos hacia abajo hasta la pestaña Fondo y configuramos el Color de fondo en #000000 .

Con esto, nuestra fila casi se parece al módulo de llamado a la acción que creamos al comienzo de este tutorial. Sin embargo, usaremos relleno y márgenes para hacer que esta fila se extienda de borde a borde. Esto hará que el efecto Sticky sea visualmente atractivo y menos intrusivo cuando se utilice para los visitantes de su sitio web.

Nos desplazamos ahora a la pestaña Diseño y pulsamos en la pestaña Tamaño . A continuación, configuramos el Ancho y el Ancho máximo en 100% .

Continuando, ahora nos desplazamos hacia abajo hasta la pestaña Espaciado y agregamos valores de relleno superiores e inferiores iguales de 20px . Esto ayuda a crear una apariencia más elegante con nuestro llamado a la acción.

Ahora que tenemos la estética cubierta, podemos pasar a aplicar nuestro efecto de desplazamiento. Nos desplazamos a la pestaña Avanzado , luego hacemos clic en la pestaña Efectos de desplazamiento . Ahora, activamos la Sticky Position seleccionando Stick to Top . Queremos que nuestro llamado a la acción quede alineado en la parte superior de nuestra pantalla, por lo que dejamos el Sticky Top Offset en 0px . La única otra configuración que cambiaremos será el Límite de adherencia inferior, que ahora estableceremos en Sección .

En resumen

Como puede ver, de forma predeterminada, Divi tiene muchas funciones y formas de agregar animación y movimiento a su página. Ya sea que desee agregar movimiento para presentar su página o generar interés en su contenido, Divi le brinda las herramientas para hacerlo. Cubrimos cuatro formas diferentes de animar el módulo de llamado a la acción, pero puedes usar estas mismas configuraciones en la biblioteca de módulos dentro de Divi. También puede aplicar estas configuraciones a secciones, columnas y filas para crear diseños de página vibrantes y únicos para sus usuarios.

¿Cómo estás usando la animación en Divi? ¿Alguna de estas técnicas te interesó? ¡Háganos saber en la sección de comentarios y comencemos una conversación!