Como criar um cabeçalho de site personalizado com Elementor

Neste tutorial, mostraremos como criar um cabeçalho com o Elementor que pareça e funcione exatamente como você deseja. Também verificaremos várias configurações que podem ajudá-lo a criar um cabeçalho personalizado e responsivo que seja mais fácil de usar.

Você já quis mudar algo no cabeçalho de um site WordPress? Talvez você queira adicionar uma barra de pesquisa ou um botão de login acima dos links do menu. Ou talvez você quisesse tornar o cabeçalho fixo para que a navegação fosse mais fácil para os visitantes.

Enquanto muitos temas premium do WordPress permitir que os usuários façam coisas como personalizar fontes, espaçamento e posicionamento do logotipo, a capacidade de personalizar a estrutura do cabeçalho é limitada. Isso pode ser uma experiência frustrante, pois muitos temas WordPress de alta qualidade oferecem a capacidade de personalizar praticamente todo o resto em um site.

A Elementor tem a solução perfeita para este problema.

Kits de templates Elementor em Envato Elements

Antes de mergulharmos, não se esqueça de que você pode baixar Kits de Modelos ilimitados para Elementor com sua assinatura do Envato Elements, para usar com seu site WordPress. O Envato Elements também oferece acesso a milhares de outros ativos criativos, como fotos, gráficos, modelos de vídeo, áudio, ações do Photoshop, você escolhe!

Kit de modelo de site completo para agência de viagens Elementor Pro
Kit de modelo de site completo para agência de viagens Elementor Pro

Com isso dito, vamos ver como você pode personalizar seu próprio cabeçalho no Elementor!

Como construir um cabeçalho com Elementor

A ferramenta que você usará para construir um cabeçalho com o Elementor é chamada Criador de temas. Para isso, você precisará de um Elementor Pro inscrição.

Depois de ativar o plug-in, estas são as etapas necessárias para criar rapidamente um cabeçalho que facilite a exploração do site pelos visitantes:

1. Abra o Construtor de Temas

Elementor Criador de temas vive sob o Modelos aba:

o Criador de temas permite que você crie designs personalizados para os principais elementos do site, como o cabeçalho e o rodapé. Além disso, você pode criar layouts personalizados para diferentes tipos de páginas em seu site, como postagens de blog individuais, páginas de resultados de pesquisa e páginas de loja.

Você encontrará uma lista desses Peças do site no lado esquerdo da tela junto com aqueles que você já desenhou no centro:

Para criar seu novo cabeçalho, clique no botão azul + Adicionar novo botão no canto superior direito. Você também pode passar o mouse sobre o Cabeçalho link abaixo Peças do site e clique no ícone de sinal de adição azul que aparece lá.

Isso abrirá o editor Elementor.

2. Escolha um dos modelos de cabeçalho do Elementor

A primeira coisa que você vê quando entra no editor é uma lista de modelos de bloco de cabeçalho Elementor:

Ao passar o mouse sobre cada um dos Modelos elementares, um ícone de lupa é exibido. Clique nele para visualizar o modelo.

Escolha um layout mais próximo do que você imaginou para seu cabeçalho. Tudo bem se as cores, componentes e layout não corresponderem exatamente. Tudo o que você está fazendo nesta etapa é estabelecer uma base para reduzir a quantidade de construção que você precisa fazer.

Quando encontrar um que goste, selecione-o e clique no botão verde Inserir botão no canto superior direito:

Isso adicionará um cabeçalho totalmente editável à tela do Elementor.

Existem algumas maneiras de adicionar um logotipo ao cabeçalho do site.

Uma maneira é carregá-lo usando o Imagem ferramenta. É assim que o logotipo neste modelo de cabeçalho Elementor foi criado:

Mas o que acontece se você mudar o logotipo no futuro? A maneira mais fácil de manter todas as instâncias de seu logotipo atualizadas em seu site é enviar o arquivo para Identidade do site.

Acessar Identidade do site de dentro do Elementor, clique no ícone do menu de hambúrguer no canto superior esquerdo. Então vá para Configurações do site e Identidade do site onde você fará o upload do seu arquivo de logotipo:

A seguir, localize o Logotipo do site widget (é um Widget Elementor Pro) e arraste-o para a mesma coluna onde está a imagem do logotipo do modelo. Quando estiver no lugar, clique com o botão direito do mouse no logotipo do modelo e exclua-o:

Você pode querer fazer personalizações extensas no logotipo ou nenhuma. Use o Contente, Estiloe Avançado configurações para ajustar o design e a funcionalidade.

Depois de salvar o modelo de cabeçalho como rascunho ou publicá-lo, você poderá ver o gráfico do seu logotipo em vez da imagem do espaço reservado.

4. Personalize a navegação

Cada modelo de cabeçalho Elementor vem com um Menu de navegação widget embutido nele. Este widget puxará automaticamente qualquer que seja o menu de navegação principal.

gorjeta

Se você ainda não criou sua navegação, saia do editor Elementor e configure-o em Aparência > Menus.

Para alterar qual menu aparece no cabeçalho, clique no botão Menu de navegação elemento no cabeçalho. Em seguida, selecione um menu diferente no menu suspenso:

Revise as configurações em Contente para garantir que o conteúdo seja exibido como você deseja. Desde o alinhamento dos links do menu até o ícone onde está contido o menu mobile, você pode configurar tudo aqui.

Para alterar o estilo da tipografia e iconografia, vá para o Estilo aba. Avançado permitirá que você personalize o layout, efeitos de movimento, design de plano de fundo e muito mais.

