Como Adicionar uma Imagem de Destaque no WordPress (Funciona para Todos os Temas)

Quer deixar seu site WordPress mais profissional? Uma imagem de destaque é sua melhor aposta.

Uma imagem de destaque é o que as pessoas veem primeiro quando chegam ao seu site. E você tem apenas cerca de 3 segundos para chamar a atenção delas, então é importante acertar.

Estamos construindo sites WordPress há mais de uma década – e lembramos de quando as imagens de destaque se tornaram populares.

Naquela época, lutávamos como todo mundo. As imagens ficavam estranhas – muito grandes no desktop, espremidas no mobile ou simplesmente quebradas. Mas agora dominamos a ciência.

Vamos mostrar as maneiras mais fáceis de adicionar uma imagem de destaque ao seu site WordPress. Se você gosta de usar construtores de páginas ou prefere o editor de blocos, nós temos o que você precisa.

Primeiro o Essencial: Prepare Sua Imagem de Destaque do WordPress

Antes de adicionar uma imagem de destaque ao seu site WordPress, você precisa criar uma que chame a atenção dos seus visitantes. Uma ótima seção de destaque começa com uma imagem deslumbrante que mostra do que se trata o seu site.

Canva é uma ferramenta popular para criar gráficos para sites. É fácil de usar e vem com toneladas de modelos para criar sua imagem de destaque. Se você não é fã do Canva, temos uma lista de alternativas ao Canva que você pode conferir para encontrar uma que funcione para você.

Ao criar sua imagem de destaque, você vai querer ter algumas coisas em mente.

Primeiro, pense no tamanho. Imagens de herói geralmente não são muito altas e costumam cobrir toda a largura da sua página inicial.

Um tamanho comum para imagens de herói no WordPress é de aproximadamente 1920 pixels de largura por 400-600 pixels de altura (ou às vezes mais). Mas isso pode mudar dependendo do seu tema WordPress.

Em seguida, pense na mensagem que você quer transmitir. Sua imagem de herói deve mostrar rapidamente do que se trata o seu site. Pode ser uma imagem de herói de produto, uma fotografia que representa sua marca, ou até mesmo um impressionante vídeo de fundo em tela cheia.

Por exemplo, decidimos destacar nosso fundador, Syed Balkhi, na imagem de herói da nossa página inicial. Isso mostra que há uma pessoa real por trás da nossa marca, dedicada a ajudar os usuários do WordPress a terem sucesso, que é o que o WPBeginner representa.

Além disso, deixe algum espaço para texto. Muitas seções de herói têm um título ou um botão. Certifique-se de que há espaço para eles e que são fáceis de ler.

É uma boa ideia olhar outros sites do seu setor para ver exemplos de seções de herói. Isso pode te dar ideias para o seu próprio design. Algumas das entradas em nossos exemplos de sites WordPress podem servir como ótima inspiração.

Com isso resolvido, vamos ver como adicionar a imagem principal.

Como Adicionar uma Imagem Principal no WordPress

Ao pesquisar para este tutorial, percebemos rapidamente que adicionar uma imagem principal a temas clássicos do WordPress nem sempre é simples. O processo pode variar bastante dependendo do seu tema, pois alguns têm seções de imagem principal integradas enquanto outros não.

Pegue o tema Sydney, por exemplo. Ele vem com uma seção de imagem principal pronta para usar, tornando as coisas muito mais fáceis.

Se você está tentando adicionar uma imagem principal ao seu site existente, mas seu tema não tem um recurso integrado para isso, isso pode ser frustrante.

Para aqueles que estão começando e não se importam em escolher um novo tema, recomendamos a troca para um com uma seção de destaque integrada, pois isso pode economizar tempo a longo prazo.

Se você está procurando recomendações de temas, pode conferir nossas escolhas especializadas dos melhores e mais populares temas do WordPress do mercado. Melhor ainda, você pode usar um construtor de páginas com um tema que tenha uma seção de destaque, o que mostraremos como fazer na método 3.

