Não gosta de como o tema atual do WordPress lida com o cabeçalho ou rodapé principal? Que tal personalizá-lo com Elementor? Neste guia, mostramos como criar cabeçalhos e rodapés personalizados com o Elementor – passo a passo e sem a necessidade de habilidades de codificação.
Por que Elementor?
O Elementor é o nosso plug-in de criação de páginas favorito do WordPress e, de fato, uma das melhores ferramentas que você pode usar para personalizar seu site WordPress sem saber como codificar.
Elementor também é sua melhor aposta, se você não gosta da aparência do cabeçalho ou rodapé atual, mas também não deseja mudar completamente o tema.
Você pode aprender mais sobre o Elementor aqui 👈 em nossa análise aprofundada do Elementor.
O que você precisa para criar cabeçalhos e rodapés personalizados com o Elementor
Duas coisas:
- o principal plugin do Elementor – o grátis
- Elementor Pro – a atualização premium em cima da edição gratuita do Elementor
1. Instale Elementor grátis e pro
O processo de instalação do Elementor free é como qualquer outro plugin:
- Basta ir ao seu wp-admin → Plugins → Adicionar novo e digite “Elementor” na caixa.
- Instale e ative.
Volte para o seu wp-admin e prossiga para Plugins → Adicionar novo mais uma vez. Desta vez, faça o upload do arquivo Elementor Pro manualmente.
Prossiga para instalar e ativá-lo.
Elementor e Elementor Pro agora estão ativos!
2. Crie um modelo de cabeçalho ou rodapé em branco
Na barra lateral do wp-admin, acesse Modelos . Provavelmente ainda não há nada lá.

Clique no grande botão ADICIONAR NOVO MODELO .
No pop-up, selecione Cabeçalho ou Rodapé com base no que você deseja criar e também nomeie seu modelo, se desejar.

Aqui é onde a diversão começa! Você verá o lançamento do Elementor e poderá trabalhar.
Para tornar as coisas mais rápidas, o Elementor mostra uma lista de modelos de cabeçalho e rodapé prontos. Você pode escolher um deles ou começar a trabalhar no seu próprio cabeçalho ou rodapé do zero. A escolha é sua.

3. Defina o layout geral do seu cabeçalho / rodapé
Primeiro, para criar cabeçalhos e rodapés personalizados com o Elementor, você precisa decidir qual será o layout principal do seu cabeçalho ou rodapé.
Como exemplo, vou construir um cabeçalho de aparência moderna com o logotipo no centro, um menu à esquerda e uma caixa de pesquisa à direita. No entanto, você pode criar qualquer outro tipo de cabeçalho, pois não há limitações quanto ao design ou ao que você pode incluir em seus cabeçalhos ou rodapés.
Para começar, clique no botão principal de personalização do seu cabeçalho para ver a seção Layout na barra lateral:

Escolha a estrutura que parece mais otimizada. Eu vou apenas com três colunas iguais.

Se desejar, você também pode decidir esticar o layout ou definir uma largura fixa ao criar cabeçalhos e rodapés personalizados com o Elementor. As configurações específicas aqui dependerão do seu tema. Escolha o que parece melhor.

4. Adicione um logotipo
Adicionar um logotipo é uma etapa muito simples, mas apenas desde que o tema atual lide com o logotipo de acordo com as diretrizes oficiais do WordPress.Como atribuir um logotipo a qualquer tema do WordPressPara garantir que seu logotipo seja definido corretamente, primeiro você precisa ir para WordPress Personalizador → Identificar site e atribuir o logotipo a partir daí.

Com isso feito, a Elementor poderá buscá-la corretamente.
No Elementor, escolha o bloco Logo do site na barra lateral. Coloque onde quiser. Ele deve buscar seu logotipo real automaticamente.

Nas configurações, você pode selecionar como o logotipo deve se comportar quando clicado e também ajustar seu tamanho e alinhamento.

5. Adicione um menu
Pegue o bloco Menu Nav na barra lateral Elementor e arraste-o para onde quiser dentro do cabeçalho.

Aqui estão as principais coisas para ajustar:
- Menu – escolha o menu específico que você deseja destacar (você pode escolher o que tiver definido em Aparência → Menus ).
- Layout – horizontal , vertical ou suspenso
- Alinhar – esquerda , centro , direita ou alongamento para preencher toda a área disponível
- Ponteiro – como você deseja destacar o link ativo
- Animação – como você deseja que o ponteiro apareça

Você também pode acessar as outras duas guias – Estilo e Avançado para ajustar outros detalhes sobre o design do seu menu.

🤓 Deseja ainda mais opções de personalização? Obtenha um plug-in gratuito chamado NavMenu Addon for Elementor . Ele fornece blocos de menu adicionais que você pode usar ao criar cabeçalhos e rodapés personalizados com o Elementor. O bloco Mega Menu é particularmente interessante.
6. Adicione um campo de pesquisa
Para finalizar meu design, vou selecionar o bloco Search Form e arrastá-lo para a coluna direita do design do cabeçalho.

Algumas opções interessantes lá:
- Skin – Clássico , Mínimo , Tela Cheia
- Marcador de posição – pode deixar em branco ou colocar algo como “pesquisar” lá
- Alinhamento , tamanho – ambos são bastante auto-explicativos

7. Adicione outros elementos extras
Há também alguns outros blocos que você pode usar enquanto descobre como criar cabeçalhos e rodapés personalizados com o Elementor. Você pode experimentar com eles livremente para obter o efeito que deseja.
O Elementor também permite que você coloque qualquer outro bloco Elementor em seus cabeçalhos ou rodapés. Isso inclui texto personalizado, imagens, ícones, qualquer coisa que possa melhorar ainda mais o seu cabeçalho.

8. Publique seu cabeçalho / rodapé
A última coisa a fazer é publicar sua criação no site e atribuí-la a substituir o cabeçalho / rodapé padrão em todo o site ou apenas em páginas específicas. Existem muitas possibilidades.
Para fazer isso, clique no botão principal PUBLISH no Elementor. Você verá um pop-up perguntando onde deseja exibir seu novo cabeçalho ou rodapé.

A condição mais básica é “Site inteiro”:

Você também pode experimentar essa configuração e destacar páginas, postagens, categorias e muito mais. Por exemplo, aqui está uma condição para que o novo cabeçalho apareça apenas na página Contato :

Quando terminar, clique em SALVAR E FECHAR .
Seu novo cabeçalho ou rodapé já está ativo! Exemplo:

Espero que este tutorial tenha sido útil e que você já esteja no caminho de um novo cabeçalho ou rodapé incrível!
Se você tiver alguma dúvida, não hesite em perguntar nos comentários abaixo.