A veces, es más conveniente navegar por el contenido de la página haciendo clic en los botones en lugar de desplazarse. Esto es especialmente cierto para los one-pagers o si tiene ciertas secciones secuenciales en una página que garantizan una accesibilidad óptima para los usuarios. Agregar enlaces de navegación de páginas adhesivas al final de las secciones puede ser una alternativa única para que los usuarios se desplacen constantemente o para incluir enlaces de anclaje en su menú de encabezado principal.
En este tutorial, le mostraremos cómo agregar enlaces de navegación de páginas adhesivas (siguiente, anterior, primero, último) a una página en Divi . Esto le permitirá navegar a secciones específicas a lo largo de una página con facilidad.
¡Empecemos!
Aquí hay un vistazo rápido al diseño que construiremos en este tutorial.
Observe cómo cambian los enlaces fijos de navegación cuando se desplaza hacia abajo en la página.
Observe lo fácil que es navegar a cada sección haciendo clic en los enlaces de navegación.
Y así es como se ve el diseño en el móvil.
Y aquí hay un codepen que demuestra la funcionalidad principal.
Descarga el diseño GRATIS
Para poner sus manos en los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para obtener acceso a la descarga, deberá suscribirse a nuestro boletín utilizando el formulario a continuación. Como nuevo suscriptor, ¡recibirás aún más bondad Divi y un paquete Divi Layout gratis todos los lunes! Si ya está en la lista, simplemente ingrese su dirección de correo electrónico a continuación y haga clic en descargar. No será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo de Divi y le enviaremos por correo electrónico una copia del último paquete de diseño de página de destino de Divi, además de muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro Divi en poco tiempo. Si ya está suscrito, simplemente escriba su dirección de correo electrónico a continuación y haga clic en descargar para acceder al paquete de diseño.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Para importar el diseño de la sección a su Biblioteca Divi, navegue hasta la Biblioteca Divi.
Haga clic en el botón Importar.
En la ventana emergente de portabilidad, seleccione la pestaña de importación y elija el archivo de descarga desde su computadora.
Luego haga clic en el botón importar.
Una vez hecho esto, el diseño de la sección estará disponible en Divi Builder.
Vayamos al tutorial, ¿de acuerdo?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo has hecho, instala y activa el tema Divi .
- Cree una nueva página en WordPress y use Divi Builder para editar la página en la parte delantera (constructor visual).
- Elija la opción «Construir desde cero».
Después de eso, tendrás un lienzo en blanco para comenzar a diseñar en Divi.
Crear la sección superior
De forma predeterminada, habrá una sección regular lista para usar en Divi Builder. Usando la sección regular predeterminada, abra la configuración de la sección y saque el relleno inferior de la siguiente manera:
- Relleno: 0px inferior
Configuración de fila
Agregue una fila de una columna a la sección.
Luego actualice la configuración de diseño para la fila de la siguiente manera:
- Ancho: 100%
- Ancho máximo: 80vw (escritorio, tableta), 95vw (teléfono)
Sección de título
Para crear el título de la sección, primero, agregue un nuevo módulo de texto a la fila/columna.
Luego actualice el cuerpo del texto con el siguiente título H2:
|
01
|
<h2>Top</h2> |
En la pestaña de diseño, actualice la configuración de texto para el encabezado H2 de la siguiente manera:
- Seleccione la pestaña H2
- Título 2 Fuente: Montserrat
- Encabezado 2 Peso de fuente: Pesado
- Título 2 Estilo de fuente: TT
- Encabezado 2 Alineación de texto: centro
- Encabezado 2 Tamaño del texto: 8vw (computadora de escritorio, tableta), 61.36px (teléfono)
Creando la Sección 1
A continuación, vamos a crear nuestra primera sección que contendrá enlaces de navegación fijos. Para crear la Sección 1, duplique la sección superior y etiquete la sección duplicada según corresponda en la vista de capas .
Sección 1 Color de fondo
Abra la configuración de la Sección 1 y actualice el color de fondo:
- Color de fondo: #fec0f4
Sección 1 CSS ID para Anchor Link Navigation
Para enlazar a esta sección usando nuestros enlaces ancla, necesitamos agregar una ID de CSS. En la pestaña avanzada, agregue la siguiente ID de CSS:
- ID de CSS: uno
Actualizar el texto del título
Luego actualice el texto del título en el módulo de texto para que diga «Sección 1».
Crear una fila fija para la sección 1
Una vez que se actualicen la Sección y el Título, vamos a crear una fila fija que finalmente contendrá nuestros enlaces de navegación. Para hacer esto, agregue una nueva fila de una columna debajo de la fila existente en la Sección 1.
Debido a que nuestra sección no tiene relleno en la parte inferior, la fila debe quedar bien en la parte inferior de la sección.
Ajustes de fila fija
Para que la fila sea fija, debemos actualizar la configuración de la fila.
Opciones pegajosas
En la pestaña avanzada, actualice las opciones de posición fija de la siguiente manera:
- Posición pegajosa: Stick to Bottom
- Límite fijo superior: Sección
- Desplazamiento de los elementos pegajosos circundantes: NO
Esto asegurará que la fila adhesiva esté contenida dentro de la sección.
Configuraciones de diseño
En la pestaña de diseño, actualice lo siguiente:
- Usar ancho de canalón personalizado: SÍ
- Ancho del canalón: 1
- Ancho: 100%
- Ancho máximo: 25vw (escritorio, tableta), 50% teléfono
- Alineación de filas: derecha (escritorio, tableta), izquierda (teléfono)
- Relleno: 0px arriba, 0px abajo
Para ocultar la fila (junto con los botones que contendrá), moveremos la fila detrás de la sección debajo de ella usando la configuración de traducción de transformación. Luego moveremos la fila hacia arriba a la vista cuando esté en el estado fijo. Esto asegurará que los botones solo sean visibles cuando estén en estado fijo.
Para hacer esto, haga clic en el ícono adhesivo (miniatura) cuando se desplaza sobre el título de la opción de transformación para activar la pestaña adhesiva. Luego actualice las opciones de transformación de la siguiente manera:
- Transformar traducir eje Y (escritorio): 100%
- Transformar traducir eje Y (pegajoso): 0%
Desplazamiento de posición
Eventualmente, tendremos otra fila de palos para el primer y último botón que se pegará en la parte inferior derecha de la ventana. Así que tenemos que mover esta fila de palos a la izquierda.
Para mover la fila adhesiva, vaya a la pestaña avanzada y actualice las opciones de compensación de posición de la siguiente manera:
- Origen compensado: arriba a la derecha
- Desplazamiento horizontal: 25vw (escritorio, tableta), 0px (teléfono)
Nota: El desplazamiento en el teléfono se establece en 0 px porque la alineación de la fila se establecerá a la izquierda y el ancho será del 50 %.
Columna de fila fija CSS
Para asegurarnos de que nuestros botones estén perfectamente adyacentes entre sí y alineados verticalmente, agregaremos un pequeño fragmento de CSS personalizado para colocar los botones en un diseño de cuadrícula CSS.
En la pestaña avanzada, agregue el siguiente CSS al elemento principal:
|
01
02
|
display:grid;grid-template-columns:50% 50%; |
Ahora es el momento de comenzar a agregar nuestros botones a la columna. Para esta primera sección, solo necesitamos un botón Siguiente. Entonces, necesitamos un divisor que sirva como marcador de posición para el botón izquierdo.
Divisor
Agregue un nuevo divisor a la columna.
Luego configure la opción Mostrar divisor en «NO».
Siguiente botón
Debajo del módulo divisor, agregue un módulo de botones.
Luego actualice la configuración del contenido del botón:
- Texto del botón: Siguiente
- URL del vínculo del botón: #dos
La URL “#dos” saltará a la siguiente sección que crearemos con el ID de CSS “dos”.
En la pestaña de diseño, actualice lo siguiente:
- Alineación de botones: centro
- Usar estilos personalizados para el botón: SÍ
- Tamaño del texto del botón: 2.1vw (computadora de escritorio, tableta), 16.1px (teléfono)
- Color del texto del botón: #000000
- Fondo del botón: #eeeeee
- Ancho del borde del botón: 0px
- Icono de botón: flecha hacia abajo (ver captura de pantalla)
- Mostrar solo el ícono al pasar el mouse por el botón: NO
- Margen: 2% derecho
Para asegurarse de que el botón abarque todo el ancho de la columna de la cuadrícula CSS, agregue el siguiente CSS personalizado al elemento principal:
|
01
|
display:block !important; width: 100%; |
Creando la Sección 2
Ahora que hemos terminado la Sección 1, duplique la Sección 1 para crear la Sección 2 y actualice la etiqueta en la vista de capas en consecuencia.
Actualizar el color de fondo y el texto del título de la sección 2
A continuación, actualice el color de fondo de la sección:
- Color de fondo: #8dc6c1
Luego actualice el texto del título para que diga «Sección 2» en el módulo de texto de la fila superior.
Actualizar la ID de CSS de la Sección 2
En la pestaña avanzada, actualice la sección con una nueva ID de CSS:
- ID de CSS: dos
Agregar botones Siguiente y Anterior a Sticky Row (Sección 2)
Dentro de la fila adhesiva de la Sección 2, elimine el módulo divisor y duplique el botón Siguiente para que tenga dos botones.
Actualizar la URL del enlace del botón siguiente
Abra la configuración para el primer botón Siguiente/izquierdo y actualice el enlace del botón de la siguiente manera:
- URL del enlace del botón: #tres
La URL “#tres” saltará a la siguiente sección que crearemos con el ID de CSS “tres”.
Agregar texto de botón anterior y URL de enlace
Para hacer el botón Anterior, abra la configuración del segundo botón/derecho y actualice lo siguiente:
- Texto del botón: Anterior
- URL del enlace del botón: #one
La URL «#one» volverá a la sección con el ID de CSS «one».
Añadir icono de botón anterior
Luego actualice el icono:
- Icono de botón: flecha hacia arriba (ver captura de pantalla)
Creando la Sección 3
Ahora que hemos terminado la Sección 2, duplique la Sección 2 para crear la Sección 3 y actualice la etiqueta en la vista de capas en consecuencia.
Actualizar el color de fondo y el texto del título de la sección 3
Agregue un nuevo color de fondo a la sección:
- Color de fondo: #9fa5f4
Luego actualice el texto del título para que diga «Sección 3» en el módulo de texto de la fila superior.
Actualizar la ID de CSS de la Sección 3
En la pestaña avanzada, actualice la sección con una nueva ID de CSS:
- ID de CSS: tres
Agregar divisor y botón anterior a la fila fija (Sección 3)
Agregar divisor y eliminar el botón siguiente
Podríamos continuar y crear tantas secciones como sea necesario para incluir los botones Siguiente y Anterior. Pero para este ejemplo, vamos a hacer de la Sección 3 la última sección con Enlaces de navegación.
Entonces, dado que no necesitaremos un Botón Siguiente, elimine el Botón Siguiente y reemplácelo con un divisor como lo hicimos en la Sección 1.
Actualizar la URL del enlace del botón anterior
Luego, abra la configuración del botón Anterior y actualice la URL del enlace:
- URL del vínculo del botón: #dos
La URL «#dos» volverá a la sección con el ID de CSS «dos».
Crear la sección inferior
Ahora que las 3 secciones están completas con su función de navegación de fila fija y enlace de anclaje, crearemos una sección inferior que servirá como una sección de la página que no incluye la navegación fija Siguiente/Anterior. Esto es para demostrar si hay secciones adicionales en la página que pueden no necesitar navegación fija.
Para crear la sección inferior, simplemente duplique la Sección superior y arrástrela debajo de la Sección 3.
Luego actualice el texto del título para que diga «Inferior».
Crear la sección inferior adhesiva
Para nuestro último paso, necesitamos crear una sección adhesiva que se adherirá a la parte inferior de la página y contendrá nuestros enlaces de navegación Primero y Último (anclaje). Esta sección debe estar en la parte inferior de la página si desea que los enlaces de navegación aparezcan en todas las secciones de la página al desplazarse.
Debajo de la sección inferior, cree una nueva sección regular.
Luego, actualice la etiqueta de la sección en la vista de capas en consecuencia (es decir, «Sección inferior adhesiva»).
Para agregar más funciones de navegación a nuestra página de secciones, crearemos dos botones adicionales (o enlaces de anclaje) que saltarán a la primera (sección 1) y la última (sección 3) secciones de la página.
Duplique la fila fija en la sección 2 y arrástrela a la sección inferior fija
Para crear la fila para nuestros enlaces de navegación Primero y Último, podemos duplicar la fila adhesiva (fila 2) de la Sección 2 y arrastrarla a la nueva Sección inferior adhesiva.
Actualizar configuración de fila
Para esta última sección, vamos a hacer que toda la sección sea adhesiva para que podamos eliminar la configuración adhesiva heredada de nuestra configuración de fila duplicada y darle una posición absoluta en su lugar.
Abra la configuración de la fila y actualice lo siguiente:
A continuación, actualice las opciones de posición de la siguiente manera:
- Posición: Absoluta
- Ubicación: abajo a la derecha
- Desplazamiento horizontal: 0px
- Posición pegajosa: no pegar
En la pestaña de diseño, restablezca las opciones de transformación para la fila.
Para crear el primer botón, abra la configuración del botón de la izquierda y actualice lo siguiente:
- Texto del botón: primero
- URL del enlace del botón: #one
Luego actualice el icono del botón a una flecha hacia arriba diferente.
Para crear el último botón, abra la configuración del botón de la derecha y actualice lo siguiente:
- Texto del botón: Último
- URL del enlace del botón: #tres
Luego actualice el ícono del botón a una flecha hacia abajo diferente.
Actualizar la configuración de la sección para la sección inferior adhesiva
A continuación, abra la configuración de la sección y actualice lo siguiente:
- Ancho: 100%;
- Altura: 0px;
- Relleno: 0px arriba, 0px a la derecha
Esto básicamente asegura que la sección no ocupe ningún espacio real en la página. Pero debido a que la fila tiene una posición absoluta, aún se mostrará sobre la sección.
Por último, en la pestaña avanzada, actualice lo siguiente:
- Desbordamiento vertical: visible
- Desbordamiento horizontal: visible
- Posición pegajosa: Stick to Bottom
- Límite adhesivo superior: área del cuerpo
- Desplazamiento de los elementos pegajosos circundantes: NO
Resultado final
Observe cómo cambian los enlaces fijos de navegación cuando se desplaza hacia abajo en la página.
Observe lo fácil que es navegar a cada sección haciendo clic en los enlaces de navegación.
Y así es como se ve el diseño en el móvil.
Pensamientos finales
Los enlaces de navegación de páginas fijas que construimos en este tutorial deberían ser útiles para aquellos que buscan una alternativa efectiva al desplazamiento tradicional o que incluyen enlaces ancla en su encabezado global. Y puede duplicar fácilmente las secciones y actualizar los enlaces de anclaje (y los ID de CSS correspondientes para cada sección) para crear más contenido.
Para obtener los mejores resultados, cada sección debe tener suficiente contenido para extenderse más allá de la altura del navegador. De lo contrario, es posible que esos enlaces de anclaje no se vuelvan fijos (o visibles). Una manera fácil de asegurarse de que esto suceda es darle a cada una de sus secciones una altura mínima de 100vh. Si no le gusta eso, siempre puede optar por deshacerse de la opción adhesiva de transformación y traducción para cada una de las filas adhesivas para que los botones permanezcan visibles.
Espero escuchar de usted en los comentarios.
¡Salud!