¿Le gustaría crear un encabezado fijo con Divi ?
La creación de encabezados fijos ha ido sin problemas desde la llegada de la temas, pero encontramos que muchas personas no saben cómo crearlos sin usar código adicional. Sin embargo, también es bastante fácil hacerlo gracias a las opciones pegajosas de Divi.
De hecho, no solo es más fácil, sino que este método ofrece más posibilidades para personalizar el diseño.
Por lo tanto, en este tutorial nos tomaremos el tiempo para mostrarle cómo crear un encabezado adhesivo ultra personalizado utilizando los parámetros Divi.
vista
Antes de sumergirnos en este tutorial, echemos un vistazo al resultado que queremos lograr.
Construir la estructura del elemento de encabezado
Crear una nueva plantilla de encabezado global
Acceda al Divi Theme Builder y comience a crear un nuevo encabezado global o personalizado.
Sección 1 Parámetros
Fondo degradado
Una vez en el editor de plantillas, comenzaremos construyendo la estructura de nuestros elementos de encabezado. En la segunda parte de este tutorial, nos centraremos en aplicar las diversas configuraciones adhesivas para completar el diseño del encabezado adhesivo.
Lea también: Cómo crear un menú deslizante y push en DIVI
En el editor de plantillas, notará una sección. Abre esta 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%
espaciamiento
Luego 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
Para crear nuestra barra de encabezado superior, agregaremos una nueva fila a nuestra sección usando la siguiente estructura de columnas:
apresto
Sin agregar ningún módulo todavía, abra la configuración de fila y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Espacio entre columnas: 1
- Ancho máximo: 95%
- Ancho máximo: 2 píxeles
espaciamiento
Agregue también márgenes internos personalizados (superior e inferior).
- Vértice del margen interno: 15px
- Margen interno 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 de la fila principal en la pestaña avanzada.
display: flex;
Agregue el módulo 'Síganos en las redes sociales' a la columna 1
Añadir las redes sociales de su elección
Es hora de agregar módulos, comenzando con un módulo 'Síguenos en las 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
espaciamiento
También agregue un margen superior.
- Margen superior: 5 px
Agregue el módulo Button a la columna 2
Agregar 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.
Ajouter un gravamen
Luego agrega un enlace.
Alineación de botones
A continuación, cambie a la pestaña Estilo y cambie la alineación de los botones.
- Alineación de botones: derecha
Configuraciones de botones
También personalizamos el botón.
- Usar estilos personalizados para 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: 0 píxeles
- Botones de espaciado entre letras: 4px
- Botón de luz tenue: texto en negrita
- Botón de estilo de copia: mayúsculas
- Mostrar botón: sí
espaciamiento
Y completaremos la configuración del módulo agregando márgenes internos (superior e inferior) a la configuración de espaciado.
- Vértice del margen interno: 10px
- Margen interno 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 hará permanente en la segunda parte de este tutorial.
Ver también: Cómo crear un encabezado global con formulario de inicio de sesión en DIVI
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%
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 a la sección usando la siguiente estructura de columnas:
apresto
Cambie a la pestaña Estilo y cambie la configuración de tamaño de la siguiente manera:
- Usar ancho de canalón personalizado: Sí
- Espacio entre columnas: 1
- Ancho máximo: 2 píxeles
espaciamiento
Luego elimine todos los márgenes internos (superior e inferior) de forma predeterminada.
- Vértice del margen interno: 10px
- Margen interno inferior: 10px
Agregar un módulo de menú a la columna
Seleccione un menú
A continuación, agregue un módulo de Menú a la columna de la fila y seleccione un menú dinámico de su elección.
Descargar logo
Luego sube un logo.
Quitar el color de fondo
A continuación, elimine el color de fondo blanco predeterminado del módulo.
Ajustes de texto del menú
Cambie a la pestaña Estilo y también personalice la configuración del texto del menú.
- Menú de luz tenue: texto en negrita
- Color del texto del menú: #002d4c
- Tamaño del texto del menú: 15px
- Espaciado entre letras del menú: 4px
- Alineación del texto: derecha
Configuración de texto del menú desplegable
A continuación, 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
Con configuración de iconos.
- Color del icono del carrito: #002d4c
- Color del icono de búsqueda: #002d4c
- Color del icono del menú de hamburguesas: #002d4c
apresto
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 píxeles
2. Aplicar efectos adhesivos personalizados
Hacer que la sección n.º 2 sea pegajosa
Ahora que hemos creado la estructura de nuestros elementos de encabezado, es hora de hacer que nuestra segunda sección sea adhesiva y personalizar sus elementos cuando estén en un estado fijo.
Ver también: Cómo crear un menú de navegación vertical en DIVI
Abra la configuración de la segunda sección y cambie 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 en 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 en un estado permanente.
Comience yendo a la configuración de fondo en la segunda sección y aplicando el siguiente fondo degradado adhesivo:
- Color 1: #26333a
- Color 2: #1e272f
Línea de estiramiento en estado pegajoso
Luego abriremos la línea que contiene el módulo Menú y cambiaremos el ancho en un estado fijo.
- Ancho máximo: 95%
Retire el relleno en estado pegajoso
También eliminamos los márgenes internos (Superior e Inferior) del estado pegajoso de nuestra línea.
- Vértice del margen interno: 0px
- Margen interno inferior: 0px
Cambiar el color del texto del menú en estado fijo
A continuación, cambiaremos el color del texto del menú a un estado permanente.
- Color del texto del menú: #ffbd68
Cambiar los colores del icono del menú en estado fijo
Con colores de iconos.
- Color del icono del carrito: #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 finalmente, vamos a cambiar la altura máxima del logotipo a cero en un estado fijo. Esto eliminará por completo el logotipo de nuestro encabezado una vez que se habiliten las configuraciones fijas de la sección.
Altura máxima del logotipo: 0px
Está hecho !
Asegúrese de guardar todos los cambios de Divi Theme Builder una vez que haya terminado de diseñar su encabezado y obtenga una vista previa en su Sitio web.
vista
Ahora que hemos seguido todos los pasos, echemos un último vistazo al resultado.
¡¡¡Descarga DIVI ahora!!!
Conclusión
Listo ! Eso es todo por este artículo. En este último, le mostramos cómo crear un encabezado fijo usando el constructor de temas de Divi y estilos personalizados.
Para familiarizarse con Divi's Theme Builder, también puede leer nuestro artículo sobre Cómo crear un encabezado global con el generador de temas de Divi
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.
...
