¡Muy buenas querido lector! Ya estoy de nuevo por aquí con un tema que quizás no sea tan popular pero que sin duda será importante si quieres mejorar las conversiones de tu página web, por lo tanto, hoy hablaremos sobre las hero images (también conocidas como hero banner).
¿Sabes lo que son?
Si tu respuesta es no, ten por seguro que tras leer el post de hoy tendrás mucho más claro qué es un hero banner, cómo diseñar tus hero images y qué características deberán tener si de verdad deseas mejorar la conversión de tu página web con ellas.
¡Vamos con ello!
¿Qué es un hero banner o hero image?
Un hero banner (o hero image) es el banner grande que aparece justo en la parte superior de la página web, más concretamente en la sección conocida como Above The Fold.
Por regla general, este banner suele ocupar el 100% del ancho de la pantalla y, en él se representa la marca o el producto de la forma más atractiva posible junto a una llamada a la acción (Call To Action) para que el usuario haga clic en él.
De hecho, por regla general un hero banner suele ser el primer paso hacia un embudo de conversión, ya que, en muchos de estos casos, este banner se utiliza en la sección más visible de la página web para mostrar un Lead Magnet.
Diferencia entre banner y hero
Aunque mucha gente usa ambos términos como sinónimos, la diferencia entre banner y hero está en el tamaño, la posición y el propósito. Un banner es cualquier elemento gráfico publicitario o informativo que puede colocarse en cualquier parte de la web (lateral, entre contenido, en el footer…), mientras que el hero (o hero banner) es siempre el elemento visual más grande y prioritario, situado en la parte superior de la página, y diseñado específicamente para causar el primer impacto y guiar al usuario hacia una acción concreta.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
¿Para qué sirven las hero images?
Cómo habrás podido imaginar, las hero images lo que buscan es impactar al usuario de forma visual para que este haga clic sobre el CTA y lleve a cabo una acción.
Gracias a este banner y su accionabilidad reducirás la tasa de rebote de tu página web y aumentarás el número de posibles futuros compradores de tu producto/servicio.
Por este motivo, las hero images se suelen utilizar para resaltar ofertas, lead magnets, ofrecer suscripciones, etc.
Ten en cuenta que este banner será el primer impacto al usuario y no existirá una mejor sección dentro de tu página web para impactar al mismo.
Cómo diseñar hero images: dimensiones y buenas prácticas
Antes de entrar en los trucos de conversión, conviene tener claro cómo diseñar hero images correctamente desde el punto de vista técnico:
- Dimensiones recomendadas: lo habitual es trabajar con anchos de 1920px (o al menos 1200-1600px) para que se vea nítido en pantallas grandes, con una altura que suele oscilar entre 500 y 800px según el contenido que incluyas.
- Formato: usa formatos optimizados como WebP en lugar de JPG/PNG sin comprimir, para no penalizar la velocidad de carga.
- Relación de aspecto: diseña pensando también en cómo se recortará la imagen en móvil, ya que el hero banner no siempre se ve igual en todos los dispositivos.
- Jerarquía visual: el texto y el CTA deben tener siempre más contraste y prioridad que la imagen de fondo.
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
5 trucos para mejorar la conversión de tu página web con las hero images
Si ya has entendido qué es un hero banner y lo que buscas ahora es mejorar tus conversiones con él, a continuación te mostraré 5 trucos con los que mejorarás tus conversiones gracias a las hero images.
¡Vamos con ello!
1. La hero imagen deberá estar alineada con lo que ofreces
Tus hero images deberán reflejar las necesidades e intereses de tu buyer persona.
Por todo ello, asegúrate de que tu banner muestre lo que el usuario quiere encontrar en tu página web y no muestres una oferta exclusiva que esté poco enfocada al core de tu negocio si no quieres confundir al usuario.
Por lo tanto, sé específico y recuerda que estos banners son el primer impacto del usuario para que entren en tu embudo de conversión.
2. Asegúrate de que tu hero imagen no rompa el diseño de tu página
Es importante que tu hero image guarde una armonía con el resto de tu página web en cuanto a diseño.
Es decir, este banner deberá tener la misma tipografía y colores que el resto de la página web para no confundir a tus usuarios.
Además, si a la página que contiene la hero image llegan usuarios procedentes de campañas de display (anuncios de imagen) asegúrate de que el banner de la campaña guarde la misma estética que tu hero image, ya que si no despistarás a tus usuarios y puede que estos abandonen la página sin hacer nada al pensar que se han confundido de portal.
3. Capta la atención de tus usuarios con ella
La principal función de un hero banner es captar la atención de tus usuarios y guiarlos para que realicen una acción (la indicada en el CTA).
Por todo ello, en este banner es importante que respondas a sus preguntas e intereses, que conectes con ellos y que despiertes su curiosidad.
Por ejemplo, en la hero imagen de la herramienta SEO Ahrefs se indica que no necesitas ser un gran SEO para utilizar Ahrefs y conseguir tráfico. Además, te dan la opción de probar la herramienta 7 días, generando así curiosidad en el usuario.
4. Crea un CTA de calidad
Si es importante la imagen y el texto del hero banner, no menos importante es el CTA que contiene.
Este ha de ser corto, directo, intuitivo y visualmente diferente para que destaque a ojos del usuario.
De todos modos, para dar con el CTA que mejor impacto tenga en tu audiencia lo mejor será realizar diferentes test A/B con los que probar diferentes colores (siempre corporativos) y textos para ver con qué combinación de factores se genera una mayor interacción en tu público.
5. Utiliza imágenes de alta calidad
Cómo has visto anteriormente, no hay segundas oportunidades para crear un buen impacto.
Por este motivo, no te podrás permitir el lujo de utilizar imágenes de fondo de mala calidad en tu hero image.
Si tener una imagen de fondo de alta calidad repercute en tu WPO, lo mejor será que optimices la imagen al máximo y, en caso de ser imposible, utiliza versiones planas (sin imagen fotográfica) en tu hero banner para que pesen menos y tenga más relevancia el mensaje.
6. Optimiza tu hero imagen para diferentes tamaños y dispositivos
¿Si después de optimizar al máximo textos, colores y demás elementos de tu hero image este banner no se visualiza correctamente en todos y cada uno de los dispositivos de tus usuarios, qué sentido tendrá hacerlo?
¡Exacto! Ninguno.
Por lo tanto, es importante que pruebes y configures tu banner en multitud de pantallas con diferentes dimensiones para que cualquier usuario que acceda a tu página web tenga la posibilidad de ver tu hero image de forma correcta, sin pérdida de calidad en el mensaje y en la imagen.
Por todo ello, realiza diferentes configuraciones visuales para los diferentes dispositivos existentes en el mercado.
Preguntas frecuentes sobre hero images y hero banners
¿Qué es un hero banner?
¿Qué es una imagen hero?
¿Cuál es la diferencia entre banner y hero?
¿Qué dimensiones debe tener una hero image?
Diseño tu página web en WordPress rápida y optimizada para SEO. Tu web pensada para convertir visitas en clientes
- Diseño web 100% personalizado. Nada de IA. 100% artesanal.
- Web rápida y lista para posicionar en Google.
- Diseño tu web en menos de 21 días. Firmado por contrato.
- Comunicación directa conmigo. Sin intermediarios.
Conclusiones sobre las hero images
Como has podido ver a lo largo del post, las hero images serán un gran aliado a la hora de convertir y guiar a tus usuarios hacia el primer paso de tu embudo de conversión.
Sin embargo, si no se hacen bien o no muestran el mensaje adecuado, estos banners pueden no funcionar tan bien y pueden hacerte perder un montón de ventas por el camino.
Por este motivo, te recomiendo que sigas a rajatabla los consejos que has visto en este artículo. Siguiéndolos conseguirás mejorar el porcentaje de conversión de tu página web.
Ahora te toca a ti querido lector: ¿utilizas hero images en tu página web? ¿Te parecen útiles?
Cuéntame tus impresiones en los comentarios y nos leemos en dos semanas.
