Procurando uma maneira fácil de personalizar o cabeçalho WordPress?Como seu cabeçalho fica no topo de cada página, ele desempenha um papel essencial na marca do seu site, ajudando seus visitantes a navegar e promovendo seu conteúdo mais importante.
no entanto, para obter o máximo de benefícios do cabeçalho do seu site, você precisa de uma maneira de editá-lo, que muitos temas não oferecem.
neste post, compartilharemos algumas táticas diferentes que você pode usar para personalizar o cabeçalho no WordPress usando interfaces simples de arrastar e soltar e seu próprio código.
a opção mais fácil é usar o tema Astra e seu construtor de cabeçalho de arrastar e soltar, mas também compartilharemos algumas outras táticas que funcionarão com qualquer tema WordPress.
- O Que é o cabeçalho WordPress?
- Como personalizar o cabeçalho do WordPress com Astra
- 1. Abra o Construtor de cabeçalho Astra
- 2. Adicione e Organize o conteúdo do cabeçalho
- 3. Personalize o layout do cabeçalho
- 4. Experimente diferentes tipos de cabeçalhos
- Três Outras Maneiras de Personalizar o Cabeçalho WordPress
- 1. Use as configurações do personalizador do seu tema
- 2. Use Elementor e um Plugin de cabeçalho personalizado gratuito
- 3. Use código personalizado(avançado)
- personalize seu cabeçalho WordPress hoje
O Que é o cabeçalho WordPress?
o cabeçalho WordPress é a parte do seu site que aparece no topo de cada página. Normalmente, inclui pelo menos dois elementos no mínimo:
- logotipo/identidade do Site
- menu de navegação(s)
por exemplo, aqui está a aparência do cabeçalho no Blog Astra. Você pode ver que ele inclui o Astra logotipo, bem como separar dois menus de navegação:
Dependendo de suas necessidades, você também pode incluir outros elementos como ícones de mídia social, uma caixa de busca, promoções, o seu número de telefone e outras informações.
se você precisar ver como funciona, o cabeçalho do WordPress está contido no cabeçalho.arquivo php em seu tema WordPress.
Como personalizar o cabeçalho do WordPress com Astra
se você deseja controle total sobre o cabeçalho do WordPress, o tema Astra gratuito oferece uma maneira de arrastar e soltar e sem código para personalizar totalmente o cabeçalho do WordPress.
você poderá ver suas alterações imediatamente em uma visualização ao vivo do seu site e poderá adicionar facilmente diferentes tipos de conteúdo, como botões, ícones sociais, uma caixa de pesquisa e muito mais.
para começar, você vai querer instalar e ativar o tema Astra. Você também pode importar uma das centenas de sites de demonstração pré-construídos para começar rapidamente em funcionamento. Se você precisar de uma mão amiga com qualquer um desses passos, nós temos a abundância de guias para ajudá-lo:
- Como instalar o Astra
- Como importar sites starter
uma Vez que você tenha seu site pronto para ir, veja como personalizar seu cabeçalho usando o Astra.
Olá! Meu nome é Sujay e sou CEO da Astra.
Estamos em uma missão para ajudar as pequenas empresas a crescer online com preços acessíveis, produtos de software e a educação que você precisa para ter sucesso.
deixe um comentário abaixo se quiser participar da conversa, ou clique aqui se quiser ajuda pessoal ou se envolver com nossa equipe em particular.
1. Abra o Construtor de cabeçalho Astra
para começar, vá para Aparência → Personalizar em seu painel do WordPress para iniciar o personalizador nativo do WordPress. Em seguida, selecione o Cabeçalho da opção Builder:
uma Vez que você iniciar o cabeçalho builder, você verá um novo conjunto de opções onde você pode controlar o layout de seu cabeçalho:
2. Adicione e Organize o conteúdo do cabeçalho
agora para a parte divertida-adicionando conteúdo. Você pode ver que você tem três linhas no construtor de cabeçalho. Cada linha controla o conteúdo de uma parte diferente do cabeçalho:
- acima do cabeçalho
- cabeçalho primário – é aqui que você colocará seu conteúdo “principal”.
- Abaixo do cabeçalho
Você absolutamente vai querer incluir conteúdo no cabeçalho principal e, em seguida, você tem a opção de adicionar conteúdo acima ou abaixo de acordo com suas necessidades.
para adicionar conteúdo, você pode clicar no local onde deseja adicionar conteúdo. Isto irá abrir um conjunto de opções:
- Principal menu
- menu Secundário
- Logo
- Botão
- Pesquisa
- Sociais
- HTML 1
- HTML 2
Note que, como você adicione conteúdo, você verá menos opções. Por exemplo, você só pode adicionar seu logotipo uma vez, para que essa opção desapareça depois de já ter adicionado um logotipo ao cabeçalho:
depois de adicionar algum conteúdo, você pode clicar nesse conteúdo para abrir suas configurações. Por exemplo, se você adicionar um botão, poderá controlar o texto e o link do botão.
Você também pode abrir o Desenho de configurações para personalizar ainda mais as coisas:
Se você deseja reorganizar seu conteúdo ou mover para uma linha diferente, tudo o que você precisa fazer é arrastar-e-largar:
3. Personalize o layout do cabeçalho
acima, mostramos como personalizar os elementos individuais dentro do cabeçalho. Você também tem várias opções para personalizar seu cabeçalho como um todo.
primeiro, você pode ir para a guia Design do construtor de cabeçalho principal para controlar a largura e o espaçamento do seu cabeçalho. Você também pode clicar no ícone de engrenagem para cada linha de cabeçalho para personalizar sua altura e design:
4. Experimente diferentes tipos de cabeçalhos
dependendo se você estiver usando a versão gratuita do Astra ou Astra Pro, Você também terá acesso a tipos adicionais de cabeçalhos, como cabeçalhos transparentes (gratuitos) e cabeçalhos pegajosos (Pro).
você pode usar o mesmo construtor de cabeçalho e rodapé acima para projetar seu cabeçalho transparente ou pegajoso. Você verá essas opções na seção Tipos de cabeçalho. Você pode clicar neles para expandir as configurações e projetar esses diferentes tipos de cabeçalho:
Três Outras Maneiras de Personalizar o Cabeçalho WordPress
Enquanto o Astra de arrastar-e-soltar cabeçalho builder oferece a maneira mais fácil de personalizar o cabeçalho WordPress, existem também outras táticas que você pode usar, não importa qual o tema que você está usando.
Aqui estão algumas das melhores estratégias…
1. Use as configurações do personalizador do seu tema
a maioria dos temas do WordPress oferece algum controle sobre o cabeçalho do seu site no personalizador nativo do WordPress. É improvável que você obtenha o nível de detalhes que o Astra oferece, mas você terá algumas opções para controlar a aparência e as funções do seu cabeçalho.
essas opções variam de acordo com seu tema, mas você geralmente pode abri-las clicando no ícone de lápis azul ao lado de elementos em seu cabeçalho. Por exemplo, no novo tema Twenty Twenty-One default, você pode ver que é capaz de personalizar seu:
- Logo
- Site manchete
- Menu
Se você precisa de alguma ajuda extra, você pode consultar o seu tema do desenvolvedor documentação.
2. Use Elementor e um Plugin de cabeçalho personalizado gratuito
se você não estiver familiarizado com Elementor, é uma ferramenta de design visual, arrastar e soltar que você pode usar para criar conteúdo em seu site. Com o livre Elementor – Cabeçalho, Rodapé & Blocos Modelo personalizado cabeçalho WordPress plugin, você pode usar a versão gratuita do Elementor para projetar seu próprio WordPress cabeçalho personalizado.
este plugin funciona perfeitamente com o tema Astra livre, bem como qualquer outro tema WordPress que você pode estar usando.
para começar, instale e ative o plugin gratuito de WordPress.org. você também precisará instalar a versão gratuita do Elementor, se ainda não o fez.
depois de fazer isso, vá para aparência → rodapé do cabeçalho & blocos e clique em Adicionar Novo:
dê um nome ao seu modelo e escolha cabeçalho em Tipo de modelo. Você também pode usar as opções Exibir ou funções de Usuário para direcionar seu cabeçalho para conteúdo/usuários específicos.
em Seguida, Publicar o seu cabeçalho e clique em Editar com o Elementor para abrir o criador visual:
Agora, você pode personalizar totalmente seu cabeçalho usando Elementor visual de arrastar-e-largar”. O plugin também oferece a você um novo Cabeçalho, Rodapé & Blocos de widgets que você pode usar para adicionar importantes elementos de site, como o logotipo de seu site ou de um menu de navegação:
Para saber mais sobre como utilizar o Elementor, confira nossa completa Elementor tutorial ou Elementor revisão.
3. Use código personalizado(avançado)
finalmente, se você é um usuário avançado, você também pode personalizar o cabeçalho WordPress usando seu próprio código. Para fazer isso, você precisará de pelo menos um conhecimento prático de HTML, PHP e CSS, portanto, esta não é uma opção para usuários não técnicos.
se você não conhece essas linguagens de codificação, você vai querer ficar com um dos métodos anteriores nesta lista.
existem duas partes para usar o código para personalizar seu cabeçalho:
- HTML / PHP-isso controla o conteúdo real em seu cabeçalho.
- CSS-isso controla o estilo do seu cabeçalho.
como mencionamos anteriormente, o conteúdo do cabeçalho do seu site reside no cabeçalho.arquivo php. Portanto, para personalizar o conteúdo do seu cabeçalho, você precisará trabalhar diretamente com este arquivo. Ou, alguns temas, como Astra, também oferecem ganchos que você pode usar para adicionar conteúdo ao cabeçalho.
no Guia Astra visual hooks, você pode ver que tem várias opções para personalizar o cabeçalho:
se você quiser editar o cabeçalho do seu tema.arquivo php diretamente, você deve usar um tema filho para se certificar de que você não sobrescrever suas alterações quando você atualizar seu tema.Por outro lado, se você estiver usando ganchos, não precisará usar um tema filho, desde que use um plug-in como ganchos Astra ou trechos de código. Se você adicionar seus ganchos diretamente às funções do seu tema.arquivo php, você ainda deve usar um tema filho, no entanto.
com o Astra Pro, Você também tem a opção de adicionar ganchos usando o recurso de Layout personalizado do Astra Pro.
o mais interessante sobre os Layouts personalizados do Astra Pro é que você pode usar as regras de exibição para controlar exatamente quando as alterações são exibidas. Por exemplo, você pode adicionar conteúdo personalizado ao cabeçalho que aparece apenas para usuários conectados.
é assim que personalizar o conteúdo do seu cabeçalho – mas e o estilo?
para personalizar o estilo do seu cabeçalho, você pode editar o estilo.arquivo css diretamente se você estiver usando um tema filho. Ou você pode usar a área CSS adicional no Personalizador do WordPress para adicionar seus próprios estilos personalizados ao cabeçalho.
personalize seu cabeçalho WordPress hoje
seu cabeçalho WordPress desempenha um papel essencial no sucesso do seu site. Ele ajuda a marcar o seu site, orientar seus visitantes para o conteúdo chave, promover informações importantes ou perfis sociais, e muito mais.
a maneira mais fácil de obter controle total sobre o cabeçalho do seu site é usar o tema Astra gratuito. Com o Astra, você obtém acesso a um construtor de cabeçalho visual, arrastar e soltar. Você não precisa de nenhum código ou plug – ins externos-você terá 100% de controle do seu cabeçalho diretamente dentro do personalizador do WordPress.
em outras situações, Você também pode usar as configurações do personalizador de um tema diferente, o plugin Elementor – Header, Footer & Blocks Template ou seu próprio código se você tiver o conhecimento técnico.
