[Ad_1]
Vamos a empezar!
vista
Para ayudarlo a visualizar el resultado que estamos tratando de lograr, veamos el resultado final:
Descarga el diseño GRATIS
Para tener en sus manos los diseños de este tutorial, primero deberá descargarlo usando el botón a continuación. Para acceder a la descarga, deberá suscribirse a nuestra lista de correo Divi Daily utilizando el formulario debajo. Como nuevo suscriptor, ¡recibirás aún más beneficios de 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.
Para importar el diseño de la sección a su biblioteca Divi, vaya a 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 para descargar desde su computadora.
Luego haga clic en el botón Importar.
Una vez hecho esto, el diseño de las secciones estará disponible en Divi Builder.
Vamos al tutorial, ¿quieres?
Lo que necesitas para empezar
Para comenzar, deberá hacer lo siguiente:
- Si aún no lo ha hecho, instale y active el Tema divi.
- 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.
Cree una barra de navegación pegajosa de abajo hacia arriba en Divi
Parte 1: Creación de la sección y el encabezado sobre la línea de flotación
Para la primera parte de este tutorial, crearemos la sección y el encabezado sobre la línea de flotación que servirá como la sección de encabezado principal de nuestra página. La sección será de pantalla completa en el escritorio para asegurar que la sección ocupe toda la ventana.
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: [agregar imagen]
En la pestaña Diseño, actualice la altura mínima y el acolchado.
- Altura mínima: 100 vh (computadora de escritorio), automático (tableta y teléfono)
- Acolchado: 20vh superior, 20vh 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 de Configuración de texto, actualice los Estilos de fuente de encabezado de la siguiente manera:
- Fuente del título: 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 título: # 302ea7
- Tamaño del texto del título: 130 px (escritorio), 70 px (tableta), 40 px (teléfono)
- Espaciado entre letras del encabezado: 2px
- Altura de la línea de rumbo: 1,3 em
Parte 2: Creando la sección debajo del pliegue
Para demostrar la funcionalidad de la barra de navegación fija, necesitamos agregar una sección debajo del pliegue para que podamos tener espacio para desplazarnos.
Para crear la sección, duplique la sección sobre la línea de flotación 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 desplazar la página. Esta es solo una sección para completar en lugar del contenido real de una página.
Luego actualice el contenido del módulo de 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.
Agregar una nueva sección y una nueva línea
Agregue una nueva sección regular directamente debajo de la sección sobre la línea de flotación.
Luego agregue una fila a una columna de 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, quite 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 el móvil
El menú desplegable móvil se abrirá de forma predeterminada debajo del icono de hamburguesa. Si mantenemos la barra de navegación en la parte inferior, ocultaría el menú desplegable si el usuario hace clic en él en la posición hacia abajo. 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, asigne a la sección una posición absoluta en la tableta y el teléfono.
- Posición: Relativo (computadora de escritorio), Absoluto (tableta y teléfono)
Agregar posición fija para escritorio y móvil
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: 10 píxeles en la parte superior, 10 píxeles en la parte inferior
Crea un 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ú de la lista desplegable
- agregar imagen de logotipo (estoy usando una imagen de 122px por 52px)
- eliminar el color de fondo predeterminado
En la pestaña Diseño, actualice la siguiente configuración de íconos y texto del menú:
- Color del 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 del texto: derecha
- Color de 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 resolver este problema, 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 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.
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 tanto en la tableta como en 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 ya que solo sirve para empujar la sección hacia abajo para que no se corte.
Resultado final
¡Descubre el resultado final!
Consideraciones finales
La creación de una barra de navegación pegajosa de abajo hacia arriba se puede lograr fácilmente usando la posición integrada de Divi y las 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. Con suerte, esto ayudará a agregar un aspecto más exclusivo y atractivo por encima de la línea de flotación 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 que usan el generador. Tema divi.
Espero tener noticias tuyas en los comentarios.
¡A vuestra salud!
[Ad_2]
