Cómo crear una barra de navegación fija de abajo hacia arriba en Divi
Publicado: 2021-09-06En el tutorial de Divi de hoy, le mostraremos, paso a paso, cómo crear una barra de navegación adhesiva de abajo hacia arriba en Divi. Esto permitirá que la barra de navegación se quede en la parte inferior de la página inicialmente para obtener un diseño único en la parte superior de la página. Luego, una vez que se desplace más allá de la sección superior de la página, la barra de navegación se pegará en la parte superior de la página y permanecerá allí durante el resto de la página. Se podría decir que la página "recogerá" el menú en la parte inferior de la pantalla y traerá un efecto de interacción agradable a su menú principal y a su sitio web.
¡Empecemos!
Vistazo
Para ayudarlo a visualizar el resultado que estamos tratando de lograr, echemos un vistazo al resultado final:
Descarga el diseño GRATIS
Para poner sus manos sobre 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 nuestra lista de correo electrónico Divi Daily mediante 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 se le “volverá a suscribir” ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín 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 toneladas de otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguelo y serás un maestro de 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.
Te has suscripto satisfactoriamente. ¡Verifique su dirección de correo electrónico para confirmar su suscripción y obtenga acceso a paquetes de diseño Divi semanales gratuitos!
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 ha hecho, instale y active Divi Theme.
- Cree una nueva página en WordPress y use Divi Builder para editar la página en el front-end (constructor visual).
- Elija la opción "Construir desde cero".
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Creación de una barra de navegación fija de abajo hacia arriba en Divi
Parte 1: Creación de la sección y el encabezado de la parte superior del pliegue
Para la primera parte de este tutorial, crearemos la sección de la mitad superior de la página y el encabezado que servirá como la sección de encabezado principal de nuestra página. La sección será de pantalla completa en el escritorio para asegurarse de que ocupa toda la ventana gráfica.
Añadir fila
Para comenzar, agregue una fila de una columna a la sección predeterminada.
Configuración de la sección
Antes de agregar un módulo, abra la configuración de la sección y agregue un fondo de la siguiente manera:
- Color de fondo: # e9f9ff
- Imagen de fondo: [agregar imagen]
En la pestaña de diseño, actualice la altura mínima y el relleno.
- Altura mínima: 100vh (escritorio), automático (tableta y teléfono)
- Acolchado: 20vh arriba, 20vh abajo
Texto de encabezado
Para crear el texto del encabezado, agregue un nuevo módulo de texto a la fila.
Luego actualice el contenido con el siguiente encabezado H1:
<h1>Above the Fold</h1>
Configuración de texto
En la pestaña de diseño de la configuración de texto, actualice los estilos de fuente de encabezado de la siguiente manera:
- Fuente de encabezado: Rubik
- Peso de la fuente del encabezado: Semi negrita
- Estilo de fuente de encabezado TT
- Alineación del texto del encabezado: centro
- Color del texto del encabezado: # 302ea7
- Tamaño del texto del encabezado: 130 px (escritorio), 70 px (tableta), 40 px (teléfono)
- Espaciado entre letras del encabezado: 2px
- Altura de la línea de rumbo: 1.3em
Parte 2: Creación de la sección debajo del pliegue
Para demostrar la funcionalidad de la barra de navegación adhesiva, necesitamos agregar una sección debajo de la página para que podamos tener algo de espacio para desplazarnos.
Para crear la sección, duplique la sección superior que acabamos de crear.
Actualice el fondo de la sección duplicada.
- Color de fondo: # f4def1
Luego, dale a la sección una altura mínima grande para que tengamos espacio para desplazarnos hacia abajo en la página. Esta es solo una sección para completar en lugar del contenido real de una página.
- Altura mínima: 200vh
Luego actualice el contenido del módulo de texto reemplazando la palabra "Abajo" por "Arriba".
Parte 3: Creación de la barra de navegación adhesiva
Para crear la barra de navegación adhesiva de abajo hacia arriba, nuestro primer paso es crear una nueva sección con una fila de una columna.
Agregar nueva sección y fila
Agregue una nueva sección regular directamente debajo de la sección superior.
Luego agregue una fila de una columna a la sección.
Fondo de sección y relleno
Abra la configuración de la sección y actualice el color de fondo.
- Color de fondo: # 302ea7
Luego saque el acolchado superior e inferior para que la barra de navegación tenga menos altura.
- Relleno: 0px arriba, 0px abajo
Agregar desbordamiento visible
Para asegurarse de que los menús desplegables permanezcan visibles, actualice las opciones de visibilidad de la siguiente manera:
- Desbordamiento horizontal: visible
- Desbordamiento vertical: visible
Dar a la sección una posición absoluta en los dispositivos móviles
El menú desplegable móvil se abrirá debajo del icono de hamburguesa de forma predeterminada. Si mantenemos la barra de navegación en la parte inferior, esto ocultaría el menú desplegable si el usuario hace clic en él en la posición inferior. Para una mejor experiencia de usuario, queremos que la barra de navegación comience en la parte superior de la página en la pantalla de la tableta y el teléfono.
Para hacer esto, dé a la sección una posición absoluta en la tableta y el teléfono.
- Posición: Relativo (escritorio), Absoluto (tableta y teléfono)
Agregar posición fija para computadoras de escritorio y dispositivos móviles
Para agregar la posición fija a la sección de la barra de navegación, actualice lo siguiente:
- Posición fija: adherirse a la parte superior e inferior (escritorio), adherirse a la parte superior (tableta y teléfono)
Actualizar relleno de filas
Una vez que la sección adhesiva esté completa, abra la configuración de la fila dentro de la sección y actualice el relleno de la siguiente manera:
- Relleno: 10 píxeles en la parte superior, 10 píxeles en la parte inferior
Crear menú de navegación
Con la sección y la fila en su lugar, estamos listos para crear el menú de navegación.
Comience agregando un módulo de menú a la fila de una columna.
Contenido del menú
Actualice el contenido del menú de la siguiente manera:
- seleccione el menú del menú desplegable
- agregar imagen de logotipo (estoy usando una imagen de 122 px por 52 px)
- quitar el color de fondo predeterminado
En la pestaña de diseño, actualice el siguiente texto del menú y la configuración de los iconos:
- Color de enlace activo: #fff
- Fuente del menú: Rubik
- Estilo de fuente del menú: TT
- Color del texto del menú: #fff
- Tamaño del texto del menú: 16px
- Alineación de texto: derecha
- Color de la línea del menú desplegable: # e19dff
- Color del texto del menú móvil: # 302ea7
- Color del icono del carrito de compras: #fff
- Color del icono de búsqueda: #fff
- Color del icono del menú de hamburguesas: #fff
Uso de un borde para compensar la posición absoluta de la barra de navegación en el dispositivo móvil
Debido a que la sección de la barra de navegación tiene una posición absoluta en el móvil, la barra se ubicará encima (y cortará) la sección superior de la página. Para solucionar este problema, necesitamos compensar la sección superior con un borde superior que tenga la misma altura que la barra / sección de navegación.
Inspeccionar la altura de la sección de la barra de navegación en un dispositivo móvil
Para determinar la altura de la barra de navegación en el dispositivo móvil, abra una versión en vivo de la página en una nueva ventana del navegador. Luego, puede reducir el ancho del navegador por debajo de 980px para ver el menú móvil. Haga clic con el botón derecho en la sección que contiene el menú y elija la opción inspeccionar elemento en el menú contextual del navegador. Debería ver una caja de herramientas debajo de la sección que muestra las dimensiones (incluida la altura) de la sección. Para este ejemplo, la altura de la sección de la barra de navegación es 72px.
Agregar desplazamiento de borde superior a la sección sobre el pliegue
Ahora que hemos determinado la altura de la sección, abra la configuración de la sección superior (arriba del pliegue).
Debajo de la pestaña de diseño, agregue el siguiente borde superior en la tableta y el teléfono:
- Ancho del borde superior: 72 px (tableta y teléfono)
- Color del borde superior: # 302ea7
Debido a que el borde tiene la misma altura que la sección con la posición absoluta, no podrá ver el borde porque solo sirve para empujar la sección hacia abajo para que no se corte.
Resultado final
¡Mira el resultado final!
Pensamientos finales
La creación de una barra de navegación adhesiva de abajo hacia arriba se puede lograr fácilmente utilizando la posición incorporada de Divi y las opciones adhesivas. La clave es darle a la sección superior de la página una altura de 100vh y luego agregar la sección de la barra de navegación debajo que se adhiere a la parte inferior y superior del navegador. Con suerte, esto ayudará a agregar una parte superior de la página más única y atractiva a su sitio web.
Esta barra de navegación adhesiva funciona mejor para un diseño de página única en lugar de una plantilla global. Dicho esto, puede elegir usar esto fácilmente como un diseño de página de inicio y usar un encabezado global para el resto de las páginas usando el generador de temas Divi.
Espero tener noticias tuyas en los comentarios.
¡Salud!