Resumo: Como Personalizar o Cabeçalho do Meu WordPress Sem Quebrar Meu Tema
O cabeçalho do seu WordPress é a primeira coisa que os visitantes veem, e a maioria dos temas oferece muito menos controle sobre ele do que você esperaria. Aqui estão os quatro métodos que uso:
- Construtor de temas SeedProd: Controle total ponto a ponto de cada elemento do cabeçalho, funciona com qualquer tema e mantém suas alterações ao atualizar ou trocar de tema.
- Personalizador de Temas do WordPress (ou Editor de Site): Bom para ajustes básicos de logotipo, título e menu em temas clássicos. Temas modernos de FSE usam Aparência » Editor em vez disso.
- Plugin Inserir Cabeçalhos e Rodapés: Melhor para adicionar scripts ou trechos de código simples à área do cabeçalho sem mexer nos arquivos do tema.
- Edições de CSS e header.php: Apenas para usuários avançados. Alterações de CSS são seguras; editar o header.php diretamente requer um tema filho para sobreviver às atualizações.
Seu tema WordPress escolheu o layout do seu cabeçalho. Não você.
Eu editei cabeçalhos em dezenas de sites WordPress ao longo dos anos, e essa é a coisa que mais frustra as pessoas. Se você está tentando adicionar um logotipo, mudar sua navegação ou inserir um botão de call-to-action, seu cabeçalho define o tom para todo o seu site. Com a abordagem certa, você pode até mostrar cabeçalhos diferentes em páginas diferentes, algo que a maioria dos temas WordPress não consegue fazer por conta própria.
Neste guia, vou mostrar como editar seu cabeçalho do WordPress usando quatro métodos, desde o construtor visual até a personalização de CSS.
Resumo Rápido: Como Editar Seu Cabeçalho do WordPress
- Editar cabeçalho com um construtor visual (sem código)
- Edite o cabeçalho usando o personalizador do seu tema WordPress
- Use um plugin de cabeçalho para alterações simples
- Edite o código manualmente (avançado)
O que é o Cabeçalho do WordPress?
O cabeçalho do WordPress é a seção no topo de cada página do seu site. Geralmente inclui seu logotipo, menu de navegação e quaisquer CTAs como um número de telefone ou botão de inscrição.
Por exemplo, veja como o cabeçalho aparece no site da SeedProd.
Como você pode ver, ele tem o logotipo da SeedProd, um menu de navegação e um botão de call-to-action para começar com a SeedProd.
Se o seu site tiver outras necessidades, você pode adicionar elementos extras ao cabeçalho do seu site WordPress. Como a SeedProd, você pode adicionar botões de call-to-action ou incluir uma caixa de pesquisa, ícones de mídia social e outro conteúdo.
Você pode encontrar os detalhes do seu cabeçalho do WordPress no arquivo header.php do seu tema WordPress. Sugerimos editar esse arquivo apenas se você for um usuário avançado que entende o que está fazendo.
O que Você Pode Mudar em um Cabeçalho do WordPress?
O cabeçalho é onde a maioria das primeiras impressões são feitas, e a maioria dos temas WordPress oferece quase nenhum controle sobre ele. Entender o que é realmente editável ajuda você a escolher o método certo abaixo.
A maioria das personalizações de cabeçalho se enquadra nestas categorias:
- Logotipo e título do site
- Slogan
- Menu de navegação
- Botões de CTA (número de telefone, "Comece o Teste Grátis", "Entre em Contato")
- Barra de pesquisa
- Ícones de mídia social
- Cor de fundo e fontes
- Comportamento fixo (cabeçalho que permanece visível ao rolar)
- Layout móvel (menu hambúrguer, elementos empilhados vs. em linha)
O método que você escolher determina quantos desses você pode realmente controlar. Um personalizador de tema padrão pode oferecer opções de logotipo e slogan, mas nada mais. O construtor de cabeçalho WordPress do SeedProd oferece controle total sobre todos eles.
1. Como Personalizar Cabeçalhos no WordPress com SeedProd
Se você deseja controle total sobre o cabeçalho do seu WordPress, SeedProd oferece o máximo de controle. É o melhor plugin construtor de temas do WordPress que permite criar um modelo de cabeçalho personalizado do WordPress sem escrever nenhum código.
SeedProd é um construtor de sites WordPress de arrastar e soltar que permite criar um site WordPress completo e um tema personalizado sem tocar em nenhum código.
O construtor de temas do SeedProd é independente de tema. Ele substitui completamente o seu tema ativo do WordPress, portanto, as alterações que você fizer nunca serão perdidas ao atualizar ou trocar de tema.
Criar um cabeçalho personalizado para o seu site WordPress leva apenas alguns cliques, e você pode adicionar elementos populares de cabeçalho com arrastar e soltar.
Dito isso, aqui estão os passos para editar o cabeçalho do seu WordPress com SeedProd.
Passo 1. Instale o Plugin Construtor de Temas SeedProd
O construtor de temas SeedProd funciona com qualquer tema do WordPress, então você não precisa excluir sua configuração atual primeiro.
Primeiro, instale e ative o SeedProd em seu site WordPress.
Para obter ajuda com isso, consulte este guia passo a passo sobre como instalar um plugin do WordPress.
Observação: Você precisará de pelo menos o plano Pro ou Elite para desbloquear o construtor de temas.
Após ativar o plugin, vá para SeedProd » Configurações para inserir sua chave de licença do plugin. Você pode encontrá-la em sua conta no site do SeedProd.
Depois de inserir sua chave de licença e clicar em Verificar Chave, você estará pronto para criar um cabeçalho personalizado do WordPress usando SeedProd.
Passo 2. Escolha um Modelo de Tema Inicial
Para editar seu cabeçalho com SeedProd, você primeiro criará um tema personalizado. Não se preocupe, é mais simples do que parece.
Vá para SeedProd » Construtor de Temas. Você verá os arquivos de modelo do seu tema atual listados nesta página.
Como ainda não começamos, você verá apenas um modelo de CSS Global.
Você tem duas opções para começar:
- Use um dos temas SeedProd prontos como ponto de partida
- Crie manualmente modelos de tema do zero
Eu recomendo começar com um tema existente. O SeedProd gera todos os arquivos de modelo automaticamente, incluindo os modelos de cabeçalho, rodapé e página. Estes são temas completos e de qualidade profissional que lhe dão uma vantagem.
Clique em Temas e escolha aquele que melhor atende às necessidades do seu site.
Após escolher um tema, o SeedProd cria automaticamente todos os arquivos de modelo. A partir daí, você pode editar cada modelo individualmente no editor de arrastar e soltar.
Passo 3. Personalize a Seção do Cabeçalho
Para editar seu cabeçalho com SeedProd, encontre o modelo Cabeçalho e clique em Editar Design.
Isso abre o arquivo de modelo no construtor de temas do SeedProd. Você verá uma prévia ao vivo do seu modelo de cabeçalho do WordPress à direita, com um painel de edição à esquerda.
Para alterar qualquer item no seu modelo de cabeçalho, aponte e clique para editá-lo.
Dependendo do item que você clicar, você verá diferentes opções de edição na coluna da esquerda. Você pode alterar fontes, cores, plano de fundo, espaçamento e muito mais.
Para adicionar itens personalizados ao cabeçalho, arraste os blocos SeedProd da coluna da esquerda para o seu modelo. Aqui estão os tipos de blocos disponíveis:
- Tags de Modelo – Blocos que geram elementos de tema do banco de dados do seu WordPress, como posts, comentários e imagens destacadas.
- Blocos Padrão – Elementos comuns de design da web que permitem adicionar imagens, botões, texto, divisores e muito mais.
- Blocos Avançados – Blocos para adicionar formulários de contato, perfis sociais, botões de compartilhamento, shortcodes do WordPress, Google Maps e muito mais.
- WooCommerce – Se você tem uma loja online, use estes blocos para exibir produtos, carrinhos de compras e páginas de checkout personalizadas.
Usando Seções para Personalizar o Cabeçalho do Seu WordPress
Além de blocos individuais, você também pode adicionar seções completas ao seu modelo de cabeçalho.
Mude para a aba Seções no painel Design.
Seções são grupos de blocos para diferentes áreas do design do seu site. Você pode encontrar seções prontas para usar para seu cabeçalho, rodapé, chamadas para ação, recursos e muito mais.
Clique em qualquer seção de cabeçalho para adicioná-la ao seu modelo, depois edite-a de acordo com suas necessidades.
Quando estiver satisfeito com a aparência do seu cabeçalho, clique em Salvar no canto superior direito.
Agora repita este processo para os outros modelos em seu tema para criar um tema WordPress completamente personalizado.
Etapa 4. Publique seu Cabeçalho Personalizado do WordPress
Quando estiver satisfeito com seu modelo de cabeçalho personalizado do WordPress, o passo final é ativá-lo em seu site.
No SeedProd, você aplica seu cabeçalho personalizado do WordPress com um simples alternador.
Vá para SeedProd » Theme Builder e alterne o interruptor ao lado de ‘Enable SeedProd Theme’ para ‘Yes’.
O SeedProd substitui seu design existente pelo novo tema e cabeçalho do WordPress.
Visite seu site para ver seu cabeçalho personalizado do WordPress em ação.
Como Tornar o Cabeçalho do Seu WordPress Fixo
Um cabeçalho fixo permanece visível enquanto os visitantes rolam a página, o que mantém sua navegação e CTAs acessíveis o tempo todo. Se você estiver usando o SeedProd ou um tema padrão, a abordagem é a mesma: um pequeno trecho de CSS.
Adicione isso ao CSS Adicional do seu tema (vá para Aparência » Personalizar » CSS Adicional) ou, se estiver usando o SeedProd, cole-o em SeedProd » Theme Builder » CSS Global:
.site-header {
position: sticky;
top: 0;
z-index: 999;
}O seletor .site-header varia de acordo com o tema, então você pode precisar inspecionar o elemento do seu cabeçalho para encontrar a classe correta.
Criando Múltiplos Cabeçalhos Personalizados com SeedProd
Você também pode criar vários cabeçalhos para diferentes seções do seu site.
Por exemplo, você pode querer um cabeçalho que apareça apenas em categorias específicas ou páginas de destino. Para fazer isso, crie um novo modelo e altere as condições de exibição para atender às suas necessidades.
Usando o construtor de temas de arrastar e soltar do SeedProd, você pode criar qualquer layout de cabeçalho personalizado que seu site precise.
Embora o editor visual do SeedProd ofereça a maneira mais fácil de editar seu cabeçalho do WordPress, existem outros métodos que valem a pena conhecer.
2. Edite Cabeçalhos do WordPress com o Personalizador de Temas
A maioria dos temas do WordPress oferece algum controle sobre o cabeçalho do seu site no Personalizador Nativo do WordPress. Ele não lhe dará controle profundo, mas você obterá opções básicas para alterar a aparência e o comportamento do seu cabeçalho.
As opções disponíveis dependem do seu tema. Para a maioria dos temas clássicos, acesse Aparência » Personalizar no painel do WordPress. Em seguida, clique em Identidade do site na coluna da esquerda.
A maioria dos temas permite personalizar seu logotipo, título do site e slogan neste painel.
Você pode então clicar em Menus para alterar o layout do seu menu de navegação.
Observação: Se você estiver usando um tema baseado em blocos (FSE) como o Twenty Twenty-Five (o padrão atual), o Personalizador clássico não estará disponível. Em vez disso, acesse Aparência » Editor para editar seu cabeçalho usando a interface de edição de site completo.
Com o Editor de Site, você pode editar seu cabeçalho do WordPress com o editor de blocos, assim como qualquer outra postagem ou página. Ele oferece mais flexibilidade do que o Personalizador clássico, mas ainda menos controle do que o construtor de cabeçalhos dedicado do WordPress do SeedProd.
3. Personalize Cabeçalhos no WordPress com um Plugin de Cabeçalho
Outra maneira fácil de editar o cabeçalho no WordPress é com um plugin de cabeçalho simples. Esta é uma boa opção se você precisar adicionar scripts ou código ao seu cabeçalho sem mexer diretamente nos arquivos do seu tema.
Embora existam centenas de plugins para escolher, o plugin gratuito Insert Headers and Footers é a opção mais popular.
Após ativar o plugin em seu site, encontre-o em Configurações » Inserir Cabeçalhos e Rodapés.
A partir daí, você pode colar qualquer código que desejar adicionar ao cabeçalho do seu site.
Quaisquer scripts que você adicionar aqui são incluídos automaticamente na tag de cabeçalho do seu site WordPress. Clique em Salvar para armazenar suas alterações.
4. Personalize o Código do Cabeçalho do WordPress (Avançado)
Se você for um usuário avançado, pode editar seu cabeçalho do WordPress diretamente usando HTML, PHP e CSS. Este método não é adequado para iniciantes.
Importante: Se você planeja editar o header.php diretamente, faça isso em um tema filho. Caso contrário, suas alterações serão substituídas quando você atualizar seu tema. A abordagem apenas com CSS abaixo não tem esse problema.
Para editar o código do seu cabeçalho, acesse Aparência » Editor de Tema e abra o arquivo Style.css.
A partir daí, role para baixo até a seção Cabeçalho do Site e adicione ou remova código para ajustar a estilização.
Você também pode editar seu arquivo header.php para alterações estruturais e funcionais. Por exemplo, se você quiser adicionar um número de telefone ou reestruturar o layout do cabeçalho, isso fica no header.php em vez do CSS.
Essas alterações se aplicam a todo o site. Se você quiser que seu cabeçalho móvel tenha uma aparência diferente, veja como lidar com isso separadamente.
Como Personalizar Seu Cabeçalho do WordPress no Celular
Cabeçalhos de desktop e mobile frequentemente precisam de layouts diferentes. Um menu de navegação que fica limpo em uma tela de 1440px pode se tornar uma bagunça apertada no celular, e a maioria dos temas não oferece uma maneira visual de corrigir isso.
Aqui estão as três maneiras de lidar com a personalização do cabeçalho móvel no WordPress:
- Modo de visualização responsiva do SeedProd: No editor de cabeçalho do SeedProd, clique no ícone de celular na parte inferior da tela para visualizar e editar seu cabeçalho em tamanho mobile. Você pode ocultar elementos, ajustar espaçamento e reordenar blocos especificamente para mobile sem afetar o layout do desktop.
- Media queries CSS: Para sites baseados em temas, adicione regras CSS responsivas para segmentar elementos do cabeçalho em pontos de interrupção específicos. Por exemplo, para ocultar um slogan no mobile:
@media (max-width: 768px) { .site-description { display: none; } } - Configurações de menu mobile do seu tema: A maioria dos temas lida com o menu hambúrguer automaticamente, mas verifique Aparência » Personalizar » Mobile (ou um painel semelhante) para quaisquer opções de cabeçalho específicas para mobile que seu tema inclua.
O problema mais comum que vi são os estilos de cabeçalho desktop e mobile entrando em conflito após uma edição de CSS. Se isso acontecer, verifique se sua regra CSS tem um ponto de interrupção responsivo ou se você está editando o seletor correto para mobile.
Perguntas Frequentes sobre Cabeçalho do WordPress
Como edito meu cabeçalho do WordPress sem quebrar meu tema?
A abordagem mais segura é usar o construtor de temas do SeedProd, que substitui seu tema ativo em vez de modificá-lo. Isso significa que seu cabeçalho personalizado nunca corre risco ao atualizar ou trocar de tema. Se preferir ficar com seu tema, atenha-se às edições de CSS via Aparência » Personalizar » CSS Adicional e evite editar header.php diretamente. Se precisar editar header.php, sempre use um tema filho primeiro.
Qual é a diferença entre a edição de cabeçalho do WordPress.com e do WordPress.org?
WordPress.org (auto-hospedado) oferece controle total sobre seu cabeçalho através de personalização de tema, plugins e edição direta de arquivos. WordPress.com é um serviço hospedado com mais restrições. No WordPress.com, você edita seu cabeçalho via Site » Editor, e suas opções dependem do seu plano. Os métodos neste artigo se aplicam apenas a sites WordPress.org auto-hospedados.
Como faço para que meu cabeçalho do WordPress fique fixo (sticky)?
Tanto o SeedProd quanto as configurações de tema padrão usam a mesma abordagem CSS. Adicione position: sticky; top: 0; z-index: 999; à classe CSS do seu elemento de cabeçalho. Para usuários do SeedProd, cole-o em SeedProd » Theme Builder » Global CSS. Para temas padrão, vá para Aparência » Personalizar » CSS Adicional. A classe exata varia de acordo com o tema, portanto, inspecione seu elemento de cabeçalho para encontrar o seletor correto.
Posso mostrar um cabeçalho diferente em páginas específicas no WordPress?
Sim, com o SeedProd você pode criar múltiplos templates de cabeçalho e atribuir cada um a páginas, categorias ou tipos de post específicos usando condições de exibição. Isso é integrado ao construtor de temas e não requer codificação. Com um tema WordPress padrão, mostrar cabeçalhos diferentes em páginas diferentes requer PHP personalizado ou um plugin como o Conditional Headers.
Personalize seu Cabeçalho do WordPress Hoje
Esperamos que este artigo tenha ajudado você a aprender como editar cabeçalhos no WordPress.
A maneira mais fácil de obter controle total sobre a configuração do seu cabeçalho personalizado no WordPress é com o SeedProd. Ele oferece um construtor de cabeçalho visual do WordPress, com arrastar e soltar, você não precisa editar nenhum código ou arquivo de tema, e pode fazer todas as alterações diretamente no painel do WordPress.
Você também pode gostar deste guia sobre como editar o rodapé no WordPress.
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.
