Como Personalizar o Cabeçalho do Seu WordPress (Guia para Iniciantes)

Você conhece aquela sensação quando visita um site WordPress e ele parece… genérico? Como se tivesse saído direto de um modelo, sem nada pessoal ou memorável?

Essa é exatamente a impressão que você causa quando mantém o cabeçalho padrão do WordPress, e isso pode custar sua credibilidade com cada visitante.

Seu cabeçalho é a primeira coisa que as pessoas veem quando chegam ao seu site, então ele precisa causar uma forte impressão. Personalizá-lo permite que você adicione elementos-chave como links de navegação, ícones sociais e uma barra de pesquisa.

Esses recursos tornam seu site mais fácil de usar e ajudam você a deixar uma impressão duradoura e profissional. Além disso, já vimos como um cabeçalho personalizado pode aumentar a confiança e o engajamento.

Neste guia, mostraremos exatamente como personalizar seu cabeçalho WordPress, mesmo que você seja um iniciante completo. Você aprenderá vários métodos que não exigem codificação, para que possa criar um cabeçalho que se destaque e atenda melhor aos seus visitantes. 🌟

O que é o Cabeçalho no WordPress?

O cabeçalho do seu site é a seção superior de cada página do seu site WordPress e é provavelmente a primeira coisa que os visitantes veem. Ele geralmente exibe o logotipo do seu site e título, menus de navegação e outros elementos importantes que você deseja que os usuários vejam primeiro.

Por exemplo, aqui está a área do nosso cabeçalho no WPBeginner que milhões de leitores veem mensalmente.

Ao personalizar o cabeçalho do seu site, você pode dar um toque único e torná-lo mais útil para seus visitantes. Você pode vincular às suas páginas mais populares, exibir ícones sociais ou o seu número de telefone comercial e mostrar botões de call-to-action para mais conversões.

Nas seções a seguir, mostraremos como personalizar facilmente o cabeçalho do seu WordPress. Você pode usar os links a seguir para pular para a seção que deseja ler:

• Personalize o Cabeçalho Usando o Personalizador de Temas do WordPress
• Personalize o Cabeçalho Usando o Editor de Site Completo do WordPress
• Crie Layouts de Cabeçalho e Página Personalizados com SeedProd
• Adicionando um Cabeçalho Personalizado para Cada Categoria
• Adicione uma Área de Widget ao Cabeçalho do Seu WordPress
• Adicione Imagens de Cabeçalho Aleatórias ao Seu Blog WordPress
• Adicione Código ao Cabeçalho do Seu Site (Avançado)
• Dica Bônus: Teste Diferentes Estilos de Cabeçalho (Usando Teste A/B)
• Perguntas Frequentes: Personalize Seu Cabeçalho do WordPress
• Recursos Adicionais: Mais Dicas de Design e Navegação do WordPress

Pronto? Vamos começar.

Personalize o Cabeçalho Usando o Personalizador de Temas do WordPress

Temas populares do WordPress permitem que você use o personalizador de temas do WordPress para fazer alterações na área do cabeçalho do seu site. Esse recurso às vezes é chamado de cabeçalho personalizado, mas observe que nem todos os temas o suportam.

Você deve começar navegando para Aparência » Personalizar na sua área de administração do WordPress.

Seu tema pode incluir uma seção 'Cabeçalho' no personalizador ou fornecer opções de cabeçalho na seção 'Cor'. No entanto, isso varia de tema para tema. Aqui estão alguns exemplos.

Alguns temas, como o Twenty Twenty-One, não oferecem opções de personalização de cabeçalho. Neste caso, recomendamos o uso de um plugin construtor de temas de arrastar e soltar como o SeedProd, que abordaremos abaixo.

O tema Twenty Sixteen permite que você adicione uma imagem de fundo ao cabeçalho e até mesmo adicione imagens de cabeçalho aleatórias.

Alguns temas gratuitos e premium do WordPress oferecem ainda mais opções de personalização de tema.

Por exemplo, você pode ser capaz de alterar o estilo da fonte do seu cabeçalho, layout, cores e muito mais. Mas ainda assim diferirá de um tema para outro, e você estará limitado ao que o desenvolvedor do tema permite que você faça.

Por exemplo, Sydney tem uma opção dedicada de 'Construtor de Cabeçalho' em seu painel de personalização à esquerda.

Aqui, você encontrará diferentes configurações para editar a aparência e o estilo do cabeçalho. Você pode construir um cabeçalho personalizado adicionando blocos, assim como ao editar uma postagem de blog ou página no editor de conteúdo do WordPress.

Para começar, basta passar o mouse sobre uma área vazia no cabeçalho e clicar no ícone '+' para adicionar um bloco de cabeçalho – seja na linha superior, intermediária ou inferior.

Em seguida, você pode selecionar qualquer bloco que desejar adicionar ao seu cabeçalho personalizado. Por exemplo, você pode adicionar um bloco de widget, um bloco de conta, um bloco de pesquisa e muito mais.

O construtor de cabeçalho também permite que você arraste e solte blocos para colocá-los acima ou abaixo do cabeçalho.

Em seguida, você pode personalizar ainda mais cada bloco que adicionar ao cabeçalho.

Por exemplo, selecionar o bloco Título do Site & Logo lhe dará opções para fazer upload de um título e logotipo do site, alterar a largura do logotipo, exibir uma frase de efeito do site e muito mais.

Além disso, você também pode alterar a cor de fundo do cabeçalho ou adicionar uma imagem de fundo para aparecer no cabeçalho.

Quando terminar de editar o cabeçalho personalizado, basta clicar no botão ‘Publicar’.

Para mais detalhes, veja nosso guia definitivo sobre como usar o personalizador de temas do WordPress.

Personalize o Cabeçalho Usando o Editor de Site Completo do WordPress

O WordPress adicionou a edição de site completo ao WordPress na versão 5.9. Se o seu tema suportar o novo recurso, ele substituirá o personalizador de temas. No entanto, neste momento, existem apenas alguns temas que funcionam com o editor de site completo.

Ao usar um tema compatível, você pode personalizar seu cabeçalho navegando para Aparência » Editor. Isso iniciará o editor de site completo, que é semelhante ao editor de blocos que você usa para escrever posts e páginas do WordPress.

Ao clicar no cabeçalho, você notará que o nome do modelo na parte superior da página muda para ‘Cabeçalho da Página’.

Agora, ao clicar no ícone ‘Configurações’ na barra de ferramentas, você verá opções para personalizar o layout, cor, borda e dimensões do cabeçalho.

Como exemplo, alteraremos a cor de fundo do cabeçalho. Primeiro, você precisará expandir a seção ‘Cor’ e, em seguida, clicar na opção ‘Fundo’.

Na janela pop-up que aparece, você primeiro selecionará uma cor sólida ou um gradiente.

Em seguida, você pode escolher entre várias cores predefinidas. Ao clicar em uma cor, o plano de fundo do seu cabeçalho será alterado imediatamente.

Você pode encontrar mais opções de personalização clicando no ícone 'Estilos' no canto superior direito da página. Isso permitirá que você altere a fonte, as cores e o layout do cabeçalho.

Para saber mais sobre como o editor de site completo funciona, consulte nosso guia para iniciantes sobre como personalizar seu tema do WordPress.

Crie Layouts de Cabeçalho e Página Personalizados com SeedProd

Quer ter controle total sobre seus cabeçalhos, rodapés e barras laterais para dar ao seu site um design exclusivo? Então recomendamos o uso do SeedProd, o melhor plugin construtor de temas WordPress.

O SeedProd permite que você crie facilmente um tema WordPress personalizado sem escrever nenhum código. Isso inclui a criação de cabeçalhos, rodapés e tudo mais necessário para um tema WordPress atraente.

Você pode até criar vários estilos de cabeçalho personalizados para diferentes páginas e seções do seu site.

Algumas de nossas marcas parceiras usam o SeedProd para construir seus sites, e ele tem feito um trabalho incrível para elas. Para saber mais sobre isso, você pode conferir nossa análise completa do SeedProd.

Primeiro, recomendamos seguir nosso guia sobre como criar facilmente um tema WordPress personalizado sem nenhum código. Depois de fazer isso, você pode começar a personalizar seu cabeçalho no editor do SeedProd.

Para acessar o editor, tudo o que você precisa fazer é clicar no link ‘Editar Design’ encontrado abaixo do cabeçalho.

Isso abrirá o cabeçalho no editor de arrastar e soltar do SeedProd.

A partir daqui, você pode personalizar facilmente seu cabeçalho adicionando novos blocos.

Existem blocos para tags de modelo como o logotipo do site ou qualquer um dos seus widgets do WordPress, e blocos avançados como um contador regressivo, menu de navegação ou botões de compartilhamento social.

A melhor parte é que você pode personalizar ainda mais cada bloco usando o construtor de temas. Por exemplo, você pode alterar o tamanho e o alinhamento do seu logotipo ou escolher quais páginas exibir no menu de navegação. Ele até permite que você adicione uma imagem no cabeçalho.

Com o SeedProd, você também pode adicionar uma seção completa ao cabeçalho do seu tema.

Seções são grupos de blocos que você pode usar para diferentes áreas do seu site. Isso inclui cabeçalhos, rodapés, recursos, depoimentos, chamadas para ação e muito mais.

Para usar uma seção de cabeçalho, você precisará alternar para a aba 'Seções' no painel 'Design'.

Depois disso, escolha uma seção de cabeçalho que você gostaria de usar para o seu site. O SeedProd oferece vários modelos de seção que você pode usar.

Vá em frente e comece a personalizar a seção do cabeçalho.

Assim que estiver satisfeito com seu cabeçalho personalizado, certifique-se de clicar no botão 'Salvar' para armazenar suas alterações.

Agora, você está pronto para publicar seu cabeçalho personalizado.

Simplesmente vá para SeedProd » Theme Builder no seu painel do WordPress e clique no botão ao lado da opção ‘Habilitar Tema SeedProd’ para ‘Sim’.

Assim que você habilitar a opção, o SeedProd substituirá seu tema padrão do WordPress por um novo tema e cabeçalho personalizados.

Agora você pode visitar seu site para ver o novo cabeçalho personalizado em ação.

Crie Cabeçalhos Personalizados Diferentes para Cada Página

Além disso, o SeedProd torna super fácil projetar cabeçalhos personalizados para páginas específicas do seu site.

O construtor de temas permite que você adicione cabeçalhos personalizados para cada página do seu site WordPress. Dessa forma, você pode exibir um cabeçalho personalizado para diferentes categorias, tags, tipos de postagem, tipos de página e muito mais.

Para começar, você precisará ir para SeedProd » Theme Builder no seu painel do WordPress e clicar no botão ‘Adicionar Novo Modelo de Tema’.

Uma nova janela pop-up onde você precisará inserir os detalhes do modelo de tema aparecerá.

Prossiga e insira um nome para o seu modelo de tema. Depois disso, basta escolher 'Cabeçalho' como o tipo de modelo no menu suspenso. Você pode deixar o campo 'Prioridade' em branco.

Em seguida, você precisará inserir as condições de exibição para o seu cabeçalho personalizado. Por exemplo, usamos as condições em que ele seria exibido em todas as posts e páginas que estão na categoria tutoriais.

Não se esqueça de clicar no botão 'Salvar' quando terminar.

Depois disso, prossiga e edite o cabeçalho personalizado usando o construtor de temas de arrastar e soltar do SeedProd.

Quando terminar de editar o cabeçalho personalizado, basta clicar no botão 'Salvar' no topo.

Você pode ver mais ideias sobre como personalizar seu cabeçalho usando o SeedProd em nosso guia para iniciantes sobre como criar facilmente um tema personalizado do WordPress usando o construtor de temas do SeedProd.

Adicionando um Cabeçalho Personalizado para Cada Categoria

A maioria dos sites exibe o mesmo cabeçalho em todos os posts, páginas, categorias e páginas de arquivo. No entanto, você pode exibir um cabeçalho diferente para cada categoria do WordPress.

Isso pode ser feito adicionando código aos arquivos do seu tema, mas você terá mais controle usando um construtor de temas.

Mostramos anteriormente como personalizar seu cabeçalho usando o plugin construtor de temas SeedProd. Agora, o SeedProd também permite que você crie vários cabeçalhos personalizados e os exiba para diferentes categorias usando lógica condicional.

Para criar um novo cabeçalho, você precisa navegar até SeedProd » Theme Builder e clicar no botão laranja ‘Add New Theme Template’. Alternativamente, você pode duplicar seu cabeçalho atual e usá-lo como ponto de partida.

Uma janela pop-up aparecerá, onde você pode dar um nome ao modelo de tema e selecionar ‘Header’ no menu suspenso Tipo.

Você também precisa inserir uma prioridade. Assim, se mais de um cabeçalho atender às condições para uma determinada página, o cabeçalho com a maior prioridade será exibido.

O cabeçalho padrão tem uma prioridade de 0, portanto, certifique-se de inserir 1 ou superior.

Depois disso, você precisará configurar uma ou mais condições. Isso informa ao SeedProd quando exibir um determinado cabeçalho. Você simplesmente seleciona as condições nos menus suspensos.

Nos dois primeiros menus, você terá que selecionar ‘Include’ e depois ‘Has Category’. No último campo, você deve digitar o nome da categoria onde deseja que o cabeçalho seja exibido.

Você pode facilmente exibir o mesmo cabeçalho para várias categorias clicando no botão ‘Add Condition’ e incluindo outra categoria. Quando terminar, certifique-se de clicar no botão ‘Save’ para salvar o novo cabeçalho.

Agora, você pode personalizar o design de cada novo cabeçalho usando o editor de arrastar e soltar do SeedProd, como mostramos anteriormente.

Para saber mais, incluindo como fazer isso usando código, consulte nosso guia sobre como adicionar um cabeçalho, rodapé ou barra lateral personalizados para cada categoria.

Adicione uma Área de Widget ao Cabeçalho do Seu WordPress

Se você está construindo um tema personalizado do zero usando código, talvez queira adicionar um widget do WordPress ao seu cabeçalho para capturar a atenção dos seus visitantes.

Widgets permitem que você adicione blocos de conteúdo a seções específicas do seu tema facilmente, mas observe que nem todo tema inclui uma área de widget no cabeçalho.

Mencionamos anteriormente o quão simples é adicionar widgets ao seu cabeçalho usando o construtor de temas SeedProd. Mas e se você quiser adicionar um widget ao cabeçalho de um tema normal do WordPress?

Alguns temas, como o tema Sydney, permitem que você faça isso usando o personalizador de temas do WordPress. O Sydney adiciona uma opção chamada 'Header Builder' para personalizar completamente o cabeçalho, incluindo a adição de widgets.

Se o seu tema WordPress não tiver atualmente uma área de widget no cabeçalho, você precisará adicioná-la manualmente.

Embora a abordagem geral seja adicionar trechos de código ao arquivo functions.php, a abordagem mais fácil e segura é usar o WPCode. É o melhor plugin para adicionar trechos de código sem quebrar seu site.

Algumas de nossas marcas parceiras usam o WPCode para adicionar e gerenciar seus trechos de código personalizados. Ouvimos coisas ótimas sobre o plugin, e você também pode ler nossa análise detalhada do WPCode para saber mais sobre ele.

Para começar, vamos garantir que você tenha o plugin de trechos de código WPCode instalado e ativado em seu site WordPress. Se precisar de ajuda, sinta-se à vontade para consultar nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você desejará navegar para Trechos de Código » + Adicionar Trechos.

Agora, a primeira coisa que você precisará fazer é criar o título do snippet. Por exemplo, nós nomeamos o nosso como ‘Adicionando um Widget do WordPress à Área do Cabeçalho’. O segundo passo é expandir o menu suspenso do tipo de código e escolher ‘Snippet PHP’.

Uma vez feito isso, basta copiar o código a seguir e colá-lo na seção ‘Pré-visualização do Código’.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

Este código registrará uma nova área de cabeçalho ou pronta para widgets para o seu tema.

Veja como isso pode parecer no seu editor WPCode:

Para ativar o snippet, você pode alternar o botão ao lado do botão azul ‘Salvar Snippet’ para ‘Ativo’. Em seguida, não se esqueça de clicar no botão ‘Salvar Snippet’ para armazenar suas alterações.

Depois de ativar o interruptor e salvar suas alterações, é assim que o editor deve parecer:

Agora, se você for em Aparência » Widgets, você verá uma nova área de widgets rotulada como ‘Área de Widget do Cabeçalho Personalizado’.

É aqui que você adicionará seus widgets. Se precisar de ajuda, você pode ver nosso guia sobre como adicionar e usar widgets no WordPress.

Dependendo do seu tema, você também pode precisar adicionar CSS ao WordPress para controlar como a área de widgets é exibida.

Para instruções detalhadas, você pode conferir nosso guia sobre como adicionar um widget do WordPress ao cabeçalho do seu site.

Adicione Imagens de Cabeçalho Aleatórias ao Seu Blog WordPress

Outra maneira de tornar seus cabeçalhos do WordPress mais atraentes é adicionando imagens aleatórias à seção do cabeçalho.

Exibir imagens que mudam aleatoriamente ajuda a capturar a atenção dos seus visitantes e torna seu conteúdo mais envolvente.

Para adicionar imagens aleatórias ao cabeçalho do seu blog WordPress, você pode usar o personalizador de temas e fazer upload de imagens para a seção de cabeçalho. Esta opção pode variar dependendo do tema WordPress que você está usando.

Em seguida, prossiga e selecione a opção 'Aleatorizar cabeçalhos enviados'.

Se você deseja mais controle e flexibilidade na exibição de imagens aleatórias na seção de cabeçalho, você também pode usar um plugin WordPress.

Para mais detalhes, consulte nosso guia sobre como adicionar imagens aleatórias ao cabeçalho do seu blog WordPress.

Adicionar Código ao Cabeçalho do Seu Site (Avançado)

Finalmente, se você quiser adicionar código personalizado à seção de cabeçalho do seu site, você pode fazer isso facilmente no seu painel do WordPress. Este método é recomendado para usuários avançados e pode não ser adequado para iniciantes, pois envolve a edição de código e requer conhecimento técnico.

Você pode encontrar os arquivos de cabeçalho do seu tema indo em Aparência » Editor de Arquivos de Tema no painel de administração do WordPress. Nos arquivos de tema 'style.css', você pode rolar para baixo até a seção de cabeçalho do site e adicionar ou remover código.

Uma maneira mais fácil de adicionar código personalizado para editar o cabeçalho do seu site é usando WPCode, o melhor plugin de snippets de código do mercado.

Primeiro, instale e ative o plugin gratuito WPCode. Para mais detalhes, consulte nosso guia sobre como instalar um plugin do WordPress.

Após a ativação, você pode ir em Snippets de Código » Cabeçalho e Rodapé no seu painel do WordPress. Em seguida, basta inserir o código personalizado na seção 'Cabeçalho'.

Após inserir o código, clique no botão 'Salvar Alterações'.

Para mais detalhes, você pode ver nosso guia sobre como adicionar código de cabeçalho e rodapé no WordPress.

É só isso!

Dica Bônus: Teste Diferentes Estilos de Cabeçalho (Usando Teste A/B)

Após personalizar seu cabeçalho, é totalmente normal se perguntar: "Esta é a melhor versão para meus visitantes?" É aí que entram os testes A/B.

Ele permite comparar diferentes versões do seu cabeçalho, seja uma mudança de layout, cor de botão ou um elemento adicionado como uma barra de pesquisa, e ver qual delas realmente tem um desempenho melhor.

Você poderá tomar decisões de design com base no comportamento real do usuário, e não apenas em suposições.

Não se preocupe, você não precisa ser um desenvolvedor para fazer isso.

Com ferramentas fáceis para iniciantes como Thrive Optimize e Nelio AB Testing, você estará testando como um profissional em pouco tempo. Essa abordagem ajuda seu cabeçalho a melhorar a cada ajuste.

Para detalhes completos, veja nosso guia sobre como fazer testes A/B no WordPress.

Perguntas Frequentes: Personalize Seu Cabeçalho do WordPress

Ainda tem dúvidas sobre como personalizar o cabeçalho do seu WordPress? Não se preocupe; nós temos o que você precisa! Aqui estão algumas perguntas comuns que iniciantes costumam fazer:

O que é um cabeçalho do WordPress e por que ele é importante?

O cabeçalho é a seção superior do seu site WordPress e é a primeira coisa que os visitantes veem. Geralmente inclui o logotipo do seu site, menu de navegação e outros elementos importantes. Um cabeçalho bem projetado ajuda você a causar uma ótima primeira impressão e direciona as pessoas para as partes mais importantes do seu site.

Preciso saber codificar para personalizar meu cabeçalho do WordPress?

De forma alguma! Você não precisa de nenhuma habilidade de codificação. Muitos temas do WordPress e plugins (como o SeedProd) permitem que você personalize seu cabeçalho com um construtor de arrastar e soltar simples – perfeito para iniciantes.

Quais são os benefícios de usar um plugin como o SeedProd para cabeçalhos?

SeedProd facilita o design de cabeçalhos personalizados sem precisar tocar em nenhum código. Você tem controle total sobre a aparência e o layout, além de opções avançadas para combinar com o estilo do seu site e melhorar a experiência geral do usuário.

Como adicionar um widget ao meu cabeçalho pode melhorar meu site?

Adicionar widgets ao seu cabeçalho, como uma barra de pesquisa, ícones sociais ou informações de contato, torna os recursos importantes mais fáceis de encontrar. Isso ajuda os visitantes a navegar pelo seu site mais rapidamente e dá ao seu site uma aparência mais polida e profissional.

Posso ter cabeçalhos diferentes para páginas ou posts diferentes?

Sim! Com as ferramentas certas, como o SeedProd, você pode adicionar cabeçalhos personalizados para diferentes páginas, posts, categorias ou até mesmo tags. Isso lhe dá mais controle sobre a aparência do seu site em diferentes seções.

Recursos Adicionais: Mais Dicas de Design e Navegação do WordPress

Esperamos que este tutorial tenha ajudado você a aprender como personalizar o cabeçalho do seu WordPress. Em seguida, você também pode querer conferir nossos guias sobre:

• Como Adicionar Imagens Corretamente no WordPress
• Como Adicionar um Redimensionador de Fonte no WordPress para Acessibilidade
• Como Estilizar Cada Post do WordPress de Forma Diferente
• Como Criar um Menu Lateral Colapsável no WordPress
• Como Exibir Sidebars Diferentes para Cada Post e Página do WordPress
• Como Criar uma Página de Destino Viral de Lista de Espera no WordPress
• Elementos Chave de Design para um Site WordPress Eficaz
• Guia Definitivo: Como Mudar Corretamente um Tema do WordPress

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.