4 métodos fáceis (3 sem código)

O cabeçalho é o primeiro elemento do seu site que a maioria dos visitantes vê. Normalmente, é aqui que o logotipo e o menu do seu site são colocados, e é parte integrante de todas as páginas. Se você não souber editar o cabeçalho do WordPress, terá dificuldade em causar uma boa primeira impressão.

O WordPress permite que você edite o cabeçalho do seu site de várias maneiras. Praticamente todos os temas vêm com um design de cabeçalho exclusivo, que você pode personalizar manualmente. Como alternativa, você pode usar uma variedade de ferramentas fornecidas pela comunidade WordPress maior.

Neste artigo, mostraremos quatro maneiras de editar o cabeçalho do WordPress , com e sem plugins. Vamos ao trabalho!

Índice:

1. Edite o cabeçalho usando o Personalizador
2. Use a edição completa do site (e um tema compatível)
3. Edite o cabeçalho usando um construtor de páginas do WordPress
4. Adicionar código personalizado ao cabeçalho usando um plug-in

1. Edite o cabeçalho usando o Personalizador

O WordPress Customizer é uma ferramenta integrada que permite editar elementos globais do seu site. Você pode usar o Personalizador para editar o cabeçalho, rodapé, tipografia, menus e outros aspectos importantes do seu site.

Para acessar o Personalizador, vá ao seu painel e clique em Aparência > Personalizar . O Personalizador exibirá um menu de opções à esquerda e uma visualização do seu site à direita:

Observe que, se você não vir a opção WordPress Customizer em seu painel, pode estar usando um tema habilitado para bloqueio. Para editar o cabeçalho desse tipo de tema, você precisa usar a Edição completa do site, que abordaremos na próxima seção.

No Personalizador, você deverá ver uma opção relacionada ao seu cabeçalho. Às vezes, isso pode ser visível imediatamente, como no exemplo acima. Outras vezes, pode ser necessário acessar um submenu. Por exemplo, alguns temas colocam as opções de cabeçalho nas opções de Layout ou algo semelhante.

Depois de encontrar as opções de cabeçalho do seu tema, as opções que você vê agora dependerão de qual tema você está usando. Por exemplo, nosso tema Neve inclui opções para alterar seu logotipo, a cor do cabeçalho e qual menu é exibido nesta seção:

O Neve também oferece uma seleção de elementos que você pode adicionar ao cabeçalho usando a funcionalidade de arrastar e soltar. Selecione qualquer um dos elementos em Componentes Disponíveis e arraste-os para as linhas de cabeçalho na parte inferior do Personalizador. O Neve permite adicionar até três linhas de elementos para um cabeçalho e colocar elementos em qualquer posição desejada:

Quando estiver satisfeito com a configuração do seu cabeçalho, salve as alterações no seu tema clicando no botão Publicar na parte superior do Personalizador.

Observe que quaisquer alterações feitas usando o Personalizador serão aplicadas apenas ao seu tema ativo. Se você alterar os temas, precisará editar o cabeçalho do WordPress novamente.

2. Use a edição completa do site (e um tema compatível)

Edição completa do site é um recurso mais recente que permite editar modelos de tema usando o Editor de blocos. Isso funciona apenas para temas habilitados para bloqueio, portanto, pode ou não estar disponível em seu site.

Para ver se o seu tema suporta Edição Completa do Site, abra o menu Aparência e procure a opção Editor :

Selecione aquele opção e o Editor de Blocos será aberto. No entanto, você editará seus modelos de tema em vez de suas páginas ou postagens individuais.

Por padrão, o editor abrirá o modelo da página inicial, que deve incluir um elemento Header :

Observe que alguns blocos só aparecerão como espaços reservados quando você estiver usando a Edição completa do site. Isso porque essa ferramenta não serve para editar blocos individuais, mas layouts inteiros.

Ao editar o cabeçalho, você obtém controle total sobre quais blocos e elementos incluir. Se você abrir a ferramenta Exibição de lista , poderá ver um detalhamento dos blocos que o cabeçalho contém atualmente:

Nesta fase, você pode optar por adicionar ou remover blocos do cabeçalho. Para remover ou editar um bloco existente, selecione-o e use o menu contextual que aparece na tela ao fazer isso:

Ao selecionar um bloco, você também pode editá-lo usando o Bloco menu de configurações no lado direito da tela. Este menu normalmente contém opções de estilo e elas variam dependendo de qual bloco você está editando:

Para adicionar um novo bloco, selecione o elemento Header e procure o ícone do sinal de adição. Esse botão abrirá um menu que permite selecionar qual bloco adicionar:

Outro recurso útil do Editor de Site Completo é que você pode editar menus visualmente. Para isso, basta selecionar um menu usando o bloco de Navegação . Você verá a opção de adicionar novos links, criar um novo menu e alternar entre os existentes:

Quando estiver satisfeito com as alterações em seu cabeçalho, clique em Salvar . Isso salvará as alterações no modelo de cabeçalho do tema e elas serão refletidas em seu site automaticamente.

3. Edite o cabeçalho usando um construtor de páginas do WordPress

Alguns plugins do construtor de páginas do WordPress oferecem opções para editar o cabeçalho do WordPress. Por exemplo, o Elementor Pro inclui uma ferramenta Theme Builder que você pode acessar com uma licença premium.

Se você não tiver acesso ao Elementor Pro, poderá usar uma extensão gratuita de terceiros, como o plug-in Elementor Header & Footer Builder no WordPress.org.

No entanto, mostraremos como fazer isso usando o Elementor Pro e seu recurso Theme Builder.

Na prática, o Elementor Theme Builder funciona de forma semelhante ao Full Site Editing.

Para acessar o Theme Builder, vá para Templates > Theme Builder . Selecione as opções de cabeçalho em SITE PARTS e procure os modelos existentes à direita. Deve haver apenas um modelo de cabeçalho e você pode clicar no botão Editar ao lado dele:

Isso iniciará o editor Elementor. A partir daqui, você pode optar por construir o cabeçalho usando blocos Elementor ou importar modelos prontos. Se você clicar no ícone da pasta no corpo do editor, poderá ver a quais modelos de cabeçalho você tem acesso:

Se você estiver usando o Elementor, recomendamos que você aproveite esses modelos. Isso permite que você experimente vários estilos de cabeçalho, que você pode editar adicionando ou personalizando módulos:

Se você não estiver familiarizado com o uso do Elementor, este construtor de páginas permite selecionar módulos usando o menu à esquerda. Você pode arrastar esses módulos para sua página, que aparece em uma visualização no lado direito da tela.

Ao usar o Theme Builder, você está editando apenas um modelo de tema específico. No entanto, você ainda pode usar toda a gama de módulos e opções de configuração que o Elementor oferece.

Após terminar de editar o modelo de cabeçalho, salve-o usando o botão Publicar . Em seguida, o Elementor solicitará que você escolha em quais páginas o modelo deve ser exibido:

A menos que você já esteja pagando por uma licença premium do Elementor, a ferramenta Theme Builder pode não justificar a compra por conta própria. Ele faz exatamente o que o Full Site Editing faz, mas a um custo premium. A principal diferença é que você pode usar a maior variedade de módulos do Elementor e, se já estiver usando o Elementor, será mais fácil garantir que o design do cabeçalho seja consistente com o restante do site.

4. Adicione código personalizado ao cabeçalho usando um plug-in

Normalmente, usar plugins é a maneira mais fácil de implementar personalizações no WordPress. No entanto, esse geralmente não é o caso dos cabeçalhos. Se você quiser um plug-in que permita editar cabeçalhos visualmente, precisará usar um construtor de páginas. A maioria dos construtores de páginas que oferecem essa funcionalidade são premium, conforme discutimos na seção anterior.

Plug-ins gratuitos que permitem personalizar o cabeçalho geralmente oferecem apenas uma maneira mais fácil de adicionar código personalizado a ele. A alternativa é editar seus arquivos de tema manualmente usando um tema filho, o que pode ser intimidante (e arriscado), a menos que você tenha experiência em desenvolvimento web.

Um exemplo fantástico de tal plugin é o Header Footer Code Manager. Essa ferramenta permite adicionar trechos de HTML, CSS e JavaScript ao cabeçalho e/ou rodapé e escolher em quais páginas esses trechos serão carregados:

Quando o plug-in estiver ativo, vá para a página HFCM > Adicionar Novos Snippets no painel. Aqui você pode selecionar o tipo de snippet que deseja adicionar, onde deve ser exibido e se deseja adicioná-lo ao cabeçalho ou rodapé:

Se você planeja adicionar novos elementos ao cabeçalho, precisará usar HTML. Para alterar o estilo do cabeçalho e os elementos que ele contém, use snippets de CSS.

A principal desvantagem dessa abordagem é que você precisa verificar o código do cabeçalho para ver quais classes e IDs ele usa, para adicionar CSS a eles. Este pode ser um processo demorado à medida que você adiciona novos trechos de código, verifica se as alterações funcionam e ajusta o código até ficar satisfeito com os resultados.

Personalize o cabeçalho do WordPress hoje

Você tem alguma dúvida sobre como editar seu cabeçalho no WordPress? Vamos falar sobre eles na seção de comentários abaixo!