Antes de fazer grandes alterações, sempre sugerimos usar um site de staging para testar novos temas completamente. Dessa forma, você pode ter certeza de que está fazendo a escolha certa para o seu site.

Se você não tem certeza de como fazer isso, confira nosso guia sobre como trocar um tema do WordPress corretamente.

Satisfeito com seu tema clássico atual? Sem problemas. Pule para o método 4, onde mostraremos como adicionar uma seção de destaque usando um plugin. Essa abordagem funciona com qualquer tema, para que você possa criar uma imagem de destaque impressionante sem reformular todo o design do seu site.

Você pode usar os links rápidos abaixo para pular para o seu método preferido:

Método 1: Usando o Personalizador de Tema (Apenas Temas Clássicos)

Se você estiver usando um tema clássico que tenha uma seção de herói como o Sydney, você pode personalizar sua imagem de herói através do Personalizador de Tema. Basta ir em Aparência » Personalizar no seu painel do WordPress para começar.

💡 Observação Rápida: Se o Personalizador de Tema estiver faltando no seu painel, então você provavelmente está usando um tema de blocos e deve pular para método 2.

A barra lateral deve ter várias opções para personalizar seu tema clássico.

No Sydney, a configuração para personalizar sua seção de herói é chamada de 'Área de Herói', mas este menu específico variará de acordo com o tema. Vá em frente e clique nele.

O tema Sydney tem 3 menus para criar sua seção de herói: Tipo de Herói, Slider de Herói e Mídia de Herói.

Usaremos apenas os dois primeiros, pois são suficientes para adicionar uma seção de herói para o nosso propósito.

Primeiro, selecione 'Tipo de Herói'.

Em Tipo de Herói, você será solicitado a escolher que tipo de mídia você adicionará à sua seção de herói.

Você pode escolher entre um slider em tela cheia, um vídeo, uma imagem ou nenhum cabeçalho.

Selecionaremos um slider em tela cheia para a seção de herói em nossa página inicial e em todo o nosso site. A razão é que ele nos permite criar um slider com várias imagens para o herói, e adicionar texto e um botão sobre as imagens.

Agora, volte ao menu Área de Herói e selecione 'Slider de Herói'.

Aqui, abra a aba 'Primeiro Slide' e clique no botão 'Selecionar imagem'.

Isso abrirá sua biblioteca de mídia do WordPress, onde você pode enviar uma nova imagem ou selecionar uma existente para sua seção principal.

Assim que você fizer o upload de uma imagem, poderá rolar para baixo e substituir o texto nos campos de título e subtítulo.

Você deverá ver as alterações que fizer refletidas automaticamente na prévia da página.

Se você quiser adicionar mais de uma imagem à seção principal, poderá repetir os mesmos passos com o restante dos slides.

Caso contrário, você pode rolar para baixo até o menu 'Botão do slider'.

Aqui, você pode alterar o URL e o texto do botão de chamada para ação.

Depois disso, role para baixo novamente até a aba 'Configurações do slider'.

É aqui que você pode ajustar a velocidade do slider, escolher exibir o mesmo texto em todos os slides e tornar o comportamento do slider responsivo.

Se você quiser alterar a cor do botão, volte ao menu principal do Personalizador de Temas.

Em seguida, clique em 'Geral'.

Agora você deverá ver vários menus para personalizar as configurações gerais do seu tema.

Aqui, basta clicar em 'Botões'.

Agora, você pode rolar para baixo até as seções 'Estado Padrão' e 'Estado de Destaque', onde pode alterar a cor do botão dependendo do seu estado.

Para modificar a cor, basta clicar na ferramenta seletora de cores e escolher uma nova cor.

A maioria dos temas do WordPress também permite que você personalize as cores e a tipografia do seu design. No entanto, as alterações que você fizer geralmente se aplicarão a todo o seu site, não apenas à sua seção principal, portanto, tenha isso em mente.

De qualquer forma, aqui está como nossa imagem principal fica, feita com o tema Sydney:

