Você gostaria de criar um cabeçalho personalizado no WordPress com Elementor?
O cabeçalho é um dos elementos cruciais que todo site deve ter. Um cabeçalho geralmente contém um menu, tornando mais fácil para os visitantes navegar em páginas importantes do seu site. Outro elemento normalmente encontrado no cabeçalho de um site é o logotipo.
Discover Como instalar o Elementor no WordPress
A maior parte das Temas do WordPress, gratuitos ou pagos, permitem que você personalize o cabeçalho adicionando o logotipo do seu site ou o menu de navegação. Algum Temas do WordPress, permitem adicionar elementos adicionais, como barra de pesquisa e ícones de mídia social.
Mas é possível criar um cabeçalho personalizado no WordPress para substituir o cabeçalho do tema WordPress de ativos ?
Claro, você pode criar um cabeçalho personalizado para substituir o cabeçalho padrão do tema ativo no momento em seu site WordPress.
Se você tiver uma habilidade de programação (PHP neste caso), crie um cabeçalho personalizado para um tema WordPress não é um grande problema. Se você não possui nenhuma habilidade de programação, o Elementor permite criar um cabeçalho personalizado sem escrever uma única linha de código. Você pode criar o cabeçalho por meio de um editor visual de arrastar e soltar.
Observação: Theme Builder está disponível apenas no Elementor Pro.
Como criar um cabeçalho personalizado no WordPress com Elementor
A versão profissional do Elementor vem com um recurso chamado Construtor de temas. Este recurso permite que você crie um tema WordPress sem codificação. Os elementos de tema que você pode criar com o construtor de temas do Elementor incluem:
- cabeçalho
- rodapé
- Modelo de postagem única
- Modelo de página de arquivo
- Modelo de página 404
Neste artigo, vamos mostrar como criar um cabeçalho personalizado para o seu tema WordPress com o Elementor. Depois de publicado, este cabeçalho personalizado substituirá o cabeçalho do seu tema atual.
Antes de começar, certifique-se de ter instalado Elementor Pro no seu site WordPress.
Primeiro, vá para Modelos -> Criador de temas.
Na página Theme Builder, vá para a guia cabeçalho e clique no botão adicionar para criar um novo cabeçalho.
Uma janela pop-up aparecerá, solicitando que você dê um nome ao seu modelo. Digite o nome do seu modelo e clique no botão CRIE UM MODELO.
Elementor permite que você crie um cabeçalho a partir de um modelo. Selecione um dos modelos disponíveis na biblioteca de modelos e clique no botão inserir para carregá-lo no editor Elementor.
Você também pode criar o cabeçalho do zero. Se você preferir criar o cabeçalho do zero, pode simplesmente fechar a biblioteca de modelos para abrir o editor Elementor.
Tecnicamente, você pode adicionar qualquer widget Elementor - que você pode explorar no painel esquerdo - ao seu cabeçalho. Mas nem todos os widgets são realmente necessários quando se trata de criar o cabeçalho do site.
Leia nosso guia: Elementor Free vs Elementor Pro: comparação detalhada de recursos
Neste artigo, mostraremos como adicionar os elementos comuns de um cabeçalho: logotipo do site, menu de navegação e barra de pesquisa. Nesse caso, você precisará de uma nova seção com três colunas. Clique no ícone de adição no editor Elementor e selecione a estrutura de três colunas.
Defina a largura de cada coluna arrastando o divisor para a esquerda ou direita. Dê uma olhada na captura abaixo.
- Adicionar logotipo do site
Para adicionar o logotipo do site, arraste o widget Logo do site do painel esquerdo para uma das colunas no editor Elementor.
o widget Logo do site irá carregar o logotipo do seu site. Se você não especificou o logotipo do seu site, você pode ir para Aparência -> Personalizar para adicionar seu logotipo.
Leia também: Como importar ou exportar modelos no Elementor
Você pode personalizar seu logotipo por meio do painel esquerdo. Você pode definir elementos como alinhamento, link, largura, etc.
Basta brincar com o painel esquerdo até ficar satisfeito com o resultado.
- Adicionar menu de navegação
Para adicionar o menu de navegação, arraste o widget menu de navegação para uma das colunas no editor Elementor.
o widget menu de navegação irá carregar o menu principal do seu site. Se você não criou nenhum menu em seu site, pode ir para Aparência -> Menus para criar um. Se você tiver vários menus em seu site, poderá especificar qual deseja exibir na opção do menu suspenso Menu do painel esquerdo.
Novamente, você pode brincar com o painel esquerdo para personalizar seu menu. Você pode definir o layout (horizontal, vertical), alinhamento, efeito de animação e assim por diante.
- Adicionar barra de pesquisa
Para adicionar a barra de pesquisa, você pode arrastar o widget Formulário de pesquisa na coluna restante.
Uma vez que o formulário adicionado, você pode ir para o painel esquerdo para personalizá-lo.
Personalize o cabeçalho
Por padrão, seu cabeçalho terá um fundo branco. Você pode alterar essa cor para combinar com a cor do seu tema. Para fazer isso, ative a seção clicando sobre ela no navegador (Ctrl+i).
Vá para a guia Style no painel esquerdo e selecione sua cor favorita clicando no seletor de cores na opção Cor da seção fundo.
Se você quiser um cabeçalho fixo, vá para a guia Avançado. Na opção Pegajoso, sob a seção Efeitos de movimento, definir o local do Sticky. Por padrão, o efeito Sticky será aplicado a todos os tipos de dispositivos (desktop, tablet e smartphone).
Leia também: Elementor Pro: 10 recursos incríveis para desbloquear - Parte I
Se você deseja desligar o efeito Sticky em um determinado tipo de dispositivo, basta remover o dispositivo do campo.
Publique o seu cabeçalho personalizado
Até agora, você criou com sucesso seu cabeçalho personalizado. Existem muitas outras opções de ajuste que você pode definir, e é impossível abordá-las todas neste post.
Veja também: Como criar um modelo de postagem exclusivo com o Elementor Pro
Apenas brinque com o painel esquerdo até que você esteja realmente feliz com o resultado. Quando terminar, clique no botão PUBLICAR na parte inferior do painel esquerdo para publicar seu modelo de cabeçalho.
Na próxima etapa, você será solicitado a definir a condição de exibição. Clique no botão ADICIONAR CONDIÇÃO
Por padrão, seu modelo de cabeçalho será aplicado a todo o site. Portanto, se você quiser que seu modelo de cabeçalho seja aplicado a todo o site, basta clicar no botão SALVAR FECHAR.
Leia também: Como criar um rodapé no WordPress com Elementor
Ou, se desejar que seu modelo de cabeçalho seja aplicado a uma página específica, você pode especificar a página clicando no menu suspenso. Selecione a página no outro menu suspenso que aparece a seguir. Clique no botão SALVAR FECHAR assim que terminar de especificar a página.
Obtenha o Elementor Pro agora!
Conclusão
Aqui ! É isso neste artigo que mostra como criar um cabeçalho personalizado no WordPress com Elementor. Se você tiver alguma dúvida sobre como chegar lá, informe-nos no Comentários.
No entanto, você também pode consultar nossos recursos, se você precisar de mais elementos para realizar seus projetos de criação de sites da Internet, consultando nosso guia no site Criação de blog WordPress ou aquele em Divi: o melhor tema WordPress de todos os tempos.
Mas enquanto isso, compartilhe este artigo em suas diferentes redes sociais.
...
