Cómo diseñar contadores de barras animados de desplazamiento con Divi

Los contadores de barras se utilizan en toda la web para ilustrar de manera efectiva datos o métricas con una animación de color sutil que representa un cierto valor. Divi tiene un módulo de barra de barras dedicado que se puede usar para generar barras de barra animadas con facilidad. Son adiciones populares a páginas de información, páginas de servicio y estudios de casos.

La mayoría de los mostradores de los bares parecen animarse a medida que aparecen a la vista y pueden ser difíciles de personalizar. Sin embargo, en este tutorial, le mostraremos cómo crear contadores de barras totalmente personalizables (desde cero) que se animan en el desplazamiento usando Divi. Para hacer esto, aprovecharemos las opciones de posición de Divi y los efectos de desplazamiento y los usaremos de formas excepcionalmente precisas.

Empecemos.

Vistazo

Aquí hay un vistazo rápido a los mostradores de barra que vamos a construir en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos en los mostradores de barras con el diseño de efectos de desplazamiento de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

Para importar el diseño a su página, simplemente extraiga el archivo zip e importe el archivo JSON de la biblioteca Divi.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

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

Añadir fila

Para comenzar, agregue una fila de dos columnas a la sección.

Configuración de la sección

Luego abra la configuración de la sección y agregue un color de fondo de la siguiente manera:

• Col0r de fondo: # 000545

Luego, déle a la sección un margen temporal para probar los efectos de desplazamiento y algo de relleno de la siguiente manera:

• Margen: 80vh arriba, 80vh abajo
• Acolchado 10vw superior, 10vw inferior

Ancho de fila

A continuación, abra la configuración de la fila y agregue el siguiente ancho:

• Ancho: 90%
• Ancho máximo: 700px

Desbordamiento de columna

Asegúrese de ocultar el desbordamiento de las dos columnas dentro de la fila. Para hacer esto, abra la configuración de cada una de las columnas y actualice lo siguiente:

• Desbordamiento horizontal: oculto
• Desbordamiento vertical: oculto

Parte 2: Creación de un mostrador de barras con efectos de desplazamiento

El contador de barras constará de tres elementos: un fondo de barra (módulo divisor), una barra de color (también módulo divisor) y el contenido de la barra (módulo de propaganda). El elemento de la barra de color es lo que se animará con las compensaciones del efecto de desplazamiento de movimiento horizontal.

Comencemos con el fondo de la barra.

Crear el fondo de la barra

Agregar módulo divisor

Agregue un nuevo módulo divisor a la columna 1.

Configuración del divisor

Mostrar divisor: NO

• Color de fondo: rgba (255,255,255,0.1)

• Ancho: 300px
• Alto: 70px

Crear barra de barra

Módulo divisor duplicado

Para crear la barra de color para el contador de barras, duplique el módulo divisor anterior que usamos para hacer el fondo de la barra.

Fondo divisor

Luego actualice el fondo con un nuevo color de fondo degradado de la siguiente manera:

• Color de fondo degradado a la izquierda: # fe7e1f
• Color de fondo degradado a la derecha: # ffbc48
• Dirección del gradiente: 90 grados

Posición del divisor

Para hacer que la barra de color se ubique sobre el fondo de la barra, necesitamos darle una posición absoluta con un índice Z de 1:

• Posición: Absoluto
• Índice Z: 1

Efectos de desplazamiento del divisor

Ahora estamos listos para agregar el movimiento a la barra de barra. Para hacer esto usaremos un efecto de desplazamiento horizontal que mueve el módulo divisor de izquierda a derecha. Dado que el desbordamiento de la columna está oculto, no veremos la barra, ya que se extiende más allá del lado izquierdo de la columna. Pero lo veremos aparecer a medida que se mueva hacia la derecha.

Uso de los valores de compensación para determinar los valores porcentuales del contador de barras

Antes de agregar el movimiento horizontal al divisor / barra, debemos entender cómo determinar un valor porcentual que se mostrará en el contador de barras. En otras palabras, si queremos representar el 25% en el contador de barras, necesitamos saber qué desplazamiento de movimiento horizontal moverá la barra hacia la derecha exactamente el 25% del ancho de fondo de la barra.

Podemos hacer algunas matemáticas simples para resolver esto.

El ancho total de la barra es 300px.

Cada valor de desplazamiento horizontal es relativo a 100 px (1 equivale a 100 px, -2 equivale a -200 px, etc.)

Para mover la barra hacia la izquierda (fuera de la vista), necesitamos agregar un desplazamiento inicial de -3 (-300px). Esto lo mueve a la izquierda 300px fuera de la vista.

Luego, debemos mover la barra más del 25% de 300 px (que es 75 px) para completar la animación de desplazamiento.

Para mover la barra más de 75px hacia la derecha cuando la barra alcanza el centro vertical de la página, necesitamos un desplazamiento medio de -2.25 (porque -300 más 75 es igual a -225). Esto probablemente te esté recordando esas líneas numéricas que usamos en la escuela primaria.

