La forma en que usamos Divi y su Theme Builder cuando configuramos un sitio web ha acelerado nuestro flujo de trabajo y lo ha hecho todo más fácil. 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 fijas de Divi, crear un encabezado fijo se ha vuelto más fácil que nunca. La configuración pegajosa que proporciona Divi lo ayudará sin esfuerzo a convertir cualquier elemento de diseño en pegajoso y asignar estilos personalizados a un estado pegajoso, lo que da como resultado infinitas posibilidades de diseño y experiencia de usuario.
En este tutorial, le mostraremos cómo crear un encabezado adhesivo 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 pasas por ella, tan pronto como vuelves a la parte superior, la barra de encabezado vuelve a aparecer.
- Estamos cambiando los estilos de diseño de la sección fija (y sus elementos) una vez que la sección se vuelve fija
¡Hagámoslo!
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 poner sus manos en 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 nuestro boletín utilizando 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 será «resuscrito» ni recibirá correos electrónicos adicionales.
Descárgalo gratis
Únase al boletín informativo 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 muchos otros recursos, consejos y trucos increíbles y gratuitos de Divi. Síguenos y serás un maestro 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.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
1. Construcció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 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ás una sección. Abre esa sección y aplica un fondo degradado.
- Color 1: #ffba60
- Color 2: #ffd6a0
- Dirección del gradiente: 90 grados
- Posición inicial: 50%
- Posición final: 50%
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 0px
- Relleno 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 la fila y modifique la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Ancho del canalón: 1
- Ancho: 95%
- Ancho máximo: 2580px
Espaciado
Agregue un poco de relleno superior e inferior personalizado también.
- Relleno superior: 15px
- Relleno inferior: 15px
Elemento principal CSS
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.
|
01
|
display: flex; |
Agregar Redes Sociales de Elección
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 copia
En la columna 2, el único módulo que necesitamos es un módulo de botones. Agregue alguna copia de su elección.
Añadir enlace
Agregue un enlace a continuación.
Alineación de botones
Luego, ve a la pestaña de diseño y cambia la alineación de los botones.
- 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
- Espaciado entre letras de botones: 4px
- Peso de la fuente del botón: Negrita
- Estilo de fuente del botón: Mayúsculas
- Botón Mostrar: Sí
Espaciado
Y completaremos la configuración del módulo agregando un poco de relleno superior e inferior a la configuración de espaciado.
- Relleno superior: 10px
- Relleno inferior: 10px
Añadir Secció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á fija 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 gradiente: lineal
- Dirección del gradiente: 90 grados
- Posición inicial: 25%
- Posición final: 25%
Espaciado
Pase a la pestaña de diseño de la sección y elimine todo el relleno superior e inferior predeterminado.
- Relleno superior: 0px
- Relleno inferior: 0px
Agregar nueva fila
Estructura de la columna
Continúe agregando una nueva fila a la sección utilizando la siguiente estructura de columnas:
Dimensionamiento
Pase 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 del canalón: 1
- Ancho máximo: 2580px
Espaciado
Elimine todo el relleno superior e inferior predeterminado a continuación.
- Relleno superior: 10px
- Relleno inferior: 10px
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.
Cargar logotipo
Cargue un logotipo a continuación.
Eliminar color de fondo
Luego, elimine el color de fondo blanco predeterminado del módulo.
Configuración del texto del menú
Pase 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 entre letras del menú: 4px
- Alineación de texto: Derecha
Ajustes 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 del logotipo a la configuración de tamaño.
- Altura máxima del logotipo: 60 px
2. Aplicar efectos adhesivos personalizados
Gire la sección n.° 2 pegajosa
Ahora que hemos creado la estructura de elementos de nuestro encabezado, es hora de convertir nuestra segunda sección en adhesiva y cambiar el estilo de diseño de ella 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 pegajosa: Stick to Top
- Desplazamiento superior pegajoso: 0px
- Límite pegajoso inferior: Ninguno
- Desplazamiento de los elementos pegajosos circundantes: Sí
- Estilos predeterminados y fijos de transición: Sí
Cambiar el fondo degradado de la sección en estado fijo
Ahora que nuestra sección se ha vuelto fija, aparecerá una opción adicional dentro de nuestra configuración de sección, fila y módulo; la opción pegajosa. Cuando haga clic en este ícono, 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 fijo para personalizar la apariencia de nuestro encabezado fijo en el desplazamiento. Comience yendo a la configuración de fondo de la segunda sección y aplique el siguiente fondo degradado pegajoso:
- 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 fijo
También quitaremos el relleno adhesivo superior e inferior de nuestra fila.
- Relleno superior: 0px
- Relleno inferior: 0px
A continuación, cambiaremos el color del texto del menú en un estado fijo.
- Color del texto del menú: #ffbd68
Junto con los colores del icono.
- 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 fijo
Y por último, pero no menos importante, cambiaremos la altura máxima del logotipo a cero en un estado fijo. Esto eliminará el logotipo de nuestro encabezado por completo una vez que se habiliten las configuraciones fijas de la sección. ¡Eso es todo! Asegúrate de guardar todos los cambios de Divi Theme Builder una vez que hayas completado el diseño de tu encabezado y obtén una vista previa en tu 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 utilizando el generador de temas de Divi y las opciones adhesivas. Tan pronto como la sección que contiene nuestro menú se vuelva fija, 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 regalos de Divi, asegúrese de suscribirse a nuestro boletín de correo electrónico y al canal de YouTube para que siempre sea una de las primeras personas en conocer y obtener los beneficios de este contenido gratuito.