Cómo combinar una barra de progreso de desplazamiento con un menú de navegación fijo en Divi

Los indicadores de la barra de progreso pueden agregar un toque agradable a su sitio web, impulsando la UX con una interacción útil (y divertida). Normalmente, las barras de progreso se encuentran solas en la parte superior de la página sin mucha conexión con el contenido real de la página. El usuario simplemente tiene un indicador visual de dónde se encuentra en la página. Pero hoy vamos a llevar esta funcionalidad a otro nivel.

En este tutorial, le mostraremos cómo combinar una barra de progreso de desplazamiento con un menú de navegación fijo en Divi. Este diseño es único en el sentido 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 porcentajes) al alto de las secciones de contenido desplazables en la página, cada botón se llenará con la barra de progreso de desplazamiento precisamente cuando el usuario llegue a la sección correspondiente del botón. Y si eso no es suficiente, también haremos que cada botón sea un enlace de anclaje a las secciones correspondientes, ¡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 describa los pasos de un proceso. Bueno, ya verás.

¡Empecemos!

Vistazo

Aquí hay un vistazo rápido al diseño que crearemos en este tutorial.

Descarga el diseño GRATIS

Para poner sus manos sobre los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestra lista de correo electrónico Divi Daily mediante el formulario a continuación. ¡Como nuevo suscriptor, recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.

Descarga los archivos

Descárgalo gratis

Únase al boletín de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.

DESCARGAR

Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!

https://youtu.be/Kf-ciVKEZFI

Suscríbete a nuestro canal de Youtube

Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.

Haga clic en el botón Importar.

En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.

Luego haga clic en el botón Importar.

Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.

Vayamos al tutorial, ¿de acuerdo?

Lo que necesitas para empezar

Para comenzar, deberá hacer lo siguiente:

1. Si aún no lo ha hecho, instale y active Divi Theme.
2. Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
3. Elija la opción "Construir desde cero".

Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.

Parte 1: Crear el diseño de página de la sección de pantalla completa

La sección superior

Para comenzar, agregue una fila de 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%
• Relleno: 0px arriba, 0px 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:

<h2><span style="color: #00A4E0;">Let's</span><span style="color: #EE4266;>get</span style="color: #2a1e5c;>star</span><span style="color: #26c485;">ted</span></h2>

En la pestaña de diseño, actualice la alineación del texto al centro.

La actualización de los siguientes estilos de encabezado H2:

• Fuente del encabezado 2: Roboto
• Tamaño del texto del encabezado 2: 6vw

Abra la configuración de la sección y actualice la altura para que sea 100vh (o el 100% de la altura de la ventana / ventana). Esto asegurará que la sección esté en pantalla completa. Luego saque el acolchado de la siguiente manera:

• Altura: 100vh
• Relleno: 0px arriba, 0px abajo

Para asegurarse de que la fila / contenido dentro de la sección permanezca centrada verticalmente dentro de la sección, agregue el siguiente CSS personalizado al elemento principal de la sección:

display:flex;
flex-direction:column;
justify-content:center;

Paso uno sección

La siguiente sección del diseño será el primero de cuatro pasos. También es la primera sección a la que se desplazará nuestro primer enlace de ancla de menú.

Para crear la sección del primer paso, duplique la sección superior que acabamos de crear.

Luego abra la configuración de la sección duplicada y actualice el color de fondo:

• Color de fondo: # 222222

A continuación, abra la configuración de texto y reemplace el texto del cuerpo con lo siguiente:

<h2>Step One...</h2>
Sed aliquet risus a urna aliquet blandit. Maecenas a scelerisque lorem. Sed commodo lectus sit amet felis rutrum, blandit elementum dui tincidunt. Nunc in tortor sit amet leo pharetra lobortis sed a velit. Fusce eu ante lacinia, gravida nibh id, semper lectus. Quisque lacinia rhoncus consectetur. 

Cambie la alineación del texto a alineado a la izquierda.

Luego actualice lo siguiente:

• Color del texto del encabezado 2: # 00a4e0
• Ancho máximo: 40vh (escritorio), 80vh (tableta)
• Alineación del módulo: centro

Eso se encarga de la sección del primer paso.

Paso dos sección

Para crear la sección del paso dos, duplique la sección del paso uno que acabamos de crear.

Abra la configuración de la sección y agregue un degradado de fondo sobre el color de fondo de la siguiente manera:

• Color de fondo degradado izquierdo: rgba (255,255,255,0.85)
• Color de fondo degradado derecho: rgba (255,255,255,0.85)

Luego actualice el color del título:

• Color del texto del encabezado 2: # 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 en el menú que crearemos más adelante.

