Consejos de diseño de imagen de héroe y cómo usarlos en Divi

En el tutorial de hoy, vamos a compartir algunos consejos sobre cómo diseñar una buena imagen/sección de héroe. Los consejos que se compartirán pueden ayudarlo a crear secciones principales efectivas para su propio sitio web o el sitio web de un cliente.

En general, hay muchas maneras diferentes de diseñar una imagen de héroe y la forma en que lo diseña generalmente depende de lo que trata el sitio web. Por eso, vamos a manejar algunos consejos generales de diseño que se aplican a todo tipo de sitios web y que todo el mundo debería conocer.

Después de echar un vistazo a los diferentes consejos, también compartiremos una sección de héroe de ejemplo que está a la altura de los consejos y le mostraremos cómo recrear este ejemplo con Divi como su creador de sitios web.

El ejemplo que le mostraremos cómo hacer, paso a paso, se ve así:

Elegir la imagen correcta

Al diseñar un sitio web, y una imagen de héroe en particular, se trata de volver a lo básico. Debe tener en cuenta que la sección principal será lo primero que las personas verán y experimentarán cuando visiten su sitio web. Influirá en su comportamiento y determinará qué sentimientos vinculan a su sitio web.

Pertinencia

Para comenzar, encuentre una imagen que esté en línea con el tema de su sitio web. Es lo primero que verán en su sitio web y lo asociarán con su sitio web.

Para encontrar relevancia, hágase dos preguntas:

¿Qué principal valor añadido ofrece mi producto/servicio/sitio web?
¿Qué tipo de imagen refleja ese valor añadido?

Siempre se reduce a lo que a sus visitantes les gustaría ver y con qué facilidad pueden entender la imagen completa. La gente tiende a visualizar todo; incluso una empresa o negocio. Por eso, debes ser tú quien les dé una imagen de héroe relevante desde el inicio de su estancia.

Algunos de los estilos de imágenes de héroes más comunes se basan en una (o más) de las siguientes cosas:

Producto (mostrar un producto como una imagen)
Contexto (mostrar una imagen que cuenta una historia junto con el contenido proporcionado)
Emoción (utilizando desencadenantes emocionales, como personas que sonríen)
Acción (usar una imagen que exprese una determinada acción vinculada a lo que trata tu sitio web)

Escoge uno de estos enfoques e intenta contar el mensaje de la mejor y más creativa manera posible. Mira si puedes encontrar imágenes gratuitas que sean lo suficientemente relevantes y, si no, compra fotos de stock o intenta hacer las tuyas propias.

Cuanto más relacionada con la empresa sea su imagen de héroe, mejor. Por eso, hacer tus propias imágenes de forma profesional suele ser lo más recomendable. Pero en los casos en que falten recursos, las imágenes de stock o gratuitas también pueden ser suficientes.

Alta calidad

Otro factor que es realmente importante para tomar la decisión correcta para su imagen de héroe es la calidad. Es obvio, pero te sorprendería ver cuántos sitios web no están a la altura.

Desea que se vea lo más profesional posible porque desea que esa calidad se asocie con los servicios o productos que representa en su sitio web.

Recomendamos usar una imagen con un ancho mínimo de 1920px, como se menciona en nuestra guía definitiva para usar imágenes dentro de Divi .

Considere el modo de pantalla completa

El uso de la imagen del héroe en una sección del héroe que está en modo de pantalla completa también se usa con frecuencia. Al hacer que tu sección de héroes se muestre a pantalla completa, tienes la oportunidad de interactuar con tu audiencia en un nivel más profundo. Te estás enfocando más en lo que se proporciona en la sección de héroes, por lo que realmente debería valer la pena.

Si está considerando crear una sección principal de pantalla completa, asegúrese de que sea la mejor parte de su sitio web, ya que será la parte de su sitio web donde obtendrá la mayor interacción. Al interactuar con ellos en una etapa temprana de su visita, aumenta las posibilidades de interactuar con ellos en el resto del sitio web. Del mismo modo, si una sección principal de pantalla completa no vale la pena, puede desalentar a las personas a continuar su estadía en su sitio web.

