¿Te gustaría saber cómo crear una sección Hero con el módulo Fullwidth Header de Divi?
Crear una sección de héroe es una excelente manera de llamar la atención sobre el contenido importante para tu página. Se trata de una contenido de gran tamaño que puedes utilizar para contar tu historia, compartir información sobre tu trabajo o destacar un producto o servicio.
Con el módulo de encabezado de ancho completo de Divi, puede agregar un título, subtítulo, dos botones, cuerpo de texto, imagen de logotipo e imagen de encabezado. Por supuesto, también puede usar las opciones de fondo para agregar y combinar imágenes, degradados, colores, patrones y máscaras.
Puede cambiar todas estas configuraciones en la configuración del módulo en lugar de tener que cambiar entre múltiples módulos de imágenes, texto y botones.
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.
Se fue !
vista
Aquí hay una vista previa de lo que estaremos diseñando.
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 crear una sección de héroe con el módulo de encabezado de ancho completo de Divi
Lea también: Divi: Cómo usar el “Generador de degradados” para embellecer sus imágenes
Crear una nueva página con un diseño predefinido
Comencemos usando un diseño predefinido de la biblioteca Divi. Para este diseño usaremos la página de inicio paquete de diseño veterinario.
Desde el panel de control de Worpress, agregue una nueva página a su Sitio web
Dale un título, luego selecciona la opción Utilice Divi Builder.
Vamos a utilizar un diseño predefinido de la biblioteca Divi para este ejemplo. Así que selecciona Examinar diseños.
Buscar y seleccionar el diseño criador de perros.
seleccionar Usar este diseño para agregar el diseño a su página.
Ahora estamos listos para diseñar.
Agregue el módulo de encabezado de ancho completo
Recrearemos la sección del héroe utilizando el módulo 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.
A continuación, 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 y agregue el contenido al lado del módulo:
- Título: Veterinario
- Subtítulo: Divivet. Servir a nuestros mejores amigos
- Botón #1: 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, agregue una imagen de encabezado.
Configuración de fondo degradado
Ve 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
Luego selecciona la pestaña Máscara de fondo y agregue una máscara de fondo.
- Fondo de máscara: Mancha de esquina
- Color de la máscara: #FFFFFF
- Transformar: vertical
Personalizar texto
Cambiar a pestaña Diseño y cambiar la configuración del título
- Fuente del título: Nunito
- Peso de la fuente del título: Ultra Bold
- Estilo de fuente: TT (mayúsculas)
- Color del texto del título: #a9cb6b
- Tamaño del texto: 14px
- Espaciado entre letras del título: 2px
Ir a la sección de Cuerpo de texto y personalizar la fuente.
- Color del texto: # 000000
- Tamaño del cuerpo del texto:
- Escritorio: 18px
- Teléfono: 14px
- Altura de la línea del cuerpo: 1.8 em
Ver también: Divi: Cómo personalizar la cesta y los iconos de búsqueda del módulo "Menú de ancho completo"
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: #000000
Por último, cambia el tamaño del texto.
- Tamaño del texto del subtítulo:
- Escritorio: 56px
- Móvil: 32px
- Altura de línea de subtítulos: 1.2 em
Personalizar botón #1
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: 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 de los bordes y la configuración de la fuente.
- Botón uno:
- Ancho del borde: 0px
- Radio del borde: 80px
- Espaciado entre letras: 2px
- Fuente: Nunito
- Peso de fuente: ultra negrita
- Estilo: TT (en mayúsculas)
- 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.
- Margen del botón uno
- Superior: 200px
- Abajo: 0px
- Relleno del botón uno:
- Superior: 16px
- Abajo: 16px
- Izquierda: 2em
- Derecha: 50em
- Sombra de cuadro: Captura de vista
Use configuraciones receptivas para establecer diferentes valores de margen y relleno en dispositivos móviles.
- Botón uno Margen-Top-Mobile: 25px
- Botón Uno Acolchado-Derecho-Móvil: 10em
Personalizar botón #2
Primero, haga clic derecho en el botón #1 y haga clic en Copiar estilos del botón uno.
Luego, haga clic derecho en el botón dos y pegue los estilos del botón #1.
Ahora podemos personalizar el botón dos. 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 configuraciones receptivas 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.
- Margen del botón dos:
- Superior: 0px
- Abajo: 0px
- Izquierda: 30%
- Relleno del botón dos:
- Superior: 16px
- Abajo: 16px
- Izquierda: 48em
- Derecha: 2em
Use la configuración de responsifq para establecer diferentes valores de margen y relleno para el diseño móvil.
- Botón Dos Margen-Izquierda-Móvil: 5%
- Relleno del botón dos:
- Móvil izquierdo: 35%
- Derecho-Móvil: 5%
CSS personalizado
Finalmente, se realiza la mayor parte del trabajo de diseño. Ahora necesitamos agregar CSS personalizado para completar el diseño. Cambiar a pestaña Avanzado y abre la sección CSS personalizado.
Primero, comencemos con el CSS para la imagen del 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 en el título. Estableceremos diferentes valores para las vistas de escritorio y móvil usando configuraciones receptivas.
Para computadora de 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.
Lea también: Divi: Cómo crear una sección de miembros del equipo como un carrusel
¡¡¡Descarga DIVI ahora!!!
Conclusión
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 decirle a su visitantes ¿De qué estás hablando? Sitio web.
Las configuraciones integradas facilitan la personalización de cada aspecto del encabezado, y todo está en un solo lugar, por lo que no es necesario cambiar entre varios módulos para crear su sección Hero.
Esperamos que este tutorial lo inspire para sus próximos proyectos Divi. Si tienes alguna inquietud o sugerencia, encuéntranos en la sección de comentarios para discutirlo
También puedes consultar nuestros recursos, si necesita más elementos para llevar a cabo sus proyectos de creación de sitios de Internet, consulte nuestra guía sobre Creación de blog de WordPress o el de Divi: el mejor tema de WordPress de todos los tiempos.
Pero mientras tanto, comparte este artículo en tus diferentes redes sociales.
...
