Cómo ocultar su encabezado antes de desplazarse con las opciones adhesivas de Divi

Una sección de héroe es lo que llama la atención de su sitio web. Por lo general, establece el tono para el resto del sitio web y muestra a los visitantes lo que pueden esperar. Es por eso que puede ser útil asegurarse de que todo el enfoque esté en los pocos elementos que comparte en su sección de héroe, como la copia y la llamada a la acción. Pero el hecho de que desee resaltar la sección de héroe no significa que no necesite una barra de navegación también. Si está buscando una forma fácil de usar para revelar su encabezado una vez que las personas comiencen a desplazarse, le encantará esta publicación. Hoy, le mostramos cómo ocultar su encabezado antes de desplazarse usando las opciones adhesivas incorporadas de Divi. El efecto que estamos logrando es totalmente sensible y se ve muy bien en todos los tamaños de pantalla. ¡También podrá descargar el archivo JSON de plantilla de forma gratuita!

Hagámoslo.

Avance

Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Descargue la plantilla de encabezado GRATIS

Para poner sus manos en la plantilla de encabezado gratuita, primero deberá descargarla 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.

Descarga los archivos

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.

DESCARGAR

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!

Al cargar la plantilla en su Divi Theme Builder e ingresar a la plantilla, notará que la sección no está visible. Eso es porque el efecto ya se le aplica. Para modificar los diferentes elementos, puede cambiar al modo de estructura alámbrica y acceder a los elementos allí, o eliminar temporalmente la sección transform translate & main element settings y volver a colocarlos cuando haya terminado de modificar el diseño del encabezado.

1. Creación de la estructura del elemento de encabezado dentro de una nueva plantilla de encabezado

Crear nueva plantilla de encabezado global

Empiece por ir a Divi Theme Builder. Allí, comience a construir un nuevo encabezado global o personalizado.

Configuración de la sección

Color de fondo

Una vez dentro del editor de plantillas, verá una sección. Abra la configuración de la sección y cambie el color de fondo.

• Color de fondo: # 001b34

Espaciado

Vaya a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado a continuación.

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

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila usando la siguiente estructura de columnas:

Color de fondo

Sin agregar módulos todavía, abra la configuración de la fila y aplique un color de fondo de su elección.

• Color de fondo: # 001b34

Dimensionamiento

Vaya a la pestaña de diseño de la fila y cambie la configuración de tamaño en consecuencia:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ecualizar alturas de columna: Sí
• Ancho: 100%
• Ancho máximo: 100%

Espaciado

Continúe cambiando los valores de relleno en consecuencia:

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

Configuración de la columna 1

Color de fondo

Una vez que haya terminado con la configuración general de la fila, abra la configuración de la columna 1 y aplique un color de fondo.

• Color de fondo: # f4d5b8

Agregar módulo de menú a la columna 1

Seleccione el menú

Es hora de agregar módulos, comenzando con un Módulo de menú en la columna 1. Seleccione un menú de su elección.

Subir logotipo

Sube un logo a continuación.

Color de fondo

Luego, cambie el color de fondo.

• Color de fondo: # 063765

Imagen de fondo

Y cargue una imagen de fondo de ilustración de su elección. Puede encontrar y usar el siguiente descargando el obsequio al comienzo de esta publicación.

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

Configuración del texto del menú

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

• Tamaño del texto del menú: 18px

Configuración del menú desplegable

Luego, cambie la configuración del menú desplegable en consecuencia:

• Color de la línea del menú desplegable: rgba (0,0,0,0)
• Color de fondo del menú móvil: # ddc1a7
• Color del texto del menú móvil: # 063765

Configuración de iconos

Cambie los colores de los iconos en la configuración de los iconos a blanco también.

• Color del icono del carrito de compras: #ffffff
• Color del icono de búsqueda: #ffffff
• Color del icono del menú de hamburguesas: #ffffff

Dimensionamiento

Luego, modifique el ancho máximo del logotipo en la configuración de tamaño.

• Ancho máximo del logotipo: 70px

Espaciado

A continuación, aplique algunos valores de relleno personalizados.

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

Sombra de la caja

Junto con una sombra de caja personalizada.

• Fuerza de desenfoque de sombra de caja: 50px
• Color de sombra: rgba (0,0,0,0.3)

