¿Alguna vez ha buscado crear un rastreador de progreso vertical en lugar de una barra de desplazamiento tradicional? De lo contrario, explore este artículo hasta el final para descubrir cómo crearlo con Elementor Pro.
Pero antes de abordar el tema principal, primero recordemos qué es un rastreador de progreso.
Un rastreador de progreso es un indicador de progreso que informa al usuario sobre el progreso de un proceso en curso, como instalar una aplicación, actualizar, leer un artículo, etc. Y hay dos tipos:
- le rastreador de progreso lineal
- le rastreador de progreso circular
También puedes leer: Elementor: Cómo crear una tarjeta de efectos a partir de un portafolio
En este tutorial, le mostraremos cómo insertar un indicador de progreso vertical paso a paso en una sección que contiene los archivos de publicaciones.
Crear un rastreador de progreso
En la pestaña elementos desde el panel de herramientasElementor, escribe en la barra de búsqueda Rastreador de progreso. Luego arrastre el widget a una sección.
Luego aparece un indicador de progreso. Por defecto, está orientado horizontalmente. Pero no te preocupes, verás más adelante cómo organizarlo verticalmente.
Siendo creado el indicador de progreso, hagamos las modificaciones necesarias para obtener el resultado deseado.
Ver también: Elementor: Cómo crear una tarjeta de efectos a partir de un portafolio
Editar el contenido del rastreador de progreso
Aquí elegirás el tipo de rastreador y con qué está relacionado.
Los ajustes principales son:
- rastreador típico: aquí el valor por defecto es Horizontal. Sin embargo, al desplazarse hacia abajo en la lista, el tipo circulación también se le ofrece a usted. Mantenga el valor predeterminado.
- Progreso relativo a: en esta segunda configuración, elija el valor selector. Esta opción mostrará una configuración adicional: Selector.
- Selector: Este campo está destinado a recibir el identificador del objeto al que se adjuntará el rastreador.
Seleccionemos el archivo de publicaciones ya que es el elemento al que se adjunta nuestro rastreador.
En su panel de configuración, vaya a la pestaña Avanzado, luego complete un valor en el campo ID CSS.
A continuación, regrese al panel del rastreador y complete el campo Selector en el menú. contenido.
Finalmente, establezca la orientación del indicador de progreso a la derecha.
Cambiar el estilo del rastreador de progreso
En este paso configuraremos los parámetros del indicador de progreso así como el fondo de este último.
Comience configurando el indicador de progreso.
Lea también: Elementor: Cómo crear una galería de imágenes
- Ajuste color de progreso te permite elegir entre una progresión clásica y una progresión gradual. En nuestro ejemplo, elija la primera opción. Sin embargo, sea cual sea la elección, parece que la configuración los colores.
- Establecer ltiene color utilizando la paleta de colores global o el selector de color.
- El tipo de borde: tienes aquí seis propuestas (ninguno, completo, doble, punteado, punteado, surco). Opta por un borde completo.
- Ancho: Esto es para darle grosor al borde de su indicador de progreso.
- El radio de la frontera: De manera predeterminada, el indicador de progreso se ve como un rectángulo. Al modificar su radio, sus extremos se redondean.
Finalmente, establezca el piste ajustes de fondo. Te das cuenta de que son casi los mismos ajustes los que vuelven. Limite su por lo tanto a los mencionados anteriormente.
Cambiar las opciones avanzadas del rastreador de progreso
Para completar nuestro trabajo, configuraremos las siguientes pestañas: efectos de movimiento, Transform y CSS personalizado.
Comencemos con la pestaña primero CSS personalizado. Selecciónelo, luego inserte el siguiente código en el campo apropiado. Permite definir el ancho del rastreador. Así, define el ancho como igual al 50% de la altura de la ventana.
A continuación, gire el rastreador en dirección vertical. Para ello, seleccione el submenú transformador, habilite la rotación y escriba 90 en el campo en blanco. Esto rotará nuestro widget 90 grados dándole la posición vertical deseada.
Para alinear nuestro widget al mismo nivel que las primeras publicaciones, aplique un desplazamiento de 145.
En este nivel, si nos desplazamos por nuestra página, verá que nuestro indicador de progreso desaparece mientras nos desplazamos por nuestra contenido.
Para superar este problema, abrirá la pestaña Efectos de movimiento, luego despliegue el comando Alfiler y seleccione en bas.
Esta vez, al desplazarnos hacia abajo, podemos ver que nuestro rastreador de progreso se llena gradualmente a medida que avanzamos en nuestro archivo de publicaciones.
¡Obtenga Elementor Pro ahora!
Conclusión
Listo ! Eso es todo por este artículo que le muestra cómo crear un rastreador de progreso vertical.
Agregar elementos interactivos como el indicador de progreso vertical al crear su sitio web Realmente podemos llevarlo al siguiente nivel haciéndolo más intuitivo. Además, se puede vincular a una página completa o al contenido de una publicación e incluso a cualquier otro elemento específico de una página. Por tanto, saber utilizarlo sería una ventaja adicional.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
