Cómo crear un encabezado fijo con las opciones fijas de Divi

La forma en que usamos Divi Theme Builder al configurar un sitio web ha acelerado nuestro flujo de trabajo y ha facilitado todo. Aunque pudimos crear encabezados personalizados desde el primer día desde que salió Divi Theme Builder, una cosa se ha solicitado continuamente, que es poder crear un encabezado fijo sin usar código adicional. Con las nuevas opciones adhesivas de Divi, crear un encabezado adhesivo se ha vuelto más fácil que nunca. La configuración adhesiva que proporciona Divi lo ayudará sin esfuerzo a convertir cualquier elemento de diseño en adhesivo y asignar estilos personalizados a un estado adhesivo, lo que resulta en un sinfín de posibilidades de diseño y experiencia del usuario.

En este tutorial, le mostraremos cómo crear un encabezado fijo que contenga lo siguiente:

• El encabezado que estamos creando tiene una barra de encabezado superior + una barra de menú
• Estamos volviendo pegajosa la sección que contiene la barra de menú cuando pasa por ella, tan pronto como regrese a la parte superior, la barra de encabezado aparece nuevamente
• Cambiaremos los estilos de diseño de la sección adhesiva (y sus elementos) una vez que la sección se vuelva adhesiva

¡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 global GRATIS

Para tener en sus manos la plantilla de encabezado global 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!

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

Crear nueva plantilla de encabezado global

Vaya a Divi Theme Builder y comience a crear un nuevo encabezado global o personalizado.

Configuración de la sección # 1

Fondo degradado

Una vez dentro del editor de plantillas, comenzaremos construyendo la estructura de elementos de nuestro encabezado. En la segunda parte de este tutorial, nos centraremos en aplicar las diferentes configuraciones adhesivas para completar nuestro diseño de encabezado adhesivo. Dentro del editor de plantillas, verá una sección. Abra esa sección y aplique un fondo degradado.

• Color 1: # ffba60
• Color 2: # ffd6a0
• Dirección del gradiente: 90 grados
• Posición inicial: 50%
• Posición final: 50%

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

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

Agregar nueva fila

Estructura de la columna

Para crear nuestra barra de encabezado superior, agregaremos una nueva fila a nuestra sección usando la siguiente estructura de columnas:

Dimensionamiento

Sin agregar ningún módulo todavía, abra la configuración de fila y modifique la configuración de tamaño de la siguiente manera:

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho: 95%
• Ancho máximo: 2580px

Espaciado

Agregue un poco de acolchado superior e inferior personalizado también.

• Acolchado superior: 15px
• Acolchado inferior: 15px

CSS del elemento principal

Y para asegurarnos de que las columnas permanezcan una al lado de la otra en tamaños de pantalla más pequeños, agregaremos una línea de código CSS al elemento principal de la fila en la pestaña avanzada.

display: flex;

Agregue el módulo de seguimiento de redes sociales a la columna 1

Agregue las redes sociales de su preferencia

Es hora de agregar módulos, comenzando con un Módulo de seguimiento de redes sociales en la columna 1. Agregue las redes sociales de su elección junto con sus enlaces correspondientes.

Eliminar el color de fondo de cada red social

Continúe eliminando cada uno de los colores de fondo de la red social individualmente.

Configuración de iconos

Luego, regrese a la configuración general del módulo y cambie el color del icono en la pestaña de diseño.

• Color del icono: # 26333a

Espaciado

Agregue un poco de margen superior también.

• Margen superior: 5px

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.

Añadir enlace

Agregue un enlace a continuación.

Alineación de botones

Luego, pase a la pestaña de diseño y cambie la alineación del botón.

• Alineación de botones: derecha

Configuración de botones

También estamos diseñando el botón.

• Usar estilos personalizados para el botón: Sí
• Tamaño del texto del botón: 14px
• Color del texto del botón: # 26333a
• Ancho del borde del botón: 2px
• Color del borde del botón: # 26333a
• Radio del borde del botón: 0px

• Espacio entre letras del botón: 4px
• Peso de la fuente del botón: negrita
• Estilo de fuente del botón: mayúsculas
• Mostrar botón: Sí

Espaciado

Y completaremos la configuración del módulo agregando algo de relleno superior e inferior a la configuración de espaciado.

• Acolchado superior: 10px
• Acolchado inferior: 10px

Agregar sección n. ° 2

Fondo degradado

Agregue otra sección regular justo debajo de la anterior. Esta sección estará dedicada a nuestro menú y se volverá pegajosa en la segunda parte de este tutorial. Una vez que haya agregado la sección, aplique un fondo degradado.

