Como editar seu cabeçalho do WordPress com Elementor

O cabeçalho do site é a área em que os usuários interagem pela primeira vez com seu site. É usado principalmente para navegação no site, para que os visitantes obtenham uma direção clara ao visitar diferentes páginas. Além disso, você pode usar este local para branding, adicionar o botão CTA e manter muitas informações necessárias.

Por padrão, os temas do WordPress fornecem um formato de design global para um cabeçalho. Mas se você quiser fazer um cabeçalho personalizado, você pode editar os arquivos do tema principal. O que é muito demorado e difícil para um usuário não técnico.

Qual poderia ser a solução mais fácil?

Elementor é o popular plugin construtor de páginas que torna as tarefas de design do seu site mais fáceis do que nunca com seus recursos de arrastar e soltar. Usando o Elementor, você pode criar e personalizar um cabeçalho com muita eficiência.

Neste blog, mostraremos um guia passo a passo sobre como editar o cabeçalho no Elementor .

Hoje você vai aprender a:

• Edite o cabeçalho do site existente com o Elementor
• Crie cabeçalhos usando modelos de cabeçalho Elementor pré-fabricados
• Crie o cabeçalho Elementor do zero usando widgets úteis

No final do guia, você receberá um ponto de bônus que levará a capacidade de design do seu site para o próximo nível. Então não perca.

Como editar o cabeçalho do site existente com o Elementor

É hora de mostrar como editar o cabeçalho atual do nosso site Elementor. Aqui, usamos os widgets Elementor free & pro para projetar nosso cabeçalho.

Então você precisa instalar esses dois plugins.

• Elementor (Gratuito)
• Elementor Pro

Primeiro, dê uma olhada no cabeçalho do nosso site atual. Você percebe que adicionamos o logotipo do nosso site e um menu de navegação no cabeçalho.

Parece um cabeçalho muito comum, então decidimos editá-lo. Agora, vamos adicionar um Button ao cabeçalho atual. Além disso, crie um cabeçalho superior para exibir um formulário de pesquisa , nossos canais sociais e o endereço do nosso escritório .

Requer apenas 5 etapas para obter a aparência desejada

• Etapa 1: adicionar um botão
• Etapa 2: adicionar e personalizar o formulário de pesquisa
• Etapa 3: adicionar e personalizar o ícone social
• Etapa 4: adicionar ícone de mapa
• Etapa 5: adicionar e personalizar o título

Etapa 1: adicionar um botão

Para adicionar o botão, precisamos adicionar uma nova coluna ao lado direito do menu de navegação. Você verifica esta imagem abaixo para saber como adicionar uma nova coluna no Elementor.

Agora, encontre o widget Button da galera de widgets Elementor. Em seguida, arraste e solte-o na nova coluna.

Na área Conteúdo , você terá todas as opções necessárias para adicionar o conteúdo do botão. aqui, você pode definir o botão Type como Default, Info, Success, Warning e Danger . Você pode escrever o botão Texto , inserir Link , gerenciar o botão Alinhamento e Tamanho .

Além disso, você pode adicionar um ícone e controlar o espaçamento do ícone com base na necessidade. No entanto, você pode adicionar um ID de botão que o ajudará a adicionar código personalizado ao botão.

Para personalizar o estilo padrão do botão, você pode ir para a área Estilo. Aqui, você pode alterar o design do botão usando as opções de estilo abaixo.

• Tamanho fixo
• Tipografia
• Sombra de texto
• Cor do texto
• Tipo de plano de fundo
• Tipo de borda
• Raio da borda
• Sombra da caixa
• Preenchimento

É hora de adicionar nosso cabeçalho superior. Para fazer isso, precisamos adicionar uma nova seção junto com três colunas na parte superior do cabeçalho. Vamos ver como adicionar uma nova seção no Elementor.

Etapa 2: adicionar e personalizar o formulário de pesquisa

Depois de adicionar com sucesso a nova seção, você adicionará o widget Search Form na coluna da direita.

Você pode alterar o conteúdo padrão do formulário de pesquisa acessando a seção Conteúdo . Você pode selecionar a capa do formulário de pesquisa como Clássico, Mínimo e Tela inteira . Você pode escrever o Placeholder . Além disso, defina o ícone de tipo de botão ou a pesquisa e seta de tipo de texto e ícone . No entanto, você pode gerenciar o tamanho do ícone aqui na área de conteúdo.

Na área Estilo, você pode alterar o estilo de entrada do formulário de pesquisa e também personalizar a cor do texto do botão, a cor do plano de fundo, o tamanho do ícone e a largura .

Etapa 3: adicionar e personalizar o ícone social

Queremos exibir nossos canais sociais no cabeçalho superior. Então, adicionamos o widget Elementor Social Icons na coluna do meio.

Você pode adicionar contas sociais com eficiência clicando no botão + ADICIONAR ITEM . Você pode Duplicar e Remover um Item de acordo com sua necessidade. Além disso, escolha sua forma personalizada como Arredondado, Quadrado e Círculo . E gerencie as Colunas e defina o Alinhamento .

Para adicionar um Item, conteúdo, você precisa primeiro abrir um Item. Então você pode adicionar seu ícone social, inserir um link e definir a cor .

