Los contadores animados son una forma divertida y efectiva de mostrar estadística para usted visitantes. La animación se activa mediante la carga diferida para que la navegación de la página sea realmente interesante. Puedes colocar tantos contadores como quieras dentro de este módulo.
Cómo agregar un módulo de contador de barras a tu página
Antes de que pueda agregar un módulo de barra de bar a su página, primero deberá acceder a Divi Builder. Una vez el Tema divi instalado en su sitio web, notará un botón Utilice Divi Builder encima del editor cada vez que crea una nueva página.
Al hacer clic en este botón, puede activar Divi Builder, que le dará acceso a todos los módulos de Divi Builder. Luego haga clic en el botón Use Visual Builder para iniciar el generador en modo visual.
También puedes hacer clic en el botón Use Visual Builder cuando navega por su sitio web en la interfaz, si está conectado a su panel de WordPress.
Una vez ingresado en Visual Builder, puede hacer clic en el botón gris más para agregar un nuevo módulo a su página. Los nuevos módulos solo se pueden agregar dentro de las filas. Si está comenzando una nueva página, no olvide agregar una fila a su página primero. .
Localice el módulo de barra de barras en la lista de módulos y haga clic en él para agregarlo a su página. La lista de módulos se puede buscar, lo que significa que también puede escribir la palabra "Contador de barras" y luego hacer clic en Intro para buscar y agregar automáticamente el módulo del contador de barras.
Una vez que se agrega el módulo, será recibido con la lista de opciones del módulo. Estas opciones se dividen en tres grupos principales: Contenido , diseño et Avanzado .
Caso de uso para mostrar los objetivos del proyecto en un estudio de caso
Una de las mejores formas de usar el módulo Bar Counters es ilustrar el estadística para los estudios de caso. Simplemente etiquete cada barra con una función o propósito específico del proyecto para que el usuario sepa qué servicios están incluidos en el proyecto. En este ejemplo, estoy usando el módulo de barra para mostrar tres objetivos del proyecto.
Como puede ver, la parte superior de la página incluye los tres objetivos del proyecto utilizando el módulo "Barra de barras" y la parte inferior de la página incluye los resultados del estudio de caso utilizando el módulo "Contador". Número ”.
Vamos a empezar.
Utilice el generador visual para agregar una sección estándar con un diseño de ancho completo (1 columna). Luego agregue un módulo de barra de bar a la fila.
Actualice los parámetros de los contadores de barras de la siguiente manera:
Opciones de contenido
Porcentajes de uso: ON
Color de fondo: #dddddd
Color de fondo de la barra: # e07a5e
Opciones de diseño
Color del texto: oscuro
Fuente del título: predeterminado
Tamaño de fuente del título: 20px
Color del texto del título: # 405c60
Altura de la línea de título: 2em
Porcentaje de fuente: Predeterminado
Porcentaje de tamaño de fuente: 16px
Porcentaje de color del texto: #ffffff
Porcentaje de altura de línea: 2.5em
Ahora regrese a la pestaña Contenido y seleccione + Agregar un nuevo elemento para agregar el primer contador de barras al módulo.
Actualice la configuración individual del módulo de la siguiente manera:
Pestaña de contenido
Título: Mi título
Porcentaje: 80
Guardar configuración
Agregue dos contadores de barras adicionales al módulo y asigne a cada uno un título y un porcentaje.
Es todo !
Opciones de contenido del contador de barras
En la pestaña Contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e iconos. Todo lo que controla lo que aparece en su módulo siempre estará en esta pestaña.
Porcentajes de uso
De forma predeterminada, los porcentajes se muestran en el contador de la barra de colores. Este texto se puede desactivar con esta configuración, lo que permite que el gráfico de barras visual hable por sí mismo.
Color de fondo
Esta opción le permite ajustar el color de fondo de cada contador de barras. Esta configuración se aplica al espacio negativo detrás del color de la barra rellena.
Color de fondo de la barra
Esta opción le permite ajustar el color de fondo de la barra llena. Este color de fondo se superpone con la configuración de color de fondo anterior.
Etiqueta de administración
Esto cambiará la etiqueta del módulo en el generador para una fácil identificación. Al usar la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulo de la interfaz Divi Builder.
Opciones de diseño del mostrador de la barra
En la pestaña Diseño, encontrará todas las opciones de estilo del módulo, como fuentes, colores, tamaño y espaciado. Esta pestaña le permite modificar la apariencia de su módulo. Cada módulo Divi tiene una larga lista de configuraciones de diseño que puede usar para modificar casi cualquier cosa.
Color del texto
Aquí puede elegir si su texto será claro u oscuro. Si está trabajando con un fondo oscuro, su texto debe ser claro. Si su fondo es claro, su texto debe ser negro. Puede personalizar aún más el color de su texto utilizando las opciones de color de texto adicionales que siguen.
Título de letra
Puede cambiar la fuente de su texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.
Tamaño de fuente del título
Aquí puede ajustar el tamaño del texto de su título. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar el tipo de unidad.
Color del texto del título
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color que desee en el selector de color con esta opción.
Espaciado de letras de título
El espaciado entre letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto del título, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar su tipo de unidad.
Altura de la línea de título
La altura de la línea afecta el espacio entre cada línea del texto del título. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar su tipo de unidad.
Porcentaje de texto
Puede cambiar la fuente de su texto seleccionando la fuente deseada en el menú desplegable. Divi viene con docenas de fuentes increíbles con tecnología de Google Fonts. De forma predeterminada, Divi usa la fuente Open Sans para todo el texto de su página. También puede personalizar el estilo de su texto usando las opciones de negrita, cursiva, mayúsculas y subrayado.
Porcentaje de tamaño de letra
Aquí puede ajustar el tamaño de su texto como porcentaje. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño de su texto, o puede ingresar directamente el valor de tamaño de texto deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar el tipo de unidad.
Porcentaje de color del texto
De forma predeterminada, todos los colores del texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto como un porcentaje, elija el color que desee en el selector de color usando esta opción.
Porcentaje de espacio entre letras
El espaciado de letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra de su texto como porcentaje, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede ingresar "px" o "em" según su tamaño para cambiar su tipo de unidad.
Altura de la línea de porcentaje
La altura de la línea afecta el espacio entre cada línea de su texto como porcentaje. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o ingrese el tamaño de espacio deseado en el campo de entrada a la derecha del control deslizante. Los campos de entrada admiten diferentes unidades de medida, lo que significa que puede introducir "px" o "em" según su tamaño para cambiar el tipo de unidad.
Radio de la frontera
La aplicación de un radio de borde redondeará las esquinas de la barra en el mostrador de la barra. Cuanto mayor sea el radio del borde, más redondeadas serán las esquinas.
Usa el borde
Habilitar esta opción colocará un borde alrededor de su módulo. Este borde se puede personalizar utilizando los siguientes parámetros condicionales.
Color del borde
Esta opción afecta el color de su borde. Seleccione un color personalizado del selector de color para aplicarlo a su borde.
Ancho del borde
De forma predeterminada, los bordes tienen 1 píxel de ancho. Puede aumentar este valor arrastrando el control deslizante de rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Unidades de medida personalizadas compatibles, lo que significa que puede cambiar la unidad predeterminada de "px" a otra cosa, por ejemplo, em, vh, vw, etc.
Estilo del borde
Los bordes admiten ocho estilos diferentes, que incluyen: sólido, punteado, punteado, doble, surco, cresta, recuadro e inicio. Seleccione el estilo que desee del menú desplegable para aplicarlo a su borde.
Relleno de barra
El relleno es el espacio agregado dentro de su módulo, entre el borde del módulo y sus elementos internos. Aquí puede agregar relleno superior personalizado y relleno inferior al módulo de barra.
Opciones avanzadas de contador de barras
En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como atributos CSS y HTML personalizados. Aquí puede aplicar CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases e ID de CSS personalizados al módulo, que se pueden usar para personalizar el módulo en el archivo style.css de su tema secundario.
ID de CSS
Ingrese un ID de CSS opcional para usar en este módulo. Se puede usar una identificación para crear un estilo CSS personalizado o para vincular a secciones particulares de su página.
Clase de CSS
Ingrese las clases de CSS opcionales para usar en este módulo. Se puede usar una clase CSS para crear estilos CSS personalizados. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema secundario Divi o en el CSS personalizado que agrega a su página o sitio web usando las opciones del tema Divi o la configuración de la página Divi Builder.
CSS personalizado
También se puede aplicar CSS personalizado al módulo y a cualquiera de los elementos internos del módulo. En la sección CSS personalizado, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas CSS en esta configuración ya están incrustadas con etiquetas de estilo. Así que solo tienes que ingresar reglas CSS separadas por punto y coma.
visibilidad
Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede optar por desactivar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes mods en diferentes dispositivos o si desea simplificar el diseño móvil eliminando ciertos elementos de la página.
Eso es todo por este tutorial.
