Cómo construir una sección de héroe con el módulo de encabezado de ancho completo de Divi

Crear una sección de héroe es una excelente manera de llamar la atención sobre contenido importante en su página. Es una pieza de contenido de gran tamaño que puede usar para contar su historia, compartir información sobre su trabajo o resaltar un producto o servicio. Con el módulo de encabezado de ancho completo de Divi, puede agregar un título, un subtítulo, dos botones, texto del cuerpo, una imagen de logotipo y una imagen de encabezado. Por supuesto, también puede utilizar las opciones de fondo para agregar y combinar imágenes, degradados, colores, patrones y máscaras. Puede editar todas estas configuraciones dentro de la configuración del módulo de encabezado de ancho completo en lugar de tener que alternar entre múltiples módulos de imagen, texto y botón.

En este tutorial, le mostraremos cómo crear una sección de héroe atractiva y llamativa utilizando el módulo de encabezado de ancho completo de Divi.

¡Empecemos!

Vistazo

Aquí hay una vista previa de lo que diseñaremos.

Lo que necesitas para empezar

Antes de comenzar, asegúrese de tener la última versión de Divi en su sitio web.

Ahora, ¡estás listo para comenzar!

Cómo construir una sección de héroe con el módulo de encabezado de ancho completo de Divi

Crear una nueva página con un diseño prefabricado

Comencemos usando un diseño prefabricado de la biblioteca Divi. Para este diseño, utilizaremos la página de aterrizaje para veterinarios del paquete de diseño para veterinarios.

Agregue una nueva página a su sitio web y asígnele un título, luego seleccione la opción para usar Divi Builder.

Usaremos un diseño prefabricado de la biblioteca Divi para este ejemplo, así que seleccione Examinar diseños.

Busque y seleccione el diseño de la página de aterrizaje para veterinarios.

Seleccione Usar este diseño para agregar el diseño a su página.

Ahora estamos listos para construir nuestro diseño.

Agregue el módulo de encabezado de ancho completo

Vamos a recrear la sección principal usando el módulo de encabezado de ancho completo. Agregue una nueva sección de ancho completo a la página, debajo del encabezado existente.

Agregue un módulo de encabezado de ancho completo a la sección.

Luego, elimine la sección de encabezado original.

Personalizar el módulo de encabezado de ancho completo

Agregar contenido

Abra la configuración del módulo de encabezado de ancho completo y agregue el siguiente contenido al módulo:

• Título: Veterinario
• Subtítulo: DiviVet. Sirviendo a nuestros mejores amigos
• Botón #1: Ver todos los servicios
• Botón #2: Hacer una cita
• Cuerpo: Praesent sapien massa, convallis a pellentesque nec, egestas non nisi. Nulla quis lorem ut libero malesuada feugiat. Curabitur arcu erat, accumsan id imperdiet et, porttitor at sem. Cras ultricies ligula sed magna dictum porta.

A continuación, añade la Imagen de Cabecera de los veterinarios con los animales.

Configuración de fondo degradado

Mover a la configuración de fondo. Elimine el color de fondo original, luego agregue un degradado de fondo.

• 0%: rgba(255.170.205,0,48)
• 40%: rgba(110,66,255,0.24)
• 87%: rgba(124.239.255,0,71)
• Tipo de gradiente: Elíptico
• Posición del degradado: Derecha

A continuación, seleccione la pestaña Máscara de fondo y agregue una máscara de fondo al fondo.

• Máscara de fondo: Mancha de esquina
• Color de la máscara: #FFFFFF
• Transformación de máscara: Vertical

Personalizar estilos de texto

Con nuestro contenido de encabezado y fondo en su lugar, pasemos a la pestaña de diseño para personalizar los estilos de texto. Primero, abra la configuración del título y personalice el texto de la siguiente manera:

• Fuente del título: Nunito
• Peso de la fuente del título: ultra negrita
• Estilo de fuente del título: TT (en mayúsculas)

Modifique el color, el tamaño y el espaciado del texto del título.

• Color del texto del título: #a9cb6b
• Tamaño del texto del título: 14px
• Espaciado entre letras del título: 2px

Vaya a la sección del cuerpo del texto y personalice la fuente. Use la configuración receptiva de Divi para agregar un tamaño de texto más pequeño para dispositivos móviles.

• Color del cuerpo del texto: #000000
• Tamaño del cuerpo del texto-Escritorio: 18px
• Tamaño del cuerpo del texto: Móvil: 14px
• Altura de la línea del cuerpo: 1,8 em

A continuación, abra la configuración de subtítulos y personalice la fuente.

• Fuente de los subtítulos: Nunito
• Peso de fuente de subtítulos: Negrita
• Color del texto del subtítulo: #000000

Finalmente, cambie el tamaño del texto para escritorio y móvil (una vez más, use la configuración receptiva para agregar un tamaño de texto más pequeño en el móvil) y ajuste la altura de la línea.

• Tamaño del texto del subtítulo–Escritorio: 56px
• Tamaño del texto del subtítulo-Móvil: 32px
• Altura de línea de subtítulos: 1,2 em

