Cómo crear secciones de héroes espectaculares con Divi

Secciones de héroe; sirven para todo tipo de propósitos. Son lo primero que ven los visitantes cuando visitan su sitio web, muestran inmediatamente el estilo de su sitio web e influyen en la forma en que sus visitantes se sienten y se comportan en su sitio. Ya estamos acostumbrados a todo tipo de secciones de héroes, pero la mayoría de ellas incluyen una imagen de héroe, un eslogan y una llamada a la acción. Sin embargo, también hay otras posibilidades. En esta publicación, le mostraremos otro enfoque en las secciones de héroe y lo seguiremos con un ejemplo que puede recrear usando Divi.

Ejemplo

El ejemplo que le mostraremos cómo recrear con Divi se ve así en el escritorio:

Y así en el móvil:

Cómo hacer que tu sección de héroes se destaque

Antes de mostrarte cómo recrear el ejemplo, echemos un vistazo a algunos de los factores que diferencian esta sección de héroes de otras.

1. Logotipo grande, descriptivo y centralizado

Lo primero que usamos en nuestro ejemplo, para ayudar a que nuestra sección de héroe se destaque, es un formato de encabezado centrado en lugar del predeterminado. Junto con eso, también estamos usando un menú transparente que ayudará a superponer los elementos del menú con el diseño de la sección del héroe. El vínculo entre el logotipo, el menú y el sitio web es más claro cuando se usa un fondo transparente, ya que hay una división menos dentro de la sección del héroe.

2. Concentrar contenido escrito

Otra cosa que puedes hacer para que tu sección de héroes se destaque es concentrar el contenido escrito que tienes. De esa manera, atraerá la atención de los visitantes a un lugar de la pantalla, lo que aumentará la posibilidad de que lo lean. Si, por otro lado, está dividiendo el contenido escrito en toda su sección de héroe, es más probable que los cambios se pierdan una parte del mensaje que está tratando de transmitir.

3. Resalte las propuestas de venta únicas

Por lo general, una sección de héroe contiene módulos de texto normales que comparten el eslogan de un producto o empresa. Sin embargo, también puedes usar los módulos de Blurb dentro de la sección de héroes. Estos módulos de Blurb son perfectos si desea compartir las propuestas de venta únicas de su producto o servicio de inmediato. Además de eso, también puede elegir si desea o no incluir llamadas a la acción en él de inmediato. En nuestro ejemplo, estas llamadas a la acción están integradas en los propios módulos de propaganda.

4. Imagen limpia del producto

Para colmo, y para equilibrar el contenido escrito que ha proporcionado, le recomendamos que utilice una imagen de producto limpia como imagen de fondo de la sección de héroe. Quieres que tu imagen de héroe sea lo más cualitativa y autoexplicativa posible sin ocupar toda la sección de héroe.

Cómo crear secciones de héroes espectaculares con Divi

Suscríbete a nuestro canal de Youtube

Recrear el ejemplo con Divi

Ahora que hemos repasado el lado teórico, es hora de que comencemos a recrearlo.

Formato de encabezado

Lo primero que deberá hacer es elegir 'Centrado' como Estilo de encabezado yendo a su Tablero de WordPress> Personalizar> Encabezado y navegación> Formato de encabezado> Y elija 'Centrado' como Estilo de encabezado '.

Configuración de la barra de menú principal

Luego, regrese al Encabezado y navegación> Barra del menú principal> Y realice los siguientes ajustes:

• Altura del menú: 211px
• Altura máxima del logotipo: 100 px
• Tamaño del texto: 16
• Espaciado entre letras: 2
• Fuente: Lato Light
• Estilo de fuente: mayúsculas
• Color del texto: #FFFFFF
• Color de enlace activo: #FFFFFF
• Color de fondo: rgba (255,255,255,0)
• Color de fondo del menú desplegable: rgba (255,255,255,0)

Agregar nueva sección

Una vez hecho esto, agregue una nueva página, habilite Divi Builder, habilite Visual Builder y agregue una nueva sección estándar.

Fondo degradado

Utilice el siguiente fondo degradado para esta sección:

• Primer color: # e2e2e2
• Segundo color: rgba (255,255,255,0)
• Tipo de degradado: lineal
• Dirección del gradiente: 180 grados
• Posición inicial: 40%
• Posición final: 40%

Imagen de fondo

A continuación, cargue la imagen de fondo y elija 'Multiplicar' como Mezcla de imágenes de fondo.

Agregar fila de dos columnas

Color de fondo

Agregue una fila de dos columnas a la sección que acaba de crear y use '# b7afa1' como color de fondo.

