¿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:

cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página
cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página
cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página

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.

Divi líneas convertidas en pestañas

Dale un título que tenga sentido para ti y haz clic en Utilice Divi Builder

cromo DIFOkff33Y

A continuación, haga clic Empezar a construir (Construir desde cero)

Divi líneas convertidas en pestañas

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.

barra de navegación Divi pegajosa de abajo hacia arriba

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]
barra de navegación Divi pegajosa de abajo hacia arriba

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)
barra de navegación Divi pegajosa de abajo hacia arriba

Texto de cabecera

Para crear el texto del encabezado, agregue un nuevo módulo de texto a la línea.

barra de navegación Divi pegajosa de abajo hacia arriba

Luego actualice el contenido con el siguiente encabezado H1:

<h1>Above the Fold</h1>
barra de navegación Divi pegajosa de abajo hacia arriba

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
barra de navegación Divi pegajosa de abajo hacia arriba

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.

barra de navegación Divi pegajosa de abajo hacia arriba

Actualice el fondo de la sección duplicada.

  • Color de fondo: #f4def1
barra de navegación Divi pegajosa de abajo hacia arriba

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
barra de navegación Divi pegajosa de abajo hacia arriba

Luego actualice el contenido del módulo Texto reemplazando la palabra "Abajo" por "Arriba".

barra de navegación Divi pegajosa de abajo hacia 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.

barra de navegación Divi pegajosa de abajo hacia arriba

A continuación, agreguemos una fila de una columna a la sección.

barra de navegación Divi pegajosa de abajo hacia arriba

Fondo de sección y relleno

Abra la configuración de la sección y actualice el color de fondo.

  • Color de fondo: #302ea7
barra de navegación Divi pegajosa de abajo hacia arriba

Luego retire el relleno superior e inferior para que la barra de navegación tenga menos altura.

  • Relleno: 0px (superior e inferior)
barra de navegación Divi pegajosa de abajo hacia arriba

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
barra de navegación Divi pegajosa de abajo hacia arriba

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)
barra de navegación Divi pegajosa de abajo hacia arriba

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)
barra de navegación Divi pegajosa de abajo hacia arriba

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)
barra de navegación Divi pegajosa de abajo hacia arriba

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.

barra de navegación Divi pegajosa de abajo hacia arriba
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
barra de navegación Divi pegajosa de abajo hacia arriba

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
barra de navegación Divi pegajosa de abajo hacia arriba

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.

barra de navegación Divi pegajosa de abajo hacia arriba

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.

barra de navegación Divi pegajosa de abajo hacia arriba

Resultado final

¡Descubre el resultado final!

cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página
cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página
cree una barra de navegación en Divi que sea pegajosa de abajo hacia arriba en la página

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.

...