Como adicionar uma imagem de destaque no WordPress (3 métodos fáceis) 

Você pode adicionar uma imagem de destaque a qualquer site WordPress em menos de 15 minutos, e ela será exibida corretamente em dispositivos móveis sem necessidade de codificação adicional.

Uma imagem de destaque é o banner grande na parte superior da sua página inicial ou página de destino com texto e um botão sobreposto. É a primeira coisa que os visitantes veem, portanto, quando bem feita, ela comunica sua mensagem instantaneamente.

Quando comecei a trabalhar com sites WordPress, minhas imagens principais ficavam perfeitas no desktop, mas ficavam distorcidas no celular. O texto ficava sobreposto, partes importantes eram cortadas e o layout ficava confuso.

Depois de criar dezenas de páginas de destino, aprendi o que realmente funciona. Neste guia, vou mostrar três métodos simples com base no seu tipo de tema, e todas as opções são compatíveis com dispositivos móveis, sem necessidade de conhecimentos técnicos.

Prepare primeiro a sua imagem principal

O tamanho e o formato de arquivo corretos da imagem evitam layouts corrompidos e carregamento lento.

Aprendi isso da maneira mais difícil depois de enviar imagens de destaque que eram muito grandes e deixavam minha página lenta. Agora, sempre preparo as imagens antes de enviá-las.

Use 1920×1080 pixels para a maioria dos temas. Se você quiser uma seção hero mais curta, use 1600×900 pixels. Mantenha o tamanho do arquivo abaixo de 250 KB usando o TinyPNG.

Dimensão	Caso de uso
1920 × 1080 pixels	Hero padrão com largura total (recomendado)
1600×900 pixels	Seção de heróis mais curta

Use JPG para fotos e PNG para gráficos com texto.

Escolha imagens com espaço negativo onde o texto possa ser inserido. Imagens escuras funcionam melhor com texto claro. Pelo que tenho observado, muitos iniciantes escolhem imagens bonitas que tornam os títulos impossíveis de ler. Agora, procuro imagens com espaço vazio claro onde o texto possa respirar.

Com o básico pronto, vamos ver como adicionar sua imagem principal.

Método 1: Usando as configurações do seu tema (mais fácil para temas clássicos)

Muitos temas do WordPress incluem uma opção de seção hero no Customizer que não requer plugins ou construtores de páginas.

Quando estou trabalhando em um projeto que já tem um tema instalado, sempre verifico essa opção primeiro. É a maneira mais rápida de adicionar uma imagem de destaque, se o seu tema for compatível.

Nem todos os temas têm essa funcionalidade, portanto, se você não a encontrar, passe para o Método 2 ou 3. Este método só funciona na página designada pelo seu tema, que geralmente é a página inicial.

Passo 1: Abra o Personalizador do WordPress

No painel do WordPress, acesseAparência → Personalizar.

O Customizador abre em uma nova tela com a pré-visualização do seu site à direita.

Passo 2: Encontre as configurações da seção Hero

Procure seções intituladasHero,Header,Front Page ou similares.

Você verá uma barra lateral à esquerda com diferentes opções de personalização. As configurações do herói podem estar em uma seção como “Configurações da página inicial” ou “Opções do cabeçalho”.

Percebi que os desenvolvedores de temas nomeiam essas seções de maneiras diferentes, então às vezes é preciso procurar um pouco. Se você não encontrar nada óbvio, verifique primeiro nas seções “Página inicial” ou “Homepage”.

Etapa 3: Carregue sua imagem principal

Clique na opção da seção do herói e procure o botão para enviar uma imagem.

Clique emSelecionar imagemouCarregar e escolha a imagem principal que preparou no seu computador.

Etapa 4: Adicione seu título e o texto do botão

Digite seu título no campo de texto fornecido.

Adicione o texto do botão e o URL para onde o botão deve direcionar. A maioria dos temas oferece campos para o rótulo do botão e o link de destino.

Etapa 5: Publicar as alterações

Clique no botãoPublicarna parte superior da barra lateral do Personalizador.

