Saltar al contenido principal

Cómo utilizar el módulo de barra animada en Divi

¿Estás buscando los mejores temas y complementos de WordPress?

Descarga los mejores complementos y temas de WordPress en Envato y crea fácilmente tu sitio web. Ya más de las descargas de 49.720.000. [EXCLUSIVO]

Los contadores animados son una forma divertida y efectiva de mostrar estadísticas a sus visitantes. La animación se desencadena por la carga retrasada para que la navegación en la página sea realmente interesante. Puede colocar tantos contadores como desee dentro de este módulo.

módulo de medidor divi.png

Cómo agregar un módulo de contador de barras a su página

Antes de que pueda agregar un módulo de contador de barras a su página, primero deberá acceder divi Constructor. Una vez que el tema Divi está instalado en su sitio web, verá un botón Utilice Divi Builder sobre el editor cada vez que creas una página nueva.

Al hacer clic en este botón, podrá activar Divi Builder, que le dará acceso a todos los módulos de Divi Builder. Luego haz clic en el botón Use Visual Builder para iniciar el generador en modo visual.

También puede hacer clic en el botón Use Visual Builder cuando está explorando su sitio web en la interfaz, si ha iniciado sesión en su tablero de WordPress.

usar el constructor divi

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 comienza una página nueva, no olvide agregar una línea a su página primero. .

bar counter divi.png

Ubique el módulo del contador 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", luego hacer clic en Entrar para buscar y agregar automáticamente el módulo de contador de barras.

Una vez que se haya agregado el módulo, será bienvenido 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 de un proyecto en un estudio de caso

Una de las mejores formas de utilizar el módulo Bar Counters es ilustrar las estadísticas de los estudios de casos. Simplemente identifique cada barra con una función o propósito de proyecto específico para que el usuario sepa qué servicios están incluidos en el proyecto. En este ejemplo, uso el módulo de barra para mostrar tres objetivos de proyecto.

mostrar el proyecto 3 goals.jpg

Como puede ver, la parte superior de la página incluye los tres objetivos del proyecto utilizando el módulo "Barra de contador" 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 (columna 1). A continuación, agregue un módulo contador de barra a la línea.

Actualice los parámetros de los contadores de barra 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
Título de la fuente: 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

agregar un contador divi.png

Regrese ahora a la pestaña Contenido y seleccione + Agregar un nuevo elemento para agregar el primer contador de barras al módulo.

Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 554.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62. [Recomendado]

Actualice la configuración del módulo individual de la siguiente manera:

Pestaña de contenido

Título: Mi título
Porcentaje: 80

Guardar configuraciones

número de barra de personalización divi.png

Agregue dos contadores de barra adicionales al módulo y otorgue a cada uno un título y un porcentaje.

bar counter divi list of bars.png

Es todo !

resultado final divi module barre.png

Opciones de contenido del mostrador de bar

En la pestaña Contenido, encontrará todos los elementos de contenido del módulo, como texto, imágenes e íconos. Todo eso controla lo que aparece en tu módulo siempre estará en esta pestaña.

barra de módulo de contenido de opción divi.png

Porcentajes de uso

Por defecto, los porcentajes se muestran en el contador de la barra de color. 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 llena.

Color de fondo de la barra

Esta opción le permite ajustar el color de fondo de la barra llena. Este color de fondo cubre 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 utilizar la vista WireFrame en Visual Builder, estas etiquetas aparecerán en el bloque de módulos de la interfaz de 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 cambiar el aspecto de su módulo. Cada módulo Divi tiene una larga lista de parámetros de diseño que puede usar para modificar casi cualquier cosa.

módulo de diseño de opciones counter barre.png

Crea fácilmente tu tienda en línea

Descargue gratis WooCommerce, los mejores complementos de comercio electrónico para vender sus productos físicos y digitales en WordPress. [GRATIS]

Color del texto

Puede elegir aquí si su texto será claro u oscuro. Si trabaja 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 del 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 de su elección en el menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

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 del texto, o puede ingresar el valor de tamaño de texto deseado directamente 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

Color del texto del título

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color del texto de su título, elija el color que prefiera del selector de color usando esta opción.

Espaciado de letras de título

El espaciado de las 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 introduzca el tamaño del 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

Altura de la línea de título

