homefinance blog
Los indicadores de la barra de progreso pueden agregar una hermosa nota a su sitio web, estimulando a UX con una interacción útil (y divertida). Normalmente, las barras de progreso están solas en la parte superior de la página, sin demasiadas conexiones con el contenido real de la página. El usuario simplemente tiene un indicador visual del lugar donde está en la página. Pero hoy, llevaremos esta funcionalidad a otro nivel. En este tutorial, le mostraremos cómo combinar una barra de progreso con un menú de navegación fijo en el Div. Este diseño es único por el hecho de que la barra de progreso se correlaciona con el ancho de los botones del menú. Y debido a que el ancho de los botones del menú es igual (en porcentaje) con la altura de las secciones de contenido que se pueden llevar a cabo en la página, cada botón se completará con la barra de progreso exactamente cuando el usuario llegue a la sección correspondiente del botón . Y si esto no es suficiente, haremos de cada botón un enlace de anclaje a las secciones apropiadas, ¡también para un bono UX adicional!
Este diseño sería perfecto para llevar a un usuario a través de una página de destino que describe los pasos de un proceso. Bueno, verás. ¡Vamos a empezar! Él saca la vista con un vistazo rápido al diseño que construiremos en este tutorial. Descargue el aspecto gratuito para poner su mano en los dibujos en este tutorial, primero deberá descargarlo usando el botón a continuación. Para tener acceso a la descarga, deberá suscribirse a nuestra lista diaria de correo electrónico utilizando el formulario a continuación. ¡Como nuevo suscriptor, recibirá más buenas divisiones y un paquete Divaut gratuito todos los lunes! Si ya está en la lista, simplemente ingrese la dirección de correo electrónico a continuación y haga clic en Descargar. No se “volverá a suscribirse” y no recibirá correos electrónicos adicionales. Determine los archivos
Descargue el registro gratuito para el Boletín Informativo Divic y le enviaremos una copia de la página de la página de la página final, además de muchos otros recursos, consejos y consejos para Div gratis. Sigue a ti mismo y serás una división maestra en el menor tiempo. Si ya está suscrito, simplemente ingrese el correo electrónico a continuación y haga clic en Descargar para acceder al paquete de apariencia.
Te has suscripto satisfactoriamente. ¡Consulte su correo electrónico para confirmar su suscripción y obtener acceso a paquetes de diseño semanales gratuitos!
https://youtu.be/kf-civkezfi
Suscríbase a nuestro canal de YouTube para importar la apariencia de la sección en la Biblioteca de la Divic, navegue a la Biblioteca Divic. Haga clic en el botón Importar. En la ventana de portabilidad emergente, seleccione la pestaña Importar y elija el archivo de descarga en su computadora. Luego haga clic en el botón Importar. Después de que haya terminado, el aspecto de la sección estará disponible en Divi Builder. Pasemos al tutorial, ¿no? Qué necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
Si aún no lo ha hecho, instale y active el tema de Div.
Cree una nueva página en WordPress y use Divi Builder para editar la página principal (Visual Builder).
Elija la opción “Construir desde cero”.
Después de eso, tendrá un lienzo vacío para comenzar a diseñar en el Div.
Parte 1: Creación de la apariencia de la página con la sección en la pantalla superior La sección superior para iniciar cosas, agregue una fila con una columna a la sección.
Antes de agregar un módulo, actualice la configuración de la fila de la siguiente manera:
Ancho: 100%
Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Dentro de la fila, agregue un módulo de texto.
Luego abra la configuración del módulo de texto y pegue el siguiente HTML para crear un encabezado colorido:
vamos a > get star ted
En la pestaña Diseño, actualice la alineación de texto en el centro.
Actualice los siguientes estilos de título H2:
2 Sección de fuentes: Roboto
Rúbrica 2 Dimensión de texto: 6VW
Abra la configuración de la sección y actualice la altura a 100 VH (o al 100% de la altura de la ventana / ventana). Esto asegurará que la sección esté en una pantalla completa. Luego retire el revestimiento de la siguiente manera: Altura: 100 VH
Forro: 0 px arriba, 0 px abajo
Para garantizar que la línea / contenido en la sección permanezca centrada verticalmente dentro de la sección, agregue el siguiente CSS personalizado al elemento principal de la sección:
Pantalla: Flex;
Dirección flexible: columna;
Justify-Concursing: Centro;
La sección del primer paso, la siguiente sección del aspecto será la primera de los cuatro pasos. También es la primera sección en la que se ejecutará nuestro primer enlace de anclaje de menú. Para crear la sección del primer paso, copie la sección superior que acabamos de crear.
Luego abra la configuración para la sección duplicada y actualice el color de fondo:
Color de fondo: # 222222
Luego abra la configuración del texto y reemplace el texto del cuerpo con el siguiente:
Paso uno …
Sed Aliquet Risus de Urna Aliquet Mildit. Maecenas A Scelerisque Lorem. SED Commodo Lectus Sit Amet Felis Rutrum, Blandit Elementum dui tincidunt. Nunc en el sitio de Toror Amet Leo Pharetra lobortis sede a Veolit. Fusce I ante Lacinia, ID de Nibh embarazada, Semper Lectus. Consecuencias de Quisque Lacinia Rhoncus.
Cambie la alineación del texto a la alineación de la izquierda.
Luego actualice lo siguiente:
Rúbrica 2 Color de texto: # 00A4E0
Ancho máximo: 40VH (escritorio), 80VH (tableta)
Alineación del módulo: centro
Se encarga de la sección del primer paso. Sección de paso dos Para crear la sección del segundo paso, copie la sección Pass One que acabo de crear.
Abra la configuración de la sección y agregue un gradiente de fondo sobre el color de fondo, de la siguiente manera: Fondo de pantalla de gradiente izquierdo: RGBA (255.255.255.0.85)
Color de fondo de gradiente derecho: RGBA (255,255,255,0,85)
Luego actualice el color del título:
2 Color de texto: # EE4266
El fondo y el color del título de esta sección coincidirán con los colores del botón que se correlaciona con esta sección del menú que crearemos más adelante. Paso tres La sección para crear la sección Pase tres, copie la sección PAS dos y tírela en la parte inferior de la página.
Luego cambie el color del encabezado del módulo de texto.
Rúbrica 2 Color de texto: # 26C485
Paso cuatro Sección Nuestro paso final es el paso cuatro. Para crear esta sección, copie la sección del segundo paso y tírela en la parte inferior de la página.
Luego actualice el título para el módulo de texto en esa sección.
Rúbrica 2 Color de texto: # 2a1e5c
El resultado es el resultado de nuestra apariencia hasta ahora.
Parte 2: Creación de la barra de progreso y el menú de desplazamiento El siguiente parte es el lugar donde eventualmente creamos la barra de progreso con nuestros botones de menú. La idea es agregar una sección fija a la parte superior de la página. Luego, dentro de la sección, crearemos una fila que contenga un módulo divisor que servirá como un indicador de la barra de progreso. En la parte superior de la fila con la barra de progreso, agregaremos otra fila que contendrá nuestros botones. Cada botón tendrá un fondo transparente (o semi -transparente) para revelar la barra de progreso detrás de él mientras el usuario ejecuta la página.
Para comenzar, para crear la sección fija en la parte superior de la página. Continúe y cree una nueva sección regular y tírela en la parte superior de la página.
Forro: 0 px arriba, 0 px abajo
En la pestaña avanzada, actualice lo siguiente:
Posición: fijo
IND ÍNDICE: 999
Esto le asegurará que la sección permanece fija en la parte superior de la ventana del navegador para una funcionalidad fácil del enlace de anclaje. También se asegurará de que la sección salga del flujo normal del documento / HTML y no se agrega a la altura del documento general. Esto nos hará la barra de desplazamiento para llegar al final de cada botón exactamente cuando el usuario llega a cada sección / paso en la página cuando se ejecute. En la sección, agregue una fila con una columna.
Abra la configuración de la fila y actualice lo siguiente:
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Posición: Absoluto
Abra la configuración de la columna y agregue los siguientes CSS personalizados al elemento principal: Altura: 100%;
Pantalla: Flex;
Alinine-Ritams: Centro;
Esto asegurará que la columna tenga la misma altura que la sección. También permitirá que los módulos tengan una altura del 100%. Esta será la clave para garantizar que la barra de progreso llene la sección. Para crear la barra de progreso, agregue un módulo divisor a la columna.
Luego actualice la configuración del divisor de la siguiente manera:
Divisor del espectáculo: no
Color de fondo: # 222222
Ancho: 100%
Altura: 100%
Nota: Ofrecemos a la barra de progreso un ancho del 100% aquí, por lo que puede verlo en el diseño. Aumentaremos y disminuiremos el ancho de la barra separadora / bárbara con jquey. En la pestaña avanzada, agregue un CSS de ID y dale una posición absoluta. CSS ID: Scrollbar
Posición: Absoluto
Agregar el indicador de texto porcentual luego agregaremos un lugar para mostrar el porcentaje del desplazamiento mientras el usuario ejecuta la página. Esto se correlacionará con el ancho de la barra de progreso.
Bajo el divisor, agregue un módulo de texto.
Luego pegue el siguiente html en el cuerpo:
Nuestra jQuery escribirá el texto porcentual en este HTML (entre etiquetas de span). No podrás ver nada ahora. Aunque el texto porcentual aún no es visible, aún debemos agregar el siguiente estilo mientras esperamos su apariencia.
Texto de fuente: Roboto
Text -Text Style: TT
Color de texto de texto: #ffffff
Tamaño de texto de texto: 16 PX
Forro: 0.8 em arriba, 0.8 abajo, 15 px restante
En la pestaña Avanzada, dale una clase CSS personalizada y apáguelo en tu teléfono y tableta.
Clase CSS: Et-Progress-Label
Desactivar: teléfono, tableta
Aunque no hemos terminado, este es un buen lugar para agregar nuestro código personalizado para mostrar la barra de progreso y el porcentaje. Para agregar el código, agregue un módulo de código en el módulo de texto.
Luego pegue el siguiente código en el cuadro de código, asegurándose de envolverlo con las etiquetas de script necesarias: (función ($) {
$ (documento) .Ready (function () {
Var docheight = $ (documento) .Height ();
Var winHeight = $ (ventana) .Height ();
var $ scrollbar = $ (‘#scrollbar’);
Var $ progresslabel = $ (‘. Et-progrese-label p span’);
$ scrollbar.css (‘ancho’, 0);
$ progresslabel.html (‘0%’);
$ (Ventana) .scroll (function () {
Var winscrolltop = $ (ventana) .scrolltop ();
Var scrollppercentage = math.abs (winscrolltop / (dcheight – winheight)*100);
$ scrollbar.css (‘ancho’, (scrollpercentage + ‘%’));
$ ProgressLabel.html (Math.round (ScrollPercentage) + ‘%’);
});
});
}) (JQuery);
Se encarga de la barra de progreso y el texto porcentual. Pasemos al menú de navegación. Construyendo los botones del menú con enlaces de anclaje Ahora estamos listos para construir el menú de navegación que incluirá cuatro botones que cubren todo el ancho del navegador. Pensé que sería excelente para la barra de desplazamiento llenar cada botón a medida que el usuario llega a la sección apropiada a la que se conecta. Aquí está la idea. Cada botón tendrá un ancho del 25% del ancho total del navegador. Y dado que nuestras cuatro secciones tienen la misma altura (100 VH), cada una de las cuatro secciones representa el 25% del área total de la apariencia de la página. Esto asegurará que la barra de progreso llegue al final de cada botón exactamente cuando la sección apropiada llena la ventana de observación. ¿Atrapaste eso? Si no, esperamos que tenga más sentido más tarde. El giro y la columna para crear los botones del menú, primero, debemos crear cuatro columnas debajo de la fila que contiene la barra de progreso / divisor.
Abra la configuración de la fila y actualice lo siguiente:
El ancho de la canaleta: 1
Ancho: 100%
Ancho máximo: 100%
Forro: 0 px arriba, 0 px abajo
Para garantizar que las columnas deben apilarse en el móvil, debemos agregar los siguientes elementos CSS personalizados al elemento principal: Display: Flex;
Flex-Wrap: Nowrap;
Pasado 1 botón Para crear el primer botón, agregue un botón en la columna izquierda. Texto del botón y la URL del enlace de la siguiente manera:
Botón de texto: Paso 1
URL del botón: #One (este enlace de anclaje saltará la sección con la ID CSS apropiada que agregaremos más adelante)
Luego actualice los estilos de los botones de la siguiente manera:
Alineación de botones: centro
Tamaño de texto de texto: 20 px (escritorio), 14 px (tableta)
El color del fondo del botón: transparente
El ancho del nudo del botón: 0 PX
El rasgo de botón de botón: 0 px
Distancia entre letras y botones: 0.2em
Botón de fuente: Roboto
Botón de estilo de fuente: TT
Revestimiento: 0.8em arriba, 0.8em hacia abajo, 0 izquierda, 0 derecho
Para que el botón se expanda en todo el ancho de la columna, agregue los siguientes CSS personalizados al elemento principal: Display: Bloque! Importante;
Ancho: 100%;
Botón Paso 2 Para crear el botón para el paso dos, copie el botón en la columna uno y tírelo a la columna 2. Luego actualice lo siguiente:
El color del texto del botón: # EE4266
El color del fondo del botón: RGBA (255,255,255,0,85)
El color de fondo semitransparente se combinará con el color negro de la barra de progreso (detrás de él) para que coincida con el fondo apropiado en la sección del segundo paso.
Luego actualice la URL del enlace del botón con el siguiente:
La URL del botón: #TWO
Botón Paso 3 Para crear el botón Paso 3, duplicar el botón Paso 1 (tiene el mismo color BG) y tírelo en la columna 3. Luego actualice el color de texto:
El color del texto del botón: # 26C485
Luego actualice la URL del enlace del botón con el siguiente:
La URL del botón: #three
Botón Paso 4 Para crear el botón Paso 3, duplicar el botón Paso 2 (tiene el mismo color BG) y tírelo en la columna 4.
Luego actualice la URL del enlace del botón con el siguiente:
La URL del botón: # cuatro
Agregar ID de CSS de la sección correspondiente para enlaces de anclaje Una vez que se completan los botones y todos tienen URL de anclaje, podemos agregar las ID de CSS de la sección correspondiente a cada sección a la que queremos pasar cada botón en la página. La sección de ID de CSS del primer paso, abra la configuración para la sección del primer paso y agregue el siguiente ID CSS:
ID CSS: uno
Paso dos Sección ID CSS Abra la configuración para el paso dos y agregue el siguiente ID CSS:
ID CSS: Dos
Paso tres Sección ID de CSS Abra la configuración para el paso tres y agregue el siguiente ID CSS:
ID CSS: tres
Paso cuatro Sección ID de CSS Abra la configuración para el paso cuatro y agregue el siguiente ID CSS:
ID CSS: cuatro
Resultados finales Pensamientos finales Este menú de la barra de progreso es sin duda un diseño único, que tiene el potencial de una variedad de aplicaciones. Esperamos que ayude con su próximo proyecto. Y no dude en explorar las innumerables variantes de diseño disponibles en el fabricante Divi para crear su propio menú de barra de progreso. Espero tener noticias suyas en los comentarios. ¡Suerte!
