Você pode adicionar uma imagem de destaque a qualquer site WordPress em menos de 15 minutos, e ela será exibida corretamente no celular sem codificação extra.
Uma imagem de destaque é o grande banner no topo da sua página inicial ou de destino com texto e um botão sobreposto. É a primeira coisa que os visitantes veem, então, quando bem feita, comunica sua mensagem instantaneamente.
Quando comecei com sites WordPress, minhas imagens de destaque ficavam perfeitas no desktop, mas quebravam no celular. O texto se sobrepunha, partes importantes eram cortadas e o layout parecia confuso.
Depois de construir dezenas de páginas de destino, aprendi o que realmente funciona. Neste guia, mostrarei três métodos simples com base no tipo do seu tema, e todas as opções são compatíveis com celular, sem necessidade de habilidades técnicas.
- Prepare Sua Imagem de Destaque Primeiro
- Method 1: Using Your Theme Settings (Easiest for Classic Themes)
- Method 2: Using the WordPress Cover Block (Best for Block Themes)
- Method 3: Using a Page Builder Like SeedProd (Works with Any Theme)
- Solução de Problemas Comuns de Imagens de Destaque
- Perguntas Frequentes sobre Como Adicionar Imagens de Destaque no WordPress
Prepare Sua Imagem de Destaque Primeiro
O tamanho e o formato de arquivo corretos da imagem evitam layouts quebrados e carregamento lento.
Aprendi isso da maneira mais difícil depois de fazer upload de imagens de destaque que eram muito grandes e fizeram minha página ficar lenta. Agora, sempre preparo as imagens antes de fazer o upload.
Use 1920×1080 pixels para a maioria dos temas. Se você quiser uma seção de destaque menor, use 1600×900 pixels. Mantenha o tamanho do arquivo abaixo de 250KB usando TinyPNG.
| Dimensão | Caso de Uso |
|---|---|
| 1920×1080 pixels | Destaque de largura total padrão (recomendado) |
| 1600×900 pixels | Seção de destaque menor |
Use JPG para fotos e PNG para gráficos com texto.
Escolha imagens com espaço negativo onde o texto possa ficar. Imagens escuras funcionam melhor com texto claro. Pelo que vi, 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 definido, vamos ver como adicionar sua imagem de destaque.
Método 1: Usando as Configurações do Seu Tema (Mais Fácil para Temas Clássicos)
Muitos temas WordPress incluem uma opção de seção de destaque no Personalizador que não requer plugins ou construtores de página.
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 a suportar.
Nem todos os temas têm esse recurso, então, se você não o vir, pule para o Método 2 ou 3. Este método só funciona na página que seu tema designa, que geralmente é a página inicial.
Etapa 1: Abra o Personalizador do WordPress
No seu painel WordPress, vá para Aparência → Personalizar.
O Personalizador abre em uma nova tela com a prévia do seu site à direita.
Etapa 2: Encontre as Configurações da Seção de Destaque
Procure por seções rotuladas como Destaque, Cabeçalho, Página Inicial, ou similar.
Você verá uma barra lateral à esquerda com diferentes opções de personalização. As configurações de destaque podem estar em uma seção como “Configurações da Página Inicial” ou “Opções de Cabeçalho”.
Notei que os desenvolvedores de temas nomeiam essas seções de maneiras diferentes, então às vezes você precisa procurar um pouco. Se você não vir nada óbvio, verifique primeiro nas seções "Página inicial" ou "Página principal".
O bloco de Capa é responsivo para dispositivos móveis por padrão, o que me poupa de ter que testar e corrigir layouts móveis posteriormente.
Clique na opção de seção principal e procure um botão para carregar imagem.
Clique em Selecionar Imagem ou Carregar, em seguida, escolha sua imagem principal preparada do seu computador.
Etapa 4: Adicione Seu Título e Texto do Botão
Digite seu título no campo de texto fornecido.
Adicione o texto do seu 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: Publique as Alterações
Clique no botão Publicar na parte superior da barra lateral do Personalizador.
Sua imagem principal agora está ativa em sua página inicial. Visite seu site em uma nova aba para vê-la.
Método 2: Usando o Bloco de Capa do WordPress (Melhor para Temas de Bloco)
O bloco de Capa é um recurso do editor de blocos do WordPress que permite adicionar uma imagem principal em tela cheia com sobreposição de texto em qualquer página, sem plugins.
Eu uso esse método com frequência porque me dá flexibilidade para adicionar imagens principais a qualquer página, não apenas à página inicial. Criei páginas de destino com o bloco de Capa, onde cada página tem sua própria seção principal exclusiva.
O bloco Capa é responsivo para dispositivos móveis por padrão, o que me poupa de ter que testar e corrigir layouts móveis posteriormente.
Etapa 1: Abra o Editor de Páginas
Vá para a página onde você deseja a imagem principal e clique em Editar.
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.
Etapa 2: Adicione um Bloco de Capa no Topo
Clique no ícone + no topo da página e procure por "Capa".
Selecione o bloco de Capa nos resultados. Um bloco de Capa de placeholder aparece no topo da sua página.
O bloco de Capa é responsivo para dispositivos móveis por padrão, o que me poupa de ter que testar e corrigir layouts móveis posteriormente.
Clique em Carregar dentro do bloco de Capa e selecione sua imagem principal do seu computador.
A imagem preenche o bloco de Capa como plano de fundo. Você verá um texto padrão no centro do bloco.
Etapa 4: Adicione Seu Título
Clique dentro do bloco de Capa e comece a digitar seu título.
Para alterar o texto para um título, clique no menu suspenso de parágrafo na barra de ferramentas do bloco e selecione Tí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 seu título para criar uma nova linha, em seguida, digite /botão e pressione Enter novamente.
Um bloco de botão aparece abaixo do seu título. Digite o texto do seu 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 de Capa selecionado, olhe para o painel de configurações do bloco no lado direito da tela.
Role para baixo para encontrar o controle deslizante de opacidade da sobreposição. Arraste-o para escurecer ou clarear o fundo atrás do seu texto.
Eu geralmente defino a opacidade da sobreposição entre 30% e 50% para um bom contraste. Se estou trabalhando com uma imagem principal escura, posso clarear a sobreposição. Se a imagem for brilhante e agitada, adiciono uma sobreposição mais escura para que o texto se destaque.
Para alterar a cor do texto, selecione seu título ou botão e, em seguida, escolha uma cor nas configurações de texto no painel direito.
Etapa 7: Atualizar a Página
Clique no botão Salvar ou Atualizar no canto superior direito. Em seguida, visite sua página para ver sua imagem principal ao vivo.
Você pode adicionar um efeito parallax mais tarde, 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 pareçam estranhas no celular.
Método 3: Usando um Page Builder como SeedProd (Funciona com Qualquer Tema)
Construtores de páginas do WordPress oferecem controle de arrastar e soltar sobre seções principais e geralmente funcionam independentemente do tema do WordPress que você está usando.
Eu uso este 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 seção principal. A visualização ao vivo facilita ver exatamente como o espaçamento e as cores ficam antes de publicar.
SeedProd é um construtor de sites WordPress de arrastar e soltar confiável por mais de 1 milhão de sites. Você pode usá-lo para criar temas personalizados do WordPress, páginas de destino personalizadas e lojas WooCommerce personalizadas sem nenhum código.
Eu o uso regularmente em meus próprios sites, e a visualização ao vivo pegou problemas de espaçamento que eu não teria notado até depois de publicar. Esse feedback visual me economiza muito tempo.
Etapa 1: Instalar SeedProd
Para começar, instale e ative o SeedProd em seu site WordPress. Existe uma versão gratuita que funciona para seções principais básicas, mas para este guia, usarei o SeedProd Pro porque ele oferece mais opções de personalização.
Você pode seguir estas instruções para obter ajuda na instalação do SeedProd.
Etapa 2: Criar uma Nova Página de Destino
No seu painel, vá para SeedProd → Landing Pages.
Clique no botão Adicionar Nova Página de Destino. Você verá uma tela pedindo para inserir o nome da sua página e, em seguida, escolher um modelo.
Etapa 3: Escolher um Modelo com uma Seção Principal
Navegue pelos modelos e escolha um que tenha um layout de seção principal que você goste.
Os modelos economizam tempo de configuração porque a seção principal já está estruturada. Você apenas substituirá a imagem e o texto de espaço reservado pelos seus.
Eu geralmente começo com um modelo em vez de construir do zero. Mesmo que eu acabe mudando o layout, o modelo me dá um ponto de partida sólido com espaçamento adequado e hierarquia de elementos já definidos.
Clique no ícone de marca de seleção no modelo desejado e, em seguida, clique em Usar Este Modelo.
Etapa 4: Abrir a Seção Principal para Edição
O editor visual do SeedProd abre com seu modelo escolhido carregado.
Clique na seção principal na parte superior da página. Alças coloridas aparecem ao redor da seção quando ela está selecionada.
Etapa 5: Faça o upload da sua imagem principal
No painel de configurações à esquerda, procure as configurações de plano de fundo da seção.
Selecione a imagem existente e clique no ícone de imagem para escolher uma imagem da sua biblioteca de mídia.
A imagem aparece como plano de fundo da seção principal imediatamente. É isso que quero dizer sobre a pré-visualização ao vivo ser útil. Você pode ver imediatamente se a imagem funciona 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 de formulário de optin por um bloco de botão. Para fazer isso, simplesmente exclua o bloco existente clicando no ícone da lixeira.
Em seguida, na barra lateral de blocos, arraste e solte o bloco de botão em sua página.
Etapa 7: Ajuste a Sobreposição e as Cores
Com a seção principal 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 plano de fundo para que seu texto e botões se destaquem claramente da sua imagem principal.
Para alterar o tamanho ou a cor do texto, clique no título ou no botão e ajuste as configurações no painel esquerdo.
Etapa 8: Pré-visualize no Celular
Clique nos ícones do seletor de dispositivos na parte inferior do editor (desktop, tablet, celular).
Mude para a visualização móvel para ver como sua imagem principal fica na tela de um telefone. Você pode ajustar o tamanho do texto e o espaçamento especificamente para dispositivos móveis, se necessário.
Eu sempre verifico a visualização móvel antes de publicar, porque o que fica bom no desktop nem sempre se traduz bem. 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 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: Publique a Página
Quando estiver satisfeito com a seção principal, clique em Salvar no canto superior direito. Em seguida, clique na seta suspensa ao lado de Salvar e selecione Publicar.
Se você quiser sobreposições de gradiente, efeitos de partículas ou divisores de forma, essas opções estão disponíveis nas configurações da seção principal. Elas não são necessárias, mas eu usei sobreposições de gradiente quando precisei de contraste extra para texto claro em uma imagem brilhante.
Quando você publicou sua página, visualize-a em seu navegador para ver sua nova seção principal ao vivo.
Solução de Problemas Comuns de Imagens de Destaque
A maioria dos problemas com imagens principais se resume a dimensões incorretas, contraste fraco ou conflitos de CSS do tema.
Eu lidei com todos esses problemas em algum momento. Veja como corrigi-los.
| Problema | Por que Acontece | Como Corrigir |
|---|---|---|
| Imagem parece borrada ou pixelada | Dimensões da imagem muito pequenas | Faça o upload novamente com no mínimo 1920×1080 pixels. Imagens pequenas esticadas para largura total perdem qualidade. |
| 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 mude o texto para branco. |
| A imagem principal não ocupa a largura total | O tema restringe a largura ou o alinhamento não está definido | Ative 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 é cortada de forma estranha no celular | O ponto focal está descentralizado | Use imagens com assuntos 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 o tamanho ideal para uma imagem principal no WordPress?
1920×1080 pixels funciona para a maioria dos temas e escala bem no celular. Se você quiser uma seção principal mais curta, use 1600×900 pixels em vez disso. Mantenha o tamanho do arquivo abaixo de 250KB após a compressão para não diminuir o tempo de carregamento da sua página.
Posso usar vídeo como fundo principal em vez de imagem?
Sim, o bloco Capa e a maioria dos construtores de páginas suportam fundos de vídeo. Mantenha os arquivos de vídeo abaixo de 5MB e sempre inclua uma imagem de fallback para usuários de celular, pois os fundos de vídeo geralmente não são reproduzidos em telefones para economizar dados.
As imagens principais deixam meu site lento?
Somente se o tamanho do arquivo for muito grande. Comprima sua imagem principal para menos de 250KB antes de fazer o upload. Imagens principais grandes acima de 1MB atrasarão o carregamento da página e prejudicarão o SEO. Use uma ferramenta como TinyPNG para comprimir sem perder qualidade.
Como altero uma imagem principal existente no meu site WordPress?
Depende de qual método você usou para adicioná-la. Para configurações de tema, vá em Aparência → Personalizar. Para o bloco Capa, edite a página e selecione o bloco. Para construtores de páginas, abra a página no construtor e clique na seção principal.
Qual a diferença entre uma imagem principal e um banner principal?
Os termos significam a mesma coisa. Ambos se referem à imagem grande no topo de uma página com texto e botão sobrepostos. Algumas pessoas dizem "banner principal" quando a imagem ocupa a largura total, mas não há diferença técnica.
Uma imagem principal torna sua página inicial mais envolvente quando comunica uma mensagem clara com um visual forte. Escolha o método que se adapta ao seu tema, teste no celular e não se preocupe demais com o design.
A imagem principal certa com texto legível e uma chamada clara para ação faz com que os visitantes deem o próximo passo. Já vi seções principais simples superarem as elaboradas porque se concentraram na clareza em vez da complexidade.
Guias relacionados:
- Melhores Práticas de Landing Page para Taxas de Conversão Incríveis
- Como Ocultar Imagens na Visualização Móvel no WordPress
- Melhores Práticas de Chamada para Ação para Landing Pages de Alta Conversão
- Como Adicionar Facilmente um Botão ao Cabeçalho do Seu WordPress
- Como escurecer uma imagem de fundo no WordPress sem CSS
Obrigado por ler! Adoraríamos saber sua opinião, então sinta-se à vontade para participar da conversa no YouTube, X e Facebook para mais conselhos e conteúdo úteis para expandir seus negócios.
