Navegar entre secciones de una misma página con Divi
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
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.
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.
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://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.
Hola,
Mira eso es para una misma pagina pero si queremos poner un un submenu osea otro link.Por ejemplo para que me entiendas…
Inicio
Servicios
Ect,ect,
Gracias
Ate.Julio Muñoz
Hola, Julio
El proceso es el mismo que se describe para crear un menú en el video (al final del tutorial). Puedes poner los submenbus que quieras, cada uno con su link personalizado.
Saludos
Hola muy interesante el aporte.
Una pregunta, para que la transición cuando pulsas el botón y te dirige a otra sección de la misma página sea suave, es decir, mediante este método se produce un salto a la sección de destino, pero sería interesante que hiciera una transición/animación bajando (o subiendo) a la sección deseada.
¿Es esto posible?
Muchas gracias.
Gracias, Eva
Para que se muestre la sección con suavidad puedes aplicarle una animación a la sección de destino. Para ello, abre los ajustes de la sección y en la pestaña Diseño, abajo del todo, elije una animación (te sugiero desvanecer) y configurala si es necesario. Ya me cuentas si te ha servido.
Saludos, Eva!
Gracias por el tutorial. Tengo una consulta, yo tengo un sitio de navegación en una sola página y en menú solo direcciona a diferentes secciones de la página. Ahora bien mi problema es que tengo secciones solo visibles para desktop y secciones solo visibles para móviles. (Ej. sección quienes somos para desktop y versión móvil) El menú para desktop funciona bien por que direcciona a las secciones de desktop, pero no se como hacer para que la versión móvil redirija a las secciones de la versión móvil.
Tal vez tu me puedas ayudar, muchas gracias.