Paso tres sección

Para crear la sección del paso tres, duplique la sección del paso dos y arrástrela a la parte inferior de la página.

Luego, cambie el color del título del módulo de texto.

• Color del texto del encabezado 2: # 26c485

Paso Cuatro Sección

Nuestro paso final es el paso cuatro. Para crear esta sección, duplique la sección del paso dos y arrástrela al final de la página.

Luego actualice el encabezado del módulo de texto en esa sección.

• Color del texto del encabezado 2: # 2a1e5c

Resultado

Aquí está el resultado de nuestro diseño hasta ahora.

Parte 2: Crear el menú y la barra de progreso de desplazamiento

La siguiente parte es donde finalmente creamos la barra de progreso de desplazamiento con nuestros botones de menú. La idea es agregar una sección fija en la parte superior de la página. Luego, dentro de la sección, crearemos una fila que contiene un módulo divisor que servirá como nuestro indicador de 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 semitransparente) para mostrar la barra de progreso detrás de él a medida que el usuario se desplaza hacia abajo en la página.

Para empezar, creemos la sección fija en la parte superior de la página. Continúe y cree una nueva sección regular y arrástrela a la parte superior del diseño de página.

Abra la configuración de la sección y saque el relleno de la siguiente manera:

• Relleno: 0px arriba, 0px abajo

En la pestaña avanzada, actualice lo siguiente:

• Posición: fija
• Índice Z: 999

Esto asegurará que la sección permanezca fija en la parte superior de la ventana del navegador para facilitar la funcionalidad del enlace de anclaje. También se asegurará de que la sección se salga del flujo normal del documento / html y no aumente la altura del documento general. Esto nos permitirá que la barra de desplazamiento llegue al final de cada botón exactamente cuando el usuario llega a cada sección / paso de la página cuando se desplaza.

Dentro de la sección, agregue una fila de una columna.

Abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo
• Posición: Absoluto

Abra la configuración de la columna y agregue el siguiente CSS personalizado al elemento principal:

height: 100%;
display:flex;
align-items:center;

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%. Esto será clave para asegurarse de 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:

• Mostrar divisor: NO
• Color de fondo: # 222222

• Ancho: 100%
• Altura: 100%

NOTA: Le estamos dando a la barra de progreso un ancho del 100% aquí para que pueda verla dentro del diseño. Aumentaremos y disminuiremos el ancho de la barra divisoria / de progreso con JQuery.

En la pestaña avanzada, agregue un ID de CSS y asígnele una posición absoluta.

• ID de CSS: scrollBar
• Posición: Absoluto

Agregar el indicador de texto de porcentaje

A continuación, agregaremos un lugar para mostrar el porcentaje de la posición de desplazamiento a medida que el usuario se desplaza hacia abajo en la página. Esto se correlacionará con el ancho de la barra de progreso.

Debajo del divisor, agregue un módulo de texto.

Luego pegue el siguiente HTML en el cuerpo:

<p><span></span></p>

Nuestro JQuery escribirá el texto porcentual en este HTML (entre las etiquetas de intervalo). No podrás ver nada ahora.

Aunque el texto porcentual aún no está visible, aún necesitamos agregar el siguiente estilo antes de que aparezca.

• Fuente de texto: Roboto
• Estilo de fuente de texto: TT
• Color del texto del texto: #ffffff
• Tamaño del texto del texto: 16px
• Relleno: 0.8em en la parte superior, 0.8 en la parte inferior, 15px a la izquierda

En la pestaña avanzada, dele una Clase CSS personalizada y desactívela en el teléfono y la tableta.

• Clase CSS: et-progress-label
• Desactivar en: teléfono, tableta

Aunque no hemos terminado, este es un buen lugar para agregar nuestro código personalizado necesario para mostrar la barra de progreso de desplazamiento y el porcentaje.

Para agregar el código, agregue un módulo de código debajo del módulo de texto.

Luego pegue el siguiente código en el cuadro de código asegurándose de envolverlo con las etiquetas de secuencia de comandos requeridas:

(function($) {
$(document).ready(function(){
var docHeight = $(document).height();
var winHeight = $(window).height();
var $scrollBar = $('#scrollBar');
var $progressLabel = $('.et-progress-label p span'); 
$scrollBar.css('width', 0);
$progressLabel.html('0%');
$(window).scroll(function(){
var winScrollTop = $(window).scrollTop();
var scrollPercentage = Math.abs(winScrollTop / (docHeight - winHeight)*100);
$scrollBar.css('width', (scrollPercentage + '%'));
$progressLabel.html( Math.round(scrollPercentage) + '%');
});
});
})( jQuery );

