Centro de Ayuda Wix
    Inicio
  1. Crear tu sitio
  2. Funciones avanzadas
  3. CMS
  4. Conectar elementos de entrada del usuario al CMS
    5. CMS: agregar y configurar una barra de progreso

CMS: agregar y configurar una barra de progreso

7 min de lectura
Agrega una barra de progreso para mostrar una representación visual del progreso hacia el logro de un objetivo. Puedes usar la codificación de Velo o un campo de colección del CMS para representar el valor de progreso. Para el valor objetivo, puedes establecer un valor estático que no cambie, o bien un valor dinámico con Velo o conectando un campo de la colección.   
Ejemplos del uso de las barras de progreso:
  • Muestra cuántas tareas están marcadas como "hechas" en una lista de tareas pendientes.
  • Muestra el porcentaje de pasos completados durante un proceso de incorporación. 
  • Muestra la cantidad de dinero recaudado para un objetivo de recaudación de fondos.
  • Muestra el número de firmantes de una petición que necesita una determinada cantidad de votos.
Consejo:
Puedes utilizar Velo para actualizar el valor de la barra de progreso sin conectarte al CMS. Para obtener más información, consulta el artículo sobre cómo trabajar con el elemento Barra de progreso (enlace en inglés).
Antes de comenzar:
Agrega el CMS a tu sitio y crea una colección que incluya un campo numérico para el valor de progreso. 

Para agregar y configurar un deslizador de tipo cinta:

Editor de Wix
Editor X
Editor de Wix Studio
  1. Ve al Editor.
  2. Asegúrate de haber habilitado Velo en el Editor: 
    1. Haz clic en Modo desarrollador en la parte superior.
    2. Haz clic en Activar. 
  3. Haz clic en Agregar elementos a la izquierda del Editor.
  4. Haz clic en Interactivo. 
  5. Haz clic en Barra de progreso debajo de Indicadores. 
  6. Haz clic en la barra de progreso de tu elección y arrástrala a la página. 
  7. Haz clic en el icono Conectar a CMS en el elemento Barra de progreso. 
  8. Haz clic en el menú desplegable Elige un conjunto de datos y selecciona un conjunto de datos existente que se conecte a tu colección. Como alternativa, haz clic en Crear un conjunto de datos, luego elige la colección que deseas conectar, asigna un nombre al conjunto de datos y haz clic en Crear.
  9. Haz clic en el menú desplegable El valor de progreso se conecta a y selecciona el campo que deseas usar para representar el progreso hacia el logro del objetivo.
  10. Establece el valor objetivo como un número estático que siempre permanece igual o como un valor dinámico:
    • Establecer un valor objetivo estático: haz clic en Establecer valor objetivo en el elemento Barra de progreso e ingresa el valor en el campo Valor objetivo.  
    • Establece un valor objetivo dinámico: haz clic en el menú desplegable El valor objetivo se conecta a y selecciona el campo que deseas usar para representar el objetivo.
  11. Haz clic en el icono Estilo  y elige la dirección en la que se mueve el progreso. 
  12. Haz clic en el icono Diseño  y elige un diseño preestablecido o personaliza aún más el diseño existente. 
  13. (Opcional) Haz clic en el icono Animación  para agregar un efecto de animación al elemento. 

¿Te ha sido útil?

|