Como projetar uma seção de heróis para o seu site (guia 2025)

Seu site tem apenas alguns segundos para causar uma boa impressão; portanto, ter uma seção de herói forte deve ser uma prioridade. É como a janela da loja do seu negócio on -line e precisa chamar a atenção deles rapidamente e incentivá -los a continuar rolando. Neste post, mergulharemos nas especificidades de projetar uma seção de heróis e mostraremos como projetar um com o Divi usando seu construtor visual de arrastar e derrubado intuitivo.

O que é uma seção de herói e por que você precisa de uma?

A seção de heróis do seu site não é apenas o topo da página; É sua primeira chance de causar uma boa impressão. É aqui que você chama a atenção, exibe sua mensagem principal e mostra instantaneamente aos visitantes por que eles devem ficar por aqui. Uma grande seção de heróis os conecta em segundos, orientando -os mais profundamente ao seu site com chamadas claras para a ação e preparando o cenário para toda a experiência do usuário (UX). É por isso que é tão importante acertar.

Aqui estão algumas coisas a ter em mente:

Primeiras impressões são importantes

Vivemos em um mundo de gratificação instantânea. Os usuários que pousam em seu site farão julgamentos instantâneos, para que a seção de heróis precise chamar sua atenção em alguns segundos. Caso contrário, eles provavelmente saltarão, deixando seu site e indo para outro lugar. No entanto, sua seção de heróis não é apenas sobre visuais. Ele define o tom para toda a experiência do usuário. Uma boa seção de heróis define as expectativas dos usuários sobre o que eles encontrarão em seu site.

Quando você souber que tem apenas alguns segundos para chamar a atenção das pessoas, faça com que ele conte. Use o poder da narrativa visual para transmitir sua mensagem rapidamente. Imagens atraentes, como fotos ou vídeos, combinadas com títulos impactantes, podem transmitir muito mais informações em alguns segundos do que grandes parágrafos de texto. Use o idioma que ajuda os usuários a entender instantaneamente suas ofertas e por que devem se importar.

Considere este exemplo: você deseja começar a comer orgânico, para procurar um mercado local de agricultores. Quando você pousa no local, a imagem da comida deliciosa captura sua atenção. Examinando o cabeçalho, você encontra dois botões incentivando você a aprender mais.

Ele comunica sua mensagem

Os visitantes não precisam adivinhar ou rolar para entender o que você oferece. Evite jargão ou linguagem excessivamente técnica que seu público -alvo possa não entender. Em vez disso, destaque o que o torna diferente da competição. Pode ser qualquer coisa, desde um produto ou serviço exclusivo até uma área especializada de especialização. Além disso, como esse produto ou serviço os beneficia? Enquadre sua mensagem em termos do que o usuário precisa ou deseja.

Mencionamos a importância dos visuais, mas o texto que você escolhe é igualmente crucial. Mantenha as manchetes curtas, memoráveis ​​e atraentes. Siga isso com uma curta subposição ou parágrafo de introdução para capturar o interesse do usuário.

Considere este exemplo: você está procurando arteterapia para sua avó. Quando você encontra este site, é atraído pelo design e cores brilhantes. Você lê o parágrafo e sabe que esse negócio oferece sessões de arte -terapia para crianças, adultos e idosos.

Pode dirigir conversões

As conversões são a principal razão pela qual as pessoas criam sites. Os empresários querem que você compre algo ou conclua uma tarefa. Sua seção de herói pode ser um ímã para conversões, se projetado corretamente. Um dos fatores mais cruciais para realizar isso é usar uma chamada e ação eficaz (CTA). Toda seção de bom herói terá um botão ou um formulário que incentive seus visitantes a dar o próximo passo.

Outra maneira eficaz de impulsionar as conversões é criar um senso de urgência. Isso pode ser alcançado por meio de ofertas de tempo limitado em um produto específico, temporizadores de contagem regressiva ou os benefícios de se inscrever no seu boletim informativo. Cuidado para não ser muito insistente. Em vez disso, use o idioma que motiva os usuários a agir.

Considere este exemplo: você é um entusiasta do Divi que vive na Califórnia. Você sempre quis participar de uma conferência relacionada ao web design para fazer conexões e aprender novas habilidades. Ao desembarcar no site, você sabe imediatamente que este site é para um encontro de divi em San Fransisco em agosto e pode se inscrever.

Quais são os elementos centrais de uma seção de heróis eficazes?

