¿Te gustaría crear un bonito encabezado transparente y pegajoso con Divi?
Cuando se trata de configurar un encabezado global para su Sitio web, hay muchas maneras de abordarlo. Uno de los enfoques más sutiles es un encabezado transparente.
Si decide utilizar un encabezado transparente pero necesita que sea fijo al desplazarse, le encantará este tutorial. ¡La transición entre transparente y pegajoso es fácil!
Vamos.
vista
Antes de sumergirnos en el tutorial, echemos un vistazo rápido al resultado.
Crear una nueva plantilla de encabezado global
Vaya a Divi > Creador de temas.
Configuración de la sección n.º 1
Color de fondo
Una vez en el editor de plantillas, notará una sección. Esta sección estará dedicada a la barra de encabezado superior que puede observar en la vista previa de este artículo. Abra la configuración de la sección y agregue un color de fondo negro.
- Antecedentes: #000000
espaciamiento
Cambie a la pestaña Estilo de sección y elimine todos los márgenes internos (superior e inferior) de forma predeterminada.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
Agregar un módulo de texto a la columna
Agregue un módulo de texto a la columna de la fila e ingrese un mensaje de su elección.
Configuraciones de texto
Cambie a la pestaña Estilo del módulo y cambie la configuración del texto en consecuencia:
- Fuente del texto: Oswald
- Estilo de copia de texto: TT
- Color del texto Texto: #ffffff
- Texto Tamaño del texto:
- Escritorio: 19px
- Tableta: 18px
- Teléfono: 16px
- Alineación de texto: centrado
Agregar sección # 2
espaciamiento
Justo debajo de la primera sección, agregue otra sección regular. Esta sección estará dedicada a nuestro menú transparente que se volverá pegajoso al desplazarse.
Abra la configuración de la sección y elimine todos los márgenes internos (superior e inferior) de forma predeterminada en la pestaña Estilo.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Añadir una nueva linea
Estructura de la columna
Continúe agregando una nueva fila usando la siguiente estructura de columnas:
color de fondo transparente
Abra la configuración de línea y aplique un color de fondo completamente transparente a la línea.
- Fondo: rgba (255,255,255,0)
apresto
Cambie a la pestaña Estilo de línea y cambie la configuración de tamaño.
- Usar ancho de canalón personalizado: Sí
- Espacio entre columnas: 1
- Ancho máximo: 100%
- Ancho máximo: 100%
espaciamiento
Luego agregue márgenes internos personalizados (izquierdo y derecho).
- Margen Interior Izquierdo: 10%
- Ley de margen interno: 10%
Caja de sombra
A continuación, aplique una sombra de cuadro transparente. Más adelante en el tutorial, usaremos esta sombra de cuadro en un estado pegajoso con un color de sombra diferente.
- Fuerza de desenfoque de sombra de cuadro: 50px
- Color de fuente de subtítulos: rgba (0,0,0,0)
Puesto de trabajo
Para asegurarse de que la línea aparezca en la parte superior de la contenido de la página, con fondo transparente, usaremos una posición absoluta para nuestra fila en la pestaña avanzada.
- Posición: Absoluta
- Ubicación: Arriba a la izquierda
Columna 2 Visibilidad
También ocultamos la segunda columna de nuestra fila en tabletas y teléfonos para tener un diseño de encabezado menos complejo en pantallas más pequeñas.
Agregar módulo de menú a la columna 1
Seleccione un Menú
Ahora que nuestra configuración de fila está en su lugar, es hora de agregar módulos, comenzando con un módulo de menú en la columna 1. Seleccione el menú de su elección.
Descargar logo
Luego sube un logo.
Quitar el color de fondo
También elimine el color de fondo del módulo.
Configuración del texto del menú
Cambie a la pestaña Estilo del módulo y cambie la configuración del texto del menú en consecuencia:
- Menú de fuentes: Oswald
- Menú de luz suave: Negrita
- Menú de estilo de copia: TT
- Color del texto del menú: #efefef
- Tamaño del texto del menú: 18px
- Alineación del texto: derecha
Configuración del menú desplegable
También cambie la configuración del menú desplegable.
- Color de fila desplegable: rgba (0,0,0,0)
- Menú móvil Color de fondo: rgba (0,0,0,0,95)
Configuración de iconos
A continuación, cambie los colores de los iconos en la configuración de iconos.
- Color del icono del carrito: #ffffff
- Color del icono de búsqueda: #ffffff
- Color del icono del menú de hamburguesas: #ffffff
Configuración del logotipo
También cambiamos el color de nuestro logotipo en la configuración del logotipo cambiando el filtro de inversión de imagen.
- Invertir imagen: 90%
apresto
A continuación, asignaremos una altura máxima a nuestro logotipo.
- Ancho máximo del logotipo: 40 píxeles
espaciamiento
A continuación, agregaremos relleno superior e inferior en tamaños de pantalla pequeños.
- Máximo margen interno:
- Tableta y teléfono: 10px
- Margen interno inferior:
- Tableta y teléfono: 10px
Agregue el módulo Button a la columna 2
Añadir texto al botón
En la columna 2, el único módulo que necesitamos es un módulo Botón. Añade un texto de tu elección.
Alineación de botones
Cambie a la pestaña Estilo del módulo y cambie la alineación de los botones.
- Alineación de botones: derecha
Configuraciones de botones
Personaliza el botón siguiente.
- Usar estilos personalizados para Botón: Sí
- Tamaño del texto del botón: 16px
- Color del texto del botón: #ffffff
- Botón de fondo: #ed4441
- Color del borde del botón: #ed4441
- Botón de radio del borde: 0 píxeles
- Espaciado entre letras de botones: 4px
- Fuente del botón: Oswald
- Botón de luz tenue: texto en negrita
- Botón de estilo de copia: TT
- Mostrar icono de botón: Sí
- Color del icono del botón: #1a1a1a
espaciamiento
Y complete los parámetros del módulo agregando valores de espaciado personalizados.
- Margen superior: -70px
- Margen interno superior e inferior: 25 px
Aplicar efectos adhesivos personalizados
Hacer que la sección n.º 2 sea pegajosa
Ahora que hemos sentado las bases para nuestro encabezado, ¡es hora de aplicar el efecto adhesivo! Para hacer esto, comience abriendo la configuración en la segunda sección y aplique la siguiente configuración adhesiva a la pestaña avanzada:
- Posición pegajosa: Stick to Top
- Desplazamiento de la parte superior del palo: 0px
- Mimit inferior pegajoso: Ninguno
- Desplazamiento de los elementos pegajosos circundantes: SÍ
- Estilos predeterminados y fijos de transición: SÍ
Color de fondo de la línea de palo
Ahora que la opción adhesiva está habilitada, podemos realizar cambios de opción adhesiva en todos los elementos de la sección. Comenzaremos abriendo la fila que contiene nuestro menú y aplicando un color de fondo blanco a la opción adhesiva.
- Color de fondo: #FFFFFF
Espaciado de filas fijas
A continuación, vamos a modificar los valores de espaciado de la función adhesiva de la línea.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Cuadro de sombra de fila pegajosa
También estamos cambiando el color de la sombra del cuadro en un estado pegajoso.
- Color de fuente de subtítulos: rgba (0,0,0,0.08)
Posicionamiento de línea pegajosa
A continuación, devolveremos el posicionamiento de la fila a relativo en un estado fijo.
- Cargo: Relativo
- Origen compensado: arriba a la izquierda
Configuración de texto del menú de estado fijo
A continuación, cambiaremos el color del texto del menú al estado fijo.
- Color del texto del menú: #000000
Configuración del menú desplegable en estado fijo
Con el color de fondo del menú móvil en la configuración del menú desplegable.
- Menú móvil, color de fondo: #ffffff
Colores de iconos de menú en estado pegajoso
También cambie los colores de los iconos en un estado fijo.
- Color del icono del carrito: #000000
- Color del icono de búsqueda: #000000
- Color del icono del menú de hamburguesas: #000000
Filtro de logotipo en estado pegajoso
A continuación, elimine el filtro invertido de la imagen del logotipo en un estado fijo.
- Inversión de imagen: 0%
Espaciado de botones en estado pegajoso
Y complete el tutorial eliminando el margen superior negativo del botón cuando está en estado fijo.
- Margen superior: 0px
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado final.
¡¡¡Descarga DIVI ahora!!!
Conclusión
En este artículo, le mostramos cómo combinar el constructor de temas de Divi con las nuevas opciones pegajosas. Específicamente, le mostramos cómo cambiar de un encabezado transparente a un encabezado fijo de estilo diferente mientras se desplaza.
Este enfoque le permite fusionar el diseño de su página con su menú mientras mantiene un buen encabezado fijo al desplazarse.
Si quieres saber más sobre Divi, no dudes en visitar nuestro catálogo de Divi tutoriales. También puedes consultar Cómo crear la página del Blog con el módulo Divi Blog
Si tiene alguna pregunta o sugerencia, no dude en dejar un comentario en la sección de comentarios a continuación.
Sin embargo, también puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