Eso se encarga de la barra de progreso y el texto de porcentaje. Pasemos al menú de navegación.

Creación de botones de menú con enlaces de anclaje

Ahora estamos listos para construir el menú de navegación que incluirá cuatro botones que abarcan todo el ancho del navegador. Pensé que sería genial que la barra de desplazamiento llenara cada botón cuando el usuario llega a la sección correspondiente a la que se está vinculando. Esta es 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 (100vh), cada una de las cuatro secciones representa el 25% del área total desplazable del diseño de página. Esto asegurará que la barra de progreso llegue al final de cada botón precisamente cuando la sección correspondiente llene la ventana gráfica. ¿Entendiste eso? Si no, es de esperar que tenga más sentido más adelante.

La fila y la columna

Para crear los botones de menú, primero, necesitamos crear una fila de cuatro columnas debajo de la fila que contiene la barra de progreso / divisor.

Abra la configuración de la fila y actualice lo siguiente:

• Ancho de la canaleta: 1
• Ancho: 100%
• Ancho máximo: 100%
• Relleno: 0px arriba, 0px abajo

Para asegurarnos de que las columnas se apilen en dispositivos móviles, debemos agregar el siguiente CSS personalizado al elemento principal:

display:flex;
flex-wrap:nowrap;

Paso uno botón

Para crear el primer botón, agregue un módulo de botones en la columna de la izquierda.

Actualice el texto del botón y la URL del enlace de la siguiente manera:

• Texto del botón: Paso 1
• URL del enlace del botón: #one
  (este enlace de anclaje saltará la sección con el ID de CSS correspondiente que agregaremos más adelante)

A continuación, actualice los estilos de los botones de la siguiente manera:

• Alineación de botones: centro
• Tamaño del texto del botón: 20px (escritorio), 14px (tableta)
• Color de fondo del botón: transparente
• Ancho del borde del botón: 0px
• Radio del borde del botón: 0px
• Espaciado de letras de botones: 0.2em
• Fuente del botón: Roboto
• Estilo de fuente del botón: TT
• Acolchado: 0.8em arriba, 0.8em abajo, 0 izquierda, 0 derecha

Para que el botón abarque todo el ancho de la columna, agregue el siguiente CSS personalizado al elemento principal:

display:block !important;
width: 100%;

Paso 2 Botón

Para crear el botón para el paso dos, duplique el botón en la columna uno y arrástrelo a la columna 2.

Luego actualice lo siguiente:

• Color del texto del botón: # ee4266
• Color de 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) para que coincida con el fondo de la sección correspondiente del paso dos.

Luego actualice la URL del enlace del botón con lo siguiente:

• URL del enlace del botón: #two

Paso 3 Botón

Para crear el botón del paso 3, duplique el botón del paso 1 (tiene el mismo color de fondo) y arrástrelo a la columna 3.

Luego actualice el color del texto del botón:

• Color del texto del botón: # 26c485

Luego actualice la URL del enlace del botón con lo siguiente:

• URL del enlace del botón: #three

Paso 4 Botón

Para crear el botón del paso 3, duplique el botón del paso 2 (tiene el mismo color de fondo) y arrástrelo a la columna 4.

Luego actualice el color del texto del botón:

• Color del texto del botón: # 2a1e5c

Luego actualice la URL del enlace del botón con lo siguiente:

• URL del enlace del botón: #four

Adición de los ID de CSS de la sección correspondiente para enlaces de anclaje

Una vez que los botones están terminados y todos tienen sus URL de enlace de anclaje, podemos agregar los ID de CSS de la sección correspondiente a cada sección a la que queremos que salte cada botón en la página.

ID de CSS de la sección del paso uno

Abra la configuración de la sección del paso uno y agregue la siguiente ID de CSS:

• ID de CSS: uno

Paso dos ID de CSS de la sección

Abra la configuración de la sección del paso dos y agregue el siguiente ID de CSS:

• ID de CSS: dos

Paso tres ID de CSS de la sección

Abra la configuración de la sección del paso tres y agregue el siguiente ID de CSS:

• ID de CSS: tres

Paso cuatro ID de CSS de la sección

Abra la configuración de la sección del paso cuatro y agregue la siguiente ID de CSS:

• ID de CSS: cuatro

Resultado final

Pensamientos finales

Este menú de la barra de progreso es definitivamente un diseño único que tiene el potencial para una variedad de aplicaciones. Con suerte, te ayudará con tu próximo proyecto. Y siéntase libre de explorar las innumerables variaciones de diseño disponibles dentro del constructor Divi para crear su propio menú de barra de progreso.

Espero tener noticias tuyas en los comentarios.

¡Salud!