Navegar entre secciones de una misma página con Divi

por | 2 Abr, 2018 | Divi, Menús

Presentación

Navegar entre secciones de una misma página con Divi no es nada complicado. En el tutorial de hoy veremos cómo desplazarnos a distintas partes de una misma página. También aprenderemos a navegar a partes específicas de una página desde otra distinta. En realidad es una de las prácticas más sencillas y útiles que podemos encontrar.

Por lo tanto, trataremos este ejercicio desde tres supuestos distintos.

1.- Crearemos un botón que al pulsarlo nos permita navegar a una parte determinada de la página sin salir de ella.

2.- añadiremos un botón que nos llevará a una sección, módulo o fila de otra página. Por ejemplo, a la sección del formulario en la página de contacto.

3.- Repasaremos cómo crear un menú con enlaces personalizados a distintas zonas de la misma página. Estos es lo que solemos llamar One Page Site. En definitiva, un sitio con todas las secciones distribuidas en una sola página.

Navegar en la misma página

Para navegar a una parte específica de nuestra página usando Divi, lo único que necesitamos  es identificar  la sección, fila o módulo que utilizaremos como destino. Después creamos el enlace que nos lleve hasta esta sección, fila o módulo. Veamoslo paso a paso:

Identificar la sección

Para esta práctica vamos a crear el identificador en una fila, aunque como hemos comentado antes, podría hacerse en un módulo o sección, esta última suele ser la opción más usada. Mas que nada porque es el bloque de contenido más grande en una página y suele ser más sencillo de organizar.

ajustes-fila-2

 

Así que hacemos click en el icono de ajustes de la fila para abrir la configuración. (imagen izquierda)

Cuando se nos abra la ventana de configuración de la fila, pulsamos sobre la pestaña Avanzado > Clases & ID CSS > ID CSS y ponemos el nombre con que queramos identificar nuestra fila. Nosotros hemos elegido en identificador «ejemplo», pero seguramente tú quieras poner un nombre más acorde con el contenido al que quieres navegar.

Comentarte que nosotros hemos marcado la fila que tenemos al principio de este tutorial, osea, el título de publicación, que se encuentra dentro de la fila identificada. Por lo tanto cuando pulsemos el link que vamos a crear, navegaremos hasta el inicio de esta página.

Bajo estas líneas, una captura de los ajustes de la fila.

navegar-entre-secciones-identificador

Y ahora el link

Crear el botón no tiene ningún misterio. Podemos insertar un módulo botón, un texto y añadirle la url o una imagen cualquiera y asociarle el link también. En esta práctica vamos a optar por la opción más simple, un texto con el link. De todas formas, la clave estará en añadir el símbolo de almohadilla antes del nombre (identificador) que hemos puesto en la el contenido a donde queremos navegar. Así que sea lo que sea que elijas, pon la almohadilla+identificador como url. Para este ejercicio, será #ejemplo.

PULSA ESTE TEXTO PARA IR ARRIBA Y VER EL RESULTADO.

Navegar a un contenido de otra página

Pues esto que acabamos de comentar es perfectamente aplicable a esta otra situación. De la misma manera que para abrir una página distinta agregamos la página final a la dirección del sitio. Esto es, tusitio.com/pagina. Pues después de la página ponemos el enlace al contenido con la almohadilla. Por ejemplo, para navegar al formulario de este sitio en la pagina servicios sería asi: https://www.aulamedia.net/servicios/#formulario-contacto

Tambien puedes usar la ruta relativa en lugar de la absoluta:/servicios/#formulario-contacto

Crear un menú para navegar entre secciones de una página

Como comentábamos en la presentación del tutorial, también revisaremos cómo crear un menú que nos permita navegar entre secciones de una misma página. El proceso del enlace es el mismo, sólo que tendremos que aplicarlo en el escritorio de WordPress, en la zona para generar menús. Lo haremos en apariencia > Menús.

Pero el proceso lo vamos a explicar paso a paso en el vídeo disponible a continuación.