Shortcode web_counter
El shortcode web_counter muestra el componente contador.
Los atributos siguientes coinciden con los controles actuales del Page Builder y con la salida pública. Usa la sintaxis en crudo solo para contenido revisado que no pueda mantenerse mediante los controles visuales.
Uso
[web_counter counter_number="1250" counter_title="Completed projects" counter_number_color="2"]Atributos
| Atributo | Predeterminado | Valores aceptados | Propósito |
|---|---|---|---|
counter_number |
Vacío, se muestra como 0 | Número entero | Valor final. Los decimales se truncan; los valores están limitados a ±9.007.199.254.740.991. |
counter_number_color |
Hereda | Ranura de paleta 1–15 | Helper existente de color de texto del número. |
counter_title |
Vacío | Texto con marcado en línea seguro | Título visible opcional. |
counter_title_color |
Hereda | Ranura de paleta 1–15 | Helper existente de color de texto del título. |
counter_title_position |
Arriba | above, below |
Posición relativa al número. |
counter_title_tag |
h3 |
p, div, h1–h6 |
Elemento semántico; conserva el tamaño visual H4. |
counter_animation |
yes |
yes, no |
Se anima una vez al hacerse visible, respetando la preferencia de movimiento reducido. |
counter_bg_color |
Transparente | Ranura de paleta 1–15 | Helper existente de fondo. |
counter_icon |
Vacío | Valor del selector de iconos del tema | Icono decorativo sobre el contador, usando Color 2. |
counter_bg_opacity |
100 |
0–100 en pasos de 10 | Opacidad de todo el contenedor interior, incluyendo texto e icono. Se conserva el nombre histórico del atributo. |
device_visibility |
Todo visible | Separados por espacios: web-hide-on-xs, web-hide-on-sm, web-hide-on-md, web-hide-on-lg |
Ocúltalo de forma independiente en los rangos de pantalla del tema. |
el_id |
Vacío | ID HTML único | Ancla opcional del contador. |
el_class |
Vacío | Clases CSS separadas por espacios | Reutiliza los helpers existentes del tema, incluyendo el espaciado rem. |
El valor final se puede leer sin JavaScript. La animación numérica conserva la relajación circular existente de un segundo, se ejecuta una vez al hacerse visible y admite contenido insertado mediante el ciclo de vida AJAX del tema. No anuncia cada fotograma como una alerta en vivo. La hoja de estilos del componente es obligatoria para cada contador; el script se solicita solo cuando hay presente un contador animado. Tanto el renderizado del shortcode como la detección de recursos funcionan con la administración del Page Builder desactivada.
Personalizar la hoja de estilos
Los administradores pueden reemplazar la hoja de estilos completa del contador en Settings → POM Theme → Advanced → Custom CSS → Shortcode CSS assets → Counter. Al guardar se publica una copia optimizada por sitio sin añadir la hoja de estilos a páginas no relacionadas. Al revertir se restaura la hoja de estilos empaquetada del identificador web-counter existente. El CSS efectivo del componente también se aplica a la vista previa del contador en Gutenberg.
Verificación
Comprueba valores positivos, cero y negativos, la ubicación del título, el icono, la paleta, la opacidad y cada rango de pantalla habilitado. Revisa el interruptor de animación y el comportamiento con movimiento reducido. Para contenido nuevo del editor de bloques, consulta Contador en Gutenberg.