A área Estilo permite personalizar a Cor do Ícone, Tamanho, Preenchimento, Espaçamento, Espaço entre Linhas, Tipo de Borda e Raio da Borda . Aqui, você também escolhe sua animação de ícone para dar uma aparência vibrante aos seus ícones sociais.

É hora de adicionar o endereço do nosso escritório ao cabeçalho superior. Queremos adicionar um ícone de localização Man e um título . É por isso que você precisa adicionar uma seção interna na coluna esquerda do cabeçalho superior. Você pode encontrar o widget no painel de widgets do Elementor do lado esquerdo e adicioná-lo à coluna.

Etapa 4: adicionar ícone de mapa

Agora temos duas colunas na coluna pai do lado esquerdo do cabeçalho superior. Primeiro, adicionamos o widget Ícone . Em seguida, adicionamos um ícone de mapa e definimos seu alinhamento .

Alteramos a cor primária e o tamanho do ícone indo para a área de estilo. Aqui, você pode definir o valor de Rotação do ícone.

Etapa 5: adicionar e personalizar o título

Para adicionar o endereço, adicionamos o widget Heading . Usando a seção Conteúdo , você pode adicionar seu Título , inserir um Link de acordo com sua necessidade. Além disso, defina o tamanho do cabeçalho, a tag HTML e o alinhamento em seu próprio estilo.

Você também pode personalizar o título usando as opções de estilo padrão, como Cor do texto, Tipografia, Traçado do texto, Sombra do texto e Modo de mesclagem .

Visualização Final do Cabeçalho Atual

Após personalizar o cabeçalho, este é o novo visual do nosso cabeçalho.

Se você deseja criar um cabeçalho Elementor personalizado à sua maneira, siga o guia abaixo. Você pode criar um Elementor personalizado usando as duas maneiras. Você pode escolher o bloco ouvido Elementor pré-fabricado ou criá-lo do zero usando os widgets Elementor. Vamos ver.

Criar cabeçalhos usando modelos de cabeçalho Elementor

Para criar um cabeçalho usando o Elementor's Theme Builder, você precisa instalar o Elementor (Free & Pro) no seu site.

Siga estas etapas abaixo e crie seu cabeçalho personalizado.

1. Navegue Modelo-> Construtor de Temas-> Cabeçalho .
2. Clique no botão Adicionar novo ou no botão Adicionar novo cabeçalho .
3. Escolha o Template Type->Header e escreva o nome do seu template.
4. Clique no botão Criar modelo para salvar o modelo.
5. Na próxima página, você obterá a Biblioteca Elementor com Blocos e Páginas pré-fabricados .
6. Selecione um bloco de cabeçalho correto e instale -o em seu site.

É isso.

Projete e personalize o cabeçalho do Elementor do zero usando o widget do Elementor

Se você é um usuário regular do Elementor, pode usar os widgets do Elementor para criar seu cabeçalho personalizado. O Elementor fornece todos os widgets necessários em sua versão gratuita que você precisa para projetar seu cabeçalho. Basicamente, um cabeçalho comum tem um logotipo do site, um menu de navegação e um formulário de pesquisa.

Você pode seguir este guia passo a passo e aprender como criar e personalizar o cabeçalho Elementor usando widgets Elementor.

Para seguir o design moderno da web, você pode criar um cabeçalho adesivo para o seu site. Ele estará no mesmo lugar na tela enquanto o usuário rola a página da web. Verifique este guia sobre como criar um cabeçalho fixo no Elementor.

Bônus: use o widget Happy Mega Menu do Happy Addons para criar menus em grande escala como Adidas, Dribbble e Puma

Você tem um site de comércio eletrônico ou comercial e precisa adicionar muitas páginas ao menu. No entanto, o menu de navegação padrão do Elementor não oferece a opção de criar um menu maior de acordo com suas necessidades. E você está procurando uma solução para se livrar dele.

Para resolver seu problema, o Happy Addons, um dos melhores addons Elementor de carregamento rápido, lançou recentemente um novo widget ' Happy Mega Menu '. Com este widget exclusivo, você pode criar menus grandes como Adidas, Dribbble, weDevs, InVision, Puma e muito mais.

Experimente o widget Happy Mega Menu para fazer seu menu de navegação em minutos.

Você também pode conferir a documentação completa do widget Happy Mega Menu do Happy Addons e aprender como usá-lo da maneira certa.

Você está pronto para editar seu cabeçalho Elementor

O Elementor oferece toda a flexibilidade para projetar e personalizar o cabeçalho do seu site. Usando o Elementor, você pode não apenas criar um novo cabeçalho do zero, mas também editar o cabeçalho atual do seu site.

No guia acima, abordamos como editar o cabeçalho no Elementor da maneira correta. Discutimos o que deve ser feito para criar um cabeçalho Elementor personalizado. Por fim, também compartilhamos um ponto de bônus sobre como o widget Happy Mega Menu dos addons Happy ajudará você a criar um mega menu para o seu site com facilidade.

Se você achar o tutorial útil, compartilhe-o em seus canais sociais. Não se esqueça de participar do nosso boletim informativo para obter mais guias úteis sobre WordPress e Elementor.