Sua imagem de destaque agora está disponível na sua página inicial. Acesse seu site em uma nova guia para vê-la.

Método 2: Usando o bloco de capa do WordPress (ideal para temas em blocos)

O bloco Cover é um recurso do editor de blocos do WordPress que permite adicionar uma imagem hero de largura total com sobreposição de texto em qualquer página sem plugins.

Utilizo frequentemente este método porque me dá flexibilidade para adicionar imagens de destaque a qualquer página, não apenas à página inicial. Criei páginas de destino com o bloco Capa, em que cada página tem a sua própria secção de destaque exclusiva.

O bloco Cover é responsivo para dispositivos móveis por padrão, o que me poupa de ter que testar e corrigir layouts móveis posteriormente.

Passo 1: Abra o Editor de Páginas

Vá até a página onde deseja inserir a imagem principal e clique emEditar.

Para a maioria das pessoas, esta é a página inicial. Você verá o editor de blocos do WordPress com o conteúdo da sua página.

Passo 2: Adicione um bloco de capa na parte superior

Clique no ícone+na parte superior da página e procure por “Capa”.

Selecione o bloco Capa nos resultados. Um bloco Capa temporário aparece na parte superior da sua página.

Etapa 3: Carregue sua imagem principal

Clique emCarregardentro do bloco Capa e selecione a imagem principal no seu computador.

A imagem preenche o bloco Capa como plano de fundo. Você verá um prompt de texto padrão no centro do bloco.

Etapa 4: Adicione seu título

Clique dentro do bloco Capa e comece a digitar seu título.

Para alterar o texto para um título, clique no menu suspenso do parágrafo na barra de ferramentas do bloco e selecioneTítulo. Escolha H1 ou H2, dependendo da estrutura da sua página.

Etapa 5: Adicione um bloco de botão

Pressione Enter após o título para criar uma nova linha, digite/buttone pressione Enter novamente.

Um bloco de botão aparece abaixo do título. Digite o texto do botão e adicione o URL do link na barra de ferramentas que aparece quando o botão é selecionado.

Etapa 6: Ajuste a cor do texto e a sobreposição

Com o bloco Capa selecionado, observe o painel de configurações do bloco no lado direito da tela.

Role para baixo até encontrar o controle deslizante de opacidade da sobreposição. Arraste-o para escurecer ou clarear o fundo atrás do texto.

Normalmente, defino a opacidade da sobreposição entre 30% e 50% para obter um bom contraste. Se estiver trabalhando com uma imagem principal escura, posso clarear a sobreposição. Se a imagem for clara e cheia de detalhes, adiciono uma sobreposição mais escura para que o texto se destaque.

Para alterar a cor do texto, selecione o título ou botão e escolha uma cor nas configurações de texto no painel direito.

Etapa 7: Atualizar a página

Clique no botãoSalvar ou Atualizarno canto superior direito. Em seguida, acesse sua página para ver sua imagem principal ao vivo.

Você pode adicionar um efeito de paralaxe posteriormente, se desejar (a imagem permanece fixa enquanto o conteúdo rola), ativando a opção “Fundo fixo” nas configurações do bloco Capa. Eu uso isso com moderação, pois pode fazer com que algumas imagens principais fiquem estranhas em dispositivos móveis.

Método 3: Usando um construtor de páginas como o SeedProd (funciona com qualquer tema)

Os construtores de páginas do WordPress oferecem controle de arrastar e soltar sobre as seções principais e geralmente funcionam independentemente do tema do WordPress que você estiver usando.

Eu uso esse método quando quero mais controle do que o bloco Capa oferece ou quando estou trabalhando com um tema que não tem configurações de hero. A visualização ao vivo facilita ver exatamente como o espaçamento e as cores ficam antes da publicação.

O SeedProdé um construtor de sites WordPress do tipo arrastar e soltar, com a confiança de mais de 1 milhão de sites. Você pode usá-lo para criar temas WordPress personalizados, páginas de destino personalizadas e lojas WooCommerce personalizadas sem qualquer código.

