Añadir un contador circular.

Obtienes un anillo animado que se rellena para mostrar un número clave, como una tasa o una puntuación. Úsalo para que una estadística destaque en una página de destino o una página sobre nosotros.

Añade un contador circular

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. Crea tu primera página muestra lo básico.

1. Pasa el cursor sobre la columna y haz clic en + en su barra de controles, o haz clic en Add Elements en una página vacía. Abre la pestaña Content y haz clic en Circle counter. Queda arriba de la columna y su diálogo de ajustes se abre.
2. Arrastra el deslizador Percent para definir cuánto se rellena el anillo, o escribe el valor en el recuadro junto a él. Aquí ponemos 78.
3. Elige el color del arco en Foreground color.
4. Abre la sección Circle content y escribe una etiqueta Text para la métrica.
5. En el campo Icon de abajo, escribe chart en el cuadro Search y haz clic en un icono de la cuadrícula.
6. Haz clic en Save en el diálogo. Luego haz clic en Save en la barra de herramientas arriba de la zona de contenido para guardar la página.

Lo que ves

Un anillo se rellena hasta el porcentaje que definiste, con tu icono y etiqueta en el centro. En el vídeo, es morado, se rellena al 78 por ciento y dice Tasa de renovación. El anillo se anima cuando entra en pantalla al desplazar. Las visitas lo ven cuando guardas la página y está publicada.

Configura tu contador circular

Pasa el cursor sobre el elemento y abre More > Settings en su barra de controles. Opciones:

• Percent: cuánto se rellena el anillo, de 0 a 100.
• Dimension: el tamaño del círculo en píxeles, de 100 a 500.
• Foreground color: el color del arco relleno.
• Background color: el color de la pista vacía.
• Fill color: el color dentro del círculo.
• Foreground width: el grosor del arco.
• Animation: rellena el arco desde cero. Animation duration y Animation delay definen el tiempo en milisegundos.
• Animation in-viewport: espera a animar hasta que el círculo entra en pantalla al desplazar.

Cada deslizador tiene un recuadro numérico junto a él para valores exactos. La sección Circle content define qué se muestra en el centro:

• Show progress: muestra el número de porcentaje en lugar de tu propio texto e icono. Viene desactivado.
• Text: una etiqueta corta. Font size y Text color le dan estilo.
• Info: una segunda línea más pequeña bajo el texto.
• Icon: un icono delante del texto. El desplegable junto a Search limita la cuadrícula a un conjunto de iconos. Icon size e Icon color le dan estilo.

Si no lo ves

• Circle counter no está en la pestaña Content. Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en User profiles.
• Ya no está tras recargar. La página no se guardó. Añádelo de nuevo y haz clic en Save en la barra de herramientas arriba de la zona de contenido.
• El anillo se ve tenue o falta. Foreground color y Background color están muy cerca del color de la página. Pasa el cursor sobre el elemento y abre More > Settings, y elige colores con más contraste.
• El anillo no se anima. Animation está desactivado, o el anillo espera hasta entrar en pantalla al desplazar. Activa Animation y desplaza el círculo hasta verlo.
• Tu texto e icono no se muestran. Show progress está activo, así que el anillo muestra el porcentaje. Desactiva Show progress en Circle content.

¿Qué sigue?

Panel Style para cambiar espaciado y fondo de tu contador circular.