Ir para o conteúdo principal

Como criar um cabeçalho personalizado no WordPress com Elementor

Divi: o tema WordPress mais fácil de usar

Divi: O melhor tema WordPress de todos os tempos!

mais Downloads 901.000Divi é o tema WordPress mais popular do mundo. É completo, fácil de usar e vem com mais de modelos livres 62. [Recomendado]

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 maioria dos temas WordPress, sejam gratuitos ou pagos, permitem que você personalize o cabeçalho adicionando o logotipo do seu site ou o menu de navegação. Alguns temas do WordPress permitem adicionar elementos adicionais, como a 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 ativo do WordPress?

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ê tem habilidades de programação (PHP, neste caso), criar um cabeçalho personalizado para um tema WordPress não é um grande negócio. Se você não tem habilidades 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 arrastando e soltando.

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 criador de temas do Elementor são os seguintes:

  • 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.

Crie facilmente seu site com Elementor

Elementor permite criar facilmente qualquer design de site com uma aparência profissional. Pare de pagar caro pelo que você pode fazer por si mesmo. [Grátis]

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.

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.

adicionar seção de coluna

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.

Você está procurando os melhores temas e plugins do WordPress?

Baixe os melhores plugins e temas WordPress no Envato e crie facilmente o seu site. Já mais do que 49.720.000 downloads. [EXCLUSIVO]

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.

Depois que o formulário for 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 Estilo no painel esquerdo e selecione sua cor favorita clicando no seletor de cores na opção Cor da seção fundo.

Como criar um cabeçalho no WordPress com Elementor

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.

Como criar um cabeçalho no WordPress com Elementor

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.

Crie facilmente sua loja online

Baixe gratuitamente o WooCommerce, os melhores plugins de e-commerce para vender seus produtos físicos e digitais no WordPress. [Recomendado]

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.

Como criar um cabeçalho no WordPress com Elementor

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.

...

Este artigo contém comentários 0

Deixe um comentário

Seu endereço de email não será publicado. Campos obrigatórios estão marcados com *

Este site usa Akismet para reduzir indesejados. Saiba mais sobre como seus dados de comentários são usados.

De volta ao topo
0 ações
ação
chilrear
Enregistrer