Personalizar estilos de botón uno

A continuación, personalizaremos los estilos de los botones. Comience habilitando estilos personalizados para el Botón Uno, luego ajuste el tamaño del texto.

• Usar estilos personalizados para el botón uno: Sí
• Tamaño del texto del botón uno: 14px

Agregue un degradado de fondo al botón. Los valores de gradiente son los siguientes:

• 58%: #316EFF
• 100%: #1D2B60
• Dirección del gradiente: 90 grados

A continuación, personalice la configuración del borde y la configuración de la fuente.

• Ancho del borde del botón uno: 0px
• Radio del borde del botón uno: 80 px
• Espaciado de una letra del botón: 2px
• Fuente Button One: Nunito
• Peso de fuente del botón uno: ultra negrita
• Estilo de fuente del botón uno: TT (en mayúsculas)

Deshabilite el icono del botón uno.

• Mostrar icono de botón uno: No

A continuación, personalice la configuración de margen y relleno para el diseño del escritorio y agregue una sombra de cuadro.

• Botón uno Margen superior-Escritorio: 200px
• Botón uno Margen inferior-Escritorio: 0px
• Botón Uno Acolchado-Superior-Escritorio: 16px
• Botón uno Acolchado-Fondo-Escritorio: 16px
• Acolchado Botón Uno-Izquierdo-Escritorio: 2em
• Botón Uno Acolchado-Derecha-Escritorio: 50em
• Sombra del cuadro de botones: Inferior

Use la configuración receptiva para establecer diferentes márgenes y valores de relleno en dispositivos móviles.

• Botón uno Margen-Top-Mobile: 25px
• Botón Uno Acolchado-Derecho-Móvil: 10em

Hay algunos problemas de ajuste de texto con nuestro botón que solucionaremos con un CSS personalizado más adelante.

Personalizar botón dos estilos

El botón dos tiene colores y espacios diferentes, pero es bastante similar al botón uno. Para ahorrar algunos pasos de diseño repetitivos, copiemos los estilos del módulo del botón uno al módulo del botón dos, luego personalicemos lo que necesitamos cambiar.

Primero, haga clic con el botón derecho en la sección del botón uno y copie los estilos del botón uno.

Luego haga clic con el botón derecho en la sección del botón dos y pegue los estilos del botón uno.

Ahora podemos personalizar el botón con dos estilos. Cambie el color del texto.

• Color del texto del botón dos: #121F60

Personaliza el degradado de fondo para el botón dos.

• 30%: rgb(0,229,198,0)
• 100%: #00e5c6

Use la configuración receptiva para ajustar el degradado de fondo para dispositivos móviles.

• 0%: rgba(0,229,198,0)
• 100%: #00e5c6

A continuación, ajuste el margen y el relleno para el diseño del escritorio.

• Botón dos Margen-Superior-Escritorio: 0px
• Botón dos margen inferior del escritorio: 0px
• Botón dos Margen-Izquierda-Escritorio: 30%
• Botón Dos Acolchado-Superior-Escritorio: 16px
• Botón dos Acolchado-Fondo-Escritorio: 16px
• Botón Dos Acolchado-Izquierdo-Escritorio: 48em
• Botón Dos Acolchado-Derecha-Escritorio: 2em

Use la configuración receptiva para establecer diferentes valores de margen y relleno para el diseño móvil.

• Botón Dos Margen-Izquierda-Móvil: 5%
• Botón Dos Relleno-Izquierdo-Móvil: 35%
• Botón Dos Relleno-Derecho-Móvil: 5%

CSS personalizado

Finalmente, se realiza la mayor parte del trabajo de diseño. Ahora necesitamos agregar algo de CSS personalizado para completar el diseño. Vaya a la pestaña Avanzado y abra la sección CSS personalizado.

Primero, comencemos con el CSS de la imagen de encabezado. Este CSS permite que la imagen del encabezado se muestre sobre el botón.

z-index: 1;
position:relative;

A continuación, CSS personalizado para el título. Estableceremos diferentes valores para las vistas de escritorio y móvil usando la configuración receptiva.

Para escritorio:

padding-top:50px;
padding-bottom:30px;

Para móvil:

padding-top:5px;
padding-bottom:10px;

Finalmente, agregue el siguiente CSS al botón uno y al botón dos.

white-space: nowrap;

Resultado final

Este es el diseño final de nuestra sección principal de encabezado de ancho completo.

Pensamientos finales

El módulo de encabezado de ancho completo le permite crear fácilmente una hermosa sección de héroe para anunciar sus servicios y decirles a sus visitantes de qué se trata su sitio web. La configuración integrada facilita la personalización del diseño de cada aspecto del encabezado, y todo está en un solo lugar, por lo que no es necesario alternar entre varios módulos para crear su sección principal. Para diseños de secciones de héroes más exclusivos, consulta este tutorial: Cómo usar las máscaras y patrones de fondo de Divi para una sección de héroes. ¿Utiliza el módulo de encabezado de ancho completo para crear sus secciones principales? ¡Nos encantaría saber de ti en los comentarios!