Cómo crear contadores de círculos que se animan al desplazarse con Divi

Vistazo

Aquí hay un vistazo rápido a los divisores de círculos animados que crearemos en este tutorial.

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.

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:

1. Si aún no lo has hecho, instala y activa el tema Divi .
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
3. Elija la opción «Construir desde cero».

Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.

Crear los contadores de cuatro círculos que se animan en el desplazamiento con Divi

Configuración de la sección y la fila

Primero, agregue una fila de cuatro columnas a la sección predeterminada.

Luego abra la configuración de la sección y agregue algunos márgenes superior e inferior para que tengamos suficiente espacio para probar los efectos de desplazamiento para los contadores circulares que construiremos.

• Margen: 85vh arriba, 85vh abajo

A continuación, abra la configuración de la fila y actualice lo siguiente:

• Ancho del canalón: 1
• Ancho: 100%
• Ancho máximo: 1200px

Uso de la vista de capas

Antes de comenzar a crear los contadores de círculos animados, asegúrese de implementar la función Capas de Divi. Puede hacerlo haciendo clic en el icono de capas grises en el menú de configuración inferior.

Debido a que vamos a crear muchos elementos (o capas) superpuestos, el cuadro de capas definitivamente será útil para administrar nuestras capas en el futuro.

Creación de un contador circular animado n.° 1 (25 %)

Este primer contador de círculo animado animará hasta el 25% del círculo en el desplazamiento y tendrá el porcentaje de texto correspondiente en el centro que se desvanecerá en el desplazamiento. Para construir el diseño completo del contador circular, usaremos múltiples divisores y módulos de texto en capas uno encima del otro. Aquí está cómo hacerlo.

El círculo trasero

Para crear el círculo trasero vamos a usar un módulo divisor al que le daremos forma de círculo y le daremos un color de fondo.

Agregar módulo divisor

Tire hacia arriba del divisor en la vista de capas y cambie la etiqueta para que diga «retroceso». Luego abra la configuración del módulo divisor y actualice lo siguiente:

• Mostrar divisor: NO
• Color de fondo: #c3e0e5

Actualice la configuración de diseño de la siguiente manera:

• Ancho: 250px
• Altura: 250px
• Margen: 25 px arriba, 25 px abajo, 25 px a la izquierda
• Esquinas redondeadas: 50%

La barra de colores giratoria

La siguiente pieza del contador circular será la barra de color giratoria. Duplique el divisor anterior (círculo posterior) para impulsar el diseño. Luego actualice el nuevo divisor con la etiqueta «colorbar».

Para crear el efecto de barra de color giratoria, debemos convertir este divisor en un semicírculo con el color que queramos usar para la barra.

Abra la configuración de Color Bar Divider y actualice lo siguiente:

• Color de fondo: ninguno
• Fondo degradado Color izquierdo: #121b55
• Fondo degradado Color derecho: rgba(255,255,255,0)
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 0%

En algunos navegadores, hay una pequeña falla superpuesta que muestra un color no deseado a través de las capas. Para evitar esto, haremos este semicírculo un poco más pequeño y ajustaremos el desplazamiento en consecuencia.

• Ancho: 248px
• Altura: 248px

Para hacer que el círculo de la barra de colores se superponga al círculo posterior, asigne al divisor una posición absoluta de la siguiente manera:

• Posición: Absoluta
• Desplazamiento vertical: 26px
• Desplazamiento horizontal: 26px

Luego agregue el siguiente efecto de desplazamiento para rotar la barra circular 90 grados (o el 25% del círculo).

En la pestaña Efectos giratorios…

• Rotación inicial: 0 grados (al 15 % de la ventana gráfica)
• Rotación media: 90 grados (al 20 %-25 % de la ventana gráfica)
• Rotación final: 90 grados (al 30 % de la ventana gráfica)

Los porcentajes de rotación y los valores aquí pueden parecer no tener mucho sentido en este punto. Estamos facilitando la actualización de la rotación más adelante cuando construimos el siguiente contador de círculo que termina en 180 grados (50% del círculo). Lo importante en este punto es que la rotación termine a 90º (o 25%).

El escudo

El siguiente elemento de nuestro contador circular es lo que yo llamo el escudo, que es otro semicírculo que oculta el lado izquierdo del círculo de la barra de colores mientras gira. Para crear el escudo, duplique el primer módulo divisor Back Circle que hicimos anteriormente. Luego arrástrelo debajo del módulo divisor «Barra de color» y actualice la etiqueta a «escudo» para facilitar la referencia.