5. Adicione um apelo à ação

O principal objetivo do cabeçalho do site é ajudar os visitantes a navegar pelo seu site. Dito isso, é uma boa prática adicionar uma frase de chamariz ao cabeçalho, além do logotipo e do menu que os visitantes esperam encontrar lá.

O call-to-action deve ser aquele que atrai a maioria dos visitantes. Por exemplo:

  • Em um site de comércio eletrônico, adicione uma barra de pesquisa.
  • Em um site SaaS, adicione um botão “Experimentar agora” ou “Agendar demonstração”.
  • Em um site de mídia, adicione um botão para “Inscrever-se”.

Tudo o que você deseja adicionar, o Elementor tem um widget para isso. Encontre-o e arraste-o para a extremidade direita do seu menu:

Em alguns desses modelos de cabeçalho, pode já haver algo lá, o que é bom, pois você não precisará criar a estrutura de colunas por conta própria. Basta mover seu novo CTA para baixo ou para cima do elemento existente. Em seguida, exclua o que você não precisa.

Como você pode ver no exemplo acima, o botão do modelo foi estilizado para corresponder ao design do cabeçalho. Quando adicionamos o nosso, ele extraiu as cores e fontes globais que configuramos anteriormente.

gorjeta

Se você ainda não configurou Cores globais ou Fontes globais no Elementor, clique no menu de hambúrguer no canto superior esquerdo, vá para Configurações do site e personalizá-los lá.

Uma coisa a fazer antes de passar para a próxima etapa é verificar o CTA no modo responsivo. Como os botões e as barras de pesquisa podem ser elementos complicados, você quer ter certeza de que eles não atrapalham muito o design do cabeçalho móvel.

Para abrir o modo responsivo, clique no botão Modo responsivo botão na barra de ferramentas inferior e selecione o ícone do smartphone na nova barra de ferramentas responsiva na parte superior:

Quaisquer alterações feitas em seus elementos de cabeçalho nesta exibição se aplicam apenas ao design móvel. Sinta-se à vontade para personalizar o conteúdo do widget, bem como as configurações da coluna, se estiver lutando para que tudo se encaixe da maneira que deseja.

6. Adicione outro conteúdo ao cabeçalho do site conforme necessário

Cada cabeçalho eficaz contém os três elementos que personalizamos até agora: o logotipo, o menu e a frase de chamariz.

No entanto, você também pode adicionar conteúdo secundário. Isso é particularmente útil para empresas que desejam promover seus outros canais. Por exemplo:

  • Uma empresa física pode usar esse espaço para publicar seu endereço e adicionar um número de telefone clique para ligar.
  • Uma empresa on-line pode colocar links de mídia social e um endereço de clique para e-mail aqui.
  • As empresas de comércio eletrônico podem usá-lo para coisas como o botão de login, ícone do carrinho de compras e links de contas de membros.

Se você sabe que vai seguir esse caminho, escolha um modelo de cabeçalho Elementor que tenha uma barra de ferramentas secundária. Dessa forma, você só precisará personalizar o design e o conteúdo em vez de construir a estrutura do zero.

Ao editar esta barra, comece personalizando a cor de fundo do Seção Interna ferramenta. Para fazer isso, clique com o botão direito do mouse na seção para editá-la. Em seguida, atualize a cor em Estilo:

Para editar o conteúdo no banner superior, edite o conteúdo existente ou arraste e solte novos widgets no local. Você pode então usar o Contente, Estiloe Avançado configurações para personalizar a aparência e o comportamento.

Antes de encerrar, faça mais uma verificação responsiva. O modelo é pré-programado para reduzir ao mínimo os elementos do banner. Portanto, é importante certificar-se de que nada está faltando e que qualquer conteúdo recém-adicionado não vá para a próxima linha.

7. Defina as condições do cabeçalho e publique

Com seu conteúdo e design prontos, a última coisa a fazer é definir as condições para o cabeçalho do seu site personalizado.

Desça para o verde Publicar botão e clique na seta para cima ao lado dele. Clique em Condições de exibição:

Por padrão, o novo cabeçalho que você acabou de criar aparecerá no topo de cada página.

Se você deseja excluir o cabeçalho de qualquer página (como uma página de destino de vendas, por exemplo), alterne INCLUIR para EXCLUIR e, em seguida, insira a página ou páginas às quais aplicar a configuração. Você também pode usar essas configurações para exibir cabeçalhos personalizados em determinados tipos de páginas.

Quando você terminar de configurar as condições de exibição, o cabeçalho personalizado será publicado e publicado automaticamente em seu site. Confira e certifique-se de que parece e funciona exatamente como você pretendia.

Conclusão

Há uma série de razões pelas quais os usuários do WordPress devem atualize para o Elementor Pro. Pense em algo assim; construindo um cabeçalho personalizado para o seu site. O Elementor facilita o trabalho de algo que anteriormente exigia soluções ou codificação adicionais de plugins.

Pode não parecer grande coisa. No entanto, pense em suas próprias experiências ao se envolver com sites com cabeçalhos incompletos. Ter que rolar para baixo até o rodapé ou vasculhar cada página para encontrar as informações ou recursos que você está procurando como visitante pode ser uma verdadeira dor.

Se você criar um cabeçalho com o Elementor que inclua todos os recursos e funcionalidades corretos, não precisará se preocupar em perder visitantes para uma experiência de navegação ruim.

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *