El widgetBarra deprogreso te ayuda a añadir una barra de progreso animada a tu página de destino.
La barra de progreso muestra la cantidad de trabajo que el cliente ya ha invertido y lo poco que queda por hacer para lograr el resultado deseado.
Por ejemplo, se puede utilizar una barra de progreso para indicar visualmente el número de evaluaciones que el cliente debe realizar antes de completar un curso y obtener un certificado. ¿O cuántos pasos faltan para completar un proceso de pago/registro?
Con una barra de progreso, puede recordar a sus clientes lo lejos que han llegado en un proceso concreto y animarles a completarlo.
Cómo utilizar una barra de progreso en una página de destino
Primer paso
Navegue hasta el constructor de páginas de aterrizaje
Utilice el Menú Principal de la izquierda para crear una Página de Aterrizaje y navegar hasta el constructor de páginas de aterrizaje.
Paso 2
Añadir una barra de progreso a la página de destino
Como se ha explicado en los artículos anteriores, el área en blanco de la izquierda es el área de trabajo donde se diseña la página de destino; y el área de la derecha es el área de herramientas donde se muestran todos los elementos de diseño disponibles en forma de widgets.
Para añadir una barra de progreso a su página de destino, arrastre y suelte el widget Barra de progreso en el área de trabajo (como se muestra en la siguiente captura de pantalla).
Paso 3
Personalice la barra de progreso según sus necesidades
Al soltar el widget en el área de trabajo, la Configuración del widget se muestra a la derecha (como se resalta en la captura de pantalla siguiente).
Utilice estos ajustes para personalizar la barra de progreso según sus necesidades. Aquí:
- Utilice el campo Texto de la barra de progreso para personalizar el texto que desea mostrar junto con la barra de progreso.
- Utilice los botones + y - situados bajo el campo Barra completa para especificar el porcentaje que desea que se muestre como completo. Tenga en cuenta que el porcentaje sólo puede ajustarse en incrementos/decrementos del 5%.
- Active el botón Animar barra para que la barra de progreso sea animada/estática.
- Active el botón Texto de la barra de progreso para mostrar/ocultar el texto de la barra de progreso.
Paso 4
Estiliza tu barra de progreso
Puede editar la apariencia de la barra de progreso haciendo clic en la pestaña Estilo (como se resalta en la captura de pantalla siguiente).
Aquí, las diferentes opciones de diseño disponibles son:
4.1 Configuración de fuente y color de la barra de progreso
- Color de fondo completado para cambiar el color de la sección completada de la barra de progreso.
- Color de fondo de la barra para cambiar el color de la sección completada de la barra de progreso.
- Barra de tamaño de esquinas redondeadas para añadir esquinas redondeadas a la barra de progreso.
4.2 Estilo del texto de la etiqueta
Utilice las opciones disponibles en esta sección para editar el estilo de fuente, el color, la familia de fuente y el peso de fuente del texto de la barra de progreso.
4.3 Configuración de la barra de progreso
- Barra de altura de la barra de progreso para ajustar la altura de la barra de progreso.
- Barra de ajuste de la anchura del widget para ajustar la anchura del widget de la barra de progreso.
- Posición del wid get para cambiar la alineación del widget de la barra de progreso.
Haz clic en Guardar y ya está.
Ha añadido correctamente una barra de progreso a su página de destino.
Veamos cómo añadir una sección de contenido a una página de destino utilizando el widget de sección.