• Color 1: #ffffff
• Color 2: # f7f7f7
• Tipo de degradado: lineal
• Dirección del gradiente: 90 grados
• Posición inicial: 25%
• Posición final: 25%

Espaciado

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

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

Agregar nueva fila

Estructura de la columna

Continúe agregando una nueva fila a la sección usando la siguiente estructura de columnas:

Dimensionamiento

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

• Usar ancho de canalón personalizado: Sí
• Ancho de la canaleta: 1
• Ancho máximo: 2580px

Espaciado

A continuación, elimine todo el acolchado superior e inferior predeterminado.

• Acolchado superior: 10px
• Acolchado inferior: 10px

Agregar módulo de menú a la columna

Seleccione el menú

Luego, agregue un Módulo de menú a la columna de la fila y seleccione un menú dinámico de su elección.

Subir logotipo

Sube un logo a continuación.

Eliminar color de fondo

Luego, elimine el color de fondo blanco predeterminado del módulo.

Configuración del texto del menú

Vaya a la pestaña de diseño y diseñe también la configuración del texto del menú.

• Peso de la fuente del menú: negrita
• Color del texto del menú: # 002d4c
• Tamaño del texto del menú: 15px
• Espaciado de letras del menú: 4px
• Alineación de texto: derecha

Configuración de texto del menú desplegable

Luego, realice algunos cambios en la configuración del menú desplegable.

• Color de fondo del menú desplegable: #ffffff
• Color de la línea del menú desplegable: # 002d4c

Configuración de iconos

Junto con la configuración de los iconos.

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

Dimensionamiento

Y complete la configuración del módulo agregando una altura máxima de logotipo a la configuración de tamaño.

• Altura máxima del logotipo: 60 px

2. Aplicar efectos adhesivos personalizados

Gire la sección # 2 pegajosa

Ahora que hemos creado la estructura de elementos de nuestro encabezado, es hora de convertir nuestra segunda sección en pegajosa y cambiar el estilo de diseño de la misma y sus elementos en un estado fijo. Abra la configuración de la segunda sección y pase a la pestaña avanzada. Allí, vaya a la configuración de efectos de desplazamiento y aplique las siguientes opciones adhesivas:

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

Cambiar el fondo degradado de la sección en estado fijo

Ahora que nuestra sección se ha vuelto pegajosa, aparecerá una opción adicional dentro de nuestra configuración de sección, fila y módulo; la opción pegajosa. Al hacer clic en este icono, podrá crear un estilo alternativo para el elemento que ha seleccionado mientras está en un estado fijo. Vamos a combinar un par de estas configuraciones de diseño adhesivas para personalizar la apariencia de nuestro encabezado adhesivo en el desplazamiento. Comience por ir a la configuración de fondo de la segunda sección y aplique el siguiente fondo degradado adhesivo:

• Color 1: # 26333a
• Color 2: # 1e272f

Estirar fila en estado pegajoso

A continuación, abriremos la fila que contiene el Módulo de menú y modificaremos el ancho en un estado fijo.

• Ancho: 95%

Eliminar relleno de fila en estado pegajoso

También eliminaremos el relleno adhesivo superior e inferior de nuestra fila.

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

Cambiar el color del texto del menú en estado fijo

A continuación, cambiaremos el color del texto del menú en un estado fijo.

• Color del texto del menú: # ffbd68

Cambiar los colores de los iconos del menú en estado fijo

Junto con los colores de los iconos.

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

Eliminar la altura del logotipo en estado adhesivo

Y por último, pero no menos importante, cambiaremos la altura máxima del logotipo a cero en un estado pegajoso. Esto eliminará el logotipo de nuestro encabezado por completo una vez que la configuración adhesiva de la sección esté habilitada. ¡Eso es todo! Asegúrese de guardar todos los cambios de Divi Theme Builder una vez que haya completado el diseño de su encabezado y obtenga una vista previa en su sitio web.

• Altura máxima del logotipo: 0px

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 crear un encabezado adhesivo usando el Generador de temas de Divi y las opciones adhesivas. Tan pronto como la sección que contiene nuestro menú se vuelva pegajosa, también aplicaremos estilos personalizados. Estas opciones son posibles gracias a las nuevas opciones adhesivas de Divi que le brindan innumerables posibilidades para mejorar la experiencia del usuario y el diseño que crea. ¡También pudo descargar la plantilla de encabezado global de forma gratuita! 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.