O foco em alguns elementos -chave permite que você crie uma seção de heróis que pareça incrível, efetivamente envolve seus visitantes e os incentiva a explorar ainda mais seu site. O que você deve incluir em uma seção de heróis?

Um título atraente

Sua manchete deve ser curta, doce e impactante. Pense grande, ousado e orientado a benefícios. Em vez de dizer bem-vindo ao nosso site , tente algo mais envolvente, como desbloquear seu potencial com nosso programa de kickboxing de 30 dias . O módulo de cabeçalho de cabeça ou largura da Divi oferece controle completo sobre o estilo da sua manchete. Brinque com diferentes fontes, cores, tamanhos e espaçamento para criar uma aparência atraente. Você pode usar estilos de tipografia para mostrar o nome da sua empresa, para que ele seja inegável desde o início do que é sua empresa.

Parágrafo de subposição ou introdução

Enquanto sua manchete chama a atenção, seu parágrafo de subposição ou introdução fornece o contexto. É sua chance de elaborar a promessa da manchete e adicionar um toque de intriga. Mantenha -o conciso e deixe funcionar harmoniosamente com sua manchete principal. Por exemplo, se sua manchete for gasta um dia no spa , sua subtítulo poderá elaborar e explicar o que esse spa oferece.

Uma chamada clara à ação

Seu herói precisa de um propósito claro. O que você quer que os visitantes façam a seguir? Se você deseja atrair usuários a aprender mais, fazer uma compra ou se inscrever em um boletim informativo, seja o que for, seu CTA deve ser cristalino e proeminente. Use linguagem orientada para a ação, como começar ou participar hoje . Um CTA bem colocado atua como um guia, levando os visitantes a uma ação desejada.

Imagens de alta qualidade

Sejamos honestos: os visuais falam mais alto que as palavras. Uma imagem ou vídeo de alta qualidade pode chamar a atenção instantaneamente e definir o clima do seu site. O Divi facilita a adição e o estilo de imagens e vídeos em sua seção de heróis. Bons visuais podem transmitir emoções, contar uma história e criar uma impressão duradoura.

Um fundo que wows

O plano de fundo da sua seção de heróis prepara o cenário para o seu conteúdo. Você pode usar imagens, cores sólidas ou gradientes para criar um cenário impressionante. O Divi oferece controle completo sobre suas configurações de segundo plano para que você possa fazer uma aparência única e atraente. A maioria dos temas premium fornece controle sobre as configurações em segundo plano, permitindo que você crie uma seção de heróis exclusiva que reflita sua marca e define o tom para o restante do seu site.

Exemplos de seções de heróis (e por que eles funcionam)

Pronto para ver como uma poderosa seção de heróis pode transformar seu site? Vamos explorar alguns exemplos eficazes disponíveis com o Divi, quebrando por que eles funcionam. Usando vários pacotes de layout da Divi, mostraremos vários designs para inspirá -lo. Lembre-se de que esses são apenas pontos de partida-o sucesso do mundo do real depende de conteúdo atraente (não texto de espaço reservado). No entanto, esses exemplos fornecerão uma imagem clara das possibilidades.

Exemplo 1: software AI

Nosso primeiro exemplo é para uma empresa de software de IA. Tem vários pontos fortes, incluindo:

1. Um cabeçalho e subposição claros: o futuro do Divi é um título conciso e intrigante que comunica o foco. A inteligência artificial de subtítulo fornece contexto e uma sensação moderna e de ponta.
2. Recurso visual: o fundo abstrato e futurista com elementos brilhantes é atraente e relevante para o tema da IA ​​e o futuro.
3. Forte contraste: o texto em branco contra o fundo roxo oferece excelente legibilidade e faz a mensagem se destacar.
4. Chamadas claras à ação: participe do Divi hoje e da demonstração gratuita são diretas e orientadas para a ação, dizendo ao usuário exatamente o que eles podem fazer e o que receberão quando clicarem. Ter dois CTAs oferece opções que interessam ao usuário.
5. É moderno: o design geral, o esquema de cores e as imagens evocam um senso de inovação e visão de futuro, que se alinha ao tópico da IA ​​e das tendências futuras.

Exemplo 2: suprimento de animais de estimação

Este pacote de layout foi projetado para proprietários de negócios de suprimentos para animais de estimação. Aqui estão alguns pontos que tornam sua seção de heróis eficaz:

1. Um cabeçalho claro: suprimentos para animais de estimação e assinaturas de caixas mensais comunica o que a empresa faz, tornando o cabeçalho direto e compreensível.
2. Direct CTA: Shop Online é um CTA conciso que incentiva os visitantes a comprar seus produtos.
3. Imagem visualmente relevante: a imagem principal do herói mostra comida de estimação, reforçando a natureza da empresa. Ele também adiciona um toque de cor para atrair os olhos do usuário.
4. Design limpo: o layout é organizado, moderno e simples. O fundo branco e o texto em negrito fornecem um bom contraste e legibilidade.

Exemplo 3: sem fins lucrativos de água

Neste exemplo, o herói descreve um negócio sem fins lucrativos de água. Embora simples, o herói é eficaz porque:

1. Tem uma marca clara: o nome comercial e o slogan que o acompanham comunicam a missão da organização.
2. É visualmente atraente: a grande imagem de fundo do oceano cria um visual forte e imediatamente se conecta ao tema da água.
3. Um CTA claro: o botão de doação é proeminente e os usuários usam texto orientado para a ação para incentivar o engajamento.
4. Uso das estatísticas: destacar o dinheiro arrecadado fornece evidências do impacto da instituição de caridade e cria confiança na marca.
5. Um layout harmonioso: o estilo de bloco de cores apresenta as informações de uma maneira estruturada e esteticamente agradável, com seções claras para diferentes aspectos da caridade.

Exemplo 4: Realty

No pacote de layout real para o Divi, o herói usa o sistema de grade da Divi para adicionar quatro colunas ao herói. É eficaz por alguns motivos:

1. Manchete conciso: encontre sua casa de sonho com o Divi apela ao público -alvo e apresenta valor.
2. Visuais fortes: a imagem de fundo monocromático contrasta muito bem com o CTA verde, fazendo -a se destacar.
3. Clear CTAs: A seção Herói possui quatro CTAs fortes para os usuários se envolverem com o site.
4. Design moderno: o design minimalista e o esquema de cores escuras criam uma aparência sofisticada e moderna.

Esses exemplos demonstram a versatilidade de um bom design da seção de heróis. As possibilidades são infinitas, de elegantes e modernas a visualmente convincentes e informativas. Agora, vamos nos aprofundar no que faz do Divi a ferramenta ideal para personalizar e criar a seção de heróis perfeitos.

Por que o divi é uma ótima opção para projetar uma seção de herói

O Divi é um divisor de águas quando se trata de criar sites, incluindo a criação de seções de heróis. O Divi oferece um construtor de páginas de arrastar e soltar, o Visual Builder, para que você possa ver exatamente como o seu site ficará à medida que o constrói.

O tema é carregado com mais de 200 módulos de design, oferecendo opções ilimitadas para construir seções de heróis e páginas da Web impressionantes. Com o construtor de temas, você pode personalizar todas as partes do seu site, desde os modelos de cabeçalho para página do seu site, criando uma aparência verdadeiramente única.

A Divi possui uma biblioteca enorme de mais de 2600 layouts de design profissionalmente, se você precisar de inspiração. Cada layout inclui uma seção de heróis bem elaborada que você pode ajustar facilmente para combinar com sua marca perfeitamente. Portanto, se você é um profissional de design ou um novato completo, o Divi tem tudo o que você precisa para criar uma seção de heróis que se destaca.

Além de milhares de layouts, a Divi oferece outra maneira fácil de criar um site completo: Sites Quick Sites. Você pode criar um site completo em menos de dois minutos usando um site de partida ou IA generativa, graças à integração com o assistente de design a bordo da Divi, Divi AI. Todos os sites iniciantes e gerados vêm com todas as páginas principais, modelos de construtores de temas, estilos globais e todas as configurações do WordPress definidas para você.

O Divi Quick Sites é uma ótima maneira de fazer com que sua criatividade flua e construir um site rapidamente. Você pode personalizar facilmente os estilos globais (fontes e cores) para combinar perfeitamente com sua marca. Você também não está preso ao visual. Os designs podem ser ajustados como você deseja torná -lo o seu. Além disso, você pode criar quantos sites (e seções de heróis) desejar pelo preço baixo de US $ 89 por ano .

Obtenha divi

Como projetar uma seção de herói com divi

Projetar uma seção de heróis com Divi pode ser realizada de algumas maneiras. Você pode criar um do zero, importar um layout pré-fabricado ou gerar uma seção com o Divi AI. Para esta postagem, começaremos com um dos layouts pré-fabricados da Divi e alteraremos o design para combinar com nossa marca.

