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

Publicados: 2022-02-07

Você está procurando uma maneira fácil de personalizar seu cabeçalho do WordPress?

O cabeçalho do WordPress fica no topo de todas as páginas do seu site. Como tal, ele desempenha um papel vital na marca do seu site, ajudando os visitantes a navegar e apresentando suas páginas mais importantes.

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

Este post 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.

O que é o cabeçalho do WordPress?

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

  • Título ou logotipo do site
  • Menu de navegação

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

SeedProd website header

Como você pode ver, ele tem o logotipo 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ê pode adicionar elementos extras ao cabeçalho do seu site WordPress. Como o SeedProd, você pode adicionar botões de apelo à 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 WordPress no arquivo header.php do seu tema WordPress. Mas só sugerimos editar o arquivo header.php se você for um usuário avançado e entender o que está fazendo.

Índice
  1. 1. Como personalizar cabeçalhos no WordPress com SeedProd
  2. 2. Edite os cabeçalhos do WordPress com o personalizador de temas
  3. 3. Personalize os cabeçalhos no WordPress com o plugin de cabeçalho
  4. 4. Personalize o código de cabeçalho do WordPress (avançado)

1. Como personalizar cabeçalhos no WordPress com SeedProd

Se você deseja controle total sobre o cabeçalho do WordPress, o SeedProd é a melhor solução. É o melhor plugin de construtor de temas WordPress que permite que você crie um tema WordPress personalizado sem escrever nenhum código facilmente.

SeedProd WordPress theme builder plugin

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

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

A melhor coisa sobre o construtor de temas do SeedProd é que ele é independente de temas. Isso significa que não depende do seu tema WordPress existente para estilo ou funcionalidade, oferecendo total liberdade e controle sobre o design do seu site.

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

Etapa 1. Instale o plug-in SeedProd Theme Builder

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

Primeiro, instale e ative o SeedProd no seu site WordPress.

Comece hoje mesmo com o SeedProd

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 »Configurações para inserir a chave de licença do plug-in. Você pode encontrar essas informações em sua conta no site da SeedProd.

Enter your SeedProd license key

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 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 WordPress personalizado com o SeedProd é bastante simples.

Primeiro, vá para a página SeedProd » Theme Builder . Você verá a lista de modelos para o seu tema personalizado atual do SeedProd nesta página.

SeedProd theme builder

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

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

  1. Use um dos temas SeedProd prontos como ponto de partida
  2. Crie modelos de tema manualmente do zero

Sugerimos começar 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, que lhe dão uma vantagem inicial na edição dos modelos de acordo com seus requisitos.

Basta clicar no botão Temas e escolher um dos temas disponíveis. Existem temas diferentes para sites diferentes, então escolha um que melhor corresponda às suas necessidades.

choose a seedprod theme template

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.

Seedprod theme builder template files

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

Para personalizar seu cabeçalho com o SeedProd, localize o modelo de cabeçalho e clique no link Editar design .

Customize WordPress header seedprod

Fazer isso iniciará o arquivo de modelo no construtor 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.

Drag and drop header builder WordPress

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

how to edit header in 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.

Drag and drop items to your WordPress header

Para adicionar itens de cabeçalho personalizados, você pode adicionar blocos SeedProd da coluna 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 do banco de dados do WordPress, como postagens de blog, comentários, imagens em destaque etc.
  • Blocos padrão – são elementos comuns de web design que permitem adicionar novas imagens, botões, texto, divisores e muito mais. Você pode até adicionar um vídeo para mais engajamento.
  • 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ê administra uma loja online, pode usar blocos WooCommerce em seu tema para exibir produtos, carrinhos de compras e até criar uma página de checkout personalizada.

Usando seções para personalizar seu 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 Seções no painel Design.

Add sections to your WordPress header

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 seu cabeçalho, rodapé, chamadas para ação, recursos e muito mais.

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

Edit WordPress header section

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

Agora repita este processo para os outros modelos do seu tema para criar um tema WordPress completamente personalizado.

Etapa 4. Publique seu cabeçalho personalizado do WordPress

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

No SeedProd, você pode aplicar seu cabeçalho personalizado do WordPress com um simples interruptor.

Simplesmente vá para a página SeedProd » Theme Builder e alterne a opção ao lado da opção 'Ativar tema SeedProd' para 'Sim'.

Enable seedprod theme

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

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

custom header example WordPress

Criando vários cabeçalhos personalizados com 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, você pode querer adicionar um novo modelo de cabeçalho ao seu tema que seja exibido apenas em categorias específicas.

Para fazer isso, basta criar um novo modelo e alterar as condições de exibição para atender às suas necessidades.

add multiple custom headers in WordPress

Usando o construtor de temas de arrastar e soltar amigável para iniciantes do SeedProd, você pode criar facilmente qualquer tipo de layout personalizado que seu site precise.

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

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

2. Edite os 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 WordPress Customizer nativo. Pode não fornecer um grande nível de detalhes, mas você terá algumas opções para controlar a aparência e o funcionamento do seu 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, vá para Aparência » Personalizar na área de administração do WordPress. Em seguida, clique no cabeçalho Identidade do Site na lista na coluna da esquerda.

edit your WordPress header with theme customizer

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

  • Logotipo
  • titulo do site
  • Slogan

Você pode clicar no cabeçalho Menus e alterar o layout do menu de navegação.

edit header menu in WordPress theme customizer

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

Nota: 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 será chamado de 'Editor'. Você pode encontrá-lo indo para Aparência » Editor .

customize header with WordPress block editor

Com o novo Editor do WordPress, 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. Personalize os cabeçalhos no WordPress com o plugin de cabeçalho

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

Embora existam centenas de plugins para escolher, o plugin gratuito Insert Headers and Footers é a opção mais popular.

Depois de ativar o plug-in em seu site, você pode encontrá-lo em Configurações » Inserir cabeçalhos e rodapés.

Insert headers and footers WordPress plugin

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

insert headers and footers

Quaisquer scripts que você adicionar nesta área são adicionados automaticamente à tag de cabeçalho do seu site WordPress. Apenas lembre-se de clicar no botão Salvar para armazenar suas alterações.

4. Personalize o código de 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. Você precisará de conhecimento prático de HTML, PHP e CSS para esse método, portanto, não é adequado para usuários não técnicos.

Para editar o código do seu cabeçalho, vá para Appearance » Theme Editor e abra o arquivo Style.css .

Use WordPress theme editor to customize WordPress header

A partir daí, você pode rolar para baixo até a seção 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 . No entanto, esse código lida com funções em vez de estilo.

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

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

Comece hoje mesmo com o SeedProd

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

Obrigado por ler. Siga-nos no YouTube, Twitter e Facebook para obter mais conteúdo útil para expandir seus negócios.