Encuéntrelo en el mercado Divi
¡ Divi Sensei Counter está disponible en Divi Marketplace! Eso significa que ha pasado nuestra revisión y se ha encontrado que cumple con nuestros estándares de calidad. Puede visitar Divi Sensei en el mercado para ver todos sus productos disponibles. Los productos comprados en Divi Marketplace vienen con uso ilimitado del sitio web y una garantía de devolución de dinero de 30 días (al igual que Divi).
Compra en el mercado Divi
Divi tiene un módulo de contador de números que le permite ingresar un número, agregar un título y un signo de porcentaje, y diseñarlo con las opciones de estilo comunes. Es un buen módulo, pero ¿qué pasaría si quisiera algunas funciones más, como agregar sus propios prefijos y sufijos, e incluso crear un contador circular? Un complemento de terceros llamado Counter for Divi hace eso y más.
Counter for Divi te permite contar por números, fechas o publicaciones y puedes elegir cómo hace el conteo. Agregue lugares decimales y muestre porcentajes con números positivos o negativos. Ajusta la duración de la animación. La función de círculo le permite crear gráficos circulares y gráficos circulares, y agrega una escala al círculo.
Contador para Módulo Divi
Counter for Divi agrega un nuevo módulo a Divi Builder llamado Counter. Es de color azul oscuro e incluye el logotipo del desarrollador para que destaque. Me gusta cuando los desarrolladores hacen esto para poder ver rápidamente qué módulos son módulos de terceros.
La pestaña de contenido incluye configuraciones para el prefijo y sufijo de texto, tipo de contador (elija entre número y círculo), conteo (elija entre números, fechas y publicaciones), lugar decimal, separadores, conteo hasta, conteo desde y fondo.
La pestaña Diseño incluye configuraciones para el texto, el contador, el texto numérico, el espaciado, el borde, la sombra del cuadro y la animación.
Al elegir Círculo en la pestaña Contenido, se agregan algunas opciones de círculo a la pestaña Diseño. Aquí puede ajustar el ancho de línea, el límite de línea, el color de la pista, etc.
La pestaña Avanzado agrega campos para el contenedor de números, prefijo, sufijo, desplazamiento, etc.
Uso de Contador para Divi
Número
Elija el tipo de contador que desea, lo que desea que cuente e ingrese el número hasta el que desea contar y el número desde el que desea contar. También agregué una coma para el separador de milésimas y forcé los lugares decimales a 2.
Aquí están los ajustes estándar. Agregué un degradado azul claro y verde para que no se mezcle con el blog. He añadido la descripción como prefijo. Se muestra todo lo que ingresa en los campos. Deberá agregar uno o dos espacios para obtener el aspecto que desea.
Círculo
El círculo suma el porcentaje. Todas las demás configuraciones están aquí. Agregue el porcentaje si desea que solo se complete una parte del círculo.
El círculo ocupa todo el ancho de la columna. Lo he colocado en una fila de tres columnas para que no llene la pantalla.
fechas
Fechas agrega el tipo de fecha a contar. Elija entre segundos, minutos, horas, días, semanas, meses y años.
Agrega selectores de fechas para que pueda contar hacia y desde fechas específicas.
Muestra el número de días. Se muestra aquí con mi sufijo.
Publicaciones
Publicaciones le permite elegir los tipos de publicación para contar y tiene un número de compensación para contar hacia o desde.
Muestra la cantidad de publicaciones, páginas y proyectos que he publicado menos el 1 que elegí para compensar. He añadido la descripción como sufijo.
Contador para ejemplos de Styling Divi
Aquí hay algunos ejemplos de estilo de números y círculos.
Ejemplos de números
Éste utiliza el contador de fecha. Cambié el fondo de la sección y agregué sombra al módulo. También he cambiado el color del texto.
Para este ejemplo, agregué un encabezado usando un módulo de texto y módulos de imágenes para crear una tabla de precios simple. Hice el texto blanco y cambié la fuente a ACME.
Para el siguiente ejemplo, agregué otros módulos para crear algunas llamadas a la acción. He usado una imagen, texto, contador y botón como se ve en la imagen de arriba.
Para el de la izquierda, agregué un color de fondo a la columna dentro de la configuración de la fila y agregué relleno en la parte inferior. Crea una tarjeta con un botón de compra.
Para el de la derecha, agregué la imagen dentro del fondo de la columna dentro de la configuración de la fila para que todos los módulos dentro de esa columna aparezcan sobre ella. Cambié el texto de cada uno de los módulos a blanco y agregué una sombra al texto del módulo del contador.
Ejemplos de círculos
Aquí hay algunos círculos. Para el de la izquierda, reduje el tamaño a 250 y cambié el texto y el color del círculo a azul.
Para el que está en el centro, agregué un prefijo, cambié el texto y el círculo a púrpura y cambié la posición de parada a 60. Cambié el ancho de la línea a 10 y dejé el color de la pista predeterminado.
Para el de la derecha, agregué un sufijo, cambié el color del texto, el círculo y la pista, y establecí el ancho de la línea en 20. El porcentaje del círculo es 75, pero cambié la rotación del círculo a 80 para que esté compensado.
Para estos, cambié el tamaño de los círculos, establecí la ubicación de la fuente, cambié los pesos de la fuente y agregué efectos de sombra a las fuentes. Para el de la derecha, agregué un borde con esquinas redondeadas y una sombra en el borde.
Para el de la izquierda, cambié el color de la barra y configuré el color de la pista para que coincida con el fondo. Establecí el ancho de línea en 50 y el límite de línea en redondo.
Para el que está en el medio, cambié el color de la barra y dejé el color de la pista por defecto. El ancho de la línea es 100 y el límite de la línea se establece en Butt. El porcentaje del círculo es 45.
El de la izquierda usa un cuadrado para el límite de línea. El ancho de línea es 75. Cambié el color de la barra y configuré el color de la pista para que coincida con el fondo.
Para estos ejemplos he añadido la escala. Para el de la izquierda, cambié el color de la barra a azul y configuré el color de la pista para que coincida con el fondo. El ancho de la línea es 100. Configuré el color de la escala para que coincida con el color de la barra y configuré la longitud de la escala en 10.
Para el que está en el medio, cambié la barra y el color de la pista, cambié el ancho de la línea a 15 y giré el círculo a 38. Para la escala, configuré la longitud en 20 y cambié el color a negro para que se destacará
Para el de la derecha, cambié el color del número, la fuente y lo puse en cursiva. También he cambiado el color del círculo y la pista. El ancho de línea se establece en 71, el tamaño del círculo es 330 y la rotación del círculo es 203. Dejé el tamaño de escala en 5 (que es el valor predeterminado) y cambié el color.
Me gustan las características de la escala. Cambiar el tamaño y los colores de la escala puede crear algunos diseños interesantes. Me gustaría poder establecer el ancho de escala. Esto les permitiría destacarse más e incluso crear una apariencia de engranajes. Estoy seguro de que esto se puede hacer con CSS.
Aquí hay algunos gráficos circulares. Para el de la izquierda, cambié la barra y los colores de la pista, establecí el ancho de línea en 160 y el límite de línea en Butt. También cambié la fuente a Actor, reduje su tamaño y agregué una sombra de texto.
Para el medio, cambié el color de la pista para que coincidiera con el fondo y eliminé el número.
Para el de la derecha, cambié los colores de la barra, la pista y la fuente, y agregué un sufijo y una sombra de texto.
En realidad, son fáciles de hacer, pero al principio estaba confundido porque estaba usando el control deslizante, que se detuvo en 100, en lugar de ingresar un número manualmente. Incluso puede agregar demasiado, lo que puede tener un efecto de espacio negativo en el centro.
Usando Counter para Divi con Extra
También funciona con Extra . No tuve que hacer ningún ajuste para trabajar con Extra, pero la barra lateral cambió el efecto de los gráficos circulares. Tuve que cambiar el ancho de línea.
Licencia y Compra
Hay dos licencias para elegir:
- Sitio único – $9.99
- Sitios ilimitados – $29.99
Puedes ver la información de compra en la web del desarrollador
pensamientos finales
Descubrí que Counter for Divi es fácil de usar. Funciona bien con otros módulos y tiene muchas características de diseño. Me gusta especialmente el efecto que obtuve con el contador de números como una llamada a la acción. También me gusta lo que se puede hacer con los círculos. Es una excelente opción para crear gráficos circulares o cualquier tipo de gráfico circular.
Si está interesado en un módulo de contador de números con más funciones que el módulo Divi estándar, le recomiendo que eche un vistazo a Counter for Divi.
Queremos escuchar de ti. ¿Has probado Counter para Divi? Cuéntanos tu experiencia en los comentarios.
Imagen destacada a través de Ron Dale / shutterstock.com