Método 2: Usando o Editor de Site Completo (Apenas Temas de Blocos)

Se você usar um tema de bloco, então você poderá usar o bloco Cover do Editor de Site Completo para criar facilmente uma imagem de destaque no WordPress. Nenhum plugin é necessário.

Etapa 1: Abra o Editor de Site Completo

Primeiro, vá para Aparência » Editor no seu painel do WordPress.

Agora, você verá os menus principais do editor.

Vamos supor que você queira adicionar sua imagem de destaque apenas à sua página inicial.

Nesse caso, basta clicar na prévia do tema no lado direito da página.

Se você quiser adicionar a imagem de destaque a outra página, um modelo de página personalizado ou um padrão de bloco, então você pode ler nosso guia sobre Edição Completa do Site no WordPress para mais informações.

Etapa 2: Adicione o Bloco de Capa à Sua Página/Modelo

Como a seção de destaque geralmente é colocada acima da dobra (a parte superior da sua página que aparece quando os visitantes acessam o site), você precisa garantir que está no local correto. A seção de destaque fica tipicamente logo abaixo do cabeçalho.

Depois de fazer isso, você precisará excluir os blocos existentes nesse local ou adicionar um novo bloco Group logo acima desses blocos existentes.

No nosso caso, simplesmente removeremos os blocos que já estavam em nossa página inicial. Se você quiser fazer o mesmo, poderá clicar no botão ‘Visualização de Lista’ no lado esquerdo da página.

Em seguida, encontre o(s) bloco(s) que você precisa excluir para abrir espaço para sua seção de destaque. Após localizá-lo, basta clicar no botão de três pontos e selecionar ‘Excluir’.

Agora, selecione o bloco que ficava logo abaixo do(s) bloco(s) que você acabou de excluir.

Em seguida, clique no botão de três pontos e escolha ‘Adicionar antes’. Isso adicionará um bloco logo acima desse bloco e abaixo da seção do cabeçalho.

Nesta fase, você pode clicar no botão ‘+’ que aparece na suposta seção de destaque.

Você precisa adicionar um bloco de Agrupar aqui, pois isso permitirá que você gerencie a imagem principal, o texto, o botão e outros elementos como um único bloco quando necessário.

Agora você pode selecionar um contêiner para adicionar seus blocos.

Para demonstração, escolhemos o contêiner básico de Grupo.

Em seguida, basta clicar no botão '+' dentro do bloco de Grupo.

Aqui, prossiga e selecione o bloco 'Capa'.

Depois disso, você verá 3 opções para adicionar sua imagem de fundo principal: carregá-la do seu computador, adicioná-la da sua biblioteca de mídia ou usar sua imagem destacada.

Em nosso exemplo, clicaremos em 'Biblioteca de Mídia' e selecionaremos uma imagem existente.

Se o upload da imagem for bem-sucedido, você verá sua imagem principal imediatamente. No entanto, há alguns ajustes que você precisa fazer.

Etapa 3: Configure a Imagem no Seu Bloco de Capa

Primeiro, selecione o próprio bloco 'Capa' para que sua barra de ferramentas apareça em cima dele.

Em seguida, clique no botão 'Alinhar' e escolha 'Largura Total'.

Em seguida, você pode clicar no ícone de duotone para alterar o filtro duotone aplicado à sua imagem.

Se você não gostar, poderá desativá-lo mais tarde, o que mostraremos como fazer.

Depois disso, você pode clicar no ícone de posição do conteúdo para alterar onde seu texto e botão aparecerão na imagem.

Decidimos ir para o lado esquerdo central, pois o ponto focal da imagem está à direita.

Agora, clique no ícone 'Configurações' e mude para a aba 'Bloco'.

Aqui, role para baixo até as Configurações. É aqui que você pode opcionalmente adicionar um efeito parallax à sua imagem ('Fundo fixo') ou usar um fundo repetido.

Você também pode rolar para cima e mudar para o ícone de estilos.