Eu o uso regularmente em meus próprios sites, e a visualização ao vivo detectou problemas de espaçamento que eu não teria percebido até depois da publicação. Esse feedback visual me poupa muito tempo.

Etapa 1: Instalar o SeedProd

Para começar, instale e ative o SeedProd no seu site WordPress. Existe uma versão gratuita que funciona para seções básicas, mas para este guia vou usar o SeedProd Pro, pois oferece mais opções de personalização.

Você pode seguir estas instruções para obter ajuda sobre como instalar o SeedProd.

Etapa 2: criar uma nova página de destino

No seu painel, vá paraSeedProd → Páginas de destino.

Clique no botãoAdicionar nova página de destino. Você verá uma tela solicitando que insira o nome da sua página e, em seguida, escolha um modelo.

Etapa 3: Escolha um modelo com uma seção de destaque

Navegue pelos modelos e escolha um que tenha um layout de seção principal que você goste.

Os modelos economizam tempo de configuração, pois a seção principal já está estruturada. Basta substituir a imagem e o texto provisórios pelos seus próprios.

Normalmente, começo com um modelo em vez de criar do zero. Mesmo que acabe mudando o layout, o modelo me dá um ponto de partida sólido, com espaçamento adequado e hierarquia de elementos já definida.

Clique no ícone de marca de seleção no modelo desejado e, em seguida, clique emUsar este modelo.

Etapa 4: Abra a seção Hero para edição

O editor visual SeedProd abre com o modelo escolhido carregado.

Clique na seção do herói na parte superior da página. Alças coloridas aparecem ao redor da seção quando ela é selecionada.

Passo 5: Carregue sua imagem principal

No painel de configurações à esquerda, procure a seção configurações de fundo.

Selecione a imagem existente e clique no ícone de imagem para escolher uma imagem da sua biblioteca de mídia.

A imagem aparece imediatamente como plano de fundo da seção principal. É isso que quero dizer quando falo que a visualização ao vivo é útil. Você pode ver imediatamente se a imagem combina com o texto existente ou se precisa ajustar a sobreposição.

Etapa 6: Edite o título e o botão

Clique no texto do título na seção principal e comece a digitar seu novo título.

Neste exemplo, estou substituindo o bloco optin-form por um bloco botão. Para fazer isso, basta excluir o bloco existente clicando no ícone da lixeira.

Em seguida, na barra lateral de blocos, arraste e solte o bloco de botão na sua página.

Etapa 7: Ajustar sobreposição e cores

Com a seção do herói selecionada, role para baixo no painel esquerdo para encontrar os controles de sobreposição.

Você pode escolher uma cor de sobreposição personalizada e, em seguida, escurecer o fundo para que o texto e os botões se destaquem claramente da imagem principal.

Para alterar o tamanho ou a cor do texto, clique no título ou botão e ajuste as configurações no painel esquerdo.

Etapa 8: Visualizar no celular

Clique nos ícones do seletor de dispositivos na parte inferior do editor (desktop, tablet, celular).

Alterne para a visualização móvel para ver como sua imagem principal fica na tela de um celular. Você pode ajustar o tamanho e o espaçamento do texto especificamente para dispositivos móveis, se necessário.

Sempre verifico a visualização móvel antes de publicar, porque o que fica bem no desktop nem sempre fica bem no celular. Já encontrei títulos que eram muito grandes e saíam da tela, ou botões que pareciam minúsculos e difíceis de tocar no celular.

Para obter um guia completo sobre como personalizar o restante da sua página, consulte nosso tutorial sobre como criar uma página de destino no WordPress.

Etapa 9: Publicar a página

Quando estiver satisfeito com a seção do herói, clique emSalvarno canto superior direito. Em seguida, clique na seta suspensa ao lado de Salvar e selecionePublicar.

Se você deseja sobreposições gradientes, efeitos de partículas ou divisórias de formas, essas opções estão disponíveis nas configurações da seção hero. Elas não são necessárias, mas eu usei sobreposições gradientes quando precisei de contraste extra para texto claro em uma imagem brilhante.