Abra la configuración del módulo divisor de pantalla y actualice lo siguiente:

• Color de fondo: ninguno
• Fondo degradado Color izquierdo: #c3e0e5 (igual que el círculo posterior)
• Fondo degradado Color derecho: rgba(255,255,255,0)
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 0%

Ahora dale al módulo una posición absoluta de la siguiente manera:

• Posición: Absoluta
• Desplazamiento vertical: 25px
• Desplazamiento horizontal: 25 px

El círculo delantero

La siguiente pieza del contador circular es el círculo frontal, que ocultará la parte media de las capas anteriores y expondrá el borde exterior.

Para crearlo, duplique el divisor del círculo posterior, colóquelo debajo del módulo divisor del escudo y actualice la etiqueta a «círculo frontal».

Abra la configuración del módulo divisor circular frontal y actualice lo siguiente:

• Color de fondo: #ffffff
• Ancho: 200px
• Altura: 200px

Luego agregue la posición absoluta de la siguiente manera:

• Posición: Absoluta
• Desplazamiento vertical: 50 px
• Desplazamiento horizontal: 50 px

El número que se desvanece

La última pieza de este primer contador circular es el número de desvanecimiento que corresponde al valor indicado por la barra giratoria.

Para construirlo, agregue un nuevo módulo de texto debajo del módulo divisor del círculo frontal.

En el cuadro Capas, etiquete el nuevo módulo de texto como «num1». Luego abra la configuración y actualice el texto del cuerpo para que diga «25%».

En la configuración de diseño, actualice lo siguiente:

• Peso de fuente de texto: Negrita
• Texto Tamaño del texto: 25px
• Altura de línea de texto: 2em
• Alineación de texto: centro

• Ancho: 200px
• Altura: 200px
• Esquinas redondeadas: 50%

• Relleno: 75px arriba
• Posición: Absoluta
• Desplazamiento vertical: 50 px
• Desplazamiento horizontal: 50 px

Ahora el texto debería estar perfectamente centrado dentro del contador circular.

Para agregar el efecto de desvanecimiento, actualice los siguientes efectos de desplazamiento:

En la pestaña Aparición y desaparición gradual…

• Habilitar fundido de entrada y salida: SÍ
• Opacidad inicial: 0 % (a una ventana gráfica del 10 %)
• Opacidad media: 100 % (al 20 % de ventana gráfica)
• Opacidad final: 100 % (al 100 % de la ventana gráfica)

Eso es todo para nuestro primer contador. Mira el resultado.

Creación de un contador de círculo animado n.° 2 (50 %)

Nuestro próximo contador de círculo animado se animará hasta el 25 % y luego continuará hasta el 50 % a medida que el usuario se desplaza hacia abajo en la página. Para construir esto, necesitaremos actualizar la barra del círculo giratorio para continuar girando hasta 180 grados (o el 50% del círculo). Luego necesitaremos agregar un número adicional para que aparezca gradualmente después de que el anterior desaparezca.

Duplicando Columna 1

Para impulsar nuestro próximo diseño de contador circular, duplique toda la primera columna. Luego elimine una de las columnas en blanco adicionales para que mantengamos un diseño de cuatro columnas.

Actualizar la rotación del círculo de la barra de color

Dentro de la nueva columna (ahora columna 2), abra la configuración del módulo divisor de la barra de colores y actualice el siguiente valor del efecto de desplazamiento:

• Rotación final: 180 grados

Dado que vamos a agregar otro número que se desvanece, necesitaremos desvanecer el módulo de texto actual que contiene el valor 25%. Abra la configuración para el módulo de texto «num1» y actualice el efecto de desplazamiento de aparición y desaparición gradual de la siguiente manera:

• Opacidad inicial: 0 % (a una ventana gráfica del 10 %)
• Opacidad media: 100 % (al 20 %-25 % de la ventana gráfica)
• Opacidad final: 0% (a 27% de ventana gráfica)

Para crear el siguiente número de desvanecimiento, duplique el módulo de texto «num1» y cambie la etiqueta duplicada a «num2».

Luego abra la configuración para el nuevo módulo de texto «num2» y cambie el texto del cuerpo a «50%».

Luego actualice los efectos de desplazamiento Fading In and Out de la siguiente manera:

• Opacidad inicial: 0 % (al 25 % de ventana gráfica)
• Opacidad media: 100 % (al 30 %-35 % de la ventana gráfica)
• Opacidad final: 100 % (al 40 % de ventana gráfica)