É aqui que você pode definir a opacidade da sobreposição para 0 para que sua imagem não use nenhum filtro.

Se você quiser alterar a altura da imagem, poderá inserir um número em pixels no campo 'Altura Mínima da Capa'.

Decidimos definir nossa imagem para 400 pixels.

Sinta-se à vontade para personalizar outras configurações como borda e sombra, espaçamento de blocos, padding e margem, tipografia, e assim por diante.

Etapa 4: Adicione Blocos ao Seu Bloco de Capa

Estamos prontos para adicionar mais elementos à sua imagem de destaque. Você deverá ver um texto 'Escrever título' sobre a imagem.

Aqui está uma dica profissional: Em vez de adicionar um título diretamente, clique no botão '+' e adicione primeiro outro bloco de Grupo. Pense neste bloco de Grupo como um contêiner para seu texto e botão.

Colocá-los dentro de um contêiner torna muito mais fácil controlar seu alinhamento e estilo juntos como uma unidade.

Em seguida, escolha o contêiner desejado como na etapa anterior.

Assim que fizer isso, você pode clicar no botão '+' novamente para adicionar um bloco de Título.

Agora, você pode inserir o título da sua página.

Sinta-se à vontade para alterar a cor do texto, tamanho e dimensões na barra lateral de configurações do bloco, se preferir.

Depois de ter feito isso, você pode pressionar a tecla 'Enter'.

Nesta fase, sinta-se à vontade para adicionar um subtítulo logo abaixo do título.

Finalmente, você pode adicionar um botão de chamada para ação à sua imagem de destaque.

Para fazer isso, basta pressionar a tecla ‘Enter’ novamente, clicar no botão ‘+’ e selecionar o bloco ‘Botões’.

Em seguida, basta inserir o texto do botão.

E para adicionar um link ao botão, basta clicar no ícone de link na barra de ferramentas e inserir seu URL no campo apropriado.

Em seguida, clique no botão de seta.

Se você precisar de dicas e truques para criar botões de alta conversão, pode conferir nosso guia sobre melhores práticas de call-to-action.

E é basicamente isso. Você pode adicionar mais elementos à sua imagem principal ou personalizá-la de acordo com suas preferências.

Assim que estiver satisfeito com a aparência da seção principal, basta clicar em ‘Salvar’.

Veja como fica nosso bloco de Capa:

Método 3: Usando um Page Builder (Landing Pages/Temas Personalizados)

Digamos que você esteja apenas nas fases iniciais de configuração do seu site. Ou, você está procurando criar uma landing page personalizada sem ficar restrito pelas limitações do seu tema. Nesse caso, recomendamos o uso de um page builder que vem com modelos com seções principais, como o SeedProd.

SeedProd é um page builder drag-and-drop que usamos frequentemente para criar páginas personalizadas para o WPBeginner e nossos outros sites de marca, incluindo Duplicator e OptinMonster.

Embora fácil de usar, ele também oferece muitos recursos de edição do WordPress integrados que o Personalizador de Tema, o Editor de Site Completo e o Gutenberg não possuem por padrão.

Por causa disso, conseguimos economizar tempo e dinheiro na instalação de plugins de terceiros apenas para adicionar recursos especiais aos nossos temas ou páginas de destino.

O SeedProd vem em uma versão gratuita e paga. Você pode definitivamente usar a versão gratuita para criar uma página de destino personalizada, mas as opções de modelo e bloco são bastante limitadas. Por esse motivo, recomendamos a atualização para um plano pago para mais recursos, incluindo o gerador de conteúdo com IA.

Para mais informações, confira nossa análise do SeedProd e nossa comparação entre Elementor vs. Divi vs. SeedProd, que são todos construtores de páginas populares.

Etapa 1: Configure o SeedProd

Para usar o SeedProd, você precisa instalar o plugin do WordPress fornecido em sua conta SeedProd em sua área administrativa. Assim que o plugin estiver ativo, você será solicitado a inserir sua chave de licença, que pode obter na página da sua conta SeedProd.