Depois de publicar sua página, visualize-a no navegador para ver sua nova seção principal ao vivo.

Solução de problemas comuns relacionados à imagem do herói

A maioria dos problemas com imagens de destaque se resume a dimensões incorretas, contraste inadequado ou conflitos de CSS do tema.

Já lidei com todas essas questões em algum momento. Veja como resolvê-las.

Problema	Por que isso acontece	Como corrigir isso
A imagem parece desfocada ou pixelizada	Dimensões da imagem muito pequenas	Reenvie com no mínimo 1920×1080 pixels. Imagens pequenas esticadas para ocupar toda a largura perdem qualidade.
O texto é difícil de ler	Contraste insuficiente	Adicione uma sobreposição escura (30-50% de opacidade) nas configurações do seu bloco ou construtor, ou altere o texto para branco.
A imagem principal não ocupa toda a largura	O tema restringe a largura ou o alinhamento não definido	Habilite o alinhamento de largura total nas configurações do bloco Capa. Se estiver usando um construtor de páginas, defina a seção como largura total.
A imagem é recortada de forma estranha no celular	O ponto focal está descentralizado	Use imagens com objetos centralizados ou ajuste a configuração do ponto focal no seu construtor de páginas.

Perguntas frequentes sobre como adicionar imagens de destaque no WordPress

Qual deve ser o tamanho de uma imagem principal no WordPress?

1920×1080 pixels funciona para a maioria dos temas e se adapta bem aos dispositivos móveis. Se você quiser uma seção hero mais curta, use 1600×900 pixels. Mantenha o tamanho do arquivo abaixo de 250 KB após a compactação para que ele não diminua a velocidade de carregamento da sua página.

Posso usar um vídeo como fundo principal em vez de uma imagem?

Sim, o bloco Capa e a maioria dos criadores de páginas suportam fundos de vídeo. Mantenha os arquivos de vídeo com menos de 5 MB e inclua sempre uma imagem alternativa para usuários móveis, pois os fundos de vídeo geralmente não são reproduzidos em telefones para economizar dados.

As imagens de destaque tornam meu site mais lento?

Apenas se o tamanho do arquivo for muito grande. Comprima sua imagem principal para menos de 250 KB antes de fazer o upload. Imagens principais grandes, com mais de 1 MB, atrasam o carregamento da página e prejudicam o SEO. Use uma ferramenta como o TinyPNG para comprimir sem perder qualidade.

Como alterar uma imagem de destaque existente no meu site WordPress?

Depende do método que você usou para adicioná-lo. Para configurações de tema, vá para Aparência → Personalizar. Para o bloco Capa, edite a página e selecione o bloco. Para criadores de páginas, abra a página no criador e clique na seção hero.

Qual é a diferença entre uma imagem hero e um banner hero?

Os termos têm o mesmo significado. Ambos se referem à imagem grande na parte superior de uma página com texto e botões sobrepostos. Algumas pessoas dizem “banner hero” quando a imagem ocupa toda a largura, mas não há diferença técnica.

Uma imagem de destaque torna sua página inicial mais atraente quando comunica uma mensagem clara com um visual forte. Escolha o método que melhor se adapta ao seu tema, teste-o em dispositivos móveis e não pense demais no design.

A imagem certa com texto legível e uma chamada à ação clara leva os visitantes a dar o próximo passo. Já vi seções simples superarem outras elaboradas porque se concentraram na clareza em vez da complexidade.

Guias relacionados:

• Práticas recomendadas da página de destino para taxas de conversão incríveis
• Como ocultar imagens na visualização móvel no WordPress
• Práticas recomendadas de frases de chamariz para páginas de destino de alta conversão
• Como adicionar facilmente um botão ao seu cabeçalho do WordPress
• Como escurecer uma imagem de fundo no WordPress sem CSS

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, sinta-se à vontade para participar da conversa no YouTube, X e Facebook para obter mais conselhos úteis e conteúdo para expandir seus negócios.