Transformar Traducir

Y complete la configuración del módulo modificando la configuración de traducción de transformación de la siguiente manera:

• Derecha:
  • Escritorio: 20px
  • Tableta y teléfono: 0px

Agregar módulo de botones a la columna 2

Agregar copia

En la columna 2, el único módulo que necesitamos es un módulo de botones. Agregue una copia de su elección.

Alineación de botones

Vaya a la pestaña de diseño y cambie la alineación de los botones.

• Alineación de botones: derecha

Configuración de botones

Luego, diseñe el botón en consecuencia:

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 16px
• Color del texto del botón: # 2a2a2a
• Color de fondo del botón: #ffffff
• Ancho del borde del botón: 0px
• Color del borde del botón: rgba (0,0,0,0)

• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: mayúsculas

Espaciado

Dale forma a tu botón usando también un relleno personalizado.

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

Sombra de la caja

A continuación, aplique una sombra de caja.

• Fuerza de desenfoque de sombra de caja: 30px
• Color de sombra: rgba (0,0,0,0.18)

Transformar Traducir

Y complete la configuración del módulo modificando los valores de conversión de transformación en consecuencia:

• Derecha:
  • Escritorio: 50px
  • Tableta y teléfono: 0px

2. Aplique efectos adhesivos personalizados para lograr el efecto Ocultar antes de desplazarse

Hacer fila en posición absoluta

Ahora que hemos establecido la base de nuestro encabezado, podemos aplicar el encabezado oculto antes del efecto de desplazamiento. Puede aplicar este efecto a cualquier encabezado que cree, siempre que siga los pasos a continuación. El primer paso es abrir la configuración de la fila y convertir la fila en absoluto. Esto nos ayudará a evitar que el encabezado en la parte superior de nuestra página ocupe espacio.

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

Hacer la sección pegajosa

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

• Posición adhesiva: adherirse a la parte superior
• Límite inferior de adherencia: Ninguno
• Desplazamiento de elementos pegajosos circundantes: Sí
• Transición de estilos predeterminados y pegajosos: Sí

Animación de sección

Agregaremos una animación a nuestra sección también. Esta animación ayudará a evitar que el encabezado se muestre cuando se esté cargando su página.

• Estilo de animación: Fade

Duración de la transición de la sección

Puede decidir por sí mismo qué tan lento o rápido se desliza el encabezado hacia abajo una vez que comienza a desplazarse modificando la duración de la transición en la pestaña avanzada de la sección. Cuanto mayor sea la duración, más lento se deslizará el encabezado hacia abajo.

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

Transformación de sección Traducir

Ahora, en un estado predeterminado, no queremos que el encabezado sea visible. El primer paso para lograrlo es ir a la configuración de transformación de la sección y usar un valor negativo para el eje Y.

• Derecha: -300px

Devolveremos este valor a cero en un estado pegajoso. Esto significa que tan pronto como comiences a desplazarte, el encabezado vuelve a ser visible.

• Adhesivo a la derecha: 0px

Propiedad CSS de visibilidad de sección

El siguiente y último paso de este tutorial no es teóricamente necesario para lograr el efecto, pero es una buena práctica ocultar los elementos que no están en uso. Es por eso que iremos a la pestaña avanzada de la sección y agregaremos la siguiente línea de código CSS en el cuadro del elemento principal:

• Elemento principal:

  visibility: hidden

Volveremos a cambiar nuestro contenido a visible en un estado fijo. ¡Eso es todo!

• Elemento principal pegajoso:

  visibility: visible;

Avance

Ahora que hemos seguido todos los pasos, echemos un vistazo final al resultado en diferentes tamaños de pantalla.

Escritorio

Móvil

Pensamientos finales

En esta publicación, le mostramos cómo asegurarse de que su sección de héroe sea el foco de su página tan pronto como las personas ingresen a su página. Más específicamente, le mostramos cómo ocultar su encabezado antes de desplazarse. Esto permite a sus visitantes procesar la información de la sección de héroe primero antes de que se les presente la capacidad de navegar. ¡También pudo descargar el archivo JSON gratis! Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.

Si está ansioso por aprender más sobre Divi y obtener más obsequios de Divi, asegúrese de suscribirse a nuestro boletín por correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener beneficios de este contenido gratuito.