Cómo diseñar una sección de héroes para su sitio web (guía 2025)

Su sitio web solo tiene unos pocos segundos para causar una buena impresión, por lo que tener una sección de héroe fuerte debería ser una prioridad. Es como la ventana de la tienda de su negocio en línea, y necesita captar su atención rápidamente y alentarlos a seguir desplazándose. En esta publicación, nos sumergiremos en los detalles de diseñar una sección de héroes y le mostraremos cómo diseñar uno con Divi usando su intuitivo Builder visual de arrastrar y soltar.

¿Qué es una sección de héroes y por qué necesitas una?

La sección de héroes de su sitio web no es solo la parte superior de la página; Es tu primera oportunidad de causar una buena impresión. Aquí es donde captas la atención, muestra tu mensaje principal y muestra instantáneamente a los visitantes por qué deberían quedarse. Una gran sección de héroes los conecta en segundos, guiándolos más profundamente en su sitio con llamadas claras a la acción y preparando el escenario para toda la experiencia del usuario (UX). Por eso es tan importante hacerlo bien.

Aquí hay algunas cosas a tener en cuenta:

Las primeras impresiones son importantes

Vivimos en un mundo de gratificación instantánea. Los usuarios que aterrizan en su sitio emitirán juicios rápidos, por lo que la sección de héroes tiene que llamar su atención en unos pocos segundos. De lo contrario, es probable que reboten, salgan de su sitio y vayan a otro lado. Sin embargo, tu sección de héroes no se trata solo de imágenes. Establece el tono para toda la experiencia del usuario. Una buena sección de héroes establece las expectativas de los usuarios sobre lo que encontrarán en su sitio web.

Cuando sabes que solo tienes unos segundos para llamar la atención de las personas, haz que cuente. Use el poder de la narración visual para transmitir su mensaje rápidamente. Las imágenes convincentes, como fotos o videos, combinados con encabezados impactantes, pueden transmitir mucha más información en unos segundos que los grandes párrafos de texto. Use el lenguaje que ayude a los usuarios a comprender instantáneamente sus ofertas y por qué deberían preocuparse.

Considere este ejemplo: desea comenzar a comer orgánico, por lo que busca un mercado local de agricultores. Cuando aterriza en el sitio, la imagen de deliciosa comida capta su atención. Escaneando el encabezado, encuentra dos botones que lo alentan a aprender más.

Comunica tu mensaje

Los visitantes no deberían tener que adivinar o desplazarse para comprender lo que ofrece. Evite la jerga o el lenguaje demasiado técnico que su público objetivo puede no comprender. En cambio, resalte lo que te hace diferente de la competencia. Podría ser cualquier cosa, desde un producto o servicio único hasta un área especializada de experiencia. Además, ¿cómo les beneficia ese producto o servicio? Enmarca su mensaje en términos de lo que el usuario necesita o quiere.

Hemos mencionado la importancia de las imágenes, pero el texto que elija es igualmente crucial. Mantenga los titulares cortos, memorables y que llamen la atención. Siga eso con un párrafo corto de subtítulo o introducción para capturar el interés del usuario.

Considere este ejemplo: está buscando terapia de arte para su abuela. Cuando encuentre este sitio, se siente atraído por el diseño y los colores brillantes. Usted lee el párrafo y sabe que este negocio ofrece sesiones de terapia de arte para niños, adultos y personas mayores.

Puede impulsar conversiones

Las conversiones son la razón principal por la que las personas crean sitios web. Los dueños de negocios quieren que compre algo o complete una tarea. Su sección de héroes puede ser un imán para las conversiones si se diseña correctamente. Uno de los factores más cruciales para lograr esto es usar un llamado a la acción efectivo (CTA). Cada sección de buen héroe tendrá un botón o un formulario que aliente a sus visitantes a dar el siguiente paso.

Otra forma efectiva de impulsar las conversiones es crear una sensación de urgencia. Esto se puede lograr a través de ofertas de tiempo limitado en un producto específico, temporizadores de cuenta regresiva o los beneficios de registrarse en su boletín. Tenga cuidado de no ser demasiado agresivo. En su lugar, use el lenguaje que motive a los usuarios a tomar medidas.

Considere este ejemplo: eres un entusiasta de Divi que vive en California. Siempre ha querido asistir a una conferencia relacionada con el diseño web para hacer conexiones y aprender nuevas habilidades. Al aterrizar en el sitio, inmediatamente sabe que este sitio web es para una reunión de Divi en San Fransisco en agosto, y puede registrarse.

¿Cuáles son los elementos centrales de una sección de héroes efectiva?

