Construye hermosos sitios web de WordPress usando Divi y Divi Builder

Cómo ocultar el encabezado mientras se desplaza hacia abajo en DIVI

Rifat Tutoriales Divi May 12, 2021

Un encabezado captura la esencia de un sitio web porque los usuarios pueden entender lo que obtendrán de este sitio web desde el encabezado. No sería erróneo llamarlo una especie de invitación que ayude a atraer a los visitantes. Si queremos resaltar la sección del héroe de nuestro sitio web, donde la barra de navegación superior crea una distracción, ¿deberíamos omitir la barra de navegación? ¡Nunca!

Con la opción pegajosa de Dos, podemos diseñar donde la sección del héroe de nuestro sitio web se mostrará sin la barra de navegación después de que se cargue el sitio web, y el desplazamiento desatará la barra de encabezados. Es una situación de ganar-ganar. ¿Pero cómo diseñar tales? Eso es lo que veremos hoy.

Vistazo

Vamos a echar un vistazo a nuestro resultado de diseño antes de saltar a la sección principal.

Construir: Estructura de encabezado

Crear encabezado global desde el tablero

Vaya a la opción "Builder Theme" debajo de DIVI desde su panel de control y elija "Crear encabezado global" de la opción que se muestra en la imagen.

Descargar Divi el mejor tema de WordPress

El tema de WordPress más popular en el mundo y el mejor constructor de páginas de Wordpress

Descargar DIVI

Configuración: Sección de encabezado global

Color de fondo

Después de seleccionar la plantilla de encabezado, vaya con la "Construir desde cero". Luego abra la opción de capa, y verá una sección pre-creada. Abra la configuración de la sección y cambie el fondo.

  • Color de fondo: # 002854

Espaciado

Bajo la pestaña de diseño, altere algunos valores de espaciado.

  • Relleno superior: 0px
  • Acolchado inferior: 0px

Nueva fila añadiendo

Estructura de columna

Agregue la siguiente fila que es una estructura de columna marcada en la sección.

Color de fondo

Antes de agregar cualquier módulo a esta fila, hagamos algunos ajustes. Comience con el color de fondo.

  • Color de fondo: # 002854

Dimensionamiento

Bajo la pestaña de diseño, cambie los valores de tamaño de la fila.

  • Use Ancho de canal personalizado: Sí
  • Ancho del canal: 1
  • Ecualizar las alturas de la columna: si
  • Ancho: 100%
  • Ancho máximo: 100%.

Espaciado

Ahora, cambia los valores de acolchado también.

  • Relleno superior: 0px
  • Acolchado inferior: 0px
  • Relleno izquierdo: tableta y teléfono: 5%
  • Acolchado derecho: Tableta y Teléfono: 5%

Configuración: Columna 1

Color de fondo

Después de diseñar toda la fila, comenzaremos a diseñar la columna 1. Primero agregaremos un color de fondo.

  • Color de fondo: # 85A8B2

Añadir: Módulo de menú a la columna 1

Selección de menú

Ahora, agregaremos un módulo de menú a la columna 1. Elija un menú de acuerdo con su elección.

Logo

Ahora, agregue un logo a su encabezado.

Color de fondo

Ahora agrega un color de fondo.

  • Color de fondo: # 063765

Imagen de fondo

Ahora agregue una imagen de su elección y haga los siguientes ajustes.

  • Tamaño de la imagen de fondo: ajuste
  • Posición de la imagen de fondo: Centro

Configuración: Texto del menú

Pase hacia la pestaña de diseño del módulo y cambie el tamaño del texto del menú.

  • Color de texto: #fffffff
  • Tamaño del texto del menú: 18px

Configuración: menú desplegable

Ahora, modifique la configuración del menú desplegable de la siguiente manera:

  • Menú desplegable Línea Color: RGBA (0,0,0,0)
  • Menú móvil Color de fondo: # DDC1A7
  • Menú móvil Color de texto: # 063765

Configuración: Icono

Ahora, gira todos los iconos blancos.

  • Color de la compra Color de la compra: #FFFFFFF
  • Color de icono de búsqueda: #FFFFFFF
  • Color del icono del menú de hamburguesa: #FFFFFFF

Dimensionamiento

