Blocksy Tutorial: Efectos de navegación de anclaje y resaltado de menús

Los sitios web de una sola página son cada vez más populares, ya que no es necesario cambiar de página y toda la información se presenta en una sola. Sin embargo, cuando el contenido de la página se alarga, resulta difícil para los visitantes saltar rápidamente a un área específica. Aquí es donde el uso deNavegación con anclapara mejorar la experiencia de navegación.

Este artículo describe el uso de Blocksy Temas + Gutenberg editor (software) Implementar un método para saltos de anclaje de página y resaltado de menús a través de un plugin.

I. ¿Qué es la navegación por puntos de anclaje?

La navegación de anclaje es una técnica que desplaza suavemente la página a un área de contenido específica después de hacer clic en un menú y se utiliza habitualmente:

• Sitio web de una sola página (One Page Layout)
• Páginas de destino de eventos o productos
• Página de visualización de contenidos largos (por ejemplo, flujo de servicios, perfil de la empresa)

En segundo lugar, la operación básica: la rápida implantación de los saltos de anclaje

1. Creación de páginas y bloques

existe Gutenberg Crea una nueva página en la sección "Sobre nosotros" y añade varios bloques de contenido para simular la estructura de la página (por ejemplo, "Sobre nosotros", "Servicios", "Contacto", etc.).

2. Fijación de los marcadores de anclaje

Haga clic en cada título o bloque, barra lateral derecha > Avanzado > Rellenar HTML Ancla campos (por ejemplo:sobre nosotrosyservicios).

3. Creación de menús de navegación

Ve a los bastidores:Apariencia > Menúrealiza las siguientes operaciones:

• Crear un nuevo menú

• Añade un "enlace personalizado" con el formato # Nombre del anclaje(por ejemplo 1TP5Sobre nosotros)

• Nombre el título del enlace (por ejemplo, "Quiénes somos")

• Guardar y establecer el menú como navegación de cabecera

4. Probar el efecto de salto de página

Visite la página principal y haga clic en un elemento del menú; la página saltará suavemente al área de contenido correspondiente.

En tercer lugar, las funciones avanzadas: la aplicación del efecto de resaltado del menú.

Planteamiento del problema

WordPress Native no admite el "resaltado del elemento actual" para los elementos de menú anclados, y la navegación no sigue automáticamente cuando el usuario se desplaza por la página.

Solución: Utilice el plugin Page scroll to id

Paso 1: Instalar el plug-in

Ve a los bastidores:Plugins > Instalar Plugins
Buscar e instalar Page scroll to id Plugin activado y habilitado

Paso 2: Configurar los parámetros del plug-in

Vaya a la página de configuración del plugin y recomiende la siguiente configuración:

• Clase destacada Fijado a:ct-highlight(Blocksy (soporte para esta clase de estilo)

• Habilitar:
  • "Permitir sólo un elemento de menú resaltado"
  • "Mantén resaltado el elemento actual hasta que aparezca el siguiente".

Guarde los ajustes.

IV. Verificación de los resultados finales

Actualiza la portada para probar:

• Haga clic en el menú de navegación y la página saltará suavemente a la zona designada

• Al desplazarse, la opción de menú correspondiente al bloque de contenido actual se resalta automáticamente.

Esta función es especialmente adecuada para crear sitios web de una sola página o páginas promocionales con un alto nivel de sofisticación e interactividad.

V. Resumen

aprovechar Blocksy responder cantando Gutenberg combinado con el editor Page scroll to id Plug-ins de fácil implantación:

• Salto de anclaje de página
• Enlaces personalizados en el menú de navegación
• Desplácese para resaltar la opción de menú actual

Sin ningún código, mejora rápidamente la experiencia de interacción y la profesionalidad de la página, que es muy adecuada para la página de introducción de servicios, la página de visualización de trabajo o la página de aterrizaje de marketing.

Actualizaciones recientes

Contacte con nosotros
¿No puede leer el tutorial? Póngase en contacto con nosotros para obtener una respuesta gratuita. Ayuda gratuita para sitios personales y de pequeñas empresas	Servicio de atención al cliente WeChat
① Tel: 020-2206-9892
② QQ咨询：1025174874
(iii) Correo electrónico: info@361sale.com
④ Horario de trabajo: de lunes a viernes, de 9:30 a 18:30, días festivos libres