Centrarse en algunos elementos clave le permite crear una sección de héroes que se vea increíble, involucra efectivamente a sus visitantes y los alienta a explorar más a fondo su sitio web. ¿Qué debes incluir en una sección de héroes?

Un titular convincente

Su titular debe ser corto, dulce e impactante. Piense en grande, audaz y impulsado por los beneficios. En lugar de decir bienvenida a nuestro sitio web , intente algo más atractivo como desbloquear su potencial con nuestro programa de kickboxing de 30 días . El módulo de encabezado de encabezado de Divi o encabezado de ancho completo le brinda un control completo sobre el estilo de su titular. Juega con diferentes fuentes, colores, tamaños y espacios para crear un aspecto llamativo. Puede usar estilos de tipografía para mostrar el nombre de su negocio para que sea innegable desde el principio de lo que se trata su negocio.

Párrafo de subtítulo o introducción

Mientras que su titular llama la atención, su párrafo de subtítulo o introducción proporciona el contexto. Es su oportunidad de elaborar la promesa del titular y agregar un toque de intriga. Manténgalo conciso y deje que funcione armoniosamente con su titular principal. Por ejemplo, si su titular pasa un día en el spa , su subtítulo podría elaborar y explicar qué ofrece ese spa.

Un llamado claro a la acción

Tu héroe necesita un propósito claro. ¿Qué quieres que los visitantes hagan a continuación? Ya sea que desee atraer a los usuarios a obtener más información, realizar una compra o suscribirse a un boletín, sea lo que sea, su CTA debe ser cristalino y prominente. Use un lenguaje orientado a la acción como comenzar o unirse hoy . Un CTA bien ubicado actúa como guía, lo que lleva a los visitantes hacia una acción deseada.

Imágenes de alta calidad

Seamos honestos: las imágenes hablan más que las palabras. Una imagen o video de alta calidad puede llamar la atención instantáneamente y establecer el ambiente para su sitio web. Divi hace que sea súper fácil de agregar y estilo imágenes y videos en su sección de héroes. Las buenas imágenes pueden transmitir emociones, contar una historia y crear una impresión duradera.

Un fondo que se mueve

El fondo de su sección de héroes prepara el escenario para su contenido. Puede usar imágenes, colores sólidos o gradientes para crear un impresionante telón de fondo. Divi le brinda control completo sobre su configuración de fondo para que pueda hacer un aspecto único y llamativo. La mayoría de los temas premium le proporcionan control sobre la configuración de fondo, lo que le permite crear una sección de héroes única que refleje su marca y establezca el tono para el resto de su sitio web.

Ejemplos de secciones de héroes (y por qué funcionan)

¿Listo para ver cómo una poderosa sección de héroes puede transformar su sitio web? Exploremos algunos ejemplos efectivos disponibles con Divi, rompiendo por qué funcionan. Usando varios de los paquetes de diseño de Divi, mostraremos varios diseños para inspirarlo. Recuerde, estos son solo puntos de partida: el éxito del mundo real depende del contenido convincente (no el texto del marcador de posición). Sin embargo, estos ejemplos le darán una imagen clara de las posibilidades.

Ejemplo 1: software de IA

Nuestro primer ejemplo es para una compañía de software de IA. Tiene varias fortalezas, incluyendo:

1. Un encabezado y subtítulo claro: el futuro de Divi es un encabezado conciso e intrigante que comunica el enfoque. La inteligencia artificial subtítulo proporciona contexto y una sensación moderna de vanguardia.
2. Apelación visual: el fondo abstracto y futurista con elementos brillantes es llamativo y relevante para el tema de la IA y el futuro.
3. Fuerte contraste: el texto blanco contra el fondo morado proporciona una excelente legibilidad y hace que el mensaje se destaque.
4. Llamadas claras a la acción: Únase a Divi hoy y la demostración gratuita es directa y orientada a la acción, diciéndole al usuario exactamente qué puede hacer y qué obtendrán cuando hagan clic. Tener dos CTA ofrece opciones que interesan al usuario.
5. Es moderno: el diseño general, el esquema de color y las imágenes evocan una sensación de innovación y con visión de futuro, que se alinea con el tema de la IA y las tendencias futuras.

Ejemplo 2: suministro de mascotas

Este paquete de diseño está diseñado para los dueños de negocios de suministro de mascotas. Aquí hay algunos puntos que hacen que su sección de héroes sea efectiva:

1. Un encabezado claro: los suministros para mascotas y suscripciones mensuales de caja comunican lo que hace la compañía, lo que hace que el encabezado sea sencillo y comprensible.
2. Direct CTA: Shop Online es un CTA conciso que alienta a los visitantes a comprar sus productos.
3. Imagen visualmente relevante: la imagen principal del héroe muestra comida para mascotas, reforzando la naturaleza del negocio. También agrega un toque de color para atraer el ojo del usuario.
4. Diseño limpio: el diseño está despejado, moderno y simple. El fondo blanco y el texto en negrita proporcionan un buen contraste y legibilidad.

Ejemplo 3: Agua sin fines de lucro

En este ejemplo, el héroe representa un negocio de agua sin fines de lucro. Aunque simple, el héroe es efectivo porque:

1. Tiene una marca clara: el nombre comercial y el lema acompañante comunican la misión de la organización.
2. Es visualmente atractivo: la gran imagen de fondo del océano crea una visual fuerte e inmediatamente se conecta al tema del agua.
3. Un CTA claro: el botón Make A Donation es prominente, y los usuarios usan texto orientado a la acción para fomentar el compromiso.
4. Uso de estadísticas: destacar el dinero recaudado proporciona evidencia del impacto de la organización benéfica y genera confianza en la marca.
5. Un diseño armonioso: el estilo de bloque de color presenta la información de una manera estructurada y estéticamente agradable, con secciones claras para diferentes aspectos de la organización benéfica.

Ejemplo 4: Realty

En el paquete de diseño de bienes raíces para Divi, el héroe usa el sistema de cuadrícula de Divi para agregar cuatro columnas al héroe. Es efectivo por algunas razones:

1. Titular conciso: Encuentre la casa de sus sueños con Divi Apele al público objetivo y presente valor.
2. Vistas fuertes: la imagen de fondo monocromática contrasta muy bien con la CTA verde, lo que lo hace destacar.
3. Clear CTA: la sección Hero tiene cuatro CTA fuertes para que los usuarios se involucren con el sitio web.
4. Diseño moderno: el diseño minimalista y el esquema de color oscuro crean un aspecto sofisticado y moderno.

Estos ejemplos demuestran la versatilidad de un buen diseño de sección de héroes. Las posibilidades son infinitas, desde elegantes y modernas hasta visualmente convincentes e informativas. Ahora, profundicemos en lo que hace de Divi la herramienta ideal para personalizar y crear la sección de héroes perfecta.

Por qué Divi es una gran opción para diseñar una sección de héroes

Divi cambia el juego cuando se trata de construir sitios web, incluida la creación de secciones de héroes. Divi ofrece un constructor de páginas de arrastrar y soltar, el Visual Builder, para que pueda ver exactamente cómo se verá su sitio web a medida que lo construya.

El tema está cargado con más de 200 módulos de diseño, que le brinda opciones ilimitadas para construir impresionantes secciones de héroes y páginas web. Con el creador de temas, puede personalizar cada parte de su sitio, desde el encabezado de su sitio hasta las plantillas de página, creando un aspecto verdaderamente único.

Divi tiene una biblioteca masiva de más de 2600 diseños diseñados profesionalmente si necesita inspiración. Cada diseño incluye una sección de héroe bien elaborada que puede ajustar fácilmente para que coincida perfectamente con su marca. Entonces, ya sea que seas un profesional de diseño o un novato completo, Divi tiene todo lo que necesitas para crear una sección de héroes que se destaque.

Además de miles de diseños, Divi ofrece otra manera fácil de construir un sitio web completo: Sitios rápidos de Divi. Puede crear un sitio web completo en menos de dos minutos utilizando un sitio de inicio o una IA generativa, gracias a la integración con el Asistente de diseño a bordo de Divi, Divi AI. Todos los sitios web iniciales y generados vienen con todas las páginas principales, plantillas de constructor de temas, estilos globales y todas las configuraciones de WordPress configuradas para usted.

Divi Quick Sites es una excelente manera de hacer que su creatividad fluya y construya un sitio web rápidamente. Puede personalizar fácilmente los estilos globales (fuentes y colores) para que coincida perfectamente con su marca. Tampoco estás atrapado con el look. Los diseños se pueden ajustar, sin embargo, desee hacerlo suyo. Además, puede construir tantos sitios web (y secciones de héroes) como desee por el bajo precio de $ 89 al año .

Obtener Divi

Cómo diseñar una sección de héroes con divi

El diseño de una sección de héroes con Divi se puede lograr de varias maneras. Puede crear uno desde cero, importar un diseño prefabricado o generar una sección con divi ai. Para esta publicación, comenzaremos con uno de los diseños prefabricados de Divi y alteraremos el diseño para que coincida con nuestra marca.