Al centro o no al centro

La mayoría de la gente puede estar de acuerdo en que la simetría es muy atractiva a la vista. Sin embargo, lo vemos tanto en la web que es posible que ya no lo consideremos especial. Puedes hacer muchas cosas hermosas incluso cuando no estás centrado.

Pero, si no quiere correr el riesgo, siempre puede recurrir a centrar todo el contenido que está creando para su sección de héroe, incluida la simetría de la imagen del héroe.

Crear contraste

La imagen del héroe generalmente contiene tres cosas: la imagen en sí, el contenido y el CTA. Desea que cada uno de ellos desempeñe su propio papel en la experiencia que tiene cada visitante, por lo que deben tener un sentido de armonía entre ellos. Por eso es importante crear cierto equilibrio con el uso de los colores. Agregar una superposición de color o degradado a la imagen generalmente hace el trabajo.

Desde que las nuevas opciones de diseño de fondo estuvieron disponibles con el constructor Divi, crear contraste se ha vuelto realmente fácil. Puede jugar con los colores que se utilizan en su imagen de fondo para crear la mejor combinación de color y contraste posible para su sección de héroe, pero volveremos a eso cuando recreemos la sección de héroe a continuación.

Pruebe un fondo de video en su lugar

Si desea darle esa vida extra a su sitio web, también puede considerar usar un video en lugar de una imagen. Al elegir un video para la sección principal, se aplican los mismos consejos que para las imágenes.

Puede encontrar diferentes videos en línea que pueden coincidir con el sitio web que está creando, o puede crear el suyo propio. Coverr es un sitio web que proporciona videos que se pueden usar para las secciones principales en particular. Brindan a su audiencia diferentes tipos de videos cortos que son excelentes para crear sitios web sin muchos recursos.

Suben 7 videos nuevos todos los lunes y los videos que comparten son de uso gratuito, incluso con fines comerciales.

CTA que marca la diferencia

Una gran imagen de héroe y sección siempre termina teniendo un propósito. Ese propósito es más comúnmente una interacción entre el visitante y la persona o empresa detrás del sitio web. Quiere conocer a sus visitantes y, con suerte; convertirlos en un visitante leal o un cliente potencial.

Para asegurarte de que realmente alcanzas ese objetivo y cumples con el propósito, una buena llamada a la acción puede ser útil. Al diseñar un CTA, también hay cosas a tener en cuenta. Desea aumentar la efectividad de su CTA y asegurarse de que la imagen principal brinde los resultados que se pretendía brindar.

Al diseñar un CTA, tenga en cuenta lo siguiente:

Asegúrate de que el CTA sea una de las primeras cosas que las personas noten (a través del color y el contraste)
Piense en la copia de CTA que está utilizando. Quieres que sea persuasivo
Asegúrate de que lo que sigue después de hacer clic en el CTA vale la pena (da un valor agregado para obtener resultados)

Comencemos a crear (escritorio)

Ahora que hemos repasado los consejos generales sobre imágenes de héroes, es hora de ponerlos en práctica. El ejemplo que hicimos está orientado al producto, pero también incluimos otros factores (como el contexto).

Nos aseguramos de que haya suficiente contraste, un buen CTA, una imagen de alta calidad y, aunque usamos una sección estándar en lugar de una sección de ancho completo, ajustamos manualmente las subcategorías de Espaciado para asegurarnos de que la sección principal aparezca en pantalla completa en las computadoras de escritorio.

Elija una sección

Elija entre una sección de ancho completo o una sección normal. Debido a que la sección estándar es más flexible, elegiremos una sección estándar y la convertiremos en una sección principal que se ajuste a nuestras necesidades.

Opciones de fondo

La imagen que se representará en nuestra sección de héroes es un producto, pero también hemos hecho uso del contexto y la emoción. Se puede ver que el entorno en el que se tomó la fotografía se puede relacionar con la aventura. También usamos la emoción a través del contenido provisto en la imagen del héroe.

