Cómo crear contadores de números animados de desplazamiento con Divi

Abr 16, 2020 | Tutoriales para Divi

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

pestañas de esquina expandibles

Para comenzar, deberá hacer lo siguiente:

  1. Si aún no lo ha hecho, instale y active el Divi Theme .
  2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (visual builder).
  3. 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.

contadores de números animados de desplazamiento divi

Luego agregue un nuevo módulo de texto a la fila.

contadores de números animados de desplazamiento divi

Actualice el contenido del módulo de texto con lo siguiente:

01
<h2>Save The Date<h2>

contadores de números animados de desplazamiento divi

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)

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

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

contadores de números animados de desplazamiento divi

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

contadores de números animados de desplazamiento divi

Agregar módulo de texto

Luego agregue un módulo de texto a la columna.

contadores de números animados de desplazamiento divi

Contenido / Etiqueta

Para el contenido del módulo de texto, agregue la palabra «Mes».

contadores de números animados de desplazamiento divi

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

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

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».

contadores de números animados de desplazamiento divi

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

contadores de números animados de desplazamiento divi

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

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

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».

contadores de números animados de desplazamiento divi

Actualizar posición

Luego actualice las opciones de posición de la siguiente manera:

  • Posición: absoluta
  • Desplazamiento vertical: 126 px

contadores de números animados de desplazamiento divi

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%)

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

Actualizar número / contenido

Actualice el contenido con el número «03».

contadores de números animados de desplazamiento divi

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%)

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

Actualizar número / contenido

Actualice el contenido con el número «04».

contadores de números animados de desplazamiento divi

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%)

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

Luego seleccione NO para mostrar el divisor.

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

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.

contadores de números animados de desplazamiento divi

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

Pin It on Pinterest

Share This