Elementor

Cómo poner una barra de progreso en Elementor

Cómo poner una barra de progreso en Elementor

Tabla de contenidos

¿Qué es el widget de Barra de progreso en Elementor?

El Widget de Barra de progreso en Elementor te ayuda a mostrar de una forma visual el progreso hacia un objetivo específico. Por ejemplo, en una web de escalada, puedes usarlo para indicar el nivel de dificultad de una actividad o para mostrar cuánto conocimiento tienes sobre un tema en particular.

¿Cómo usar el widget de Barra de progreso en Elementor?

Paso 1. Añade el Widget al lienzo

Widget Barra de progreso
Widget Barra de progreso

Haz clic en el Widget de Barra de progreso, luego arrástralo y suéltalo dentro del lienzo.

Paso 2. Escribe un título

Título de la barra de progreso
Título de la barra de progreso

Usa el campo Título para escribir el texto que se mostrará encima de la barra de progreso.

Paso 3. Etiqueta HTML de título

Etiqueta HTMl de título
Etiqueta HTMl de título

Elige una Etiqueta HTML para el encabezado de la barra de progreso. Esto ayudará a los motores de búsqueda a encontrar y comprender la barra de progreso, mejorando el SEO. Puedes elegir desde el H1 al H6, párrafo, span o div

Paso 4. Añade un porcentaje

Porcentaje
Porcentaje

Escribe un número en el campo Porcentaje para determinar cuánto se coloreará la barra de progresión.

Usa el campo Mostrar porcentaje para mostrar u ocultar el número que has indicado en el campo anterior.

Paso 5. Añade un texto interior

Texto interior
Texto interior

Usa el campo Texto interior para escribir el texto que se mostrará dentro de la barra de progresión.

Paso 6. Personaliza el estilo de la barra de progreso

Estilo de la barra de progreso
Estilo de la barra de progreso

Personaliza el Color, el Color de fondo, el Alto y el Radio del borde de la Barra de progreso.

Personaliza el Color, la tipografía y la Sombra de texto del Texto interior.

Paso 7. Personaliza el estilo del Título

Estilo del título
Estilo del título

Personaliza el Color del texto, la Tipografía y la Sombra del texto.

Escrito por:

Richi Pérez

Richi Pérez

05/06/2024

Tutoriales de WordPress y diseño

Sigue aprendiendo

Tutoriales de WordPress y Elementor para conocer todos los recursos disponibles

¿Por qué usar fuentes y colores globales en Elementor? Para unificar el aspecto de un sitio web, es...

¿Qué es el widget de Valoración en Elementor? El Widget de Valoración en Elementor te permite añadir valoraciones...

¿Qué es el widget de Indicador de avance en Elementor? El Widget de Indicador de avance en Elementor...