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 utilizar 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 animen en el desplazamiento 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 de desplazamiento.
Descargar el tutorial GRATIS
Para descargar el fichero JSON de este tutorial, será necesario descargarlo usando el botón de descarga, suscribiendose a nuestra lista de correo electrónico mediante el siguiente formulario. Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se «volverá a suscribir» ni recibirá correos electrónicos adicionales.
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el Divi Theme .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
- Elija la opción «Construir desde cero».
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Parte 1: Crear 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:
- Título 2 Fuente: Prata
- Encabezado 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 descansen 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 divisor. El primer módulo de texto servirá como la etiqueta del contador (es decir, mes, día, año). Los siguientes cuatro módulos de texto tendrán cada uno un número diferente (en progresión) que se animará en el desplazamiento utilizando los desplazamientos de movimiento vertical en Divi. El módulo divisor inferior ayudará a ocultar el desbordamiento de los números.
Aquí te explicamos 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 de canal: 1
- Relleno: 0px arriba, 0px abajo
Configuraciones de columna
Luego abra la configuración de la columna y actualice el relleno de la siguiente manera:
- Relleno (escritorio): fondo de 100 px
- Acolchado (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 de texto: Prata
- Tamaño del texto: 40px
- Altura de la línea de texto: 2em
- Ancho: 100%
- Relleno: 20 px arriba, 20 px abajo, 20 px izquierda, 20 px 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:
- Posición: relativa
- Í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 leer «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 de texto: Prata
- Color del texto del texto: # 8ab2d3
- Tamaño del texto: 70 px
- Espacio entre letras de texto: 4px
- Altura de la línea de texto: 1.5 em
- Acolchado: quedan 20 px
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 será cercana a 100 px. Es importante tener esto en cuenta siempre que comencemos a agregar desplazamientos de movimiento vertical. Por ejemplo, al agregar un desplazamiento vertical de «1» al módulo de texto, el módulo de texto se moverá exactamente 100 píxeles, 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%)
- Desfase medio: 0 (al 20%)
- Compensación de finalización: -1 (al 30%)
En la pestaña Fading In and Out, actualice lo siguiente:
- Habilitar Fading In y Out: YES
- Opacidad inicial: 0% (al 10%)
- Opacidad media: 100% (al 20%)
- Opacidad final: 0% (al 30%)
Asegúrese de establecer el activador del efecto de movimiento en la parte superior del elemento:
- Activador 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 ha 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 para el 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: 126 px
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%)
- Desfase medio: 0 (al 30%)
- Compensación de finalización: -1 (al 40%)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 20%)
- Media opacidad: 100% (al 30%)
- Opacidad final: 0% (al 40%)
Crear módulo de texto para el tercer número
Duplicar segundo número
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
Actualice 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%)
- Desfase medio: 0 (al 40%)
- Compensación de finalización: -1 (al 50%)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 30%)
- Media Opacidad: 100% (al 40%)
- Opacidad final: 0% (al 50%)
Crear módulo de texto para el cuarto número
Duplicar el tercer número
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
Actualice 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%)
- Desfase medio: 0 (al 50%)
- Compensación de finalización: 0 (al 60%)
En la pestaña Fading In and Out, actualice lo siguiente:
- Opacidad inicial: 0% (al 40%)
- Media opacidad: 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.
Configuración de estilo y posición
Actualice el diseño para el divisor de la siguiente manera:
- Color de fondo: #ffffff
- Ancho: 100%
- Altura: 100 px
- Ancho del borde superior: 5px
En la pestaña avanzada, actualice lo siguiente:
- Desactivar en: teléfono y tableta
- Posición: absoluta
- Ubicación: abajo a la izquierda
IMPORTANTE: El espacio que ocupará el divisor se creó anteriormente al agregar un relleno inferior de 100 px a la columna. Si no agrega ese relleno, el divisor se superpondrá a los números.
Crear 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 el contenido de todos los módulos de texto se haya actualizado en la columna 2, duplique la columna 2 para crear un tercer contador para el año. Luego actualice el contenido para cada módulo de texto según sea necesario.