Luego, modifique la configuración del tamaño del logotipo.

  • Logo Max Anchura: 70px

Espaciado

Haz algunos cambios en el relleno.

  • Relleno superior: 1%
  • Acolchado inferior: 1%
  • Acolchado izquierdo: 5%.
  • Acolchado derecho: 5%.

Sombra de la caja

Agregue algunos cambios en la sombra de la caja personalizada.

  • Box Shadow Blur Fuerza: 50px
  • Color de la sombra: RGBA (0,0,0,0.3)

Transformar traducir

Ahora, finalice la configuración del módulo modificando la transformación de la configuración de la siguiente manera:

AÑADIR: Módulo de botón a la columna 2

Configuración del módulo de botón

Agregue el módulo de botón a la columna 2 y agregue un poco de texto de su elección.

Alineación de botones

Desde la pestaña de diseño, cambie la alineación del botón.

  • Alineación de botones: derecha

Configuración de botones

Luego, cambie el estilo del botón en consecuencia.

  • Utilice estilos personalizados para el botón: Sí
  • Tamaño del texto del botón: 16px
  • Botón de texto de texto: # 2A2A2A
  • Botón de fondo Color: #FFFFFFF
  • Botón de ancho de borde: 0px
  • Botón Frontera Color: RGBA (0,0,0,0)
  • Botón Peso de fuente: negrita
  • Botón Estilo de fuente: mayúsculas

Espaciado

Agregue un relleno personalizado para hacer forma al botón.

  • Relleno superior: 20px
  • Acolchado inferior: 20px
  • Relleno izquierdo: 40px
  • Relleno derecho: 40px

Sombra de la caja

Ahora vamos a agregar un cuadro Shadow (marcado uno).

  • Box Shadow Blur Fuerza: 30px
  • Color de la sombra: RGBA (0,0,0,0.18)

Transformar traducir

Casi estamos terminados con el módulo. Termínalo con algunos ajustes en la sección Transformación.

AÑADIR: Efectos pegajosos al encabezado

Configuración de la fila

Hemos completado la construcción de nuestra estructura de sección de encabezado. Ahora le agregaremos un efecto pegajoso. Para esto, necesitamos cambiar algunos valores de la configuración de la fila.

Posición

Primero, haz los ajustes de posición.

  • Posición: Absolute
  • Ubicación: arriba a la izquierda

Configuración pegajosa - Efectos de desplazamiento

A continuación, abriremos la configuración de la sección y permitiremos que se pegue a la parte superior.

  • Posición pegajosa: pegarse al principio
  • Límite pegajoso inferior: ninguno
  • Desplazamiento de los elementos pegajosos circundantes: si
  • Transición de los estilos predeterminados y pegajosos: Sí

Animación

Ahora agregaremos una animación para que los visitantes no vean el encabezado durante la carga de la página.

  • Estilo de animación: Fade

Duración de la transición

Al cambiar el valor de la transición, seleccionaremos qué tan rápido o lento será el encabezado durante el desplazamiento.

  • Duración de la transición: 800 ms

Transformar traducir

Dado que no queremos mostrar nuestros encabezados inicialmente, agregaremos un valor negativo al eje y de la configuración de transformación.

  • Derecha: -300px

Ahora, desde la configuración pegajosa, haga el valor 0 de nuevo. Significa, nos mostrará el menú tan pronto comenzamos a desplazarse.

  • Sticky derecha: 0px

Propiedad CSS para visibilidad

En esta sección, agregaremos una propiedad CSS para ocultar los elementos que no se están utilizando. Cabe señalar que esta no es una tarea obligatoria, pero es una buena idea hacer esto.

visibility: hidden;

Ahora volveremos a hacer que nuestro menú sea visible en un estado pegajoso.

visibility: visible;

Resultado final

Como hemos hecho todos los pasos con éxito, aquí está nuestro resultado final.

Ultimas palabras

En el tutorial de hoy, hemos visto cómo hacer que los visitantes se centren en la sección del héroe y trabajamos en la barra de navegación con respecto a la visibilidad. DIVI es un gran tema con características incorporadas que nos permiten diseñar algo único y divertido. Esperamos que le guste la publicación de hoy y, si tiene alguna pregunta y pregunta, por favor, siéntase libre de preguntar en la sección de comentarios.