El navegador lateral de página única de Divi es simple. Cuando cree una nueva página, podrá activar la navegación por puntos en una página única de Divi, el cual les dará a sus visitantes una representación del progreso de la página donde puede ir haciendo clics. También puede usar anclajes de enlaces personalizados e ID de secciones para crear menús de una sola página en el paquete completo de página única.

Activar el navegador de página única

Activar el navegador de página única es sencillo y se puede lograr en cualquier página que se cree con el constructor. Cuando cree o edite una página, busque el panel Ajustes de página de Divi en la parte derecha del editor de texto. Dentro de este panel verá la opción Navegación por puntos. Seleccione Activar del menú desplegable y luego guarde o actualice la página. Notará entonces que se ha agregado una barra de navegación flotante en el margen derecho de la página.

La barra navegadora lateral añade un enlace en el que se puede hacer clic para visitar cada sección de la página. Cuando agregue una sección nueva, se añadirá un nuevo círculo automáticamente al navegador lateral flotante. Los visitantes pueden hacer clic en los círculos para ir saltando hacia las diferentes secciones de la página. También es más sencillo para identificar en qué lugar de la página está el visitante, y simplifica la comprensión y la navegación de páginas con gran longitud.

Crear enlaces personalizados en el menú para los sitios de una sola página

Además de la navegación lateral, también es posible transformar el menú primario de navegación en un menú para una sola página. Si está creando un sitio de una sola página, no necesitará que los enlaces apunten a páginas distintas. Por el contrario, estos enlaces pueden apuntar a secciones relevantes dentro de la misma página. Al hacer clic sobre ellos, podrá visitar la sección correspondiente de la página presentando un efecto de desplazamiento suave.

Esto se puede lograr con las ID personalizadas. Se puede asignar una ID a cualquier elemento de la página que se haya creado con el constructor. Puede asignar una ID a la sección haciendo clic en el icono de ajustes de sección, y buscando la opción ID CSS en la pestaña CSS personalizado. Una vez que haya asignado la ID, puede crear un enlace desde el menú de navegación. Por ejemplo, si tiene una sección llamada “Quiénes somos” y quiere enlazar a esa parte de la página en donde se describe su empresa, edite la sección que contiene el bloque “Quiénes somos”, escriba quienessomos en el campo ID CSS, y haga clic en Guardar. Ahora que la ID está asignada, puede crear un enlace que apunte a ella.

Apuntar un enlace del menú a una ID

Para crear un enlace personalizado del menú, deberá añadir un nuevo enlace al menú utilizando la opción Apariencia > Menús del menú de WordPress. Si no está familiarizado con el sistema de Menús, puede visitar este tutorial (en inglés).

Una vez que ha creado el menú nuevo y lo ha asignado a la ubicación Menú principal, puede comenzar a agregar enlaces a la cabecera. En este caso, crearemos un enlace personalizado, por medio de la pestaña Enlaces personalizados de la parte izquierda de la página. Una vez abierta, verá dos campos (URL y Enlace de texto). Para el enlace de texto simplemente escriba el texto que desea mostrar en el menú (por ejemplo: “Quiénes somos”). Para la URL, deberá enlazar a la ID que asignó a esa sección con anterioridad. En nuestro caso, hemos agregado la ID quienessomos, pero usted puede darle a la ID cualquier nombre que desee. Como hemos usado quienessomos, podremos enlazar a esa ID creando una URL que apunte a /#quienessomos.

Puede usar este mismo método para crear todos los enlaces personalizados que quiera. Simplemente escriba en el campo URL /# seguido de la ID a la que quiere enlazar.