Los contadores de barras se utilizan en toda la web para ilustrar datos o métricas de manera efectiva con una animación de color sutil que representa un valor determinado. Divi tiene un módulo de contador de barras dedicado que se puede usar para generar contadores de barras animados con facilidad. Son adiciones populares a las páginas Acerca de, las páginas de servicios y los estudios de casos.
La mayoría de los mostradores de barras parecen animarse a medida que aparecen 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 al desplazarse usando Divi . Para hacer esto, aprovecharemos las opciones de posición y los efectos de desplazamiento de Divi y los utilizaremos de formas únicas y precisas.
Empecemos.
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 la barra 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 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 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:
- 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: 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.
Ajustes de sección
Luego abra la configuración de la sección y agregue un color de fondo de la siguiente manera:
- Color de fondo: #000545
Luego dé 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 arriba, 10vw abajo
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 contador de barras con efectos de desplazamiento
El mostrador de la barra constará de tres elementos: un fondo de barra (módulo divisor), una barra de color (también módulo divisor) y contenido de barra (módulo de publicidad). El elemento de la barra de color es lo que se animará con compensaciones de 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
- Altura: 70px
Crear barra de bar
Módulo divisor duplicado
Para crear la barra de color para el mostrador de la barra, duplique el módulo divisor anterior que usamos para hacer el fondo de la barra.
Fondo del divisor
Luego actualice el fondo con un nuevo color de fondo degradado de la siguiente manera:
- Fondo degradado Color izquierdo: #fe7e1f
- Fondo degradado Color derecho: #ffbc48
- Dirección del gradiente: 90 grados
Posición del divisor
Para que la barra de color se asiente sobre el fondo de la barra, debemos darle una posición absoluta con un índice Z de 1:
- Posición: Absoluta
- Índice Z: 1
Efectos de desplazamiento del divisor
Ahora estamos listos para agregar el movimiento a la barra de la barra. Para ello utilizaremos 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 mueve hacia la derecha.
Uso de los valores de compensación para determinar valores porcentuales para el 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 la barra. En otras palabras, si queremos representar el 25 % en el contador de la barra, necesitamos saber qué desplazamiento de movimiento horizontal moverá la barra a la derecha exactamente el 25 % del ancho del fondo de la barra.
Podemos hacer algunas matemáticas simples para resolver esto.
El ancho total de la barra es de 300px.
Cada valor de compensación horizontal es relativo a 100 px (1 es igual a 100 px, -2 es igual a -200 px, etc…)
Para mover la barra hacia la izquierda (fuera de la vista), debemos agregar un desplazamiento inicial de -3 (-300 px). Esto lo mueve hacia la izquierda 300px fuera de la vista.
Luego necesitamos mover la barra más del 25 % de 300 px (que son 75 px) para completar la animación de desplazamiento.
Para mover la barra más de 75 px 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 recuerde las rectas 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Í
- Compensación inicial: -3
- Compensación media: -2.25
- Compensación final: -2.25
Crear contenido de barra de bar
Para crear el contenido de la barra, vamos a utilizar un módulo de publicidad. Los anuncios publicitarios nos permiten agregar fácilmente un icono alineado a la izquierda junto con un título y un cuerpo de texto que será perfecto para el mostrador de la barra.
Debajo del módulo divisor de barras de colores, agregue un módulo de publicidad.
Contenido de Blurb
Luego actualice el contenido de la siguiente manera:
- Título: 25%
- Cuerpo: Optimización
- Icono: ver captura de pantalla
Diseño de publicidad
En la pestaña de diseño, actualice lo siguiente:
- Color del icono: #ffffff
- Colocación de imagen/icono: Izquierda
- Usar tamaño de fuente del icono: SÍ
- Tamaño de fuente del icono: 40px
- Color del texto: Claro
- Fuente del cuerpo: Rubik
- Estilo de fuente del cuerpo: TT
- Espaciado entre letras del cuerpo: 0,2 em
- Altura de la línea del cuerpo: 1em
- Ancho de contenido: 100%
- Ancho: 300px
- Altura: 70px
- Relleno: 15px arriba, 15px a la izquierda
- Posición: Absoluta
- Índice Z: 2
Parte 3: Creación de contadores de barras adicionales
En la siguiente parte, vamos a seguir haciendo más barras de bar usando la misma técnica. Crearemos una barra de 50%, 75% y 100% para redondear el diseño de la maqueta. Esto debería darle buenos ejemplos de trabajo para hacer más por su cuenta.
Creación de un contador 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 barra
Fondo
Dentro de la columna 2, abra la configuración del divisor de barras de colores y actualice los colores de fondo degradados:
- Fondo degradado Color izquierdo: #4c75f8
- Fondo degradado Color derecho: #57a1ff
Efectos de desplazamiento
Luego actualice el efecto de desplazamiento de movimiento horizontal para que llene el 50% de la barra de desplazamiento:
- Desplazamiento medio: -1.5
- Compensación final: -1.5
Actualizar contenido de Blurb
Luego abra la configuración de la publicidad en la columna 2 y actualice el contenido:
- Título: 50%
- Icono: ver captura de pantalla
Creación de un contador de barras al 75 %
Duplicar la fila
Para impulsar el diseño de nuestros próximos dos contadores de barras, duplique la fila completa 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:
- Fondo degradado Color izquierdo: #4c75f8
- Fondo degradado Color derecho: #57a1ff
Luego actualice las compensaciones de movimiento horizontal de la siguiente manera:
- Compensación media: -.075
- Compensación final: -0.75
Contenido de Blurb
Abra la configuración de publicidad y actualice el contenido de la siguiente manera:
- Título: 75%
- Icono: ver captura de pantalla
Creación de una barra de bar 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 coloreado de la siguiente manera:
- Fondo degradado Color izquierdo: #f449b4
- Fondo degradado Color derecho: #fc845b
Luego actualice las compensaciones de movimiento horizontal de la siguiente manera:
- Desplazamiento medio: 0
- Compensación 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 lo que 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 al desplazarse.
Espero escuchar de usted en los comentarios.
¡Salud!