Le estás diciendo a la gente que «se tome su tiempo» mientras vive su estilo de vida aventurero. También les está diciendo que está bien perseguir las cosas que más desean en la vida y que este reloj en particular es el toque final ideal para este viaje.

La imagen utilizada en este ejemplo proviene de Unsplash . Elija la imagen que desee usar como imagen de fondo y abra la configuración de la sección en la que está trabajando. Dentro de la pestaña Contenido, encontrará la Subcategoría de fondo. Comience agregando la imagen de fondo.

A continuación, queremos poner una superposición de color en la imagen que estamos usando. Esto se remonta al consejo ‘Crear contraste’ que discutimos anteriormente. Agregaremos cierta oscuridad a la imagen para crear un mejor equilibrio con los módulos de texto y el módulo de botones que usaremos.

En la mayoría de los casos, se utiliza un color de superposición gris. Es el color más estándar para usar como una superposición que no cambiará mucho los colores de la imagen. El código de color que hemos usado es ‘#BFBFBF’.

Luego, regrese a la imagen de fondo y aplique Mezcla de imagen de fondo. En este caso, usaremos ‘Multiplicar’. Cambie la posición de la imagen de fondo a ‘Superior izquierda’ también.

Configuración de fila

Continuando, vamos a agregar una fila de ancho completo a la sección que hemos creado. Abra la configuración y agregue ‘10%’ al relleno superior en la subcategoría Espaciado de la pestaña Diseño.

A continuación, vaya a la pestaña Avanzado y desactive la fila para teléfono y tableta en la subcategoría Visibilidad.

Primer módulo de texto

Después de eso, agregaremos el primer módulo de texto. Abra la configuración y escriba el título que desea usar en el cuadro de contenido dentro de la pestaña Contenido. Pase a la pestaña Diseño y realice las siguientes modificaciones en la subcategoría Texto:

Orientación del texto: Derecha
Fuente del texto: Langosta
Tamaño de fuente de texto: 80
Color de fuente del texto: #FFFFFF
Altura de línea de texto: 1,7 em

Desplácese hacia abajo en la misma pestaña, agregue ‘25%’ al Margen superior y ‘-12%’ al Margen derecho en la subcategoría Espaciado.

Segundo módulo de texto

Agregue otro módulo de texto, escriba el texto en el cuadro de contenido y vaya a la pestaña Diseño. En la subcategoría Texto, aplique los siguientes cambios:

Orientación del texto: Derecha
Fuente del texto: Montserrat
Tamaño de fuente de texto: 15
Color de fuente del texto: #FFFFFF
Altura de línea de texto: 1,7 em

Desplácese hacia abajo en la misma pestaña y agregue ‘4%’ al Margen superior y ‘-12%’ al Margen derecho en la subcategoría Espaciado.

Módulo de botones

Continúe agregando un módulo de botones y escribiendo el texto del botón. A continuación, vaya a la pestaña Diseño y cambie la Alineación del botón a ‘Derecha’.

Desplácese hacia abajo en la misma pestaña y realice las siguientes modificaciones en la subcategoría Botón:

Usar estilos personalizados para el botón: Sí
Tamaño del texto del botón: 20
Color del texto del botón: #FFFFFF
Color de fondo del botón: #E02B20
Ancho del borde del botón: 2
Color del borde del botón: #E02B20
Radio del borde del botón: 3
Fuente del botón: Montserrat
Estilo de fuente del botón: Capital

Versión móvil y tableta

Al crear una imagen de héroe para una pantalla de escritorio, hay muchas más posibilidades. Para teléfonos y tabletas, por otro lado, de alguna manera tienes que encontrar una manera de hacer que todo se vea bien de una manera simple.

Vamos a hacer que todo esté centralizado cuando alguien visite su sitio web con un teléfono o una tableta. Continúe y clone la fila que hicimos para el escritorio y colóquela en la misma sección.