La navegación lateral de una sola página de Divi lo hace fácil

También puedes usar enlaces de anclaje personalizados y IDs de sección para crear menús de una sola página para todo el paquete de una página.

Cómo activar la navegación de una sola página

Cada vez que crees o edites una página, busca el cuadro de configuración de Divi a la derecha del editor de texto.

Dentro de este cuadro verás la opción de navegación por puntos. Selecciona "Activado" en el menú desplegable y guarda la página.

Ahora notarás que se añadió una barra de navegación flotante al lado derecho de tu página. La barra de navegación por puntos añade automáticamente un enlace clickeable a cada sección de tu página.

Cuando agregas una nueva sección, un nuevo círculo o punto se añadirá automáticamente a la navegación lateral flotante.

Los usuarios pueden hacer clic en los puntos para saltar a diferentes secciones de la página. Esto también facilita identificar dónde está el visitante en la página, haciendo más sencillo entender y navegar páginas de formato largo.

Crear enlaces de menú personalizados para sitios web de una sola página

Si creas un sitio de una sola página, quieres que los enlaces del menú sean distintos a los de páginas separadas. En cambio, estos enlaces pueden apuntar a secciones relevantes de la misma página.

Al hacer clic, te llevarán a la sección correspondiente usando un efecto de desplazamiento suave.

Esto se puede lograr usando IDs personalizados. Cualquier elemento en la página construido con el constructor puede tener un ID asignado.

Puedes asignar un ID a una sección haciendo clic en el ícono de configuración de la sección y buscando la opción CSS ID en la pestaña Avanzado → CSS ID y Clases.

Una vez asignado un ID, puedes enlazarlo desde el menú de navegación.

Ejemplo: Para una sección llamada "Sobre Nosotros", quieres que enlace a la parte de la página que describe tu empresa.

Edita la sección que contiene tu contenido "Sobre Nosotros", escribe about-us en el campo CSS ID y haz clic en Guardar.

Ahora que el ID está asignado, podemos apuntar un enlace hacia él.

Nota: Todos los CSS ID deben agregarse en minúsculas y cualquier espacio debe ser reemplazado por un guion (-).

Apuntar un enlace del menú al CSS ID de un elemento

Si todavía te estás familiarizando con el sistema de Menús, revisa este excelente tutorial.

Una vez creado un nuevo menú y asignado a la ubicación de Navegación Principal, puedes añadir enlaces a tu encabezado.

En este caso, crearemos un enlace personalizado haciendo clic en la pestaña "Enlace" en el lado izquierdo de la página.

Al hacer clic, verás dos campos (URL y Texto del enlace):

• Para el texto del enlace, escribe el texto que quieres que aparezca en tu menú (por ejemplo, Sobre Nosotros).

• Para la URL, necesitamos enlazar con el ID asignado a nuestra sección anteriormente.

En este caso, usamos el ID about-us, pero puedes agregar cualquier nombre de ID que desees.

Como usamos el ID about-us, podemos enlazarlo creando una URL que apunte a #about-us.

Puedes usar este mismo método para crear tantos enlaces personalizados como quieras. Ingresa la URL con el símbolo # seguido del ID que quieras apuntar.