Depois de inseri-la, basta clicar no botão ‘Verificar chave’.

Com o SeedProd, você tem 2 opções: você pode adicionar uma seção de herói a uma página de destino ou a certas páginas dentro de um tema personalizado.

Para configurar sua página de destino ou tema, você pode ler estes guias:

• Como Criar um Tema WordPress Personalizado Sem Código
• Como Criar uma Landing Page no WordPress
• Como Criar uma Squeeze Page no WordPress Que Converte
• Como Criar Páginas de Em Breve Bonitas no WordPress

Para o restante do tutorial, usaremos o modelo de Vendas de Menu.

Etapa 2: Personalize Sua Seção de Destaque

Depois de escolher um modelo para seu tema ou página de destino, você entrará no editor do SeedProd.

A interface de edição do SeedProd consiste em uma prévia da página no lado direito e uma barra lateral esquerda onde você pode adicionar mais blocos, personalizar um bloco/seção, desfazer/refazer alterações, visualizar as camadas da sua página e visualizar seu site em dispositivos móveis ou tablets.

Como o tema SeedProd já inclui uma seção de herói, nosso trabalho já está meio caminho andado. O que precisamos fazer é apenas substituir a imagem, personalizá-la e adicionar mais blocos à seção de herói, se necessário.

Alternativamente, você pode encontrar mais designs de seção de herói alternando da barra lateral de Blocos para a barra lateral de Seções no lado esquerdo. Em seguida, navegue até 'Herói' e clique no botão '+' no modelo de seção de herói que você deseja adicionar à sua página.

O SeedProd então o inserirá em sua página.

Vamos mudar a imagem do herói primeiro.

Para fazer isso, clique na seção superior que inclui a imagem principal. Você saberá que selecionou a coisa certa quando uma caixa roxa ‘Editando: Seção’ aparecer na barra lateral esquerda.

Agora, passe o mouse sobre a imagem de fundo na barra lateral.

Em seguida, clique no ‘Ícone de Mídia’. Depois disso, você pode fazer o upload da sua imagem principal do seu computador ou da biblioteca de mídia.

Em seguida, você precisa escolher a posição de fundo que funciona melhor para sua imagem.

Achamos que a opção ‘Posição Personalizada’ nos dá o melhor controle sobre o posicionamento dos pontos focais, então escolheremos essa opção.

A opção Posição Personalizada oferece várias maneiras de configurar o fundo.

Para as posições X e Y, você pode alterar como a imagem é posicionada vertical e horizontalmente.

A configuração de Anexo tem 2 opções: Scroll (não parallax) e Fixed (parallax).

Se sua imagem for menor que a seção principal, mas você quiser que a seção inteira seja preenchida com a imagem, então você pode repetir a imagem em toda essa seção. Caso contrário, basta escolher ‘Sem repetição’.

Quanto ao tamanho da imagem principal do WordPress, você pode escolher a opção ‘Automático’ se quiser que a imagem se ajuste automaticamente à seção principal.

Sinta-se à vontade para experimentar essas configurações para ver o que funciona melhor para sua imagem.

Outra coisa que você pode fazer é escurecer a imagem de fundo para que seu texto se destaque melhor.

Para fazer isso, você pode arrastar o controle deslizante ‘Escurecer Fundo’ para o nível de opacidade desejado.

Se você quiser alterar a cor de fundo sobreposta, basta clicar no botão seletor de cores ‘Cor de Sobreposição’.

Em seguida, simplesmente selecione sua cor preferida.

Vamos agora rolar para cima e mudar para as configurações ‘Avançadas’. É aqui que você pode adicionar todos os tipos de efeitos interessantes à sua seção principal.

Por exemplo, você pode abrir a aba ‘Fundo de Partículas’ e adicionar um fundo de partículas animado à sua imagem. Isso pode tornar sua seção principal muito mais impressionante e única.

Em seguida, você pode adicionar um divisor de forma personalizado na parte superior e/ou inferior da sua seção principal, indo para o menu ‘Divisor de Forma’.

