¿Le gustaría crear una barra de navegación en Divi que sea fija desde la parte inferior hasta la parte superior de la página?
en el tutorial Divi Hoy le mostraremos paso a paso cómo crear una barra de navegación fija de abajo hacia arriba en Divi.
Esto permitirá que la barra de navegación permanezca inicialmente en la parte inferior de la página para un diseño único en la parte superior de la página. Luego, una vez que se desplace por la sección sobre el pliegue de la página, la barra de navegación permanecerá en la parte superior de la página y permanecerá allí durante toda la página.
Podría decir que la página "se hará cargo" del menú en la parte inferior de la pantalla y traerá un agradable efecto de interacción a su menú principal y su Sitio web.
¡Empecemos!
vista
Para ayudarlo a visualizar el resultado que estamos tratando de lograr, veamos el resultado final:
Descarga DIVI ahora!!!
Comencemos creando una nueva página con Divi Builder
Para comenzar, deberá hacer lo siguiente:
Desde el tablero de WordPress, vaya a Páginas> Agregar nuevo para crear una nueva página.
Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder
A continuación, haga clic Empezar a construir (Construir desde cero)
Después de eso, tendrá un lienzo en blanco para comenzar a diseñar en Divi.
Cree una barra de navegación pegajosa de abajo hacia arriba en Divi
Parte 1: Creación de la sección y el encabezado por encima de la línea de flotación
Para la primera parte de este tutorial, crearemos la sección y el encabezado sobre el pliegue que servirá como la sección de encabezado principal de nuestra página. La sección aparecerá en pantalla completa en el escritorio para garantizar que la sección ocupe toda la ventana de visualización.
Lea también: Divi: elija entre la cuadrícula y el diseño de ancho completo del módulo de cartera filtrable
Agregar una fila
Para comenzar, agregue una fila a una columna de la sección predeterminada.
Configuraciones de 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: [añadir imagen]
En la pestaña Diseño, actualice la altura mínima y el relleno.
- Altura mínima: 100vh (escritorio), automático (tableta y teléfono)
- Acolchado: 20vh (superior e inferior)
Texto de cabecera
Para crear el texto del encabezado, agregue un nuevo módulo de texto a la línea.
Luego actualice el contenido con el siguiente encabezado H1:
<h1>Above the Fold</h1>
Configuraciones de texto
En la pestaña Diseño en la configuración del módulo de texto, actualice los estilos de fuente del encabezado de la siguiente manera:
- Bóveda:
- Fuente: Rubí
- Peso de fuente: semi negrita
- Estilo: TT
- Alineación de texto: centrado
- Color del texto: #302ea7
- Tamaño: 130 px (escritorio), 70 px (tableta), 40 px (teléfono)
- Espaciado entre letras: 2px
- Altura de la línea: 1,3 cm
Parte 2: Crear la sección debajo de la línea de flotación
Para demostrar la funcionalidad de la barra de navegación adhesiva, debemos agregar una sección debajo del pliegue para que podamos tener espacio para desplazarnos.
Para crear la sección, duplique la sección sobre el pliegue que acabamos de crear.
Actualice el fondo de la sección duplicada.
- Color de fondo: #f4def1
Luego, déle a la sección una altura mínima grande para que tengamos espacio para desplazarnos hacia abajo en la página. Esta es simplemente una sección que debe completarse en lugar de la contenido una página real.
- Altura mínima: 200vh
Luego actualice el contenido del módulo Texto reemplazando la palabra "Abajo" por "Arriba".
Parte 3: crea 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 a una columna.
Añadida nueva sección y línea.
Primero, agreguemos una nueva sección normal directamente debajo de la sección superior del pliegue.
A continuación, agreguemos 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 retire el relleno superior e inferior para que la barra de navegación tenga menos altura.
- Relleno: 0px (superior e inferior)
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 el móvil
El menú desplegable móvil se abrirá de forma predeterminada bajo el ícono de la hamburguesa. Si mantenemos la barra de navegación en la parte inferior, ocultaría el menú desplegable si el usuario hace clic en él.
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 ello, dale a la sección una posición absoluta en tablet y teléfono.
- Posición: relativa (Escritorio), Absoluta (Tableta y Teléfono)
Agregue una 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 el 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: 10px (superior e inferior)
Crea un menú de navegación
Con la sección y la línea 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ú de la lista desplegable
- añadir imagen de logotipo
- eliminar el color de fondo predeterminado
En la pestaña Diseño, actualice el siguiente texto del menú y la configuración de los iconos:
- Color del enlace activo: #fff
- Fuente del menú: rubí
- Estilo de fuente del menú: TT
- Color del texto: #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
Usar un borde para compensar la posición absoluta de la barra de navegación en el móvil
Dado 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 arreglar esto, necesitamos compensar la sección superior usando un borde superior de 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 el móvil
Para determinar la altura de la barra de navegación en dispositivos móviles, 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 980 px para ver el menú móvil.
También puedes consultar: Divi: Cómo crear una barra de navegación pegajosa
Haga clic derecho en la sección que contiene el menú y elija la opción inspeccionar el elemento en el menú contextual del navegador. Deberías ver una caja outils debajo de la sección indicando 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 de 72 píxeles.
Agregue un desplazamiento del 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).
En la pestaña Diseño, agregue el siguiente borde superior en la tableta y el teléfono:
- Ancho del borde superior: 72 píxeles (tableta y teléfono)
- Color del borde superior: #302ea7
Dado 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
¡Descubre el resultado final!
Descarga DIVI ahora!!!
Conclusión
La creación de una barra de navegación pegajosa de abajo hacia arriba se puede hacer fácilmente usando la posición integrada de Divi y opciones pegajosas.
La clave es darle a la sección sobre el pliegue una altura de 100vh, luego agregar la sección de la barra de navegación debajo que se adhiere a la parte inferior y superior del navegador. Espero que esto ayude a agregar una parte superior más única y atractiva a su Sitio web.
Esta barra de navegación pegajosa funciona mejor para un diseño de una sola página que para una plantilla general. Dicho esto, puede elegir fácilmente usar esto como el diseño de su página de inicio y usar un encabezado global para el resto de las páginas usando el Generador de temas Divi .
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet.
No dudes en consultar también nuestra guía sobre la Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...