¡Tu licencia Divi con un -20% de DescuentoOferta aquí

5 estilos creativos de encabezado para Divi

Oct 5, 2020 | Tutoriales para Divi

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!

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

Estilo # 1: El degradado abstracto

módulo de encabezado divi

Estilo # 2: La triple amenaza

módulo de encabezado divi

Estilo n. ° 3: el marco redondeado

módulo de encabezado divi

Estilo # 4: El zurdo mezclado

módulo de encabezado divi

Estilo # 5: el tipo de escala grande

módulo de encabezado divi

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, utilizaré 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!

Estilo # 1: The Abstract Gadient

módulo de encabezado divi

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.

módulo de encabezado divi

Actualice el contenido de la configuración del encabezado con un nuevo título y una imagen de encabezado.

módulo de encabezado divi

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
Botón Un color de fondo: # 0c71c3
Botón Un borde Ancho: 0px Relleno
personalizado: 8vw arriba, 8vw abajo

módulo de encabezado divi

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)
Gradiente de fondo Color izquierdo: # 0096eb
Gradiente de fondo Color derecho: rgba (255,255,255,0)
Tipo de gradiente:
Radial Dirección radial: Inferior derecha
Posición inicial: 25%
Posición final: 0%

módulo de encabezado divi

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:

Gradiente de fondo Color a la izquierda: # 0096eb
Gradiente de fondo Color a la derecha: # 007ea1
Tipo de gradiente:
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 degradados de encabezado, le sugiero que extraiga los colores utilizados en la imagen / gráfico del encabezado que puede estar usando.

módulo de encabezado divi

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: 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

módulo de encabezado divi

¡Eso es! Mira el diseño final.

módulo de encabezado divi

módulo de encabezado divi

Estilo # 2: La triple amenaza

módulo de encabezado divi

Este siguiente estilo de módulo de encabezado divi incluye tres llamadas a la acción, incluidos los dos botones y el ícono de desplazamiento al final. Hacer coincidir los iconos de los botones con el icono de desplazamiento ayuda al aspecto simétrico del diseño. Y los separadores de secciones 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 enlace del botón n. ° 1 y el texto del enlace del botón n. ° 2.

módulo de encabezado divi

Luego actualice el resto del diseño de la siguiente manera:

Color de fondo: # 1a1844
Orientación del texto y logotipo:
Icono central : ver captura de pantalla
Desplazarse hacia abajo Tamaño del icono: 20px
Fuente del título: Lato
Peso de la fuente del
título: Grueso Tamaño del texto del título: 5vw (escritorio), 40px (tableta), 30px (teléfono inteligente)
Línea de título Alto: 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
: Relleno personalizado izquierdo : 10vw arriba, 10vw izquierdo

módulo de encabezado divi

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

módulo de encabezado divi

Ahora veamos el diseño final:

módulo de encabezado divi

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

I know I said no custom CSS, but this is a non-essential extra flourish I thought some of you would enjoy. You may notice that for headers with two buttons, the second button has a left margin that throws off the design on smartphones. For a cleaner design on smartphones, you can add a snippet of custom CSS to your page settings in order to make the buttons the same width and without the second button margin.

Open the page settings in the Divi Builder and add the following 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;   
  }
}

Now look at the design on mobile.

módulo de encabezado divi

Style #3: The Rounded Frame

módulo de encabezado divi

This rounded divi header module design is a great way to frame your background image and header content to bring even more focus to your call to action. All it takes is some adjustments to the border radius of your header, a box shadow and some custom spacing.

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.

módulo de encabezado divi

A continuación, agregue una imagen de fondo que sea lo suficientemente grande 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:

módulo de encabezado divi

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
Relleno personalizado: 5vw superior, 5vw inferior

módulo de encabezado divi

Ahora mira el diseño final.

módulo de encabezado divi

módulo de encabezado divi

módulo de encabezado divi

El zurdo mezclado

módulo de encabezado divi

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.

Gradiente de fondo Color a la izquierda: rgba (0,0,0,0,54)
Gradiente de fondo Color a la derecha: 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 gradiente sobre la imagen de fondo : SI

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.

módulo de encabezado divi

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.

módulo de encabezado divi

Ahora cambie el color de fondo a blanco.

Luego actualice lo siguiente:

Peso de la fuente del título: Ultra Negrita
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 de un
botón : 2.7vw Color del texto del botón uno: # 000000
Ancho de un borde del
botón : 0.2em Color de un borde del botón: # edf000
Peso de fuente: Ultra Bold
Ancho: 50% (escritorio, tableta y teléfono inteligente)
Modo de fusión: Pantalla

módulo de encabezado divi

Aquí está el diseño final.

módulo de encabezado divi

módulo de encabezado divi

Estilo # 5: el tipo de escala grande

módulo de encabezado divi

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:
Texto del subtítulo de la consulta :
Botón de servicios # 1 Texto del enlace: Empiece ahora

Elimina el texto predeterminado en el cuadro de contenido.

Luego agregue una imagen de logotipo clara.

módulo de encabezado divi

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:

01
02
width: 100% ;
max-width: 100% ;

módulo de encabezado divi

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 entre letras del título:
0.1em Fuente del subtítulo: Cuprum
Alineación del texto del subtítulo: Derecha (esto ayuda al centro el texto con espaciado entre letras)
Tamaño del texto del subtítulo: 3vw
Espacio entre letras del subtítulo: 7.8vw
Ancho del borde de un
botón : 0px Fuente del botón Uno: Cuprum
Icono del botón Uno: ver captura

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.

módulo de encabezado divi

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 menos 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 caja para completar el diseño:

Box Shadow: ver captura de pantalla
Box Shadow Blur Strength: 0px
Box Shadow Spread Strength: 60px

módulo de encabezado divi

Ahora mira el resultado final.

módulo de encabezado divi

módulo de encabezado divi

¡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».

módulo de encabezado divi

Además, deberá quitar el relleno personalizado para estos diseños para que el encabezado se ajuste perfectamente a la ventana del navegador.

Por Prunaestudio

Por Prunaestudio

Prunaestudio es un estudio de diseño web ubicado en Valencia (España). Estamos especializados en el diseño web basado en WordPress con la plantilla premium de Elegantthemes, Divi.

* Todos el contenido pertenece y se ha traducido del blog de Elegantthemes (Divi Resources)

Nuestras últimas entradas

¡20% de Descuento en Divi!

Sitios web y usuarios ilimitados

Únete a más de 700.000 clientes y obten acceso a Divi, Extra, Bloom, Monarch y mucho más. Impulsa a todo tu equipo y crea sitios web ilimitados con una licencia.

¡Ir al descuento!



You have Successfully Subscribed!

Pin It on Pinterest

Share This