Fazer isso pode adicionar mais interesse visual à sua seção principal. Além disso, se você adicionar um divisor de forma divertido na parte inferior, pode incentivar os usuários a rolar sua página de destino e aprender mais sobre sua oferta.

Etapa 3: Adicione e Personalize Mais Blocos à Sua Seção de Destaque

Com sua imagem principal pronta, vamos adicionar mais blocos à seção principal.

Como a nossa já tem um bloco de título, clicaremos nele e o personalizaremos. Quando selecionado, você deverá ver que a barra lateral esquerda agora tem um banner laranja que diz ‘Editando: Título’.

O legal do SeedProd é que ele tem um gerador de conteúdo de IA integrado.

Portanto, se você não tiver certeza de qual título usar, poderá clicar no botão ‘Editar com IA’ para ter algumas ideias.

Agora você deve ver uma janela pop-up onde você pode escrever seu conteúdo com IA.

Queremos gerar um título completamente novo, então clicaremos no botão ‘Novo Prompt’ para fazer isso.

Em seguida, basta dizer à IA que tipo de conteúdo ela deseja fazer.

Em seguida, clique no botão ‘Gerar Texto’.

A IA gerará o conteúdo para você.

Mas você ainda pode alterá-lo mudando o tom, simplificando a linguagem, tornando o texto mais longo ou mais curto e até mesmo traduzindo-o para mais de 50 idiomas.

Assim que estiver satisfeito com a aparência do título, clique em ‘Inserir’.

Agora, você pode rolar a barra lateral esquerda.

É aqui que você pode alterar o alinhamento do texto, o tamanho da fonte e a tag de título para atender às suas preferências.

Se você quiser que o texto se destaque ainda mais, role de volta para cima e mude para a aba ‘Avançado’.

No menu Estilos, clique em ‘Editar’ nas configurações de Tipografia. Aqui, você pode alterar à vontade a família da fonte, a altura da linha, o espaçamento entre letras e a caixa de letras do texto.

Você também pode descer um pouco mais e adicionar uma sombra de texto ao título.

Aqui, decidimos criar uma sombra com cor personalizada para fazer o texto se destacar ainda mais.

Para adicionar um subtítulo abaixo do título, basta clicar no botão ‘Blocos’ na barra lateral esquerda.

Isso o levará à biblioteca de blocos.

Agora, basta arrastar e soltar o bloco ‘Texto’ logo abaixo do título.

As configurações para o bloco de Texto são bem semelhantes às do bloco de Título, então você pode repetir os mesmos passos anteriores para criar o subtítulo.

Para adicionar um botão de chamada para ação, você precisa arrastar e soltar o bloco ‘Botão’ na página.

Geralmente, ele é colocado logo abaixo do subtítulo.

Com isso feito, prossiga e insira o texto do seu botão no campo apropriado.

Você também pode adicionar um subtexto logo abaixo do texto principal do botão para mais contexto.

Em seguida, role para baixo e adicione um link ao seu botão.

Sinta-se à vontade para alterar o alinhamento e o tamanho do botão também.

Agora, volte para cima na barra lateral e mude para a aba ‘Modelos’.

É aqui que você pode alterar o estilo do seu botão para que ele combine melhor com o seu design do WordPress.

Se você não gostar dos designs de modelo padrão, mude para a aba ‘Avançado’.

Aqui, você pode alterar a tipografia, o estilo, a cor, o preenchimento, o efeito de sombra do botão, e assim por diante.

Sinta-se à vontade para continuar personalizando seu modelo até que ele fique bom.

Quando estiver satisfeito, basta clicar no botão ‘Salvar’ no topo e selecionar ‘Publicar’ para tornar a página ativa.

E é tudo para adicionar uma imagem de herói com um construtor de páginas.

Veja como a seção de herói se parece em nosso site de demonstração:

Método 4: Usando o Plugin Hero Banner + Shortcode (Todos os Temas)

Este método final tecnicamente funciona com todos os temas, mas o recomendamos mais para pessoas que usam um tema clássico sem uma seção de herói integrada.

Para seguir este método, você precisará instalar o plugin Hero Banner Ultimate. Para instruções passo a passo, você pode conferir nosso guia sobre como instalar um plugin do WordPress para iniciantes.

Etapa 1: Configure o Plugin Hero Banner

Assim que o plugin estiver ativo, vá para Hero Banner » Adicionar Hero Banner.

Depois disso, dê um título ao seu banner de herói. Isso servirá como seu título principal.

Quando terminar, insira algum texto no editor visual clássico que funcionará como seu subtítulo. Sinta-se à vontade para alterar a formatação e a cor aqui.

Agora, role para baixo até a seção ‘Hero Banner – Configurações’.

Aqui, você pode escolher um layout de banner. Embora você não possa visualizar o layout em tempo real dentro das configurações do plugin, é fácil alternar entre eles mais tarde em sua página real para encontrar o que você mais gosta.

Escolheremos o Layout 1 para o nosso tutorial.

Quanto ao Tipo de Banner, você pode selecionar ‘Imagem de Fundo’ para uma imagem principal, mas também pode escolher ‘Vídeo de Fundo’ se tiver um vídeo em tela cheia para usar como principal.

Em seguida, não se esqueça de clicar em ‘Enviar Imagem’ para adicionar sua imagem do computador ou da biblioteca de mídia.

Nesta etapa, você pode definir o tamanho da imagem de fundo como ‘Cobrir’ para que a imagem fique em tela cheia.

Você também vai querer escolher ‘Rolar’ para o anexo da imagem de fundo para desativar qualquer efeito de paralaxe.

Desça até chegar à Configuração de Cor do Banner.

É aqui que você pode alterar a cor do título (Cor do Título) e do subtítulo (Cor do Conteúdo). Simplesmente clique na ferramenta seletora de cores para fazer isso.

Além disso, você pode querer adicionar uma cor de sobreposição sobre a imagem, o que pode ser útil para ajustar a legibilidade do texto contra a imagem.

Decidimos usar a cor preta, com opacidade de 0,5.

Vamos configurar as opções de chamada para ação.

Aqui, você pode inserir o texto e o link para o seu botão. Você também pode alterar a cor em ‘Botão – 1 Classe.’

Tudo o que você precisa fazer a seguir é rolar de volta para cima.

Depois disso, clique em ‘Publicar.’

Vamos agora para Hero Banner » Hero Banner. Você deve ver agora que sua imagem principal foi criada e o plugin gerou um shortcode para você exibi-la.

Anote este shortcode, pois precisaremos dele mais tarde.

Etapa 2: Encontre o Seletor CSS da Seção de Cabeçalho do Seu Tema

Para exibir a imagem principal, precisamos encontrar um ‘endereço’ específico para a seção de cabeçalho do seu tema.

Isso é chamado de seletor CSS, e ele diz ao nosso plugin exatamente onde colocar a imagem principal. Não se preocupe, você não precisará escrever nenhum código.

Para fazer isso, visite seu site no front-end. Em seguida, clique com o botão direito na sua seção de cabeçalho e selecione 'Inspecionar'.

No lado direito, você precisa encontrar qual seletor CSS a seção de cabeçalho está usando. Você pode passar o cursor sobre todos esses trechos de código até ver que a seção de cabeçalho está destacada no front-end.

Aqui está um exemplo:

Se toda a seção de cabeçalho for destacada enquanto você passa o cursor sobre o código, você está no caminho certo.

Agora, clique com o botão direito nesse trecho de código e selecione Copiar » Copiar seletor.

Depois de fazer isso, você pode colar o seletor em um local seguro, como um editor de texto, ou apenas manter esta aba aberta.

Passo 3: Adicione Seu Shortcode ao WPCode

O próximo passo é instalar WPCode, que é um plugin de trechos de código.

