5 Módulos de encabezado de división de estilos creativos que puede hacer utilizando la configuración Built -in

Desde el cuadro, el módulo de encabezado de la Divica puede crear modelos de encabezado llamativos con solo unos pocos ajustes. Esto se hace por un modo extremadamente popular al diseñar la sede para su sitio web en Div. Y con un pensamiento fácil, puede crear algunos modelos verdaderamente únicos utilizando solo la configuración construida (sin CSS personalizado). Entonces, para aquellos de ustedes que quieran explorar algunos modelos de encabezado nuevos, les mostraré 5 módulos de encabezado de división que pueden inspirarlo. ¡Disfrutar! Eche un vistazo a los 5 estilos del módulo de encabezado Divida el 1: Gradiente abstracto

Empiece a diseñar el estilo # 1
Estilo 2: triple amenaza

Empiece a diseñar estilo no. 2 estilo 3: marco redondeado

Empiece a diseñar estilo no. 3 estilo # 4: el zurdo mixto

Comience a diseñar estilo # 4 estilo 5: excelente tipo de escala

Comience a diseñar el estilo # 5 por el que necesita comenzar a comenzar, necesitará el tema Div. Usaré Divi Builder para construir los dibujos en el frente. También necesitará algunas fotos para completar el tutorial. Recuerde que siempre puede importar las imágenes de un aspecto premodido. De hecho, para este tutorial, utilizaré imágenes del paquete de paquetes de la empresa de limpieza, el paquete Business Coach Make Package y el Web Freelancer.
¡Vamos a empezar! Suscríbase a nuestro estilo de canal de YouTube 1: GIENT Abstract

Este primer diseño del módulo de encabezado de la Divic es un diseño simple y multifuncional que utiliza fondos degradados de manera creativa. Para comenzar, agregue una nueva sección con un 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: Título de la fuente: Lato Dimensión de texto: 6VW Botón de color del sótano 1: # 0C71C3 Ancho del botón Un border: 0px Reinicio personalizado : 8VW arriba, 8VW abajo

Antes de agregar el fondo de nuestra sección, primero debemos hacer el fondo del módulo de encabezado transparente y ofrecerle un gradiente personalizado para crear la forma de nuestro círculo en la esquina inferior derecha. Vuelva a la pestaña de contenido y actualice el fondo de la siguiente manera: Fondo de pantalla: RGBA (255,255,255.0) Color izquierdo del gradiente de fondo: # 0096EB Color derecho del fondo de fondo: RGBA (255,255,255,0) Tipo de gradiente: Dirección radial radial: Down Derecha inicial directamente inicial Posición: 25% Posición final: 0%

Guarde la configuración a continuación, debemos agregar nuestros dibujos de fondo a la sección que estará detrás del módulo de encabezado. Para esto, abra la configuración de la sección y actualice lo siguiente:

Color izquierdo del fondo de fondo: # 0096EB Color derecho del fondo Gradiente: # 007E1 Gradiente Tipo: Radial Dirección radial: Posición superior izquierda: 43% Posición final: 0% Consejo de diseño: Si está buscando colores para probar su propio encabezado Gradientes, le sugiero que extraiga los colores utilizados en la imagen / gráficos del encabezado que pueda usar.
Para agregar otro elemento de diseño sutil a nuestro fondo abstracto, podemos agregar un separador de sección superior e inferior. Para hacer esto, vaya a la pestaña de diseño y agregue los siguientes separadores:

El estilo del divisor superior: vea la captura de pantalla del color del divisor superior: RGBA (150.210.210.2) Altura del separador superior: 8VW Distribuidor horizontal superior: 0.7x Flip Divisor superior: VERICAL El estilo del divisor inferior: ver la captura de pantalla del color del divisor inferior: RGBA (150,210,210,0,2) Altura del divisor inferior: 10 VW Repetición horizontal del compartimento inferior: 0.5x Divisor inferior: Verticalast E! Verifique el diseño final.
Estilo 2: triple amenaza

