Componente Barra de Avance

Para agregar un componente de barra de avance sigue los siguientes pasos:

1. En la sidebar, selecciona la sección en la que vas a colocar la barra.

2. Haz clic en “+Añadir componente”.

3. Selecciona el componente de “Barra de avance”.

Configurar/Editar un componente de Barra de avance

1. Para editar la barra, haz clic en la opción “Editar” en los tres puntos del componente en la sidebar, o haz clic en el ícono de “Editar” en tu componente en la página.

2. Personaliza los colores de los indicadores. Selecciona el color en la paleta de colores o ingresa un código hexadecimal. Puedes personalizar el color para cada uno de los tres indicadores.

1. Color activo: El color activo indica al usuario final el estatus, o paso, en el que se encuentra actualmente.

2. Color inactivo: El color inactivo, es para los estatus, o pasos, que el usuario final no ha visto.

3. Color visitado: El color visitado, es para los estatus, o pases, que el usuario final ya superó, o visitó.

3. En “Estilo de barra”, despliega la lista y selecciona uno de los diferentes estilos. Selecciona el que mejor combina con tu estilo de diseño.

1. Estilo simple: Este estilo muestra una barra simple e indica el paso en el que estás y el total. “Ejemplo: Paso 1 de 6”.

2. Utilizar estatus de la página: Este estilo muestra todos los estatus de tu página y utiliza los nombres que asignaste a los estatus.

3. Con etiquetas propias: Este estilo te permite personalizar el número de pasos y nombrarlos individualmente, independientemente del nombre de los estatus.

   • Para agregar pasos haz clic en “Agregar paso”.

4. Customizable: Este estilo muestra el número del paso en una burbuja, y además utiliza el nombre del estatus para cada paso.

4. Customizable: Este estilo muestra el número del paso en una burbuja, y además utiliza el nombre del estatus para cada paso.

4. Puedes utilizar los controles de posición y tamaño para modificar tu barra de avance.

1. Ancho: Ingresa el valor (en pixeles), para determinar el ancho de la barra de avance.

2. Alto: Ingresa el valor (en pixeles), para determinar el alto de la barra de avance.

3. zIndex: Escribe un número del 1 al 10 para determinar en qué “capa” de la página va a estar tu barra de avance.

5. Utiliza las opciones de texto para personalizar el texto de tu barra de avance:

   1. Negritas

   2. Cursiva

   3. Alineación

   4. Color

   5. Fuente

   6. Tamaño