Aquí está el resultado de nuestro segundo diseño de contador circular.

Creación de contador de círculo animado #3 (75%)

Columna duplicada 2

Para crear el contador del tercer círculo que se anima al 75 % al desplazarse, duplique la columna 2 y elimine la columna 5 adicional.

Crear un segundo módulo divisor de barra de color

Para continuar animando la barra de color hacia el lado derecho del contador circular, necesitaremos crear otro módulo divisor de semicírculo de «barra de color» que se desvanezca (a 180 grados) una vez que la primera barra de color alcance la rotación de 180 grados. Luego, tendremos que desvanecer simultáneamente el escudo de la izquierda para que podamos ver el progreso de la nueva rotación de la barra de colores.

Para crear la nueva segunda barra de color, duplique el módulo divisor de la barra de color y cambie la etiqueta del duplicado a «colorbar2».

Agregar efecto de desplazamiento de barra de color 2

Luego abra la nueva configuración del divisor «colorbar2» y actualice el efecto de desplazamiento Fade In and Out de la siguiente manera:

• Habilitar fundido de entrada y salida: SÍ
• Opacidad inicial: 0 % (al 33 % de ventana gráfica)
• Opacidad media: 100 % (al 34 % de ventana gráfica)
• Opacidad final: 100 % (al 100 % de la ventana gráfica)

En la pestaña Efecto de rotación…

• Rotación inicial: 180 grados (al 35 % de la ventana gráfica)
• Rotación media: 270 grados (al 40 %-45 % de la ventana gráfica)
• Rotación final: 270 grados (al 50 % de la ventana gráfica)

Esto animará la barra circular de 180 a 270 grados (o el 75 % del círculo).

Agregar número de desvanecimiento #3

Para desvanecer el «75%» para esta siguiente progresión en el contador circular, duplique el módulo de texto «num2» y cambie la etiqueta del duplicado a «num3».

Luego actualice el contenido del nuevo módulo de texto con el texto del cuerpo «75%».

Abra la configuración para el módulo de texto «num3» y actualice el efecto de desplazamiento de aparición y desaparición gradual de la siguiente manera:

• Opacidad inicial: 0 % (al 35 % de ventana gráfica)
• Opacidad media: 100 % (al 40 %-45 % de la ventana gráfica)
• Opacidad final: 100 % (al 50 % de ventana gráfica)

Actualizar el efecto de desplazamiento del segundo número

Para desvanecer el segundo número, abra la configuración del módulo de texto «num2» y actualice el siguiente efecto de desplazamiento de entrada y salida:

• Opacidad final: 0%

Echa un vistazo a nuestras barras circulares animadas ahora.

Creación de contador de círculo animado #4 (100%)

Para nuestro contador de círculo final, duplique la columna 3 y luego elimine la columna vacía adicional.

Abra la configuración del módulo divisor «colorbar2» y actualice el efecto de desplazamiento de rotación de la siguiente manera:

• Rotación final: 360 grados

Luego cree otro módulo de texto duplicando el módulo de texto «num3». Luego cambie la etiqueta del nuevo módulo de texto a «num4».

Antes de actualizar el nuevo número, abra la configuración del módulo de texto «num3» y actualice el efecto de desplazamiento Fading In and Out de la siguiente manera:

• Opacidad final: 0%

Ahora abra el módulo de texto «num4» que acabamos de duplicar y actualice el contenido del cuerpo para que diga «100%».

Luego actualice el efecto de desplazamiento de aparición y desaparición gradual de la siguiente manera:

• Opacidad inicial: 0 % (al 45 % de ventana gráfica)
• Opacidad media: 100 % (al 50 %-55 % de la ventana gráfica)
• Opacidad final: 100 % (al 60 % de ventana gráfica)

Resultado final

Aquí está cómo se acumula en la tableta y el teléfono.

Diviértete explorando nuevos diseños

Con esta configuración básica, puede explorar todas las opciones de diseño de Divi para crear contadores circulares animados únicos con ajustes mínimos. Mire la ilustración a continuación para tener una idea de lo que puede hacer con solo unos pocos ajustes.

Pensamientos finales

La creación de contadores circulares personalizados que se animan en el desplazamiento resalta cuán poderoso se ha vuelto Divi Builder. La función de capas es imprescindible para este tipo de diseño porque simplifica la gestión de múltiples capas superpuestas de módulos Divi. Con suerte, esto le brinda otra herramienta inspiradora para crear algo hermoso y funcional para su próximo proyecto.

Espero escuchar de usted en los comentarios.

¡Salud!