Escolha um pacote de layout

Crie uma nova página no site do seu WordPress, instale o Divi e selecione Escolha um layout pré -fabricado quando a nova página carregar. Em seguida, clique em Layouts de navegação para visualizar a seleção de layouts pré-fabricados.

O Divi permite pesquisar ou filtrar através de categorias para encontrar o layout que deseja adicionar. Existem mais de uma dúzia de categorias para escolher, portanto, encontrar uma que atenda às suas necessidades será fácil. Para esta postagem, selecionaremos o pacote de layout da Realty (Exemplo #4 acima) e alterá -lo para um escritório de advocacia.

Clique no pacote e selecione o layout da página de destino . Clique no botão Use este layout para instalar o pacote.

Uma caixa de diálogo pergunta se você deseja importar as predefinições de design. As predefinições do Divi são um dos melhores recursos do tema, permitindo que você salve e reutilize estilos de design em seu site. Por esse motivo, incentivamos você a manter essa caixa de ticks verificada. Em seguida, clique em importar para continuar.

Faça alterações no design na seção de heróis

Agora que você instalou o layout, podemos trabalhar para alterar nosso herói para combinar com a nossa marca. Começaremos trocando a imagem de fundo do nosso herói. Clique no ícone Configurações para exibir as configurações da seção.

Clique no menu suspenso em segundo plano e selecione a guia Imagem de fundo.

Remova a imagem de fundo existente pairando sobre a área da imagem e clicando no ícone do lixo .

Adicione uma nova imagem em segundo plano clicando no botão Adicionar plano de fundo na área da imagem. Escolha qualquer imagem que desejar, mas verifique se ela é de 1920px para que seja exibida corretamente em telas de desktop maiores.

Reescrever texto com divi ai

A Divi tem seu próprio assistente de design de IA construído diretamente no Visual Builder. Ele permite gerar cópia na marca com um prompt de texto. Mas primeiro, mudaremos o pequeno cabeçalho no herói. Clique no ícone Configurações para exibir as opções do módulo. Mude o texto do título pequeno para o escritório de advocacia da família Birmingham .

Em seguida, substituiremos o cabeçalho grande no herói. Desta vez, usaremos o Divi Ai para criar uma manchete convincente para nossa seção de heróis. Para ativar o Divi AI, clique no botão AI no campo do cabeçalho .

Uma caixa de diálogo com várias opções aparecerá. Selecione Escreva com IA .

Quando as configurações aparecerem, o tipo de conteúdo já será selecionado para você. Diga a Divi ai sobre o que você está escrevendo (neste caso, um escritório de advocacia de família) e selecione nenhum contexto no campo de contexto adicionado . Divi Ai funciona melhor quando entende o que você deseja bem, então, ao escrever seu prompt, seja descritivo.

Na seção Guide Me , você pode escolher um tom de voz, adicionar palavras-chave obrigatórias, definir o comprimento do conteúdo e escolher um idioma. Por fim, clique no botão Gerar texto para gerar o título. Pode levar algumas tentativas para obter o título que você deseja, mas a boa notícia é que o Divi AI fornece gerações ilimitadas.

Adicione uma chamada à ação

O último passo para concluir nossa seção de heróis é adicionar uma chamada à ação (CTA). Primeiro, devemos alterar o conteúdo nas três primeiras colunas. Substitua os ícones e o texto nos módulos pelo conteúdo relacionado à lei. O Divi tem mais de 800 ícones, então encontrar um para se encaixar no seu nicho é rápido e fácil.

Em seguida, substituiremos o ícone na quarta coluna da fila abaixo do cabeçalho. Passe o mouse sobre o módulo para removê -lo.

No módulo de título na quarta coluna, use o Divi AI para gerar um CTA cativante. Lembre -se, ele deve incentivar seus visitantes a agir e vincular uma página relevante em seu site.

Como projetar uma seção de herói com divi ai

Agora que você vê como é fácil projetar uma seção de heróis usando um pacote de layout Divi, vamos mergulhar para criar um com o Divi AI. Mostramos como o Divi AI pode gerar texto, mas também pode gerar imagens, código, seções, páginas da Web e sites completos (mais sobre isso mais tarde).

Gerando um novo herói divi

Comece criando uma nova página para o seu site Divi. Em vez de começar com um layout pré -fabricado desta vez, escolha Build do zero quando o Visual Builder carregar.

Quando o Visual Builder carrega, o Divi permite automaticamente adicionar uma linha e oferece vários layouts. O Visual Builder usa um sistema de grade para ajudá -lo a estruturar e organizar seu conteúdo em linhas e colunas. O Divi oferece vários layouts de coluna predefinidos (únicos, dois iguais, três colunas com larguras variadas, etc.).

A Divi Ai usa o mesmo sistema de grade para gerar seções para o seu site. No entanto, você só precisa adicionar linhas quando planeja construir um layout do zero. Cancele a caixa de diálogo Linha clicando no X no canto superior direito da grade.

Para gerar uma seção de heróis com IA, passe o mouse na página e clique no ícone Blue + .

Escolha Gerar seção com IA quando a caixa de diálogo aparecer.

Quando a configuração Divi AI aparece, existem alguns campos para preencher. Como gerar texto, a Divi Ai precisa de informações sobre a seção que você deseja criar e sua empresa. Você também pode especificar o tipo de imagens que deseja usar (estoque, gerado pela IA ou espaço reservado) e as fontes e cores que você gostaria de usar. Quando tudo estiver pronto, clique no botão Gerar Seção para criar seu herói.

Todo o processo leva alguns segundos. Uma vez concluído, você pode salvar seus estilos a serem aplicados em todas as seções ou página da web que você construir. A IA fornecerá uma lista de imagens usadas (incluindo um link) se você escolher imagens de estoque.

Exemplos de heróis divi ai

O Divi AI é versátil e pode criar seções bonitas e eficazes de heróis em várias categorias. Dê uma olhada em alguns que geramos, junto com seus avisos.

Crie uma seção de heróis para uma agência de design. Deve ter um título cativante, texto de suporte e um chamado à ação proeminente.

Projete uma seção de heróis para um restaurante de pizza. Dê cores vibrantes, uma manchete em negrito e uma imagem de fundo de uma deliciosa pizza.

Uma seção de heróis para uma loja de ferragens chamada "Hardware de Dee". Ele deve incluir imagens de ferramentas, uma grande manchete em negrito e um chamado à ação proeminente.

Crie uma seção de herói para uma empresa de arquitetura. Deve ter um título ousado e impactante, cores suaves e uma chamada à ação.

Obtenha divi ai

Experimente o melhor divi tem a oferecer com o divi pro

Com o Divi Pro, você obtém acesso a todo o ecossistema Divi. Isso significa que você pode gerenciar todos os seus plugins e temas em um só lugar, armazenar e reutilizar seus designs favoritos na nuvem, colaborar facilmente com sua equipe e obter suporte especializado sempre que necessário. O Divi Pro realmente o capacita a levar seu site para o próximo nível.

Divi Pro vem com:

• Divi AI: Gere imagens ilimitadas, texto, código, seções, páginas da web e sites completos com um prompt de texto.
• Divi Dash: Gerencie todos os seus plugins e temas, rastreie todos os seus clientes e obtenha informações valiosas sobre como seu site está se saindo - tudo em um painel conveniente.
• Divi Cloud: Diga adeus aos arquivos JSON bagunçados e cópia e colagem sem fim! Com apenas alguns cliques, você pode armazenar e reutilizar seus layouts de divi favoritos na nuvem.
• Divi Teams: colabore facilmente com sua equipe e conceda a eles acesso a todas as incríveis ferramentas de divi que você possui.
• Divi VIP: Obtenha suporte em nível empresarial em menos de 30 minutos ou menos, 24/7, 365 dias por ano.
• Créditos do Divi Marketplace: Receba US $ 50 em créditos para explorar o Divi Marketplace e encontrar temas, layouts e extensões incríveis para crianças para sobrecarregar seu site.

Com sua assinatura do Divi Pro, você pode levar sua experiência de construção de sites para o próximo nível. É como ter uma equipe de designers especializados, desenvolvedores e especialistas em suporte ao seu alcance pelo baixo custo de US $ 277 por ano, o que é de apenas US $ 23,08 por mês.

Obtenha divi

Faça uma primeira impressão duradoura com o Divi

Uma seção atraente de heróis é essencial para capturar a atenção do usuário e impulsionar o engajamento. Afinal, você só tem uma chance de causar uma primeira impressão. A Divi oferece uma plataforma mais do que capaz para criar seções de heróis impactantes, tornando -a mais rápida e fácil do que nunca. Com seu construtor visual intuitivo e poderoso assistente de design, Divi AI, você pode projetar seções de heróis em minutos. Com o Divi e o Divi AI, você pode capturar seu público com o primeiro clique.