Cómo crear enlaces activos en Scroll para sitios web Divi de una página

En el tutorial de hoy, le mostraremos cómo diseñar sus enlaces de navegación vertical para que, a medida que un visitante se desplaza hacia abajo en la página, se resalte el enlace del menú correspondiente a la sección en la que se encuentra. Es un pequeño efecto agradable que agrega un poco de interactividad entre su diseño web y el comportamiento del usuario. Este método funciona particularmente bien si está creando un sitio web de una página.

Para aquellos que tienen dificultades para imaginar este efecto en su mente, proporcionamos una vista previa a continuación.

Resultado

Echemos un vistazo al resultado final que podrá lograr después de seguir esta publicación:

Como puede ver, el enlace activo resaltado cambia automáticamente a medida que el usuario se desplaza por las secciones de la página (así como al hacer clic).

Inspiración

Encontramos nuestra inspiración para esta publicación en el sitio web de Filmschool Berlin , que mencionamos como ejemplo en nuestra publicación sobre navegación vertical. Un lector en los comentarios de esa publicación pidió que le mostráramos cómo crear el efecto de enlace activo de desplazamiento y ¡aquí estamos!

Cómo crear enlaces activos en Scroll para sitios web Divi de una página

Suscríbete a nuestro canal de Youtube

Primeros pasos: descargue el complemento Page Scroll to ID

Para llevar a cabo este diseño, vamos a comenzar haciendo uso del complemento gratuito y bien calificado Page Scroll to ID que puede encontrar aquí . Haga clic en el botón ‘Descargar’ y guarde el archivo ZIP del complemento en algún lugar donde pueda encontrarlo de inmediato.

Cargue y active el complemento de desplazamiento de página a ID

Lo siguiente que deberá hacer es ir a su Tablero de WordPress> Complementos> Agregar nuevo> Seleccione el archivo ZIP que acaba de descargar y cárguelo.

Después de eso, no olvides activar el complemento también.

Habilitar navegación vertical

Antes de ingresar a la configuración del complemento Page Scroll to ID, primero habilitaremos la navegación vertical (y la navegación fija en el siguiente paso). Si está en su panel de WordPress, vaya a Apariencia> Personalizar> Encabezado y navegación> Formato de encabezado> Y habilite la navegación vertical.

Habilitar navegación fija

Continuando, habilitemos la navegación fija de su sitio web. Esto es necesario ya que el objetivo principal de usar los enlaces activos en el desplazamiento es que los visitantes vean en qué sección se encuentran, cuando están en ella. Si está en su Tablero de WordPress, vaya a Divi> Opciones de tema> Y habilite la barra de navegación fija en la pestaña General.

Desplácese por la página hasta la configuración del complemento de ID

Para esta parte, vamos a volver al complemento que se cargó recientemente. Una vez que haya activado el complemento, deberá usar la configuración correcta. Para ir a la configuración, haga clic en ‘configuración’ justo debajo del nombre del complemento.

Una vez que haya hecho eso, notará las diferentes opciones que lo ayudarán a determinar cómo se comportarán los enlaces activos en su sitio web. Para el ejemplo que hemos hecho, estamos usando la siguiente configuración:

• Habilitar en los enlaces del menú de WordPress: Sí
• Duración del desplazamiento: 200 milisegundos
• Duración de desplazamiento de ajuste automático: Sí
• Aceleración de la animación de desplazamiento: lineal
• Desplazarse siempre suavemente al llegar al final de la página/documento: Sí
• Detener el desplazamiento de la página con la rueda del mouse o el deslizamiento táctil: Sí
• Diseño de página: automático
• Permitir solo un elemento resaltado a la vez: Sí
• Mantener el elemento actual resaltado hasta que aparezca el siguiente: Sí
• Resaltar por siguiente objetivo: Sí
• Agregue el valor hash del enlace en el que se hizo clic a la URL/barra de direcciones del navegador: Sí
• Desplazarse desde/hacia diferentes páginas: Sí
• Retraso de 0 milisegundos para desplazarse al destino en la carga de la página
• Evite que otros scripts manejen los enlaces del complemento (si es posible): Sí
• Normalizar objetivos de puntos de anclaje: Sí

Agregar ID y clase de CSS a las secciones

