Saltar al contenido principal

Cómo usar el módulo de medidor circular en el constructor Divi

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]

El medidor circular le permite mostrar una estadística única de una manera estética y convincente. A medida que te desplazas hacia abajo, el número se cuenta hacia abajo y el gráfico circular se llena progresivamente para que coincida con el valor porcentual. Intente combinar módulos de contador de círculo múltiple en una página para brindarles a los visitantes una forma divertida de descubrir sus habilidades comerciales o personales.

circulerire counter example divi.png

Cómo agregar un módulo de medidor circular a su página

Antes de que pueda agregar un módulo contador de círculo a su página, primero debe acceder al 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 explora su sitio web 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.

counter circle divi.png

Ubique el módulo de medidor circular 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 círculos" y luego hacer clic en Entrar para buscar y agregar automáticamente el módulo de contador de círculos.

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 del proyecto en un estudio de caso

Una de las mejores formas de utilizar el módulo de medidor de círculo es ilustrar estadísticas para casos de estudio o artículos de cartera.

Simplemente identifique cada medidor circular 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, usaré el módulo "contador de círculo" para mostrar tres objetivos del proyecto.

Como puede ver en la imagen a continuación, la parte superior de la página incluye los tres objetivos del proyecto utilizando el módulo de barra de referencias y la parte inferior de la página incluye los resultados del estudio de casos usando el módulo de contador de números .

ejemplo módulo círculo divi animation.gif

Vamos a empezar.

Utilice el generador visual para agregar una sección estándar con un diseño de ancho completo (columna 1). Luego agrega un módulo contador de círculo a la línea.

configuración del círculo contador divi.png

Actualice la configuración del contador circular de la siguiente manera:

Crea fácilmente tu blog con SiteGround

SiteGround le permite crear su blog de WordPress en unos pocos clics. Nombre de dominio gratis, alojamiento seguro, SSL, transferencia y mucho más ... [Recomendado]

Opciones de contenido

Título: Animación
Número: 80
% Signo: Sí
Color de fondo de la barra: #e07a5e

Opciones de diseño

Color del círculo: #e07a5e
Color del texto: oscuro
Título de la fuente: predeterminado
Tamaño de fuente del título: 26px
Color del texto del título: #405c60
Número de fuente: predeterminado
Tamaño de fuente de tamaño: 46px
Color de texto numérico: #405c60

animación divi creación de un círculo con un gráfico divi.png

Guardar configuraciones

Ahora, duplique el módulo contador de círculo dos veces y arrastre cada copia al segundo y tercer columnas de tu linea

copia un módulo de medidor circular divi.png

Como sus elementos de diseño se han transferido a módulos duplicados, solo necesita actualizar el título y el número del medidor circular.

Es todo !

Visita la página.

contador de diseño divi builder.png

Opciones de conteo circular de contador

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.

círculo contenido del módulo section.png

título

Ingrese un título para el contador de círculos. Esta suele ser una palabra que representa la estadística que está mostrando. Se mostrará debajo del número en el gráfico circular.

Nombre

Establezca un número para el medidor circular. Al seleccionar un número inferior a 100, el gráfico circular se llenará hasta un porcentaje igual al número que ingresó. Por ejemplo, ingresando el número 20, el círculo se llenará a 20% del color de su acento.

Signo de porcentaje

Aquí puede elegir si el signo de porcentaje debe agregarse después del número definido anteriormente.

Color de fondo de la barra

Esto cambiará el color de relleno de la barra. La cantidad de color de relleno se controla con el "número" seleccionado arriba. Si selecciona el número 50 y un color azul, su círculo se llenará a 50% con un color azul.

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]

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 de contador circular

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.

Opción de contador circular divi.png

Color del círculo

Este es el color que se usará para la parte no llena del círculo (el espacio negativo que no se llena con el color de fondo de la barra definida en la pestaña Contenido).

Opacidad del color del círculo

Puede reducir la opacidad de la parte llena del círculo al usar este parámetro.

Color del texto

Aquí puede elegir si su texto debe 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.

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.

Número de policía

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.

número de texto divi builder circular counter.png

Número de tamaño de fuente

Aquí puede ajustar el tamaño de su texto numerado. 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 número

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

Espaciado de letras numeradas

El espaciado de las letras afecta el espacio entre cada letra. Si desea aumentar el espacio entre cada letra del texto, 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.

texto medidor espaciado letras divi.png

Altura de la recta numérica

La altura de la línea afecta el espacio entre cada línea de su texto digital. Si desea aumentar el espacio entre cada línea, use el control deslizante de rango 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.

Opciones avanzadas de contador circular

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.

contador avanzado divi.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 utilizar 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 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
11 acciones
cuota6
Tweet2
Guardar3
WhatsApp