5 estilos de módulo de encabezado Divi creativos que puede lograr usando la configuración incorporada

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 incorporada (sin CSS personalizado). Entonces, para aquellos de ustedes que quieran explorar algunos nuevos diseños de encabezados, les mostraré 5 estilos de módulos de encabezados Divi que pueden inspirarlos.

¡Disfrutar!

Adelanto de los 5 estilos de módulo de encabezado Divi

Estilo # 1: El degradado abstracto

Comience a diseñar el estilo n. ° 1

Estilo # 2: La triple amenaza

Comience a diseñar el estilo n. ° 2

Estilo n. ° 3: el marco redondeado

Comience a diseñar el estilo n. ° 3

Estilo # 4: El zurdo mezclado

Comience a diseñar el estilo n. ° 4

Estilo n. ° 5: el tipo de escala grande

Comience a diseñar el estilo n. ° 5

Lo que necesitas para empezar

Para comenzar, necesitará el tema Divi. Usaré Divi Builder para construir los diseños en la parte frontal. También necesitará algunas imágenes para completar el tutorial. Recuerde que siempre puede importar las imágenes de un diseño prediseñado. De hecho, para este tutorial, usaré imágenes del paquete de diseño de la empresa de limpieza, el paquete de diseño del entrenador de negocios y el paquete de diseño de Web Freelancer.

¡Empecemos!

Suscríbete a nuestro canal de Youtube

Estilo # 1: El gadient abstracto

Este primer diseño de módulo de encabezado Divi es un diseño simple y multipropósito que usa 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
Acolchado personalizado: 8vw superior, 8vw inferior

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. Vuelva a la pestaña de contenido y actualice el fondo de la siguiente manera:

Color de fondo: rgba (255,255,255,0)
Color de degradado de fondo a la izquierda: # 0096eb
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Tipo de degradado: radial
Dirección radial: abajo a la 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 de degradado de fondo a la izquierda: # 0096eb
Gradiente de fondo Color derecho: # 007ea1
Tipo de degradado: radial
Dirección radial: arriba a la izquierda
Posición inicial: 43%
Posición final: 0%

Consejo de diseño: si está buscando algunos colores para probar en sus propios gradientes de encabezado, le sugiero que extraiga 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 de divisor superior: ver 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: ver 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
Volteo del divisor inferior: vertical

¡Eso es todo! Mira el diseño final.

Estilo # 2: La triple amenaza

Este siguiente estilo de módulo de encabezado divi incluye tres llamadas a la acción, incluidos los dos botones y el icono de desplazamiento hacia la parte inferior. Hacer coincidir los iconos de los botones con el icono 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 lo largo 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: # 1a1844
Orientación del texto y el logotipo: Centro
Icono: ver captura de pantalla
Desplazarse hacia abajo Tamaño del icono: 20px
Fuente del título: Lato
Peso de la fuente del título: Pesado
Tamaño del texto del título: 5vw (escritorio), 40px (tableta), 30px (teléfono inteligente)
Altura de la línea de título: 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 icono del botón uno: Izquierda
Acolchado personalizado: 10vw superior, 10vw izquierdo

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 de divisor superior: ver captura de pantalla
Color del divisor superior: rgba (255,255,255,0.3)
Altura del divisor superior: 45 vw

Estilo de divisor superior: ver captura de pantalla
Color del divisor superior: rgba (255,255,255,0.1)
Altura del divisor superior: 45 vw

Ahora echemos un vistazo al diseño final:

Consejo de diseño adicional: ajustes móviles para botones

Sé que dije que no hay CSS personalizado, pero este es un toque 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 desvía el diseño de 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

@media (max-width: 550px){
.et_pb_fullwidth_header .et_pb_fullwidth_header_container .et_pb_button {
  display: block;
  width: 100%;
margin-left: 0px;    
  }
}

Ahora mire el diseño en el móvil.

Estilo n. ° 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 llamado 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 espacio personalizado.

Para comenzar, cree una nueva sección de ancho completo con un encabezado de ancho completo.

Primero, actualice los elementos de contenido para el encabezado agregando el título, el texto del enlace 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 ancho (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 superior, 5vw inferior

Ahora mira el diseño final.

El zurdo mezclado

Este diseño de encabezado tiene algunas características de diseño únicas. El módulo de encabezado cambia de tamaño 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 combinación que expone la imagen de fondo a través del contenido. Para lograrlo, necesitará el tipo de imagen de fondo adecuado para su sección. Generalmente, 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, salte 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 de degradado de fondo a la izquierda: rgba (0,0,0,0.54)
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Dirección del gradiente: 90 grados
Dirección radial: abajo a la derecha
Posición inicial: 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. Lo cambiaremos a continuación.

Abra la configuración del encabezado y actualice el contenido con un título, texto de enlace 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 de título: 1.1em
Tamaño del texto del botón UNO: 2.7vw
Botón uno Color de texto: # 000000
Ancho del borde del botón uno: 0.2em
Color del borde del botón uno: # edf000
Peso de fuente: Ultra Bold
Ancho: 50% (escritorio, tableta y teléfono inteligente)
Modo de fusión: pantalla

Aquí está el diseño final.

Estilo n. ° 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 usando 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 ideal 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: Consulta
Texto del subtítulo: Servicios
Texto del enlace del botón n. ° 1: Empiece ahora

Elimina 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 el contenedor de encabezado:

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 el logotipo: Centro
Fuente del título: Cuprum
Peso de la fuente del título: negrita
Estilo de fuente del título: TT
Color del texto del título: #bfbfbf
Tamaño del texto del título: 10vw
Espaciado de letras de título: 0.1em
Fuente de subtítulo: Cuprum
Alineación del texto del subtítulo: Derecha (esto ayuda a centrar el texto con espaciado entre letras)
Tamaño del texto del subtítulo: 3vw
Espaciado entre letras de subtítulos: 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 consiste en utilizar la unidad de longitud vw para el texto. Luego, ajuste el espaciado de las letras del subtítulo para que se alinee con el texto del título lo mejor que pueda.

Para maximizar nuestro espaciado horizontal, necesitamos agregar un ancho personalizado a nuestro contenido de encabezado de la siguiente manera:

Ancho del contenido: 80%;

Aunque esto es menor que el 100% predeterminado, cambiar la configuración anulará la configuración predeterminada y se ajustará con el CSS personalizado que agregamos anteriormente.

Finalmente, agregue una sombra de cuadro para completar el diseño:

Box Shadow: ver captura de pantalla
Fuerza de desenfoque de sombra de caja: 0px
Fuerza de propagación de la sombra de caja: 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 del 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 se ajuste perfectamente a la ventana del navegador.

Pensamientos finales

Estas son solo algunas de las posibilidades de diseño de encabezado disponibles con el módulo de encabezado Divi. Y experimentar con todas las configuraciones de diseño puede ser muy divertido. En todo caso, espero que estos ejemplos le sirvan de inspiración para su próximo proyecto.

Espero tener noticias tuyas en los comentarios a continuación.

¡Salud!