El siguiente estilo del módulo de encabezado de la Divica incluye tres exhortaciones a la acción, incluidos los dos botones y el despliegue al ícono inferior. Hacer coincidir los íconos con el ícono de desplazamiento ayuda a la apariencia simétrica del diseño. Y los divisores de las secciones crean un hermoso diseño triangular abstracto que conduce a los usuarios por la página.


Cree una nueva sección de ancho completo con un encabezado de ancho completo. Luego actualice el texto para el título, el botón de enlace # 1 y el botón de texto # 2 del enlace.

Luego, actualice el resto del diseño de la siguiente manera: Color de fondo: # 1A1844 Orientación de texto: Icon Center: Ver captura de pantalla Dibuje hacia abajo el tamaño del icono: 20 PX Título de la fuente: Fuente de Lato: Tamaño del texto duro: 5VW (escritorio), 40px (tableta (tableta ), 30px (teléfono inteligente) Altura de la línea del título: 1.3em Los dos botones de color de fondo: # FE4943 Ancho del botón Dos bordes: 0 PX Botón de icono Dos: Flecha derecha (ver captura de pantalla) Color de fondo 1: # FE4943 El ancho del botón One Border : Icono de botón 0px 1: Flecha izquierda (ver captura de pantalla) Botón de icono de colocación 1: ENLAJO PERSONALIZADO PERSONALIZADO IZQUIERDO: 10 VW, 10 VW izquierda
Ahora todo lo que tenemos que hacer es agregar nuestras secciones 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 configuración: Ver captura de divisor más alta: RGBA (255,255,255,0,3) Altura del separador superior: 45VW Estilo de divisor superior: ver Color divisor más alto: 255,255,255, 0.1) La altura de El separador superior: 45 Vwacum, para verificar el diseño final:

Consejo de diseño de bonificación: ajustes de botas móviles, sé que no dije CSS personalizado, pero esta es una floración no esencial adicional, pensé que a algunos de ustedes les gustaría. Es posible notar que para dos botones, el segundo botón tiene un borde izquierdo que arroja el diseño a los teléfonos inteligentes. Para un diseño más limpio en los teléfonos inteligentes, puede agregar un fragmento CSS personalizado a la configuración de su página para hacer que los botones el mismo ancho y sin el segundo margen del botón.

Abra la configuración de la página a la división del constructor y agregue el siguiente css @media (max-width: 550px) {

.et_pb_fullwidth_heer.

Bloqueo de pantalla;
Ancho: 100%;
Margen-izquierda: 0px;
}
}
Mira tu diseño móvil ahora.
Estilo 3: Marco redondeado
Este diseño redondeado del módulo de encabezado de la Divic es una excelente manera de adaptarse a sus antecedentes y al contenido de encabezado para atraer aún más atención a la exhortación a la acción. Solo se necesitan unos pocos ajustes al borde del encabezado, una sombra de la caja y una cierta distancia personalizada.
Para comenzar, cree una nueva sección con un ancho completo con un encabezado de ancho completo.Primero, actualicemos los elementos de contenido para el encabezado agregando el título, el texto del enlace del botón # 1 y una imagen del logotipo. Luego agregue un fondo lo suficientemente grande como para cubrir la altura y el ancho del encabezado.Debido a que este será un encabezado redondeado, intente usar una imagen con la misma altura y ancho (como 1000 PX con 1000 PX).Luego actualice el resto de la configuración de diseño de la siguiente manera:


Guarde la configuración.Luego abra la configuración de la sección para agregar el color y el espacio de fondo de la siguiente manera:

