Fuera de la caja, el módulo de encabezado Divi puede crear diseños de encabezado llamativos con solo unos pocos ajustes. Esto lo convierte en un módulo extremadamente popular al diseñar encabezados para su sitio web en Divi. Y con un poco de pensamiento innovador, puede crear algunos diseños realmente únicos utilizando solo la configuración integrada (sin CSS personalizado). Entonces, para aquellos de ustedes que quieran explorar algunos nuevos diseños de encabezado, les mostraré 5 estilos de módulos de encabezado Divi que pueden inspirarlos.
¡Disfrutar!
Estilo #1: El degradado abstracto
Empezar a diseñar el estilo n.º 1
Estilo #2: La triple amenaza
Empezar a diseñar el estilo n.º 2
Estilo #3: El Marco Redondeado
Empezar a diseñar el estilo n.º 3
Estilo #4: El zurdo mezclado
Empezar a diseñar el estilo n.º 4
Estilo #5: El tipo de escala grande
Empezar a diseñar el estilo n.º 5
Lo que necesitas para empezar
Para empezar necesitarás el tema Divi . Usaré Divi Builder para construir los diseños en la parte delantera. También necesitará algunas imágenes para completar el tutorial. Recuerda que siempre puedes importar las imágenes de un diseño prefabricado. De hecho, para este tutorial, usaré imágenes del paquete de diseño de la empresa de limpieza , el paquete de diseño del asesor comercial y el paquete de diseño del trabajador autónomo web .
¡Empecemos!
Suscríbete a nuestro canal de Youtube
Estilo n.º 1: el Gadient abstracto
Este primer diseño de módulo de encabezado Divi es un diseño simple y multipropósito que utiliza fondos degradados de una manera creativa.
Para comenzar, agregue una nueva sección de ancho completo con un módulo de encabezado de ancho completo.
Actualice el contenido de la configuración del encabezado con un nuevo título y una imagen de encabezado.
Luego actualice la configuración de diseño de la siguiente manera:
Fuente del título: Lato
Tamaño del texto del título: 6vw
Color de fondo del botón uno: #0c71c3
Ancho del borde del botón uno: 0px
Relleno personalizado: 8vw arriba, 8vw abajo
Antes de agregar el fondo de nuestra sección, primero debemos hacer que el fondo del módulo de encabezado sea transparente y darle un degradado personalizado para crear nuestra forma de círculo en la esquina inferior derecha. Regrese a la pestaña de contenido y actualice el fondo de la siguiente manera:
Color de fondo: rgba(255,255,255,0)
Color de fondo degradado izquierdo: #0096eb
Color de fondo degradado derecho: rgba(255,255,255,0)
Tipo de degradado: Radial
Dirección radial: Inferior derecha
Posición inicial: 25 %
Posición final: 0 %
Guardar ajustes
A continuación, debemos agregar nuestros diseños de fondo a la sección que se ubicará detrás de nuestro módulo de encabezado. Para hacer esto, abra la sección de configuración y actualice lo siguiente:
Color izquierdo del degradado de fondo: #0096eb
Color derecho del degradado de fondo: #007ea1
Tipo de degradado: Radial
Dirección radial: Superior izquierda
Posición inicial: 43 %
Posición final: 0 %
Sugerencia de diseño: si está buscando algunos colores para probar sus propios degradados de encabezado, le sugiero extraer los colores utilizados en la imagen/gráfico del encabezado que puede estar usando.
Para agregar otro elemento de diseño sutil a nuestro fondo abstracto, podemos agregar un divisor de sección superior e inferior. Para hacer esto, vaya a la pestaña de diseño y agregue los siguientes divisores:
Estilo del divisor superior: vea la captura de pantalla
Color del divisor superior: rgba(150,210,210,0.2)
Altura del divisor superior: 8vw
Repetición horizontal del divisor superior: 0.7x
Volteo del divisor superior: Vertical
Estilo del divisor inferior: vea la captura de pantalla
Color del divisor inferior: rgba(150,210,210,0.2)
Altura del divisor inferior: 10vw
Repetición horizontal del divisor inferior: 0.5x
Giro del divisor inferior: Vertical
¡Eso es todo! Mira el diseño final.
Estilo #2: La triple amenaza
Este próximo estilo de módulo de encabezado divi incluye tres llamadas a la acción, incluidos los dos botones y el icono de desplazamiento hacia abajo. Hacer coincidir los íconos de los botones con el ícono de desplazamiento ayuda al aspecto simétrico del diseño. Y los divisores de sección crean un bonito diseño triangular abstracto que lleva a los usuarios a la parte inferior de la página.
Cree una nueva sección de ancho completo con un encabezado de ancho completo.
A continuación, actualice el texto del título, el texto del vínculo del botón n.° 1 y el texto del vínculo del botón n.° 2.
Luego actualice el resto del diseño de la siguiente manera:
Color de fondo: n.° 1a1844
Orientación del texto y el logotipo: Centro
Ícono: ver captura de pantalla
Tamaño del ícono de desplazamiento hacia abajo: 20 px
Fuente del título: Lato
Peso de la fuente del título: Pesado
Tamaño del texto del título: 5vw (escritorio), 40 px (tableta), 30 px (teléfono inteligente)
Línea de título Altura: 1.3em
Color de fondo del botón dos: #fe4943
Ancho del borde del botón dos: 0px
Icono del botón dos: flecha derecha (ver captura de pantalla)
Color de fondo del botón uno: #fe4943 Ancho
del borde del botón uno: 0px
Icono del botón uno: flecha izquierda (ver captura de pantalla) Ubicación del ícono del botón uno:
Acolchado personalizado
izquierdo : 10vw arriba, 10vw izquierda
Ahora todo lo que tenemos que hacer es agregar nuestros divisores de sección para crear el diseño de fondo triangular. Abra la configuración de la sección y actualice la siguiente configuración de diseño:
Estilo del divisor superior: ver captura de pantalla
Color del divisor superior: rgba(255,255,255,0.3)
Altura del divisor superior: 45vw
Estilo del divisor superior: ver captura de pantalla
Color del divisor superior: rgba(255,255,255,0.1)
Altura del divisor superior: 45vw
Ahora veamos el diseño final:
Sé que dije que no hay CSS personalizado, pero esta es una floritura extra no esencial que pensé que algunos de ustedes disfrutarían. Puede notar que para los encabezados con dos botones, el segundo botón tiene un margen izquierdo que altera el diseño en los teléfonos inteligentes. Para un diseño más limpio en los teléfonos inteligentes, puede agregar un fragmento de CSS personalizado a la configuración de su página para que los botones tengan el mismo ancho y sin el margen del segundo botón.
Abra la configuración de la página en Divi Builder y agregue el siguiente CSS
|
01
02
03
04
05
06
07
|
@media (max-width: 550px){.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button { display: block; width: 100%;margin-left: 0px; }} |
Ahora mira el diseño en el móvil.
Estilo #3: El Marco Redondeado
Este diseño de módulo de encabezado divi redondeado es una excelente manera de enmarcar su imagen de fondo y el contenido del encabezado para enfocar aún más su llamada a la acción. Todo lo que se necesita son algunos ajustes en el radio del borde de su encabezado, una sombra de cuadro y un espaciado personalizado.
Para comenzar, cree una nueva sección de ancho completo con un encabezado de ancho completo.
Primero, actualicemos los elementos de contenido para el encabezado agregando el título, el texto del vínculo del botón n.º 1 y una imagen del logotipo.
A continuación, agregue una imagen de fondo que sea lo suficientemente grande como para abarcar la altura y el ancho del encabezado. Dado que este será un encabezado redondeado, intente usar una imagen con la misma altura y anchura (como 1000 px por 1000 px).
Luego actualice el resto de la configuración de diseño de la siguiente manera:
Guardar ajustes.
Luego abra la configuración de la sección para agregar el color de fondo y el espaciado de la siguiente manera:
Color de fondo: #000000
Acolchado personalizado: 5vw arriba, 5vw abajo
Ahora echa un vistazo al diseño final.
El zurdo mezclado
Este diseño de encabezado tiene algunas características de diseño únicas. El módulo de encabezado en realidad se redimensiona y se alinea a la izquierda para exponer la mitad derecha de la imagen de fondo de la sección. Y el contenido del módulo de encabezado tiene un efecto de fusión que expone la imagen de fondo a través del contenido. Para lograr esto, necesitará el tipo correcto de imagen de fondo para su sección. En general, querrá que la imagen tenga elementos más oscuros para que el contenido combinado sea más visible.
Empecemos.
Primero, cree una nueva sección de ancho completo con un encabezado de ancho completo.
Antes de comenzar a actualizar nuestros estilos de encabezado, vaya primero a la configuración de la sección y agregue el siguiente fondo:
Agregue una imagen de fondo con el punto focal de la imagen a la derecha.
Color izquierdo del degradado de fondo: rgba(0,0,0,0.54)
Color derecho del degradado de fondo: rgba(255,255,255,0)
Dirección del degradado: 90 grados
Dirección radial: Abajo a la derecha
Posición de inicio: 50 %
Posición final: 0 %
Colocar degradado sobre la imagen de fondo : SÍ
El propósito del degradado es oscurecer el lado izquierdo de la imagen para que cuando mezclemos el contenido del módulo de encabezado sea más legible. Además, no podrá ver el fondo de la sección en este momento porque el color de fondo del encabezado predeterminado todavía está activo. Vamos a cambiar eso a continuación.
Abra la configuración del encabezado y actualice el contenido con un título, el texto del vínculo del botón n.º 1 y un logotipo oscuro.
Ahora cambie el color de fondo a blanco.
Luego actualice lo siguiente:
Peso de la fuente del título: Ultra Bold
Color del texto del título: #000000
Tamaño del texto del título: 8vw
Altura de la línea del título: 1.1em
Tamaño del texto del botón UNO: 2.7vw
Color del texto del botón 1: #000000
Ancho del borde del botón 1: 0.2em
Color del borde del botón 1: # edf000
Peso de fuente: Ultra Bold
Ancho: 50 % (computadora de escritorio, tableta y teléfono inteligente)
Modo de fusión: Pantalla
Aquí está el diseño final.
Estilo #5: El tipo de escala grande
Este diseño de módulo de encabezado Divi presenta una forma simple y efectiva de crear texto grande que se escala con la ventana del navegador sin comprometer el diseño. Dado que estamos utilizando un módulo de encabezado de ancho completo, necesitaremos expandir un poco nuestra área de contenido. Entonces necesitamos usar la unidad de longitud vw para dimensionar nuestro texto. Este diseño sería genial para encabezados de sección.
Para comenzar, cree una nueva sección de ancho completo con un encabezado de ancho completo.
En la configuración del encabezado de ancho completo, actualice lo siguiente:
Título:
Texto del subtítulo de la consulta:
Botón de servicios n.° 1 Texto del enlace: Comenzar ahora
Elimine el texto predeterminado en el cuadro de contenido.
Luego agregue una imagen de logotipo clara.
A continuación, vamos a aumentar el ancho máximo predeterminado de nuestro contenedor de encabezado para crear más espacio horizontal para su encabezado. Para hacer esto, vaya a la pestaña avanzada y agregue el siguiente CSS en Contenedor de encabezado:
|
01
02
|
width: 100% ;max-width: 100% ; |
Ahora actualice el resto de la configuración de diseño de la siguiente manera:
Agrega una imagen de fondo.
Orientación del texto y del logotipo: Fuente del título central
: Peso de la fuente del título
Cuprum
: Estilo de fuente del título en negrita: Color del texto del título TT
: #bfbfbf Tamaño
del texto del título: 10vw
Espaciado entre letras del título: 0,1 em
Fuente del subtítulo:
Alineación del texto del subtítulo Cuprum: Derecha (esto ayuda a centrar el texto con espaciado entre letras)
Tamaño del texto del subtítulo: 3vw
Espaciado entre letras del subtítulo: 7.8vw
Ancho del borde del botón uno: 0px
Fuente del botón uno: Cuprum
Icono del botón uno: ver captura de pantalla
El truco es usar la unidad de longitud vw para el texto. Luego ajuste el espacio entre letras del subtítulo para alinearlo con el texto del título lo mejor que pueda.
Para maximizar nuestro espacio horizontal, debemos agregar un ancho personalizado a nuestro contenido de encabezado de la siguiente manera:
Ancho de contenido: 80%;
Aunque esto es menos que el 100% predeterminado, cambiar la configuración anulará el valor predeterminado y se ajustará con el css personalizado que agregamos anteriormente.
Finalmente, agregue una sombra de caja para completar el diseño:
Box Shadow: ver captura de pantalla
Box Shadow Blur Strength: 0px
Box Shadow Spread Strength: 60px
Ahora mira el resultado final.
¡Conviértalos en encabezados de pantalla completa!
Los diseños anteriores se pueden hacer fácilmente a pantalla completa con solo hacer clic en un botón. Esta es una característica poderosa del módulo de encabezado de ancho completo. Simplemente vaya a la configuración de diseño del encabezado y seleccione la opción «Hacer pantalla completa».
Además, deberá quitar el relleno personalizado para estos diseños para que el encabezado encaje perfectamente en la ventana del navegador.
Pensamientos finales
Estas son solo algunas de las posibilidades de diseño de cabecera disponibles con el módulo de cabecera Divi. Y experimentar con todas las configuraciones de diseño puede ser muy divertido. En todo caso, espero que estos ejemplos sirvan como un poco de inspiración para su próximo proyecto.
Espero escuchar de usted en los comentarios a continuación.
¡Salud!