Divi: ¡el mejor tema de WordPress de todos los tiempos!

más 901.000 descargas, Divi es el tema de WordPress más popular en el mundo. Es completo, fácil de usar y viene con más de plantillas gratuitas 62.

¿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 contenido importante en su página. Este es un gran contenido 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 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.

cómo crear una sección de héroe usando el módulo de encabezado de ancho completo de Divi
cómo crear una sección de héroe usando el módulo de encabezado de ancho completo de Divi

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

divi

Dale un título, luego selecciona la opción Utilice Divi Builder.

divi

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.

Cree fácilmente su sitio web con Elementor

Elementor te permite crear Fácil y Gratis cualquier sitio web o diseño de blog con un aspecto profesional. Deja de pagar mucho por un sitio web que puedes hacer tú mismo.

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

Módulo de encabezado de ancho completo

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 siguiente contenido al 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

¿Quieres vender tus productos en internet?

Descarga WooCommerce gratis, los mejores plugins de comercio electrónico para vender tus productos físicos y digitales en WordPress y crea fácilmente tu tienda online. Perfecto para principiantes.

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

cómo crear una sección de héroe usando el módulo de encabezado de ancho completo de Divi
cómo crear una sección de héroe usando el módulo de encabezado de ancho completo de Divi

¡¡¡Descarga DIVI ahora!!!

Conclusión

El módulo Fullwidth Header le permite crear fácilmente una hermosa sección Hero para publicitar sus servicios y decirles a sus visitantes de qué se trata su 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.

...

%d bloggers les gusta esta página: