Últimas notícias da SeedProd

Tutoriais, dicas e recursos do WordPress para ajudar a expandir seus negócios

personalizar cabeçalho WordPress

Como personalizar cabeçalhos no WordPress (4 maneiras simples) 

Escrito por: avatar do autor Stacey Corrin
avatar do autor Stacey Corrin
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.
     Avaliado por: reviewer avatar Turner John
reviewer avatar Turner John
John Turner é o cofundador da SeedProd. Ele tem mais de 20 anos de experiência em negócios e desenvolvimento e seus plug-ins foram baixados mais de 25 milhões de vezes.

Está procurando uma maneira fácil de personalizar o cabeçalho do WordPress?

O cabeçalho do WordPress fica na parte superior de todas as páginas do seu site. Como tal, ele desempenha um papel fundamental na criação da marca do seu site, ajudando os visitantes a navegar e exibindo suas páginas mais importantes.

Mas, para adaptar seu cabeçalho às necessidades de sua empresa, você precisará de uma maneira de personalizá-lo, o que muitos temas do WordPress não permitem.

Esta publicação mostrará como personalizar cabeçalhos no WordPress usando editores visuais e código personalizado. A opção mais fácil é usar o SeedProd com seu construtor de temas de arrastar e soltar, mas também compartilharemos várias outras soluções que funcionam com qualquer tema.

Tutorial em vídeo

O que é o cabeçalho do WordPress?

O cabeçalho do WordPress é uma parte de seu site que aparece na parte superior de cada página. No mínimo, seu cabeçalho incluirá:

Por exemplo, aqui está a aparência do cabeçalho no site da SeedProd.

Cabeçalho do site da SeedProd

Como você pode ver, ele tem o logotipo do SeedProd, um menu de navegação e um botão de chamada para ação para começar a usar o SeedProd.

Se o seu site tiver outras necessidades, você poderá adicionar elementos extras ao cabeçalho do seu site WordPress. Como o SeedProd, você pode adicionar botões de chamada para ação ou incluir uma caixa de pesquisa, ícones de mídia social e outros conteúdos.

Você pode encontrar os detalhes do seu cabeçalho do WordPress no arquivo header.php do seu tema do WordPress. Mas só sugerimos editar o arquivo header.php se você for um usuário avançado e souber o que está fazendo.

1. Como personalizar cabeçalhos no WordPress com o SeedProd

Se quiser ter controle total sobre o cabeçalho do WordPress, o SeedProd é a melhor solução. É o melhor plugin de criação de temas do WordPress que permite criar um tema personalizado do WordPress sem escrever nenhum código facilmente.

Plug-in do construtor de temas do WordPress SeedProd

O SeedProd é um construtor de páginas WordPress de arrastar e soltar para empresas, blogueiros e proprietários de sites. Mas ele também vem com um designer de tema personalizado que permite que você aponte e clique para editar qualquer elemento.

Por exemplo, a criação de um cabeçalho personalizado para seu site WordPress leva apenas alguns cliques, e você pode adicionar opções populares de cabeçalho com o recurso de arrastar e soltar.

O melhor do criador de temas do SeedProd é que ele é independente de temas. Isso significa que ele não depende do seu tema existente do WordPress para estilo ou funcionalidade, o que lhe dá total liberdade e controle sobre o design do seu site.

Dito isso, aqui estão as etapas para personalizar os cabeçalhos no WordPress com o SeedProd.

Etapa 1. Instalar o plugin SeedProd Theme Builder

A configuração do construtor de temas SeedProd é relativamente simples, pois funciona com qualquer site do WordPress que use qualquer tema.

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 plug-in do WordPress.

Observação: Você precisará de pelo menos o plano Pro ou Elite para desbloquear o construtor de temas.

Depois de ativar o plug-in, vá para a página SeedProd " Settings (Configurações ) para inserir a chave de licença do plug-in. Você pode encontrar essas informações em sua conta no site do SeedProd.

Digite sua chave de licença do SeedProd

Depois de inserir sua chave de licença e clicar em Verify Key, você estará pronto para criar um cabeçalho personalizado do WordPress usando o construtor de temas SeedProd.

Etapa 2. Escolha um modelo de tema inicial

Para criar um cabeçalho de tema personalizado com o SeedProd, primeiro você precisa criar um tema personalizado. Não se preocupe; criar um tema personalizado do WordPress com o SeedProd é bastante simples.

Primeiro, vá para a página SeedProd " Theme Builder. Nessa página, você verá a lista de modelos do seu tema personalizado atual do SeedProd.

Criador de temas SeedProd

Como ainda não começamos, temos apenas um modelo CSS Global. 

Para começar, você tem duas opções.

  1. Use um dos temas prontos do SeedProd como ponto de partida
  2. Criar manualmente modelos de temas a partir do zero

Sugerimos que você comece com um tema existente. Isso permite que o SeedProd gere todos os arquivos de modelo automaticamente. Os temas do SeedProd são temas completos de qualidade profissional, o que lhe dá uma vantagem inicial na edição dos modelos de acordo com suas necessidades.

Basta clicar no botão Temas e escolher um dos temas disponíveis. Há diferentes temas para diferentes sites, portanto, escolha aquele que melhor atenda às suas necessidades.

escolha um modelo de tema do seedprod

Depois de escolher um tema, o SeedProd criará automaticamente todos os modelos de tema. A partir daí, você pode editar cada modelo individualmente no editor de arrastar e soltar.

Arquivos de modelo do criador de temas Seedprod

Etapa 3. Personalize a seção do cabeçalho

Para personalizar seu cabeçalho com o SeedProd, localize o modelo Header (Cabeçalho ) e clique no link Edit Design (Editar design ).

Personalizar o cabeçalho do WordPress seedprod

Isso iniciará o arquivo de modelo no criador de temas do SeedProd. Você verá uma visualização ao vivo do seu modelo de cabeçalho na coluna da direita com um painel de edição na coluna da esquerda.

Construtor de cabeçalho de arrastar e soltar WordPress

Para alterar um item em seu arquivo de modelo de cabeçalho, basta apontar e clicar para editá-lo.

como editar o cabeçalho no WordPress

Dependendo do tipo de item, você verá diferentes opções de edição na coluna da esquerda. Você poderá alterar fontes, cores, plano de fundo, espaçamento e muito mais.

Arraste e solte itens em seu cabeçalho do WordPress

Para adicionar itens de cabeçalho personalizados, você pode adicionar blocos do SeedProd na coluna da esquerda. Ele vem com vários tipos de blocos que você pode adicionar ao seu modelo:

  • Tags de modelo - Blocos que permitem gerar elementos de tema a partir do banco de dados do WordPress, como postagens de blog, comentários, imagens em destaque etc.
  • Blocos padrão - Esses são elementos comuns de design da Web que permitem adicionar novas imagens, botões, texto, divisores e muito mais. Você pode até mesmo adicionar um vídeo para aumentar o envolvimento.
  • Blocos avançados - Outros blocos avançados permitem adicionar formulários de contato, perfis sociais, botões de compartilhamento, códigos de acesso do WordPress, Google Maps e muito mais.
  • WooCommerce - Se você tiver uma loja on-line, poderá usar os blocos do WooCommerce em seu tema para exibir produtos, carrinhos de compras e até mesmo criar uma página de checkout personalizada.

Uso de seções para personalizar o cabeçalho do WordPress

Além dos blocos, você também pode adicionar seções completas ao modelo de cabeçalho do seu tema.

Basta alternar para a guia Sections (Seções ) no painel Design.

Adicionar seções ao cabeçalho do WordPress

As seções são grupos de blocos para diferentes áreas do design do seu site. Por exemplo, você pode encontrar seções prontas para uso para o cabeçalho, o rodapé, as chamadas para ação, os recursos e muito mais.

Basta clicar em uma seção de cabeçalho para adicioná-la ao modelo do tema e editá-la de acordo com suas necessidades.

Editar a seção de cabeçalho do WordPress

Quando estiver satisfeito com a aparência do cabeçalho, clique no botão Save (Salvar ) no canto superior direito.

Agora, repita esse processo para os outros modelos em seu tema para criar um tema WordPress totalmente personalizado.

Etapa 4. Publique seu cabeçalho personalizado do WordPress

Quando estiver satisfeito com seu cabeçalho personalizado do WordPress, a etapa final é ativá-lo em seu site do WordPress.

No SeedProd, você pode aplicar seu cabeçalho personalizado do WordPress com uma simples mudança.

Basta acessar a página SeedProd " Theme Builder e alternar o botão ao lado da opção "Enable SeedProd Theme" (Ativar tema do SeedProd) para "Yes" (Sim).

Ativar o tema seedprod

O SeedProd substituirá seu design existente pelo novo tema e cabeçalho do WordPress.

Agora você pode acessar seu site para ver o cabeçalho personalizado do WordPress em ação.

exemplo de cabeçalho personalizado WordPress

Criação de vários cabeçalhos personalizados com o SeedProd

Agora que você tem um cabeçalho personalizado do WordPress, ainda pode ajustá-lo, mas também pode criar vários cabeçalhos para diferentes seções do seu site.

Por exemplo, talvez você queira adicionar um novo modelo de cabeçalho ao seu tema que seja exibido somente em categorias específicas.

Para fazer isso, basta criar um novo modelo e alterar as condições de exibição de acordo com suas necessidades.

adicionar vários cabeçalhos personalizados no WordPress

Usando o criador de temas de arrastar e soltar do SeedProd, fácil de usar para iniciantes, você pode criar facilmente qualquer tipo de layout personalizado de que seu site precisa.

Embora o editor visual do SeedProd ofereça a maneira mais fácil de personalizar seu cabeçalho, também há outras táticas que você pode usar.

Continue lendo para conhecer algumas das soluções mais populares.

2. Editar 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 Customizador nativo do WordPress. Ele pode não fornecer um grande nível de detalhes, mas você terá algumas opções para controlar a aparência e as funções do cabeçalho.

As opções disponíveis dependem do seu tema, mas geralmente você pode abri-las no personalizador de temas e editá-las facilmente.

Para fazer isso, acesse Appearance " Customize (Aparência " Personalizar ) na área de administração do WordPress. Em seguida, clique no título Identidade do site na lista da coluna da esquerda. 

editar seu cabeçalho do WordPress com o personalizador de temas

Por exemplo, no tema padrão do Twenty Twenty-One, a opção Site Identity permite que você personalize o tema:

  • Logotipo
  • Título do site
  • Título

Em seguida, você pode clicar no título Menus e alterar o layout do menu de navegação.

editar o menu do cabeçalho no personalizador de temas do WordPress

Se precisar de mais ajuda com esse método, consulte a documentação do seu tema do WordPress.

Observação: No exemplo acima, estávamos usando o tema padrão do WordPress Twenty Twenty-One. Se você estiver usando o tema Twenty Twenty-Two, o personalizador se chamará "Editor". Você pode encontrá-lo em Appearance " Editor.

Personalizar o cabeçalho com o editor de blocos do WordPress

Com o novo WordPress Editor, você pode personalizar seu cabeçalho com o editor de blocos como qualquer outro post ou página. Ele não oferece tantos recursos de personalização quanto o SeedProd, mas permite que você adapte o layout rapidamente.

3. Personalizar cabeçalhos no WordPress com o plug-in de cabeçalho

Outra maneira fácil de editar o cabeçalho no WordPress é com um simples plug-in de cabeçalho. Essa é uma boa opção se você não se sentir à vontade para editar diretamente o arquivo de cabeçalho do tema.

Embora existam centenas de plug-ins para escolher, o plug-in gratuito Insert Headers and Footers (Inserir cabeçalhos e rodapés ) é a opção mais popular.

Depois de ativar o plug-in em seu site, você poderá encontrá-lo em Settings " Insert Headers and Footers (Configurações " Inserir cabeçalhos e rodapés).

Plug-in WordPress para inserir cabeçalhos e rodapés

A partir daí, você pode colar qualquer código que queira adicionar ou remover do cabeçalho do seu site.

Inserir cabeçalhos e rodapés

Todos os scripts que você adicionar nessa área serão automaticamente adicionados à tag de cabeçalho do seu site WordPress. Lembre-se de clicar no botão Salvar para armazenar suas alterações.

4. Personalizar o código do cabeçalho do WordPress (avançado)

Se você for um usuário avançado, poderá personalizar os cabeçalhos no WordPress usando seu próprio código personalizado. Para esse método, você precisará de conhecimentos práticos de HTML, PHP e CSS, portanto, ele não é adequado para usuários não técnicos.

Para editar o código do cabeçalho, acesse Appearance " Theme Editor e abra o arquivo Style.css .

Use o editor de temas do WordPress para personalizar o cabeçalho do WordPress

A partir daí, você pode rolar para baixo até a seção Site Header (Cabeçalho do site ) e adicionar ou remover código para personalizar o estilo. 

Você também pode fazer alterações em seu arquivo header.php. Entretanto, esse código lida com funções em vez de estilos.

A maioria das pessoas que deseja personalizar seus cabeçalhos está mais interessada em atualizar a aparência de seus sites do que no que acontece nos bastidores. Portanto, você provavelmente concentrará a maior parte de sua atenção no CSS do cabeçalho.

Perguntas frequentes sobre o cabeçalho do WordPress

Qual é a diferença entre um cabeçalho e um menu no WordPress?

Um cabeçalho é uma seção na parte superior de um site que normalmente contém o logotipo do site, o slogan e outros elementos essenciais, como o menu de navegação. O menu, por outro lado, é uma parte do cabeçalho que fornece a navegação principal do site, permitindo que os usuários naveguem por diferentes páginas e seções do site.

Como posso tornar meu cabeçalho responsivo no WordPress?

Para tornar seu cabeçalho responsivo no WordPress, verifique se você está usando um tema responsivo, que deve ajustar automaticamente o layout do cabeçalho para diferentes tamanhos de tela. O construtor de cabeçalho do SeedProd é responsivo por padrão, por exemplo.

Se o seu tema não for responsivo, considere o uso de consultas de mídia CSS para modificar o layout e o estilo do cabeçalho para diferentes dispositivos.

Posso adicionar uma barra de pesquisa ao cabeçalho do WordPress?

Sim, você pode adicionar uma barra de pesquisa ao cabeçalho do WordPress. Muitos temas vêm com suporte incorporado para uma barra de pesquisa no cabeçalho. Com o SeedProd, você pode arrastar e soltar o bloco Search Form no cabeçalho para adicionar a funcionalidade de pesquisa.

Personalize seu cabeçalho do WordPress hoje mesmo

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 seu cabeçalho é com o SeedProd. Ele oferece um construtor de cabeçalho visual do tipo arrastar e soltar, não é necessário editar nenhum código ou arquivo de tema diretamente e você pode personalizar o cabeçalho diretamente no painel do WordPress.

Você também pode gostar deste guia sobre como editar o rodapé no WordPress.

Obrigado pela leitura! Gostaríamos muito de ouvir sua opinião, portanto, fique à vontade para deixar um comentário com perguntas e feedback.

Você também pode nos seguir no YouTube, no X (antigo Twitter) e no Facebook para obter mais conteúdo útil para expandir seus negócios.

avatar do autor
Stacey Corrin Escritor
Stacey escreve sobre WordPress e marketing digital há mais de 10 anos e sobre outros tópicos há muito mais tempo. Além disso, ela é fascinada por web design, experiência do usuário e SEO.

Divulgação: Nosso conteúdo é apoiado pelo leitor. Isso significa que, se você clicar em alguns de nossos links, poderemos receber uma comissão. Recomendamos apenas produtos que acreditamos que agregarão valor aos nossos leitores.