Color de fondo: # 000000 Finamiento personalizado: 5VW arriba, 5VW abajo
Ahora revise su 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 para exponer la mitad derecha de la sección de la sección. Y el contenido del módulo de encabezado tiene un efecto de mezcla que expone la imagen de fondo por contenido. Para hacer esto, necesitará la imagen de fondo adecuada para. Vamos a empezar. Primero, cree una nueva sección con un ancho completo con un encabezado de ancho completo. Antes de comenzar a actualizar nuestros estilos de encabezado, primero muévase a la configuración de la sección y agregue el siguiente fondo: agregue un fondo con el punto focal a la derecha. Color izquierdo del gradiente de fondo: RGBA (0.0,0.54) Color derecho del gradiente de fondo: RGBA (255,255,255.0) Dirección de gradiente: 90 grados Dirección radial: Down Derecho Posición original: 50 % Posición final: 0 % Coloque el gradiente sobre el fondo de fondo: Imagen: Sí, el propósito del gradiente es hacer el lado izquierdo de la imagen más oscura, por lo que cuando mezclamos el contenido del módulo de encabezado es más fácil de leer. Tampoco podrá ver el fondo de la sección en este momento, porque el color predeterminado del fondo del encabezado aún está activo. Continuaremos cambiando esto. Abra la configuración del encabezado y actualice el contenido con un título, el texto de conexión # 1 y un logotipo oscuro.
Ahora cambie el color de fondo a blanco. Luego, actualice lo siguiente: Fuente de título de peso: Ultra Bold Text Color Título: # 000000 Título Texto Tamaño: 8VW Altura de la línea del título: 1.1EM Botón Un tamaño del texto: 2.7VW Texto del botón de texto: # 000000 Ancho Un botón de borde: 0.2EM Color Botón One: # EDF000 Font Peso: ultra audaz ancho: 50% (escritorio, tableta y teléfono inteligente) Modo de mezcla: pantalla de diseño final.

Estilo 5: Gran tipo de escala



Este diseño del módulo de encabezado de la divina introduce una forma simple y eficiente de crear un texto grande, que coincide con la ventana del navegador sin comprometer el diseño. Debido a que usamos un módulo de cabeza de ancho completo, tendremos que expandir un poco nuestra área de contenido. Luego necesitamos usar la unidad de longitud VW para dimensionar nuestro texto. Este diseño sería excelente para los encabezados de sección. Para comenzar, cree una nueva sección con un ancho completo con un encabezado de ancho completo. En la configuración Configuración para el ancho completo, actualice lo siguiente: Título: Consulta el texto del subtítulo: Botón Servicios # 1 Enlace Texto: Inicie ahora Elimine el texto predeterminado del cuadro de contenido. Luego agregue una ligera imagen del logotipo.

A continuación, aumentaremos el ancho implícito máximo del contenedor de encabezado para crear más espacio horizontal para su encabezado para esto, acceder a la pestaña avanzada y agregar el siguiente CSS al contenedor: Ancho: 100%;

MAX-ANCHO: 100%;

Ahora actualice el resto de la configuración de diseño de la siguiente manera: agregue una imagen de fondo. Orientación de texto y logotipo: Fuente Centro de título: Cuprum Peso del título Fuente: Bold Título Título Estilo de fuente: TT Title Texto Color: #BFBFBF Título Tamaño del texto: 10VW Carta Espaciado Título: 0.1EM Subove de fuente: Cuprum Alineación de Texto Subtitre (esto ayuda (Esto ayuda (esto ayuda al enfocar en el texto con espaciado entre letras) Tamaño del texto del subtítulo: 3VW Letras secundarias Espaciado: 7.8VW Un botón de borde Ancho: 0px Un botón de fuente: botón de icono de cupro Uno: Consulte la captura de la pantalla El truco debe Use la unidad de longitud VW. Luego ajuste el espacio entre las letras para alinearse con el texto lo mejor posible. Para maximizar la distancia horizontal, debemos agregar un ancho personalizado al contenido del encabezado, de la siguiente manera: el ancho del contenido: 80%; Incluso si esto es menor que el valor predeterminado del 100%, la modificación de la configuración anulará el valor predeterminado y se ajustará con el CSS personalizado que hemos agregado anteriormente. Finalmente, agregue una sombra de la caja para completar el diseño: Box Shadow: Vea la captura de pantalla El poder de la sombra de la caja: 0 px El poder de la sombra de la caja: 60 px

Ahora verifique el resultado final.


¡Conviértalos en encabezados de pantalla completa! Los dibujos anteriores se pueden hacer fácilmente en una pantalla completa con un clic de botón. Esta es una característica fuerte del encabezado con ancho completo. Simplemente acceda a la configuración de diseño del encabezado y seleccione la opción “Crear completa”.