La altura de la fila 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 introduzca 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

porcentaje del texto divi module barre.png

Porcentaje de texto

Puede cambiar la fuente de su texto seleccionando la fuente de su elección en el menú desplegable. Divi viene con docenas de excelentes fuentes basadas en Google Fonts. Por defecto, Divi usa la fuente Open Sans para todo el texto en su página. También puede personalizar el estilo de su texto usando las opciones en negrita, cursiva, mayúscula y subrayada.

Porcentaje de tamaño de letra

Aquí puede ajustar el tamaño de su texto como un porcentaje. Puede arrastrar el control deslizante de intervalo para aumentar o disminuir el tamaño del texto, o puede ingresar el valor de tamaño de texto deseado directamente 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" de acuerdo con su tamaño para cambiar su tipo de unidad.

Porcentaje de color del texto

Por defecto, todos los colores de texto en Divi aparecen en blanco o gris oscuro. Si desea cambiar el color de su texto como un porcentaje, elija el color de su elección en el selector de color usando esta opción.

Porcentaje de espacio entre letras

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto en porcentaje, use el control deslizante de intervalo para ajustar el espacio o introduzca el tamaño del 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" de acuerdo con 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 un porcentaje. Si desea aumentar el espacio entre cada línea, use el control deslizante de intervalo para ajustar el espacio o introduzca 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" de acuerdo con su tamaño para cambiar su 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.

opción de borde divi builder.png

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 en el selector de color para aplicarlo a su borde.

Ancho del borde

Por defecto, los bordes tienen un ancho de 1 píxeles. Puede aumentar este valor arrastrando el control deslizante en el rango o ingresando un valor personalizado en el campo de entrada a la derecha del control deslizante. Unidades de medida personalizadas admitidas, lo que significa que puede cambiar la unidad predeterminada de "px" por otra cosa, por ejemplo, em, vh, vw, etc.

Estilo del borde

Los bordes admiten ocho estilos diferentes, incluidos: sólido, punteado, punteado, doble, ranura, cresta, inserción y comienzo. Seleccione el estilo de su elección del menú desplegable para aplicarlo a su frontera.

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 del contador de barras

En la pestaña Avanzado, encontrará opciones que los diseñadores web más experimentados pueden encontrar útiles, como los atributos CSS y HTML personalizados. Aquí puede aplicar un CSS personalizado a cualquiera de los muchos elementos del módulo. También puede aplicar clases personalizadas e ID de CSS al módulo, que se puede usar para personalizar el módulo en el archivo style.css del tema secundario.

counter bar advanced options.png

ID de CSS

Ingrese una ID de CSS opcional para usar en este módulo. Se puede usar un identificador para crear un estilo CSS personalizado o para crear enlaces a secciones particulares de su página.

Clase de CSS

Ingrese las clases de CSS opcionales para usar en este módulo. Una clase CSS se puede usar para crear un estilo CSS personalizado. Puede agregar varias clases, separadas por un espacio. Estas clases se pueden usar en su tema Divi child o en el CSS personalizado que agregue a su página o sitio web utilizando las opciones de Divi Theme o la configuración de la página de Divi Builder.

CSS personalizado

Un CSS personalizado también se puede aplicar al módulo y a uno de los elementos internos del módulo. En la sección CSS personalizada, encontrará un campo de texto donde puede agregar CSS directamente a cada elemento. Las entradas de CSS en estas configuraciones ya están incorporadas en las etiquetas de estilo. Solo necesita ingresar reglas de CSS separadas por punto y coma.

visibilidad

Esta opción le permite controlar los dispositivos en los que aparece su módulo. Puede elegir deshabilitar su módulo en tabletas, teléfonos inteligentes o computadoras de escritorio individualmente. Esto es útil si desea utilizar diferentes módulos en diferentes dispositivos o si desea simplificar el diseño de dispositivos móviles eliminando ciertos elementos de la página.

Eso es todo por este tutoriel.

Dejar un comentario

Su dirección de correo electrónico no será publicada. Los campos necesarios están marcados con *

Este sitio usa Akismet para reducir los no deseados. Obtenga más información sobre cómo se utilizan sus datos de comentarios.

Volver arriba
13 acciones
cuota6
Tweet2
Guardar5
WhatsApp