Tecnicamente, você não precisa usar um plugin para inserir trechos de código personalizados nos arquivos do seu tema. Mas queríamos fazer isso para manter as coisas seguras, pois colar código em um arquivo de tema pode apresentar alguns erros inesperados.

Achamos o WPCode super útil para gerenciar trechos de código personalizados sem quebrar seu site.

Primeiro, instale o plugin do WordPress em sua área de administrador. Assim que o plugin estiver ativo, navegue até Trechos de Código » + Adicionar Trecho, selecione ‘Adicionar Seu Código Personalizado (Novo Trecho)’ e clique no botão ‘+ Adicionar Trecho Personalizado’.

Agora, vamos dar um nome ao seu novo trecho de código. Pode ser algo simples, como ‘Shortcode do Banner Principal’.

Depois disso, altere o Tipo de Código para ‘Snippet PHP.’

Na caixa de visualização do código, cole o seguinte trecho:

echo do_shortcode('[hbupro_banner id="XXX"]'); // Replace with your own shortcode

Certifique-se de alterar o [hbupro_banner id="XXX"] com o seu próprio shortcode do Banner Principal que você viu anteriormente.

Em seguida, role para baixo até a seção ‘Inserção’.

Aqui, o Método de Inserção deve ser ‘Inserir Automaticamente’ e a Localização deve ser ‘Após Elemento HTML’.

Em seguida, cole o seletor que você copiou anteriormente no campo ‘Seletor CSS’. No nosso caso, foi #masthead, mas isso variará de acordo com o tema.

Com isso feito, você pode alternar o botão ‘Inativo’ para que ele fique ‘Ativo’ e clicar no botão ‘Salvar Trecho’.

E é isso!

Se você visualizar seu site, agora deverá ver a imagem do Banner Principal logo abaixo do seu cabeçalho:

Perguntas Frequentes Sobre Imagens de Herói

Aqui está uma lista de algumas perguntas comuns que nossos leitores frequentemente fazem sobre imagens de herói:

Qual é o melhor tamanho para uma imagem de herói do WordPress?

Um ótimo ponto de partida para o tamanho da imagem de herói é 1920 pixels de largura por 400 a 600 pixels de altura. Isso garante que ela fique nítida na maioria das telas de desktop sem ocupar muito espaço vertical.

No entanto, o tamanho perfeito geralmente depende do seu tema específico do WordPress. Sempre recomendamos testar como sua imagem fica em dispositivos desktop e mobile.

Posso usar um vídeo na minha seção principal?

Absolutamente. Usar um vídeo de fundo pode fazer seu site parecer mais dinâmico e capturar a atenção dos visitantes imediatamente. A maioria dos construtores de páginas como SeedProd e o bloco Padrão de Capa do WordPress incluem opções simples para adicionar um vídeo de fundo em vez de uma imagem estática.

Como faço para que minha imagem principal seja compatível com dispositivos móveis?

Temas modernos e construtores de páginas são projetados para serem responsivos, então eles redimensionarão automaticamente sua imagem principal para telas menores. A chave é escolher uma imagem que ainda fique boa quando cortada.

Também é muito importante compactar sua imagem antes de fazer o upload. Isso garante que ela carregue rapidamente para visitantes em conexões móveis mais lentas.

Uma imagem principal é o mesmo que um slider?

Eles são semelhantes, mas não exatamente iguais. Uma imagem principal é tipicamente uma única imagem de banner grande no topo de uma página da web. Por outro lado, um slider alterna entre várias imagens ou vídeos. Você pode usar um slider dentro da sua seção principal, como mostramos no método para temas clássicos.

Esperamos que este artigo tenha ajudado você a aprender como adicionar uma imagem de destaque no WordPress. Você também pode querer conferir nosso guia sobre como adicionar uma animação de pré-carregamento ao WordPress e nossas escolhas de especialistas das melhores ferramentas para criar e vender produtos digitais.

Se você gostou deste artigo, por favor, inscreva-se em nosso Canal do YouTube para tutoriais em vídeo do WordPress. Você também pode nos encontrar no Twitter e no Facebook.