Elija un paquete de diseño

Cree una nueva página en su sitio web de WordPress, instale Divi y seleccione Elija un diseño prefabricado cuando se cargue la nueva página. A continuación, haga clic en Examinar diseños para ver la selección de diseños prefabricados.

Divi le permite buscar o filtrar a través de categorías para encontrar el diseño que desea agregar. Hay más de una docena de categorías para elegir, por lo que encontrar una que se adapte a sus necesidades será fácil. Para esta publicación, seleccionaremos el paquete de diseño Realty (ejemplo #4 anterior) y lo alteraremos para un bufete de abogados.

Haga clic en el paquete y seleccione el diseño de la página de destino . Haga clic en el botón Usar este diseño para instalar el paquete.

Un cuadro de diálogo pregunta si desea importar los preajustes de diseño. Divi Presets es una de las mejores características del tema, lo que le permite guardar y reutilizar estilos de diseño en su sitio web. Por esa razón, lo alentamos a que mantenga esa caja de verificación marcada. Luego haga clic en Importar para continuar.

Hacer cambios de diseño en la sección de héroes

Ahora que ha instalado el diseño, podemos trabajar para alterar a nuestro héroe para que coincida con nuestra marca. Comenzaremos intercambiando la imagen de fondo de nuestro héroe. Haga clic en el icono de configuración para mencionar la configuración de la sección.

Haga clic en el menú desplegable de fondo y seleccione la pestaña Imagen de fondo.

Elimine la imagen de fondo existente flotando sobre el área de la imagen y haciendo clic en el icono de basura .

Agregue una nueva imagen de fondo haciendo clic en el botón Agregar imagen de fondo en el área de imagen. Elija cualquier imagen que desee, pero asegúrese de que tenga 1920 px de ancho para que se muestre correctamente en pantallas de escritorio más grandes.

Reescribir texto con divi ai

Divi tiene su propio asistente de diseño de IA construido directamente en el Visual Builder. Le permite generar copia de marca con un mensaje de texto. Pero primero, cambiaremos el pequeño rumbo en el héroe. Haga clic en el icono de configuración para mencionar las opciones del módulo. Cambie el texto del pequeño encabezado al bufete de abogados familiares de Birmingham .

A continuación, reemplazaremos el gran rumbo en el héroe. Esta vez, usaremos Divi Ai para crear un titular convincente para nuestra sección de héroes. Para activar Divi AI, haga clic en el botón AI en el campo de encabezado .

Aparecerá un cuadro de diálogo con varias opciones. Seleccione Escribir con AI .

Cuando aparecen la configuración, el tipo de contenido ya será seleccionado para usted. Dígale a divi ai sobre qué está escribiendo (en este caso, un bufete de abogados de familia) y seleccione ningún contexto en el campo de contexto adicional . Divi AI funciona mejor cuando comprende lo que quiere bien, así que al escribir su aviso, sea descriptivo.

En la sección Guide Me , puede elegir un tono de voz, agregar cualquier palabra clave de uso obligatorio, definir la longitud del contenido y elegir un idioma. Finalmente, haga clic en el botón Generar texto para generar el encabezado. Puede tomar algunos intentos para obtener el encabezado que desea, pero la buena noticia es que Divi Ai proporciona generaciones ilimitadas.

Agregue una llamada a la acción

El último paso para completar nuestra sección de héroes es agregar una llamada a la acción (CTA). Primero, debemos cambiar el contenido en las primeras tres columnas. Reemplace los iconos y el texto en los módulos con contenido relacionado con la ley. Divi tiene más de 800 íconos, por lo que encontrar uno para adaptarse a su nicho es rápido y fácil.

A continuación, reemplazaremos el ícono en la cuarta columna en la fila debajo del encabezado. Pase el módulo para eliminarlo.

En el módulo de encabezado en la cuarta columna, use divi ai para generar un CTA cautivador. Recuerde, debe alentar a sus visitantes a actuar y vincular a una página relevante en su sitio.

Cómo diseñar una sección de héroes con Divi ai

Ahora que ves lo fácil que es diseñar una sección de héroes usando un paquete de diseño Divi, vamos a sumergirnos para crear uno con divi ai. Hemos mostrado cómo Divi AI puede generar texto, pero también puede generar imágenes, código, secciones, páginas web y sitios web completos (más sobre eso más adelante).

Generando un nuevo héroe Divi

Comience creando una nueva página para su sitio web de Divi. Esta vez, en lugar de comenzar con un diseño prefabricado, elija construir desde cero cuando se cargue el constructor visual.

Cuando el Visual Builder se carga, Divi le permite agregar automáticamente una fila y ofrece varios diseños. Visual Builder utiliza un sistema de cuadrícula para ayudarlo a estructurar y organizar su contenido en filas y columnas. Divi ofrece varios diseños de columnas preestablecidas (individuales, dos iguales, tres columnas con anchos variables, etc.).

Divi AI utiliza el mismo sistema de cuadrícula para generar secciones para su sitio web. Sin embargo, solo necesita agregar filas cuando planea construir un diseño desde cero. Cancele el cuadro de diálogo Fila haciendo clic en X en la parte superior derecha de la cuadrícula.

Para generar una sección de héroes con IA, pasee en la página y haga clic en el icono Blue + .

Elija Generar la sección con AI cuando aparezca el cuadro de diálogo.

Cuando aparece la configuración Divi AI, hay algunos campos para completar. Al igual que generar texto, Divi AI necesita información sobre la sección que desea crear y su negocio. También puede especificar el tipo de imágenes que desea usar (stock, generado por IA o marcador de posición) y las fuentes y colores que desea usar. Una vez que todo esté listo, haga clic en el botón Generar la sección para crear su héroe.

Todo el proceso lleva unos segundos. Una vez completado, puede guardar sus estilos para aplicar en cada sección o página web que cree. La IA proporcionará una lista de imágenes utilizadas (incluido un enlace) si elige imágenes de stock.

Ejemplos de héroe divi ai

Divi AI es versátil y puede crear secciones de héroes hermosas y efectivas en varias categorías. Eche un vistazo a algunos que generamos, junto con sus indicaciones.

Cree una sección de héroes para una agencia de diseño. Debería tener un titular cautivador, un texto de apoyo y un llamado prominente a la acción.

Diseñe una sección de héroes para un restaurante de pizza. Déle colores vibrantes, un titular audaz y una imagen de fondo de una deliciosa pizza.

Una sección de héroes para una ferretería llamada "Hardware de Dee". Debe incluir imágenes de herramientas, un gran titular en negrita y un llamado prominente a la acción.

Crea una sección de héroes para una firma de arquitectura. Debe tener un titular audaz e impactante, colores relajantes y un claro llamado a la acción.

Obtener divi ai

Experiencia El mejor Divi tiene para ofrecer con Divi Pro

Con Divi Pro, obtienes acceso a todo el ecosistema Divi. Esto significa que puede administrar todos sus complementos y temas en un solo lugar, almacenar y reutilizar sus diseños favoritos en la nube, colaborar fácilmente con su equipo y obtener soporte experto cuando sea necesario. Divi Pro realmente le permite llevar su sitio web al siguiente nivel.

Divi Pro viene con:

• Divi AI: Genere imágenes, texto, código, secciones, páginas web y sitios web completos ilimitados con un mensaje de texto.
• Divi Dash: Administre todos sus complementos y temas, rastree a todos sus clientes y obtenga información valiosa sobre cómo está funcionando su sitio web, todo en un tablero conveniente.
• Divi Cloud: ¡Diga adiós a los archivos JSON desordenados y una copia y pegado sin fin! Con solo unos pocos clics, puede almacenar y reutilizar sus diseños Divi favoritos en la nube.
• Equipos Divi: colaboren fácilmente con su equipo y les otorgue acceso a todas las increíbles herramientas Divi que posee.
• Divi VIP: Obtenga apoyo a nivel empresarial en menos de 30 minutos o menos, 24/7, 365 días al año.
• Divi Marketplace Créditos: Obtenga $ 50 en créditos para explorar el mercado Divi y encontrar temas, diseños y extensiones de niños increíbles para sobrealimentar su sitio web.

Con su suscripción Divi Pro, puede llevar su experiencia de construcción de sitios web al siguiente nivel. Es como tener un equipo de diseñadores expertos, desarrolladores y especialistas en apoyo a su alcance por el bajo costo de $ 277 por año, que es de solo $ 23.08 por mes.

Obtener Divi

Haz una primera impresión duradera con Divi

Una sección de héroes convincentes es esencial para capturar la atención del usuario y la participación de la conducción. Después de todo, solo tienes una oportunidad de causar una primera impresión. Divi ofrece una plataforma más que capaz para crear secciones de héroes impactantes, lo que lo hace más rápido y más fácil que nunca. Con su intuitivo constructor visual y poderoso asistente de diseño, Divi Ai, puedes diseñar secciones de héroes en minutos. Con Divi y Divi AI, puede capturar a su audiencia con el primer clic.