Aunque Divi tiene módulos realmente flexibles, el de los Contadores de Barra de Divi no es precisamente el más destacado en ese sentido.
Esto que ves a continuación es un contador de barras básico con 3 elementos, cada uno con su correspondiente título. No se ha realizado ningún ajuste especial, todos son los predefinidos:
Una de las cosas más bonitas que tiene este módulo es que se muestra de una forma muy dinámica, como si las barras se cargaran simulando un movimiento de crecimiento (no en el ejemplo que te muestro pues en realidad en este caso es una imagen).
Podemos modificar el estilo de los títulos, los colores de las gráficas o elegir si queremos que se vean o no los porcentajes, sin embargo la posición de los títulos y la anchura de las barras no es configurable y personalmente creo que esos son dos aspectos precisamente muy creativos.
Índice de contenido
Títulos más grandes y dentro de las barras del contador
En algunos trabajos que hemos realizado recientemente nos hemos visto en la necesidad de mostrar unas barras más gruesas y que los títulos de cada una de ellas se mostraran dentro de las barras, para aprovechar mejor el espacio y dar más protagonismo a los textos.
Algo parecido a esto:
Como ves, en un espacio similar mostramos el mismo contenido, más compacto y con mayor peso. ¿Cómo lo hemos hecho?
En este caso las modificaciones son las siguientes:
Aumentando el tamaño del título
Aumentamos el tamaño de la fuente de los títulos en los ajustes del módulo (hasta 20px en este ejemplo frente a los 12px por defecto). Lo encontraras en la sección Diseño – Título Tamaño del Texto.
Llevando los títulos a dentro de las barras
A continuación tenemos que conseguir que los títulos se muestren dentro de las barras. Para ello debemos añadir un poco de la magia del CSS a nuestra página.
Si quieres que este cambio afecte a todo contador de barras que añadas en tu sitio web, podemos incluir el siguiente código en las «Opciones del tema» de«Divi» en el menú del escritorio de WordPress, dentro del campo «CSS personalizado».
Si por el contrario solo quieres que afecte al contador de barras de la página en la que lo has añadido, entonces puedes pegarlo en los ajustes de la página que estás editando con el Divi builder.
Este es el CSS en cuestión:
span.et_pb_counter_title {
position: absolute;
z-index: 9999;
color: #fff !important;
padding-left: 12px;
} En el padding-left puedes modificar el espacio que quedará entre el principio de la barra y el comienzo del texto del título.
Ensanchando las barras
Si previsualizas ahora el resultado verás que al haber aumentado el tamaño de la fuente del título, este desborda la anchura de la barra, así que vamos a hacerla más gruesa con el siguiente CSS que añadirás a continuación del primero:
.et_pb_counters .et_pb_counter_amount {
padding: 6px;
}
En este caso la dimensión del grosor la define el padding de 6px. Siéntete libre de experimentar con él si has escogido un título mayor de 20px en el primer paso del tutorial.
Con esto concluye esta modificación. Esperamos que te sea muy útil para tus proyectos, que la disfrutes.
