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

Abr 15, 2020 | Tutoriales para Divi

Los contadores de barras se utilizan en toda la web para ilustrar eficazmente los datos o las métricas con una sutil animación en color que representa un cierto valor. Divi tiene un módulo de contador de barras dedicado que se puede utilizar para generar contadores de barras animados con facilidad. Son adiciones populares a las páginas sobre, páginas de servicio y estudios de casos.

La mayoría de los mostradores de barra 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 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 maneras únicas y precisas.

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: optimizar la sección, fila y columna

Añadir fila

T0 inicio, agregue una fila de dos columnas a la sección.

contadores de barra divi con efectos de desplazamiento

Configuraciones de sección

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

  • Fondo Col0r: # 000545

contadores de barra divi con efectos de desplazamiento

Luego, dale 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

contadores de barra divi con efectos de desplazamiento

Ancho de fila

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

  • Ancho: 90%
  • Ancho Máx .: 700px

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

Parte 2: crear un contador de barras con efectos de desplazamiento

El contador de 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 propagación). El elemento de barra de color es lo que se animará con los desplazamientos 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.

contadores de barra divi con efectos de desplazamiento

Configuración del divisor

Mostrar divisor: NO

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

  • Ancho: 300 px
  • Altura: 70 px

contadores de barra divi con efectos de desplazamiento

Crear barra Barra de mostrador

Módulo divisor duplicado

Para crear la barra de color para el contador de barras, duplica el módulo divisor anterior que utilizamos para crear el fondo de la barra.

contadores de barra divi con efectos de desplazamiento

Fondo divisor

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

  • Color de fondo izquierdo del degradado: # fe7e1f
  • Color de fondo del degradado: # ffbc48
  • Dirección de degradado: 90 grados

contadores de barra divi con efectos de desplazamiento

Posición del divisor

Para hacer 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

contadores de barra divi con efectos de desplazamiento

Efectos de desplazamiento del divisor

Ahora estamos listos para agregar el movimiento a la barra del mostrador de la barra. Para hacer esto, utilizaremos un efecto de desplazamiento horizontal que mueve el módulo divisor de izquierda a derecha. Como 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 los valores de porcentaje 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 300 px.

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

Para mover la barra hacia la izquierda (fuera de la vista), necesitamos agregar un desplazamiento inicial de -3 (-300px). Esto lo mueve hacia 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 75 píxeles 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). Probablemente esto le recuerde esas líneas numéricas que utilizamos en la escuela primaria.

Mostrar 25% con movimiento horizontal

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

  • Habilitar movimiento horizontal: SÍ
  • Compensación inicial: -3
  • Desfase medio: -2.25
  • Compensación de finalización: -2.25

contadores de barra divi con efectos de desplazamiento

Crear contenido de barra de bar

Para crear el contenido de la barra, vamos a utilizar un módulo publicitario. Las imágenes borrosas nos permiten agregar fácilmente un ícono alineado a la izquierda junto con un título y texto del cuerpo que será perfecto para el contador de barras.

Debajo del módulo divisor de barra de color, agregue un módulo de propaganda.

contadores de barra divi con efectos de desplazamiento

Contenido publicitario

Luego actualice el contenido de la siguiente manera:

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

contadores de barra divi con efectos de desplazamiento

Diseño publicitario

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 de icono: SÍ
  • Tamaño de fuente del icono: 40 px

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

Parte 3: Crear contadores de barras adicionales

En la siguiente parte, vamos a seguir haciendo más contadores de barras usando la misma técnica. Crearemos un contador de barras del 50%, 75% y 100% para completar el diseño del diseño. Esto debería darle buenos ejemplos de trabajo para hacer más por su cuenta.

Crear un contador de barra del 50%

Columna duplicada con barra de mostrador

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 conforman el contador de barras en la columna 2. Ahora debe tener dos columnas cada una con contadores de barras idénticos.

contadores de barra divi con efectos de desplazamiento

Actualizar la configuración del divisor de barras

Antecedentes

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

  • Color de fondo izquierdo del degradado: # 4c75f8
  • Color de fondo del degradado: # 57a1ff

contadores de barra divi con efectos de desplazamiento

Efectos de desplazamiento

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

  • Desfase medio: -1.5
  • Compensación de finalización: -1.5

contadores de barra divi con efectos de desplazamiento

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

contadores de barra divi con efectos de desplazamiento

Crear un contador de barra del 75%

Duplicar la fila

Para impulsar el diseño de nuestros próximos dos contadores de barra, duplique la fila completa para crear otra fila idéntica debajo de ella.

contadores de barra divi con efectos de desplazamiento

Actualizar fondo de barra y efectos de desplazamiento

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

  • Color de fondo izquierdo del degradado: # 4c75f8
  • Color de fondo del degradado: # 57a1ff

Luego actualice los desplazamientos de movimiento horizontal de la siguiente manera:

  • Desfase medio: -.075
  • Compensación de finalización: -0.75

contadores de barra divi con efectos de desplazamiento

Contenido publicitario

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

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

contadores de barra divi con efectos de desplazamiento

Crear un contador de barras 100%

Actualizar color de barra y efectos de desplazamiento

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

  • Color de fondo izquierdo del degradado: # f449b4
  • Color de fondo del degradado: # fc845b

Luego actualice los desplazamientos de movimiento horizontal de la siguiente manera:

  • Desfase medio: 0
  • Compensación de finalización: 0

contadores de barra divi con efectos de desplazamiento

Actualizar contenido de Blurb

Finalmente, actualice el contenido de la propaganda:

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

contadores de barra divi con efectos de desplazamiento

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