Lo siguiente que deberá hacer es asignar los diferentes ID de CSS y el Desplazamiento de página en Clase de CSS de ID a las diferentes secciones de su página. Para ello, abre la configuración de cada una de tus secciones y ve a la pestaña Avanzado. Dentro de la pestaña Avanzado, decida las diferentes ID de CSS que desea usar para sus secciones. Sepa que, para que funcione, deberá asignar una ID de CSS diferente a cada una de las secciones de su one-pager.

En este ejemplo, estamos usando ‘inicio’ como nuestra primera ID de CSS. La clase CSS, sin embargo, es la misma para cada una de las secciones y lo ayuda a vincular la sección al complemento Page Scroll to ID. El nombre de la clase CSS es ‘ps2id’.

Agregar ID a los elementos del menú

A continuación, es hora de crear los elementos del menú y asegurarse de que estén alineados con las secciones y con el complemento Page Scroll to ID. Si está en su panel de WordPress, vaya a Apariencia > Menús . Si ya tiene un menú principal, puede trabajar en ese. Si no, puede escribir el título y crear un nuevo menú. No olvides convertirlo en un menú principal.

Usar enlaces personalizados

A continuación, necesitará enlaces personalizados para lograr los resultados que desea. Comience agregando un primer enlace personalizado. Agregue su sitio web seguido de la ID de la primera sección al campo de enlace como se muestra en la captura de pantalla a continuación.

Habilitar clases CSS

Lo siguiente que deberá hacer, si aún no lo ha hecho en el pasado, es activar las clases CSS para los elementos de su menú. Para hacer eso, haga clic en la opción ‘Opciones de pantalla’ en la esquina derecha. Una vez que aparezcan las posibilidades, habilite las clases CSS.

Use el desplazamiento de página para identificar la clase CSS

Una vez que haya habilitado las clases de CSS para los elementos de su menú, puede continuar y vincular manualmente la clase Desplazamiento de página a ID a cada uno de los elementos del menú. La clase CSS es la misma que hemos usado para asignar ID a nuestras secciones, es decir, ‘ps2id’.

Hacer modificaciones de apariencia

Puede realizar todo tipo de modificaciones en su menú principal, incluso cuando utiliza este método. Para mostrarle cómo puede realizar los cambios, vamos a recrear nuestro ejemplo de navegación vertical.

Nota:  Como se mencionó en la introducción de esta publicación,  no podrá ver los cambios que ha realizado mientras obtiene una vista previa de la página. Primero debe publicar la página y verla en su modo en vivo para notar los resultados.

Personalizador de temas

Comience yendo al Personalizador de temas> Encabezado y navegación> Menú principal y realice los siguientes cambios en la apariencia de su menú principal:

• Ocultar imagen del logotipo: Sí
• Altura máxima del logotipo: 83
• Margen superior del menú: 0
• Tamaño del texto: 14
• Espaciado entre letras: -1
• Fuente: Lato Light
• Estilo de fuente: mayúsculas
• Color del texto: #FFFFFF
• Color del enlace activo: #FFFFFF
• Color de fondo: rgba(255,255,255,0)
• Color de fondo del menú desplegable: rgba(255,255,255,0)

Opciones de tema CSS personalizado

Para cambiar el estilo del enlace activo, tendremos que agregar un código CSS personalizado. Si está en su tablero de WordPress, vaya a Divi > Opciones de tema > Desplácese hacia abajo en la pestaña General y pegue las siguientes líneas de código CSS en el cuadro CSS personalizado:

Además de eso, también usamos un menú transparente superpuesto, que tratamos con más detalle en esta publicación . Para aplicar esos cambios de CSS también a su sitio web, copie y pegue las siguientes líneas de código CSS en el cuadro CSS personalizado también:

Resultados

Al haber seguido todos los pasos de esta publicación, debería poder lograr este resultado final:

Por supuesto, puede modificar el estilo según sus propias preferencias (o usarlo también para la navegación superior).

Pensamientos finales

En este tutorial, le mostramos cómo crear un menú de navegación vertical interactivo para libros de una página. Le mostramos cómo puede usar el complemento Page Scroll to ID en combinación con el tema Divi para lograr fácilmente el resultado que desea obtener. En una publicación futura, volveremos sobre esto y le mostraremos cómo diseñar de forma creativa los enlaces activos que está utilizando a través de este método. Si tiene alguna pregunta o sugerencia, ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrate de  suscribirte a nuestro boletín de correo electrónico  y  canal de YouTube  para que nunca te pierdas un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Yurlick / shutterstock.com