Los contadores de números animados son populares en toda la web como un medio para mostrar datos numéricos para resaltar el valor de los servicios, estudios de casos y más. Divi tiene un módulo de contador de números dedicado que se puede usar para generar contadores de números animados con facilidad.
Sin embargo, en este tutorial, le mostraremos cómo crear contadores de números que se animan al desplazarse usando Divi . Usando las opciones de posición y los efectos de desplazamiento de Divi , diseñaremos un diseño simple para mostrar una fecha con números que se desplazan.
¡Échale un vistazo!
Aquí hay un vistazo rápido a los contadores animados de desplazamiento que diseñaremos en Divi.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
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!
Para importar el diseño a su página, simplemente extraiga el archivo zip y arrastre el archivo JSON a Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Creación de la sección de título
En esta primera parte, vamos a crear un título simple para el diseño.
Primero, agregue una fila de una columna a la sección.
Luego agregue un nuevo módulo de texto a la fila.
Actualice el contenido del módulo de texto con lo siguiente:
|
01
|
<h2>Save The Date<h2> |
Luego actualice el estilo del texto del encabezado de la siguiente manera:
- Encabezado 2 Fuente: Prata
- Título 2 Tamaño del texto: 130 px (escritorio), 70 px (tableta), 40 px (teléfono)
Parte 2: Crear los contadores con animación de desplazamiento
En la siguiente parte, crearemos los tres contadores que animarán los números en el desplazamiento hasta que se detengan para mostrar una fecha (mes, día y año). Cada contador se construirá utilizando un total de 5 módulos de texto y un módulo divisorio. El primer módulo de texto servirá como etiqueta del contador (es decir, mes, día, año). Cada uno de los siguientes cuatro módulos de texto tendrá un número diferente (en progresión) que se animará en el desplazamiento utilizando las compensaciones de movimiento vertical en Divi. El módulo divisor inferior ayudará a ocultar el desbordamiento de los números.
Aquí está cómo hacerlo.
Agregar segunda fila
Debajo de la fila existente, agregue otra fila de una columna.
Configuración de fila
Antes de agregar cualquier módulo, actualice la configuración de la fila de la siguiente manera:
- Ancho del canalón: 1
- Relleno: 0px arriba, 0px abajo
Configuración de columna
Luego abra la configuración de la columna y actualice el relleno de la siguiente manera:
- Relleno (escritorio): 100px inferior
- Relleno (tableta y teléfono): 0px inferior
Agregar módulo de texto
Luego agregue un módulo de texto a la columna.
Contenido/Etiqueta
Para el contenido del módulo de texto, agregue la palabra «Mes».
Configuración de diseño de texto
Una vez que se agrega el contenido, actualice la configuración de diseño de la siguiente manera:
- Color de fondo: #ffffff
- Fuente del texto: Prata
- Texto Tamaño del texto: 40px
- Altura de línea de texto: 2em
- Ancho: 100%
- Relleno: 20 px arriba, 20 px abajo, 20 px a la izquierda, 20 px a la derecha
- Ancho del borde inferior: 5px
- Color del borde inferior: #eeeeee
Posición
Luego, en la pestaña avanzada, actualice las opciones de posición de la siguiente manera:
- Cargo: Relativo
- Índice Z 1
Agregar módulo de texto para el primer número
Una vez que el primer módulo de texto esté en su lugar, podemos comenzar a agregar los números que se moverán en el desplazamiento. Para agregar el primer número, agregue un nuevo módulo de texto debajo del módulo de texto «Mes» existente.
Agregar número/contenido
Luego actualice la etiqueta del módulo de texto para que diga «num1» para una referencia más fácil. Luego actualice el contenido con el número «01».
Configuración de diseño para Número
En la pestaña de diseño, actualice lo siguiente:
- Fuente del texto: Prata
- Texto Color del texto: #8ab2d3
- Texto Tamaño del texto: 70px
- Espaciado entre letras de texto: 4px
- Altura de línea de texto: 1,5 em
- Relleno: 20px a la izquierda
NOTA: Los números tienen un tamaño de texto de 70 px y una altura de línea de 1,5 em, lo que significa que la altura total del módulo de texto estará cerca de los 100 px. Es importante tener esto en cuenta siempre que comencemos a agregar las compensaciones de movimiento vertical. Por ejemplo, agregar un desplazamiento vertical de «1» al módulo de texto moverá el módulo de texto exactamente 100 px, que es la altura del módulo de texto.
Efectos de desplazamiento para el primer número
Agregue los siguientes efectos de desplazamiento al módulo de texto.
En la pestaña Movimiento vertical, actualice lo siguiente:
- Habilitar movimiento vertical: SÍ
- Compensación inicial: 1 (al 10 %)
- Compensación media: 0 (al 20 %)
- Compensación final: -1 (al 30 %)
En la pestaña Fading In and Out, actualice lo siguiente:
- Habilitar fundido de entrada y salida: SÍ
- Opacidad inicial: 0% (al 10%)
- Opacidad media: 100% (al 20%)
- Opacidad final: 0% (al 30%)
Asegúrese de configurar el activador del efecto de movimiento en la parte superior del elemento:
- Disparador de efecto de movimiento: Parte superior del elemento
Crear el módulo de texto para el segundo número
Duplicar primer número
Una vez que se haya creado el primer número, duplíquelo para crear el módulo de texto para el segundo número. Luego actualice la etiqueta en la vista de capas para una mejor referencia.
Actualizar número/contenido
Abra la configuración del módulo de texto del segundo número y actualice el contenido con el número «02».
Actualizar Posición
Luego actualice las opciones de posición de la siguiente manera:
- Posición: Absoluta
- Desplazamiento vertical: 126px
Actualizar efectos de desplazamiento
Luego actualice los efectos de desplazamiento de la siguiente manera:
En la pestaña Movimiento vertical, actualice lo siguiente:
- Compensación inicial: 1 (al 20 %)
- Compensación media: 0 (al 30 %)
- Compensación final: -1 (al 40 %)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 20%)
- Opacidad media: 100% (al 30%)
- Opacidad final: 0% (al 40%)
Crear módulo de texto para el tercer número
Segundo número duplicado
Para crear el módulo de texto para el tercer número, duplique el módulo de texto para el segundo número.
Actualizar número/contenido
Actualiza el contenido con el número “03”.
Actualizar efectos de desplazamiento
Luego actualice los efectos de desplazamiento:
En la pestaña Movimiento vertical, actualice lo siguiente:
- Compensación inicial: 1 (al 30 %)
- Compensación media: 0 (al 40 %)
- Compensación final: -1 (al 50 %)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 30%)
- Opacidad media: 100% (al 40%)
- Opacidad final: 0% (al 50%)
Crear módulo de texto para el cuarto número
Tercer número duplicado
Para crear el cuarto número para el contador de desplazamiento, duplique el módulo de texto para el tercer número.
Actualizar número/contenido
Actualiza el contenido con el número “04”.
Actualizar efectos de desplazamiento
Luego actualice los efectos de desplazamiento:
En la pestaña Movimiento vertical, actualice lo siguiente:
- Compensación inicial: 1 (al 40 %)
- Compensación media: 0 (al 50 %)
- Compensación final: 0 (al 60 %)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 40%)
- Opacidad media: 100% (al 50%)
- Opacidad final: 100% (al 60%)
Agregar divisor inferior
Debajo del último módulo de texto, agregue un nuevo módulo divisor. Esto se usará para ocultar el desbordamiento inferior del texto que se desplazará a la vista.
Luego seleccione NO para mostrar el divisor.
Ajustes de estilo y posición
Actualice el diseño para el divisor de la siguiente manera:
- Color de fondo: #ffffff
- Ancho: 100%
- Altura: 100px
- Ancho del borde superior: 5px
En la pestaña avanzada, actualice lo siguiente:
- Deshabilitar en: teléfono y tableta
- Posición: Absoluta
- Ubicación: abajo a la izquierda
IMPORTANTE: El espacio que ocupará el divisor se creó anteriormente agregando un relleno inferior de 100 px a la columna. Si no agrega ese relleno, el divisor se superpondrá a los números.
Creación de más contadores y columnas
Duplicar la columna 1 y actualizar el contenido
Para crear un nuevo contador, duplique la columna 1. Esto creará una segunda columna con todos los elementos en su lugar automáticamente.
Luego, todo lo que necesita hacer es actualizar el contenido de todos los módulos de texto con texto y números nuevos.
Duplicar la columna 2 y actualizar el contenido
Una vez que se haya actualizado el contenido de todos los módulos de texto en la columna 2, duplique la columna 2 para crear un tercer contador para el año. Luego actualice el contenido de cada módulo de texto según sea necesario.
Resultado final
Aquí esta el resultado final.
Pensamientos finales
Este diseño simple con contadores de números animados de desplazamiento debería ser útil para mostrar datos numéricos de una manera fresca y única. ¡Siéntete libre de abandonar el concepto de fecha y usa los contadores para cualquier cosa que puedas soñar!
Espero escuchar de usted en los comentarios.
¡Salud!