Mostrar 25% con movimiento horizontal

Para mostrar el 25% con movimiento horizontal, seleccione la pestaña de movimiento horizontal y actualice lo siguiente:

• Habilitar movimiento horizontal: SÍ
• Desplazamiento inicial: -3
• Desplazamiento medio: -2.25
• Desplazamiento final: -2.25

Crear contenido de barra de barras

Para crear el contenido de la barra, usaremos un módulo de propaganda. Los desenfoques nos permiten agregar fácilmente un ícono alineado a la izquierda junto con un título y el texto del cuerpo que será perfecto para el mostrador de la barra.

Debajo del módulo divisor de barras de colores, agregue un módulo de propaganda.

Contenido publicitario

Luego actualice el contenido de la siguiente manera:

• Título: 25%
• Cuerpo: Optimización
• Icono: ver captura de pantalla

Diseño Blurb

En la pestaña de diseño, actualice lo siguiente:

• Color del icono: #ffffff
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente de icono: SÍ
• Tamaño de fuente del icono: 40px

• Color del texto: claro
• Fuente del cuerpo: Rubik
• Estilo de fuente del cuerpo: TT
• Espaciado de letras corporales: 0.2em
• Altura de la línea del cuerpo: 1em

• Ancho del contenido: 100%
• Ancho: 300px
• Alto: 70px
• Relleno: 15px arriba, 15px a la izquierda

• Posición: Absoluto
• Índice Z: 2

Parte 3: Creación de contadores de barras adicionales

En la siguiente parte, vamos a seguir haciendo más barras de barra utilizando la misma técnica. Crearemos un mostrador de barra al 50%, 75% y 100% para redondear el diseño del diseño. Esto debería darle buenos ejemplos prácticos para hacer más por su cuenta.

Creación de una barra de barras al 50%

Columna duplicada con barra de bar

Una vez que haya creado el primer contador de barras en la columna 1, podemos duplicar la columna completa o copiar y pegar los tres módulos que componen el contador de barras en la columna 2. Ahora debería tener dos columnas cada una con contadores de barras idénticos.

Actualizar la configuración del divisor de barras

Fondo

Dentro de la columna 2, abra la configuración del divisor de barras de colores y actualice los colores de fondo del degradado:

• Color de fondo degradado a la izquierda: # 4c75f8
• Color de fondo degradado a la derecha: # 57a1ff

Efectos de desplazamiento

Luego actualice el efecto de desplazamiento de movimiento horizontal para que ocupe el 50% de la barra en el desplazamiento:

• Desplazamiento medio: -1,5
• Desplazamiento final: -1,5

Actualizar contenido de Blurb

Luego abra la configuración de la propaganda en la columna 2 y actualice el contenido:

• Título: 50%
• Icono: ver captura de pantalla

Creación de una barra de barras al 75%

Duplica la fila

Para poner en marcha el diseño de las dos próximas barras de barras, duplique toda la fila para crear otra fila idéntica debajo de ella.

Actualizar el fondo de la barra y los efectos de desplazamiento

Abra la configuración del módulo divisor de barras de colores y actualice los siguientes colores de fondo:

• Color de fondo degradado a la izquierda: # 4c75f8
• Color de fondo degradado a la derecha: # 57a1ff

Luego actualice las compensaciones de movimiento horizontal de la siguiente manera:

• Desplazamiento medio: -.075
• Desplazamiento final: -0,75

Contenido publicitario

Abra la configuración de propaganda y actualice el contenido de la siguiente manera:

• Título: 75%
• Icono: ver captura de pantalla

Creación de una barra de barras al 100%

Actualizar el color de la barra y los efectos de desplazamiento

Para crear un contador de barras al 100%, vaya a la columna 2 y actualice el color de fondo del módulo divisor de barras de colores de la siguiente manera:

• Color de fondo degradado a la izquierda: # f449b4
• Color de fondo degradado a la derecha: # fc845b

Luego actualice las compensaciones de movimiento horizontal de la siguiente manera:

• Desplazamiento medio: 0
• Desplazamiento final: 0

Actualizar contenido de Blurb

Finalmente, actualice el contenido de la propaganda:

• Título: 100%
• Icono: ver captura de pantalla

Resultado final

Aquí hay una captura de pantalla del resultado final. Agregué una imagen de fondo personalizada de nuestro quinto paquete de creación de temas como toque final.

Ahora qué es el movimiento de desplazamiento en acción.

Pensamientos finales

Con suerte, estos contadores de barras animados de desplazamiento serán útiles para un proyecto futuro. La desventaja de tener un diseño tan personalizado es que tienes que hacer un poco de matemáticas para calcular cuánto mover la barra de color para un cierto porcentaje. Pero la ventaja es que tiene más oportunidades para diseños aún más únicos y creativos.

Si está interesado, consulte nuestra publicación sobre la creación de contadores de círculos personalizados que también se animan en el desplazamiento.

Espero tener noticias tuyas en los comentarios.

¡Salud!