Columna 1 Fondo degradado

Desplácese hacia abajo y utilice el siguiente fondo degradado para la primera columna:

• Primer color: rgba (255,255,255,0.43)
• Segundo color: rgba (255,255,255,0)
• Columna 1 Tipo de degradado: radial
• Columna 1 Dirección de degradado: arriba a la izquierda
• Posición inicial de la columna 1: 49%
• Posición final de la columna 1: 49%

Fondo degradado de la columna 2

Y use el siguiente fondo degradado para la segunda columna:

• Primer color: rgba (255,255,255,0.43)
• Segundo color: rgba (255,255,255,0)
• Columna 2 Tipo de degradado: radial
• Columna 2 Dirección radial: Abajo a la derecha
• Posición inicial de la columna 2: 49%
• Posición final de la columna 2: 49%

Dimensionamiento

Vaya a la pestaña Diseño, habilite la opción 'Usar ancho de canalón personalizado' y use '1' para el Ancho de canalón.

Espaciado

Abra la subcategoría Espaciado y use el siguiente relleno y margen:

• Relleno superior: 0px (escritorio), 20px (tableta y teléfono)
• Relleno derecho: 25px
• Acolchado inferior: 20px
• Relleno izquierdo: 25px
• Margen inferior: 200 px

Primer módulo de propaganda

Activar icono

Agregue un módulo Blurb a la primera columna de la fila, habilite la opción 'Usar icono' y elija un icono.

Configuración de iconos

Luego, vaya a la configuración de Diseño y realice los siguientes cambios en la subcategoría Imagen e ícono:

• Color del icono: #FFFFFF
• Ubicación de la imagen / icono: Izquierda
• Usar tamaño de fuente del icono: Sí
• Tamaño de fuente del icono: 40px

Configuración del texto del encabezado

Luego, haga que las siguientes configuraciones se apliquen a la subcategoría Texto del encabezado:

• Fuente de encabezado: Roboto Light
• Estilo de fuente: Negrita
• Tamaño de fuente del encabezado: 25px
• Color del texto del encabezado: #FFFFFF
• Altura de la línea de encabezado: 1.5em

Configuración del texto del cuerpo

La subcategoría Body Text necesitará los siguientes cambios:

• Fuente del cuerpo: Lato Light
• Tamaño de fuente del cuerpo: 13px
• Color del texto del cuerpo: #FFFFFF

Dimensionamiento

A continuación, use '300px' como Ancho del contenido.

Espaciado

Por último, use el siguiente margen y relleno para el módulo Blurb:

• Margen superior: -50px (escritorio), 0px (tableta y teléfono)
• Relleno superior: 100 px
• Relleno derecho: 10px
• Relleno de Bototm: 30px
• Relleno izquierdo: 10px

Clonar módulo de propaganda y colocarlo en la segunda columna

Continúe clonando el módulo Blurb creado anteriormente y colocándolo también en la otra columna.

Cambiar el color de fondo

Lo primero que tendrás que cambiar en este módulo Blurb clonado es el color de fondo. Cámbielo a 'rgba (89,60,31,0.5)'.

Cambiar el ícono

Lo siguiente y último que deberá cambiar es el ícono dentro de la pestaña de contenido.

Extra: agregue la nueva opción de sombra de caja de Divi a la fila

Con la actualización reciente, ahora también puede agregar sombras de cuadro a filas, módulos y secciones. Para este ejemplo, vamos a agregar una sombra de cuadro a la fila. Eso ayudará a crear algo de profundidad y enfatizará el contenido escrito en nuestra sección de héroes.

• Posición horizontal de la sombra del cuadro: -3px
• Posición vertical de la sombra del cuadro: 31px
• Fuerza de desenfoque de sombra de caja: 79px
• Fuerza de propagación de la sombra de caja: -4px
• Color de sombra: # 424242
• Posición de la caja de sombra: Sombra exterior

Resultado

Tomemos otro resultado rápido en el resultado que debería poder lograr en el escritorio después de seguir esta publicación:

Y en el móvil:

Pensamientos finales

En esta publicación, le mostramos un enfoque diferente en las secciones de héroe. Te hemos dado algunos consejos y los hemos elaborado mostrándote cómo recrear un ejemplo que hicimos de antemano con Divi. Si tiene alguna pregunta o sugerencia; ¡asegúrese de dejar un comentario en la sección de comentarios a continuación!

¡Asegúrese de suscribirse a nuestro boletín informativo por correo electrónico y al canal de YouTube para que nunca se pierda un gran anuncio, un consejo útil o un obsequio de Divi!

Imagen destacada de Ellagrin / shutterstock.com