Como Criar Um Cabeçalho Personalizado no Elementor

Atualizado em Abril de 2019, por Tiago Dantas

Como Criar Um Cabeçalho Personalizado no Elementor

Atualizado em Abril de 2019, por Tiago Dantas

Transcrição do tutorial

Algumas vezes é útil mostrarmos um cabeçalho personalizado numa determinada página do nosso site.

Por exemplo na página de contato do teu site pode ser relevante mostrares
um cabeçalho diferente das outras páginas do site.

Onde podes colocar os links para as tuas redes sociais mais visiveis assim como os teus dados de contato ou por exemplo, podes também optar por ter um cabeçalho personalizado na página de blog do teu site ou da tua loja virtual para indicar aos teus visitantes que estão numa zona diferente do site.

Seja qual for a razão que te leva a criar um cabeçalho personalizado, este tutorial vai-te ajudar a fazer isso de forma rápida e grátis.

Para além do cabeçalho também vais aprender como podes criar um menu personalizado para mostrar em determinadas páginas do teu site.

Ou seja, não tens de ficar preso nem ao cabeçalho nem ao menu principal que criaste no teu tema do WordPress e a melhor parte é que não vais precisar de instalar plugins extra para fazeres isto, tudo o que vais precisar é (quem haveria de ser) o nosso construtor de páginas favorito, Elementor.

Olá o meu nome é Tiago Dantas do Vive da Net, o sítio onde designers não programadores recorrem para criar sites profissionais no WordPress sem dores de cabeça.

O método que vais aprender neste tutorial funciona para todos os temas compatíveis com o Elementor.

Os temas que eu recomendo são o Generate Press e o OceanWP.

Deixei o link na descrição para cada um dos temas, juntamente com os meus tutoriais sobre como criar um site WordPress com cada um deles. (colocar links na descrição)

Para este tutorial vou assumir que já sabes como editar o cabeçalho do teu site e como criar um menu principal através do menu Personalizar do teu tema.

Como vês neste caso, já criei o “menu principal” no OceanWP e estes sãos os itens que fazem parte deste menu.

Aqui em baixo defini para que este seja o menu principal do site, por isso sempre que uma pessoa visita o meu site é este o menu que vai aparecer no cabeçalho, como podes ver.

Mas imagina que queres criar um cabeçalho diferente para a página de contato e além disso queres ter um menu personalizado nessa página.

Repara que quando abrirmos a página de contato podemos ver que tanto o cabeçalho como o menu são iguais ao resto do site.

E isso é o que acontece quando usamos as definições do tema para criar o cabeçalho e o menu, ele fica igual em todo o site.

Mas imagina por exemplo, que queres alterar o cabeçaho da página de contato e em vez de mostrares o teu logo do lado esquerdo,  queres colocá-lo no centro da página e em relação ao menu não queres mostrar os items Sobre Nós e Contato, ou seja queres também um menu personalizado para esta página.

Como é que podemos fazer isto sem afetar tanto o cabeçalho como o menu principal no resto do site? Ou seja, como mostrar esse cabeçalho e menu personalizados apenas numa página do nosso site?

É isso que vamos fazer agora. Aperta os cinto vamos começar!

Muito bem, o primeiro passo para criarmos o nosso cabeçalho personalizado é ir até ao menu Modelos e clicar em Adicionar novo.

No tipo de modelo selecionamos Cabeçalho ou Header se tiver em Inglês e em nome do modelo podemos colocar um nome, este nome é opcional e é só para nos ajudar a identificar o modelo, vou colocar “cabeçalho pagina contato”

Clicamos em Criar Modelo e aqui o Elementor dá-nos alguns modelos de cabeçalho prontos para usar, mas como vamos criar o design do nosso cabeçalho do Zero podemos fechar esta página.

Como podes ver temos aqui uma seção acima do título e acima da área de conteúdo o que nos indica que estamos a editar o cabeçalho.

O design do cabeçalho que vamos criar é este e como podes ver temos 3 colunas a coluna da esquerda com ícones para as redes sociais, a coluna do meio com o logo e a coluna da direita com os contatos. Depois temos uma linha para o menu personalizado.

Como é que podemos colocar todos estes elementos dentro de uma seção?

Simples. Adicionando o elemento seção interna – que se encontra aqui nos elementos básicos, vamos arrastar o elemento para dentro da paleta e como podes ver temos aqui uma seção interna com duas colunas dentro de uma seção principal.

No nosso design precisamos de 3 colunas internas, portanto vamos passar com o mouse por cima da seção interna, clicamos com o botão do lado direito no ícone de coluna da seção interna, não este, mas sim este que está aqui
em baixo e clicamos em duplicar.

Pronto. Agora temos uma seção interna com 3 colunas e uma seção principal com apenas uma coluna onde podemos colocar o nosso menu personalizado.

Agora vamos até à edição da seção principal que é este ícone azul com pontinhos que se encontra no topo, clicamos e repara que estamos na edição da seção. Se te enganares e clicares nesta repara que diz “edição da seção interna”
não é esta que vamos editar, portanto certifica-te que clicas na seção aqui em cima onde vai dizer apenas “editar seção”.

Vamos ao menu estilo e no fundo podemos colocar uma cor, vou usar este código #003346 e como podes ver a cor de fundo da seção principal preenche a área toda e é esse o efeito que queremos obter.

Agora podemos adicionar os ícones das redes sociais na coluna esquerda da seção interna, para isso clicamos neste ícone para voltar abrir a lista de elementos, mas desta vez para não perdemos tempo a rolar à procura do elemento podemos simplesmente procurar aqui em cima escrevendo social e repara que aparecem todos os elementos relacionados com redes sociais.

O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, vamos arrastá-lo para a coluna do lado esquerdo.

Muito bem agora vamos tratar do design dos ícones. Em conteúdo podemos alterar a ordem dos ícones e ao clicarmos sobre eles podemos alterar o ícone e colocar o link para a nossa página. Neste exemplo vou substituir o Google Plus pelo Instagram e vou alinhar os ícones à esquerda.

A seguir passamos para o menu estilo, em cor vou alterar a opção de cor oficial para personalizar. A cor primária controla a cor do quadrado que envolve o logo e neste exemplo não quero que apareça.

Portanto vou arrastar a barra da transparência até cá abaixo. Como podes ver os quadrados desapareceram. Mas ainda aparecem quando passamos com o mouse por cima, já vamos tratar disso.

A cor secundária controla o ícone da rede social e uma cor clara como o branco fica bem para contrastar com a cor de fundo escura. O branco já está definido como padrão, mas podemos confirmar colocando aqui.

Aqui em baixo tens outras opções como por exemplo o tamanho dos ícones, o padding e o espaçamento. Vou deixar estas opções todas em padrão apagando os valores.

Agora vamos melhorar o design quando o mouse passa por cima, repara que estas cores originais não ficam bem.

Para isso clicamos na opção “ícone ao passar o mouse”.

Em cor primária voltamos a trazer a barra da transparência até cá abaixo e em cor secundária colocamos branco e reduzimos muito ligeiramente a barra da transparência.

E como podes ver, agora quando passamos com o mouse por cima os ícones ficam com este aspeto mais profissional.

Muito bem, antes de continuarmos vamos gravar o nosso trabalho clicando em Publicar, mais logo vamos definir onde queremos mostrar este modelo, por enquanto clicamos apenas em “Salvar e Fechar”.

Ok, no próximo passo podemos adicionar o nosso contato do lado direito.

Para isso voltamos a abrir os elementos e procuramos por icon, o elemento que procuro é este que diz “lista de ícones” – vamos arrastar para a coluna interna direita.

Clicamos sobre o primeiro item, aqui podemos colocar o nosso Whatsapp e no ícone pesquisamos por whats e repara que vai aparecer o logo do Whatsapp, selecionamos, minimizamos o item e passamos para o próximo que é o email. Colocamos o nosso email e em ícone pesquisamos por envelope. Clicamos na aba para minimizar e podemos apagar o terceiro item da lista porque não vamos usar mais nenhum neste exemplo.

Muito bem, agora vamos tratar do design no menu estilo. Em primeiro lugar vou alinhar a lista à direita. Em ícone vou colocar a cor branca, claro que podes colocar a cor que quiseres, em tamanho vou aumentar ligeiramente para 20.

Em texto vou colocar a cor branca e vou colocar 10 no recuo do texto para aumentar ligeiramente a distância entre o texto e os ícones.

Muito bem no próximo passo vamos adicionar o nosso logo à coluna interna do meio e podemos fazer isso de várias formas.

Podemos por exemplo arrastar o elemento imagem para a coluna do meio e a seguir só temos de ir buscar o nosso logo à biblioteca de mídia. Vou excluir para mostrar outra forma. Pesquisamos por logo e encontramos aqui um elemento chamado custom header logo, ao arrastarmos este elemento para a página repara que ele vai buscar o nosso logo. E ele vai buscar o logo que fizemos upload no menu Personalizar do tema.

A desvantagem deste elemento é que a única opção que temos é a posição, colocamos ao centro e é só isso que podemos fazer com este elemento.

Também podemos usar o elemento “logo do site” que se encontra já aqui no menu Site, este é um elemento que pertence à versão pro do Elementor portanto vais ter mais flexibilidade no design.

O que eu gosto de fazer é ajustar o tamanho da imagem. Para isso seleciono aqui Personalizado, e em largura coloco 100 não é preciso colocar nada em altura porque ao clicarmos em aplicar o Elementor calcula automaticamente
o rácio certo para o valor da altura. E como podes ver o tamanho do logo é reduzido. Se quiseres um tamanho maior é só aumentares aqui a largura. Outra opção interessante é aqui no menu estilo, podemos diminuir a opacidade do logo e cria este efeito.

Lembra-te que se não tiveres o Elementor Pro podes usar o elemento “imagem” ou o elemento “custom header logo” que te mostrei à pouco.

O próximo passo é adicionar o menu ao cabeçalho e podemos fazer isso com dois elementos. Vamos pesquisar por “menu” e as duas opções são o elemento “custom menu” e o elemento “Menu de navegação”. Este elemento já vem como padrão na versão gratuita do Elementor e este pertence à versão profissional.

Eu vou-te mostrar como é que funciona cada um deles para criares o teu menu personalizado e explicar-te as vantagens e desvantagens de cada um.

Vamos começar pelo elemento gratuito e podemos arrastá-lo para esta linha que pertence à seção principal. Repara que deves largar o elemento quando a largura da seção principal se encontra selecionada e não numa das colunas da seção interna.

Agora podemos editar o elemento custom menu do lado esquerdo. Na opção Select Menu selecionamos o menu e neste exemplo tenho as opções menu mobile e menu principal. Vou escolher menu principal e na posição vou colocar ao centro.

Descemos um pouco e na opção Menu Link color colocamos o código da cor branca que é # seguido de 6fs e na cor menu link hover

colocamos este código de cor para obtermos este efeito subtil quando o mouse passa por cima.

Na altura da fonte em “font size” vou colocar 14 e como podes ver o nosso menu está pronto. No entanto lembra-te que no início eu disse que queria criar um menu personalizado para esta página sem os itens sobre nós e contato.

Portanto como é que podemos fazer isso? Vou guardar o que fizemos até agora clicando em Atualizar > Salvar e Fechar

Vamos clicar aqui neste ícone e vamos sair para o painel. Para criarmos o nosso menu personalizado vamos a Aparência > Personalizar Menus e vamos criar um novo menu que vou dar o nome de “menu página contato”

Na localização do menu não selecionamos nada, se selecionares principal o tema vai substituir este menu pelo menu principal portanto aqui na opção localizações de menu não coloques nada.

Vamos sim clicar neste botão que diz “Adicionar itens” e agora sim vamos adicionar os itens ao nosso menu que neste caso não são páginas mas sim links personalizados. O primeiro é Planos. Aqui no link vou colocar a página principal
como exemplo, claro neste caso deves colocar aqui um link âncora para a seção correspondente da página.

Um link âncora é um link que se encontra dentro da própria página e ao clicarmos nele somos levados à seção correspondente, como neste exemplo.

Se quiseres aprender como criar links âncora no menu do teu site para criares o efeito one page, coloquei um tutorial na descrição que te ensina o passo a passo para criar este tipo de menus.

Voltando ao tutorial eu aqui vou colocar só o link do site para ser mais rápido e vou clicar em “adicionar ao menu”.

O próximo item é “Nosso trabalho”, mais uma vez coloco aqui o link do site e vou adicionar ao menu. Podemos ver que o menu Nosso trabalho tem os sub-menus portfolio e serviços, portanto vamos criar esses dois itens. Para torná-los sub-menus basta arrastá-lo para a direita do item “Nosso trabalho” como neste exemplo.

Vou finalizar o menu personalizado com o item Blog e neste caso o blog é uma página. Clicamos em Adicionar itens vamos a páginas selecionamos a página do blog, como podes ver já aparece aqui no menu. Vamos clicar sobre o item e no rótulo de navegação vamos colocar blog com letras maiúsculas.

Muito bem, por fim clicamos em Publicar. Agora podemos fechar o menu personalizar e voltar para a edição do cabeçalho.

Vou te mostrar outra forma de chegares até aqui. Clicas em Modelos, modelos salvos e vais reparar que muitas vezes não vão aparecer aqui os teus modelos de cabeçalho apesar de teres gravado tudo, isto é um erro do Elementor.

A solução para isso é procurares o modelo através do nome, por isso é muito importante dares um nome ao teu modelo, vou escrever aqui “cabeçalho” e repara que já aparecem aqui mais barras em cima e aqui aparece o nosso modelo, vamos clicar “em editar com Elementor”.

Clicamos no elemento custom menu, na opção “select menu” vamos escolher aqui “menu página de contato” e repara como o nosso menu personalizado fica impecável, pelo menos em desktop.

Vamos ver como é fica em Tablet, repara que não fica nada mal e por fim vamos ver como é que fica em Mobile e aqui é que começam os problemas e não me estou a referir ao alinhamento destes elementos, isso é fácil de tratar, já te mostro mais logo.

Estou-me a referir ao aspeto do menu personalizado. Neste exemplo o problema não parece muito óbvio porque temos poucos itens no menu, mas se o teu site ou o site do teu cliente tiver muitos itens, como neste exemplo, repara que o menu fica uma grande confusão.

Para além disso, outra desvantagem deste elemento é o facto de não podermos editar o menu através das opções que temos do lado esquerdo e pode tornar o nosso design inconsistente. Portanto estas são as principais limitações do elemento custom menu.

Por isso vou-te mostrar agora um elemento que tem a solução para estes dois problemas que é o Elemento Nav menu da versão profissional do Elementor.

Vamos voltar ao modo desktop, excluimos este elemento e vamos arrastar o Elemento Menu de Navegação, que se encontra aqui para a seção principal.
Antes de editar o menu conteúdo deste elemento vou ao menu estilo só para colocar a cor do texto branco, dessa para conseguirmos ver melhor as alterações. Vamos passar para o menu conteúdo, já voltamos ao menu estilo.

Em menu vamos selecionar “menu página contato”, em horizontal vamos colocar ao centro e em ponto de interrupção vou colocar smartphone, ou seja esta é a opção que vai solucionar o problema da responsividade do menu ao colocar um ícone de menu nos dispositivos móveis, assim como este, depois já te mostro como podemos alterar a cor e o tamanho deste ícone.

Voltamos para o modo desktop. Passamos para o menu estilo e em tipografia colocamos o mesmo tipo de letra que usámos no menu principal para o design ficar consistente. Na opção pairar, vou colocar branco e reduzir ligeiramente a barra da transparência para criar este efeito quando o mouse por cima.

A próxima opção que vou editar é esta que diz “lista suspensa”, em cor do texto vou colocar preto, cor de fundo branco, em tipografia Open Sans e no peso 400.

Como podes ver já temos o tipo de letra configurado, no entanto temos de editar mais algumas coisas.

Vamos alterar as letras quando o rato passa por cima, clicamos em pairar, em cor de texto colocamos preto e na cor de fundo vou usar este cinza claro. E como vou usar este código mais vezes vou copiá-lo.

No tipo de borda podemos editar o contorno da lista, repara que neste caso ele confunde-se com o fundo branco. Eu não quero colocar uma borda sólida, mas quero colocar uma sombra no bloco, seleciono este opção, vou colar
o cinza claro e em borrar vou diminuir de 10 para 5 e temos este efeito de sombra.

Agora vou colocar um divisor entre o item portfolio e serviços e podemos fazer isso com a opção Divisor, tipo de borda “Sólido” na cor voltamos a usar o cinza claro e na largura colocamos 1, repara no que é possível fazermos com este elemento de menu de navegação.

Dá-nos uma flexibilidade impressionante a nível de design e permite-nos editar todos os pormenores do menu. Se quiseres por exemplo mudar este indicador de sub-menu para ficar mais parecido com o menu padrão do OceanWP vens aqui ao menu Conteúdo e na opção Indicador de Sub-menu passas de clássico para ângulo e como podes ver estou menu personalizado ficou com o design igual ao menu padrão do OceanWP.

Isto é muito importante para a consistência do teu design, mas ainda mais importante do que isto é o facto deste elemento nos permitir criar um menu responsivo.

Podemos ver que em Tablet o menu personalizado encontra-se em boas condições, mas em mobile ainda precisa de ser trabalhado.

Então vamos voltar ao modo desktop e criar uma versão do cabeçalho para mostrar apenas em mobile.  Para isso vamos clicar na seção principal com o botão do lado direito e clicamos em Publicar.

Vamos definir o cabeçalho original para mostrar apenas em Desktop e Mobile. Clicamos na edição da seção, vamos ao menu avançado e na opção responsivo vamos esconder esta seção em celulares.

Agora vamos clicar na edição da cópia do cabeçalho > Menu Avançado > Responsivo e vamos esconder esta seção em Desktop e Tablets, ou seja, esta cópia será apenas para mostrar em mobile.

O que podemos fazer aqui para transformar o design do cabeçalho para mobile? Um regra simples para mobile e que funciona quase sempre é centrar tudo.  Lembra-te que os ecrãs mobile são estreitos, portanto o ideal é termos uma coluna por elemento, então vou começar por arrastar o elemento das redes sociais para baixo do logo, vou centrar o elemento e fazer o mesmo com o elemento “lista de ícones”, vamos ao menu estilo e centramos.

Para ver como é que fica o menu em mobile vamos colocar o modo responsivo em mobile, minimizamos e podes ver que o design do cabeçalho para mobile está a ficar bom, mas ainda temos que melhorar este ícone do menu. Vamos colocar a cor branca, aumentar o tamanho e colocar um cinza claro quando o mouse passa por cima.

Não recomendo fazeres essas edições no modo mobile, lembra-te que a seção mobile é a 2ª e não a primeira, mas às vezes o modo mobile tem problemas por isso a melhor forma de garantir que editas a seção correta é fazeres a edição da seção mobile no modo desktop.

Portanto clicamos sobre o elemento menu de navegação, vamos ao menu estilo, abrimos a opção “botão de alternar” na cor colocamos branco, na cor de fundo colocamos transparente arrastando esta barra completamente até baixo. Na opção pairar quando o mouse passa por cima colocamos um cinza muito claro e no fundo voltamos a colocar transparente.

Agora podemos aumentar o tamanho do ícone para 40.

Para ver como é que ficou, colocamos o elementor em modo “mobile” e repara que o design ficou muito melhor e agora quando as pessoas quiserem abrir o menu nos seus celulares podem simplesmente clicar neste ícone para acederem ao menu principal.

Tenho a certeza que este elemento menu de navegação vai ser muito útil nos teus projetos, tanto para os teus sites como para os sites dos teus clientes. Portanto se estiveres interessado em usar o menu de navegação vai até vivedanet.com/pro

Nessa página vais encontrar um tutorial passo a passo que te mostrar cpmo instalar e ativar o Elementor Pro no teu site e também vais encontrar as respostas às tuas perguntas mais frequentes sobre o Elementor Pro.

Muito bem, estamos quase a acabar o tutorial, vamos terminar em beleza com uns pormenores de classe que muita gente se esquece.

Vamos colocar um pouco mais de espaço entre os elementos no modo desktop.
Repara que o logo e o menu encontram-se muito próximos e desalinhados. Vamos criar algum espaço inferior e superior para separar o logo do topo do cabeçalho e do menu e para criar alguma estrutura no design. Vou colocar 30 no espaço superior e 20 no espaço inferior. A utilização do espaço vazio é fundamental para criarmos um bom design.

Como podes ver, com o espaço o cabeçalho fica melhor no modo desktop. Se quiseres ir um pouco mais longe podes fazer uma seção específica só para
mostrar no modo tablet, mas não vou fazer isso neste tutorial senão nunca mais saimos daqui hoje.

Podemos terminar o nosso design colocando o mesmo espaço que temos em cima, aqui em baixo, para isso clicamos na edição da seção principal, retiramos a seleção dos valores em conjunto e em inferior colocamos 10.

Muito bem, agora vamos terminar o tutorial publicando este cabeçalho com menu personalizado na página que desejamos. Para isso clicamos em Atualizar
e desta vez, em vez de clicarmos apenas em Salvar e fechar vamos adicionar uma condição.

Podemos optar por mostrar este cabeçalho no site todo. Ou podemos adicionar uma condição de exclusão. Imagina que queres mostrar este cabeçalho em todas as páginas do site menos na página de blog, então neste caso crias uma nova condição para excluir, selecionas aqui singular, páginas e aqui escreves blog. Ou seja neste caso irias mostrar este cabeçalho em todo site,
menos na página de blog.

Mas neste exemplo eu quero mostrar este cabeçalho apenas na página de contato, então vou apagar estas condições e criar uma nova condição
de inclusão, clicar aqui e selecionar singular, clicamos em todos os singulares e podemos selecionar páginas, também podes optar por mostrar em posts
individuais, neste exemplo vou selecionar páginas e aqui escrevemos o nome da página e selecionamos a página.

Por fim clicamos em Salvar e Fechar.

Agora vamos ver como ficou o nosso cabeçalho personalizado. Copiamos o link do site, abrimos num novo separador, vamos à página Contato e voila,
como podes ver ficámos com um cabeçalho e menu personalizado profissional apenas na página de contato.

Se quiseres também podes colocar o menu fixo no topo quando rolamos para baixo, basta para isso ires até à edição da página, aqui em baixo vais até à opção
que diz sticky header e onde diz sticky header colocas default. Se não tiveres esta opção no teu WordPress eu vou colocar um link na descrição deste vídeo
para um tutorial onde mostro como podes criar um menu fixo no OceanWP.

Por fim vamos clicar em Atualizar, ver página e repara que agora temos o menu fixo no topo.

Muito bem, chegámos ao fim deste tutorial de como criar um cabeçalho personalizado no teu site WordPress com Elementor.

Espero que o tutorial tenha sido útil e que te ajude a criar projetos de webdesign mais profissionais, tanto para ti como para os teus clientes 🙂

Uma forma fantástica de indicares ao YouTube que os meus tutoriais são úteis
é subscreveres ao canal, comentares abaixo e partilhares o tutorial nas redes sociais.

Se gostas do meu conteúdo e quiseres dar apoio ao Vive da Net visita a página de Recursos do meu site em Vivedanet.com/recursos

e faz uma compra de um dos produtos recomendados através dos meus links de afiliado. O teu suporte é muito importante para o Vive da Net e permite-me continuar a ajudar.te com conteúdo gratuito de alta qualidade.

O meu nome é Tiago Dantas do Vivedanet.com obrigado por teres assistido, grande abraço vemo-nos no próximo vídeo. Fui!

O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, e se não me engano este elemento faz parte do elementor pro. Se não tiveres o Elementor Pro a alternativa gratuita é este elemento que diz social icons.

A desvantagem deste elemento gratuito está no facto de não podermos alterar o seu design usando o elementor, por isso vou apagar este elemento e usar o elemento “ícones sociais” do Elementor Pro. Se ainda não tens o Elementor Pro e queres aprender como instalá-lo no teu site podes clicar no link que está na descrição ou ir até vivedanet.com/pro

Nesta página eu mostro-te como podes instalar o elementor pro no teu site – ao realizares a compra do Elementor Pro por este link o Elementor paga-me uma pequena comissão sem custo extra para ti, e por isso obrigado pelo teu suporte

Transcrição do tutorial

Algumas vezes é útil mostrarmos um cabeçalho personalizado numa determinada página do nosso site. Por exemplo na página de contato do teu site pode ser relevante mostrares um cabeçalho diferente das outras páginas do site. Onde podes colocar os links para as tuas redes sociais mais visiveis assim como os teus dados de contato ou por exemplo, podes também optar por ter um cabeçalho personalizado na página de blog do teu site ou da tua loja virtual para indicar aos teus visitantes que estão numa zona diferente do site. Seja qual for a razão que te leva a criar um cabeçalho personalizado, este tutorial vai-te ajudar a fazer isso de forma rápida e grátis. Para além do cabeçalho também vais aprender como podes criar um menu personalizado para mostrar em determinadas páginas do teu site. Ou seja, não tens de ficar preso nem ao cabeçalho nem ao menu principal que criaste no teu tema do WordPress e a melhor parte é que não vais precisar de instalar plugins extra para fazeres isto, tudo o que vais precisar é (quem haveria de ser) o nosso construtor de páginas favorito, Elementor. Olá o meu nome é Tiago Dantas do Vive da Net, o sítio onde designers não programadores recorrem para criar sites profissionais no WordPress sem dores de cabeça. O método que vais aprender neste tutorial funciona para todos os temas compatíveis com o Elementor. Os temas que eu recomendo são o Generate Press e o OceanWP. Deixei o link na descrição para cada um dos temas, juntamente com os meus tutoriais sobre como criar um site WordPress com cada um deles. (colocar links na descrição) Para este tutorial vou assumir que já sabes como editar o cabeçalho do teu site e como criar um menu principal através do menu Personalizar do teu tema. Como vês neste caso, já criei o “menu principal” no OceanWP e estes sãos os itens que fazem parte deste menu. Aqui em baixo defini para que este seja o menu principal do site, por isso sempre que uma pessoa visita o meu site é este o menu que vai aparecer no cabeçalho, como podes ver. Mas imagina que queres criar um cabeçalho diferente para a página de contato e além disso queres ter um menu personalizado nessa página. Repara que quando abrirmos a página de contato podemos ver que tanto o cabeçalho como o menu são iguais ao resto do site. E isso é o que acontece quando usamos as definições do tema para criar o cabeçalho e o menu, ele fica igual em todo o site. Mas imagina por exemplo, que queres alterar o cabeçaho da página de contato e em vez de mostrares o teu logo do lado esquerdo,  queres colocá-lo no centro da página e em relação ao menu não queres mostrar os items Sobre Nós e Contato, ou seja queres também um menu personalizado para esta página. Como é que podemos fazer isto sem afetar tanto o cabeçalho como o menu principal no resto do site? Ou seja, como mostrar esse cabeçalho e menu personalizados apenas numa página do nosso site? É isso que vamos fazer agora. Aperta os cinto vamos começar! Muito bem, o primeiro passo para criarmos o nosso cabeçalho personalizado é ir até ao menu Modelos e clicar em Adicionar novo. No tipo de modelo selecionamos Cabeçalho ou Header se tiver em Inglês e em nome do modelo podemos colocar um nome, este nome é opcional e é só para nos ajudar a identificar o modelo, vou colocar “cabeçalho pagina contato” Clicamos em Criar Modelo e aqui o Elementor dá-nos alguns modelos de cabeçalho prontos para usar, mas como vamos criar o design do nosso cabeçalho do Zero podemos fechar esta página. Como podes ver temos aqui uma seção acima do título e acima da área de conteúdo o que nos indica que estamos a editar o cabeçalho. O design do cabeçalho que vamos criar é este e como podes ver temos 3 colunas a coluna da esquerda com ícones para as redes sociais, a coluna do meio com o logo e a coluna da direita com os contatos. Depois temos uma linha para o menu personalizado. Como é que podemos colocar todos estes elementos dentro de uma seção? Simples. Adicionando o elemento seção interna – que se encontra aqui nos elementos básicos, vamos arrastar o elemento para dentro da paleta e como podes ver temos aqui uma seção interna com duas colunas dentro de uma seção principal. No nosso design precisamos de 3 colunas internas, portanto vamos passar com o mouse por cima da seção interna, clicamos com o botão do lado direito no ícone de coluna da seção interna, não este, mas sim este que está aqui em baixo e clicamos em duplicar. Pronto. Agora temos uma seção interna com 3 colunas e uma seção principal com apenas uma coluna onde podemos colocar o nosso menu personalizado. Agora vamos até à edição da seção principal que é este ícone azul com pontinhos que se encontra no topo, clicamos e repara que estamos na edição da seção. Se te enganares e clicares nesta repara que diz “edição da seção interna” não é esta que vamos editar, portanto certifica-te que clicas na seção aqui em cima onde vai dizer apenas “editar seção”. Vamos ao menu estilo e no fundo podemos colocar uma cor, vou usar este código #003346 e como podes ver a cor de fundo da seção principal preenche a área toda e é esse o efeito que queremos obter. Agora podemos adicionar os ícones das redes sociais na coluna esquerda da seção interna, para isso clicamos neste ícone para voltar abrir a lista de elementos, mas desta vez para não perdemos tempo a rolar à procura do elemento podemos simplesmente procurar aqui em cima escrevendo social e repara que aparecem todos os elementos relacionados com redes sociais. O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, vamos arrastá-lo para a coluna do lado esquerdo. Muito bem agora vamos tratar do design dos ícones. Em conteúdo podemos alterar a ordem dos ícones e ao clicarmos sobre eles podemos alterar o ícone e colocar o link para a nossa página. Neste exemplo vou substituir o Google Plus pelo Instagram e vou alinhar os ícones à esquerda. A seguir passamos para o menu estilo, em cor vou alterar a opção de cor oficial para personalizar. A cor primária controla a cor do quadrado que envolve o logo e neste exemplo não quero que apareça. Portanto vou arrastar a barra da transparência até cá abaixo. Como podes ver os quadrados desapareceram. Mas ainda aparecem quando passamos com o mouse por cima, já vamos tratar disso. A cor secundária controla o ícone da rede social e uma cor clara como o branco fica bem para contrastar com a cor de fundo escura. O branco já está definido como padrão, mas podemos confirmar colocando aqui. Aqui em baixo tens outras opções como por exemplo o tamanho dos ícones, o padding e o espaçamento. Vou deixar estas opções todas em padrão apagando os valores. Agora vamos melhorar o design quando o mouse passa por cima, repara que estas cores originais não ficam bem. Para isso clicamos na opção “ícone ao passar o mouse”. Em cor primária voltamos a trazer a barra da transparência até cá abaixo e em cor secundária colocamos branco e reduzimos muito ligeiramente a barra da transparência. E como podes ver, agora quando passamos com o mouse por cima os ícones ficam com este aspeto mais profissional. Muito bem, antes de continuarmos vamos gravar o nosso trabalho clicando em Publicar, mais logo vamos definir onde queremos mostrar este modelo, por enquanto clicamos apenas em “Salvar e Fechar”. Ok, no próximo passo podemos adicionar o nosso contato do lado direito. Para isso voltamos a abrir os elementos e procuramos por icon, o elemento que procuro é este que diz “lista de ícones” – vamos arrastar para a coluna interna direita. Clicamos sobre o primeiro item, aqui podemos colocar o nosso Whatsapp e no ícone pesquisamos por whats e repara que vai aparecer o logo do Whatsapp, selecionamos, minimizamos o item e passamos para o próximo que é o email. Colocamos o nosso email e em ícone pesquisamos por envelope. Clicamos na aba para minimizar e podemos apagar o terceiro item da lista porque não vamos usar mais nenhum neste exemplo. Muito bem, agora vamos tratar do design no menu estilo. Em primeiro lugar vou alinhar a lista à direita. Em ícone vou colocar a cor branca, claro que podes colocar a cor que quiseres, em tamanho vou aumentar ligeiramente para 20. Em texto vou colocar a cor branca e vou colocar 10 no recuo do texto para aumentar ligeiramente a distância entre o texto e os ícones. Muito bem no próximo passo vamos adicionar o nosso logo à coluna interna do meio e podemos fazer isso de várias formas. Podemos por exemplo arrastar o elemento imagem para a coluna do meio e a seguir só temos de ir buscar o nosso logo à biblioteca de mídia. Vou excluir para mostrar outra forma. Pesquisamos por logo e encontramos aqui um elemento chamado custom header logo, ao arrastarmos este elemento para a página repara que ele vai buscar o nosso logo. E ele vai buscar o logo que fizemos upload no menu Personalizar do tema. A desvantagem deste elemento é que a única opção que temos é a posição, colocamos ao centro e é só isso que podemos fazer com este elemento. Também podemos usar o elemento “logo do site” que se encontra já aqui no menu Site, este é um elemento que pertence à versão pro do Elementor portanto vais ter mais flexibilidade no design. O que eu gosto de fazer é ajustar o tamanho da imagem. Para isso seleciono aqui Personalizado, e em largura coloco 100 não é preciso colocar nada em altura porque ao clicarmos em aplicar o Elementor calcula automaticamente o rácio certo para o valor da altura. E como podes ver o tamanho do logo é reduzido. Se quiseres um tamanho maior é só aumentares aqui a largura. Outra opção interessante é aqui no menu estilo, podemos diminuir a opacidade do logo e cria este efeito. Lembra-te que se não tiveres o Elementor Pro podes usar o elemento “imagem” ou o elemento “custom header logo” que te mostrei à pouco. O próximo passo é adicionar o menu ao cabeçalho e podemos fazer isso com dois elementos. Vamos pesquisar por “menu” e as duas opções são o elemento “custom menu” e o elemento “Menu de navegação”. Este elemento já vem como padrão na versão gratuita do Elementor e este pertence à versão profissional. Eu vou-te mostrar como é que funciona cada um deles para criares o teu menu personalizado e explicar-te as vantagens e desvantagens de cada um. Vamos começar pelo elemento gratuito e podemos arrastá-lo para esta linha que pertence à seção principal. Repara que deves largar o elemento quando a largura da seção principal se encontra selecionada e não numa das colunas da seção interna. Agora podemos editar o elemento custom menu do lado esquerdo. Na opção Select Menu selecionamos o menu e neste exemplo tenho as opções menu mobile e menu principal. Vou escolher menu principal e na posição vou colocar ao centro. Descemos um pouco e na opção Menu Link color colocamos o código da cor branca que é # seguido de 6fs e na cor menu link hover colocamos este código de cor para obtermos este efeito subtil quando o mouse passa por cima. Na altura da fonte em “font size” vou colocar 14 e como podes ver o nosso menu está pronto. No entanto lembra-te que no início eu disse que queria criar um menu personalizado para esta página sem os itens sobre nós e contato. Portanto como é que podemos fazer isso? Vou guardar o que fizemos até agora clicando em Atualizar > Salvar e Fechar Vamos clicar aqui neste ícone e vamos sair para o painel. Para criarmos o nosso menu personalizado vamos a Aparência > Personalizar Menus e vamos criar um novo menu que vou dar o nome de “menu página contato” Na localização do menu não selecionamos nada, se selecionares principal o tema vai substituir este menu pelo menu principal portanto aqui na opção localizações de menu não coloques nada. Vamos sim clicar neste botão que diz “Adicionar itens” e agora sim vamos adicionar os itens ao nosso menu que neste caso não são páginas mas sim links personalizados. O primeiro é Planos. Aqui no link vou colocar a página principal como exemplo, claro neste caso deves colocar aqui um link âncora para a seção correspondente da página. Um link âncora é um link que se encontra dentro da própria página e ao clicarmos nele somos levados à seção correspondente, como neste exemplo. Se quiseres aprender como criar links âncora no menu do teu site para criares o efeito one page, coloquei um tutorial na descrição que te ensina o passo a passo para criar este tipo de menus. Voltando ao tutorial eu aqui vou colocar só o link do site para ser mais rápido e vou clicar em “adicionar ao menu”. O próximo item é “Nosso trabalho”, mais uma vez coloco aqui o link do site e vou adicionar ao menu. Podemos ver que o menu Nosso trabalho tem os sub-menus portfolio e serviços, portanto vamos criar esses dois itens. Para torná-los sub-menus basta arrastá-lo para a direita do item “Nosso trabalho” como neste exemplo. Vou finalizar o menu personalizado com o item Blog e neste caso o blog é uma página. Clicamos em Adicionar itens vamos a páginas selecionamos a página do blog, como podes ver já aparece aqui no menu. Vamos clicar sobre o item e no rótulo de navegação vamos colocar blog com letras maiúsculas. Muito bem, por fim clicamos em Publicar. Agora podemos fechar o menu personalizar e voltar para a edição do cabeçalho. Vou te mostrar outra forma de chegares até aqui. Clicas em Modelos, modelos salvos e vais reparar que muitas vezes não vão aparecer aqui os teus modelos de cabeçalho apesar de teres gravado tudo, isto é um erro do Elementor. A solução para isso é procurares o modelo através do nome, por isso é muito importante dares um nome ao teu modelo, vou escrever aqui “cabeçalho” e repara que já aparecem aqui mais barras em cima e aqui aparece o nosso modelo, vamos clicar “em editar com Elementor”. Clicamos no elemento custom menu, na opção “select menu” vamos escolher aqui “menu página de contato” e repara como o nosso menu personalizado fica impecável, pelo menos em desktop. Vamos ver como é fica em Tablet, repara que não fica nada mal e por fim vamos ver como é que fica em Mobile e aqui é que começam os problemas e não me estou a referir ao alinhamento destes elementos, isso é fácil de tratar, já te mostro mais logo. Estou-me a referir ao aspeto do menu personalizado. Neste exemplo o problema não parece muito óbvio porque temos poucos itens no menu, mas se o teu site ou o site do teu cliente tiver muitos itens, como neste exemplo, repara que o menu fica uma grande confusão. Para além disso, outra desvantagem deste elemento é o facto de não podermos editar o menu através das opções que temos do lado esquerdo e pode tornar o nosso design inconsistente. Portanto estas são as principais limitações do elemento custom menu. Por isso vou-te mostrar agora um elemento que tem a solução para estes dois problemas que é o Elemento Nav menu da versão profissional do Elementor. Vamos voltar ao modo desktop, excluimos este elemento e vamos arrastar o Elemento Menu de Navegação, que se encontra aqui para a seção principal. Antes de editar o menu conteúdo deste elemento vou ao menu estilo só para colocar a cor do texto branco, dessa para conseguirmos ver melhor as alterações. Vamos passar para o menu conteúdo, já voltamos ao menu estilo. Em menu vamos selecionar “menu página contato”, em horizontal vamos colocar ao centro e em ponto de interrupção vou colocar smartphone, ou seja esta é a opção que vai solucionar o problema da responsividade do menu ao colocar um ícone de menu nos dispositivos móveis, assim como este, depois já te mostro como podemos alterar a cor e o tamanho deste ícone. Voltamos para o modo desktop. Passamos para o menu estilo e em tipografia colocamos o mesmo tipo de letra que usámos no menu principal para o design ficar consistente. Na opção pairar, vou colocar branco e reduzir ligeiramente a barra da transparência para criar este efeito quando o mouse por cima. A próxima opção que vou editar é esta que diz “lista suspensa”, em cor do texto vou colocar preto, cor de fundo branco, em tipografia Open Sans e no peso 400. Como podes ver já temos o tipo de letra configurado, no entanto temos de editar mais algumas coisas. Vamos alterar as letras quando o rato passa por cima, clicamos em pairar, em cor de texto colocamos preto e na cor de fundo vou usar este cinza claro. E como vou usar este código mais vezes vou copiá-lo. No tipo de borda podemos editar o contorno da lista, repara que neste caso ele confunde-se com o fundo branco. Eu não quero colocar uma borda sólida, mas quero colocar uma sombra no bloco, seleciono este opção, vou colar o cinza claro e em borrar vou diminuir de 10 para 5 e temos este efeito de sombra. Agora vou colocar um divisor entre o item portfolio e serviços e podemos fazer isso com a opção Divisor, tipo de borda “Sólido” na cor voltamos a usar o cinza claro e na largura colocamos 1, repara no que é possível fazermos com este elemento de menu de navegação. Dá-nos uma flexibilidade impressionante a nível de design e permite-nos editar todos os pormenores do menu. Se quiseres por exemplo mudar este indicador de sub-menu para ficar mais parecido com o menu padrão do OceanWP vens aqui ao menu Conteúdo e na opção Indicador de Sub-menu passas de clássico para ângulo e como podes ver estou menu personalizado ficou com o design igual ao menu padrão do OceanWP. Isto é muito importante para a consistência do teu design, mas ainda mais importante do que isto é o facto deste elemento nos permitir criar um menu responsivo. Podemos ver que em Tablet o menu personalizado encontra-se em boas condições, mas em mobile ainda precisa de ser trabalhado. Então vamos voltar ao modo desktop e criar uma versão do cabeçalho para mostrar apenas em mobile.  Para isso vamos clicar na seção principal com o botão do lado direito e clicamos em Publicar. Vamos definir o cabeçalho original para mostrar apenas em Desktop e Mobile. Clicamos na edição da seção, vamos ao menu avançado e na opção responsivo vamos esconder esta seção em celulares. Agora vamos clicar na edição da cópia do cabeçalho > Menu Avançado > Responsivo e vamos esconder esta seção em Desktop e Tablets, ou seja, esta cópia será apenas para mostrar em mobile. O que podemos fazer aqui para transformar o design do cabeçalho para mobile? Um regra simples para mobile e que funciona quase sempre é centrar tudo.  Lembra-te que os ecrãs mobile são estreitos, portanto o ideal é termos uma coluna por elemento, então vou começar por arrastar o elemento das redes sociais para baixo do logo, vou centrar o elemento e fazer o mesmo com o elemento “lista de ícones”, vamos ao menu estilo e centramos. Para ver como é que fica o menu em mobile vamos colocar o modo responsivo em mobile, minimizamos e podes ver que o design do cabeçalho para mobile está a ficar bom, mas ainda temos que melhorar este ícone do menu. Vamos colocar a cor branca, aumentar o tamanho e colocar um cinza claro quando o mouse passa por cima. Não recomendo fazeres essas edições no modo mobile, lembra-te que a seção mobile é a 2ª e não a primeira, mas às vezes o modo mobile tem problemas por isso a melhor forma de garantir que editas a seção correta é fazeres a edição da seção mobile no modo desktop. Portanto clicamos sobre o elemento menu de navegação, vamos ao menu estilo, abrimos a opção “botão de alternar” na cor colocamos branco, na cor de fundo colocamos transparente arrastando esta barra completamente até baixo. Na opção pairar quando o mouse passa por cima colocamos um cinza muito claro e no fundo voltamos a colocar transparente. Agora podemos aumentar o tamanho do ícone para 40. Para ver como é que ficou, colocamos o elementor em modo “mobile” e repara que o design ficou muito melhor e agora quando as pessoas quiserem abrir o menu nos seus celulares podem simplesmente clicar neste ícone para acederem ao menu principal. Tenho a certeza que este elemento menu de navegação vai ser muito útil nos teus projetos, tanto para os teus sites como para os sites dos teus clientes. Portanto se estiveres interessado em usar o menu de navegação vai até vivedanet.com/pro Nessa página vais encontrar um tutorial passo a passo que te mostrar cpmo instalar e ativar o Elementor Pro no teu site e também vais encontrar as respostas às tuas perguntas mais frequentes sobre o Elementor Pro. Muito bem, estamos quase a acabar o tutorial, vamos terminar em beleza com uns pormenores de classe que muita gente se esquece. Vamos colocar um pouco mais de espaço entre os elementos no modo desktop. Repara que o logo e o menu encontram-se muito próximos e desalinhados. Vamos criar algum espaço inferior e superior para separar o logo do topo do cabeçalho e do menu e para criar alguma estrutura no design. Vou colocar 30 no espaço superior e 20 no espaço inferior. A utilização do espaço vazio é fundamental para criarmos um bom design. Como podes ver, com o espaço o cabeçalho fica melhor no modo desktop. Se quiseres ir um pouco mais longe podes fazer uma seção específica só para mostrar no modo tablet, mas não vou fazer isso neste tutorial senão nunca mais saimos daqui hoje. Podemos terminar o nosso design colocando o mesmo espaço que temos em cima, aqui em baixo, para isso clicamos na edição da seção principal, retiramos a seleção dos valores em conjunto e em inferior colocamos 10. Muito bem, agora vamos terminar o tutorial publicando este cabeçalho com menu personalizado na página que desejamos. Para isso clicamos em Atualizar e desta vez, em vez de clicarmos apenas em Salvar e fechar vamos adicionar uma condição. Podemos optar por mostrar este cabeçalho no site todo. Ou podemos adicionar uma condição de exclusão. Imagina que queres mostrar este cabeçalho em todas as páginas do site menos na página de blog, então neste caso crias uma nova condição para excluir, selecionas aqui singular, páginas e aqui escreves blog. Ou seja neste caso irias mostrar este cabeçalho em todo site, menos na página de blog. Mas neste exemplo eu quero mostrar este cabeçalho apenas na página de contato, então vou apagar estas condições e criar uma nova condição de inclusão, clicar aqui e selecionar singular, clicamos em todos os singulares e podemos selecionar páginas, também podes optar por mostrar em posts individuais, neste exemplo vou selecionar páginas e aqui escrevemos o nome da página e selecionamos a página. Por fim clicamos em Salvar e Fechar. Agora vamos ver como ficou o nosso cabeçalho personalizado. Copiamos o link do site, abrimos num novo separador, vamos à página Contato e voila, como podes ver ficámos com um cabeçalho e menu personalizado profissional apenas na página de contato. Se quiseres também podes colocar o menu fixo no topo quando rolamos para baixo, basta para isso ires até à edição da página, aqui em baixo vais até à opção que diz sticky header e onde diz sticky header colocas default. Se não tiveres esta opção no teu WordPress eu vou colocar um link na descrição deste vídeo para um tutorial onde mostro como podes criar um menu fixo no OceanWP. Por fim vamos clicar em Atualizar, ver página e repara que agora temos o menu fixo no topo. Muito bem, chegámos ao fim deste tutorial de como criar um cabeçalho personalizado no teu site WordPress com Elementor. Espero que o tutorial tenha sido útil e que te ajude a criar projetos de webdesign mais profissionais, tanto para ti como para os teus clientes 🙂 Uma forma fantástica de indicares ao YouTube que os meus tutoriais são úteis é subscreveres ao canal, comentares abaixo e partilhares o tutorial nas redes sociais. Se gostas do meu conteúdo e quiseres dar apoio ao Vive da Net visita a página de Recursos do meu site em Vivedanet.com/recursos e faz uma compra de um dos produtos recomendados através dos meus links de afiliado. O teu suporte é muito importante para o Vive da Net e permite-me continuar a ajudar.te com conteúdo gratuito de alta qualidade. O meu nome é Tiago Dantas do Vivedanet.com obrigado por teres assistido, grande abraço vemo-nos no próximo vídeo. Fui! O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, e se não me engano este elemento faz parte do elementor pro. Se não tiveres o Elementor Pro a alternativa gratuita é este elemento que diz social icons. A desvantagem deste elemento gratuito está no facto de não podermos alterar o seu design usando o elementor, por isso vou apagar este elemento e usar o elemento “ícones sociais” do Elementor Pro. Se ainda não tens o Elementor Pro e queres aprender como instalá-lo no teu site podes clicar no link que está na descrição ou ir até vivedanet.com/pro Nesta página eu mostro-te como podes instalar o elementor pro no teu site – ao realizares a compra do Elementor Pro por este link o Elementor paga-me uma pequena comissão sem custo extra para ti, e por isso obrigado pelo teu suporte

Transcrição do tutorial

Algumas vezes é útil mostrarmos um cabeçalho personalizado numa determinada página do nosso site.

Por exemplo na página de contato do teu site pode ser relevante mostrares
um cabeçalho diferente das outras páginas do site.

Onde podes colocar os links para as tuas redes sociais mais visiveis assim como os teus dados de contato ou por exemplo, podes também optar por ter um cabeçalho personalizado na página de blog do teu site ou da tua loja virtual para indicar aos teus visitantes que estão numa zona diferente do site.

Seja qual for a razão que te leva a criar um cabeçalho personalizado, este tutorial vai-te ajudar a fazer isso de forma rápida e grátis.

Para além do cabeçalho também vais aprender como podes criar um menu personalizado para mostrar em determinadas páginas do teu site.

Ou seja, não tens de ficar preso nem ao cabeçalho nem ao menu principal que criaste no teu tema do WordPress e a melhor parte é que não vais precisar de instalar plugins extra para fazeres isto, tudo o que vais precisar é (quem haveria de ser) o nosso construtor de páginas favorito, Elementor.

Olá o meu nome é Tiago Dantas do Vive da Net, o sítio onde designers não programadores recorrem para criar sites profissionais no WordPress sem dores de cabeça.

O método que vais aprender neste tutorial funciona para todos os temas compatíveis com o Elementor.

Os temas que eu recomendo são o Generate Press e o OceanWP.

Deixei o link na descrição para cada um dos temas, juntamente com os meus tutoriais sobre como criar um site WordPress com cada um deles. (colocar links na descrição)

Para este tutorial vou assumir que já sabes como editar o cabeçalho do teu site e como criar um menu principal através do menu Personalizar do teu tema.

Como vês neste caso, já criei o “menu principal” no OceanWP e estes sãos os itens que fazem parte deste menu.

Aqui em baixo defini para que este seja o menu principal do site, por isso sempre que uma pessoa visita o meu site é este o menu que vai aparecer no cabeçalho, como podes ver.

Mas imagina que queres criar um cabeçalho diferente para a página de contato e além disso queres ter um menu personalizado nessa página.

Repara que quando abrirmos a página de contato podemos ver que tanto o cabeçalho como o menu são iguais ao resto do site.

E isso é o que acontece quando usamos as definições do tema para criar o cabeçalho e o menu, ele fica igual em todo o site.

Mas imagina por exemplo, que queres alterar o cabeçaho da página de contato e em vez de mostrares o teu logo do lado esquerdo,  queres colocá-lo no centro da página e em relação ao menu não queres mostrar os items Sobre Nós e Contato, ou seja queres também um menu personalizado para esta página.

Como é que podemos fazer isto sem afetar tanto o cabeçalho como o menu principal no resto do site? Ou seja, como mostrar esse cabeçalho e menu personalizados apenas numa página do nosso site?

É isso que vamos fazer agora. Aperta os cinto vamos começar!

Muito bem, o primeiro passo para criarmos o nosso cabeçalho personalizado é ir até ao menu Modelos e clicar em Adicionar novo.

No tipo de modelo selecionamos Cabeçalho ou Header se tiver em Inglês e em nome do modelo podemos colocar um nome, este nome é opcional e é só para nos ajudar a identificar o modelo, vou colocar “cabeçalho pagina contato”

Clicamos em Criar Modelo e aqui o Elementor dá-nos alguns modelos de cabeçalho prontos para usar, mas como vamos criar o design do nosso cabeçalho do Zero podemos fechar esta página.

Como podes ver temos aqui uma seção acima do título e acima da área de conteúdo o que nos indica que estamos a editar o cabeçalho.

O design do cabeçalho que vamos criar é este e como podes ver temos 3 colunas a coluna da esquerda com ícones para as redes sociais, a coluna do meio com o logo e a coluna da direita com os contatos. Depois temos uma linha para o menu personalizado.

Como é que podemos colocar todos estes elementos dentro de uma seção?

Simples. Adicionando o elemento seção interna – que se encontra aqui nos elementos básicos, vamos arrastar o elemento para dentro da paleta e como podes ver temos aqui uma seção interna com duas colunas dentro de uma seção principal.

No nosso design precisamos de 3 colunas internas, portanto vamos passar com o mouse por cima da seção interna, clicamos com o botão do lado direito no ícone de coluna da seção interna, não este, mas sim este que está aqui
em baixo e clicamos em duplicar.

Pronto. Agora temos uma seção interna com 3 colunas e uma seção principal com apenas uma coluna onde podemos colocar o nosso menu personalizado.

Agora vamos até à edição da seção principal que é este ícone azul com pontinhos que se encontra no topo, clicamos e repara que estamos na edição da seção. Se te enganares e clicares nesta repara que diz “edição da seção interna”
não é esta que vamos editar, portanto certifica-te que clicas na seção aqui em cima onde vai dizer apenas “editar seção”.

Vamos ao menu estilo e no fundo podemos colocar uma cor, vou usar este código #003346 e como podes ver a cor de fundo da seção principal preenche a área toda e é esse o efeito que queremos obter.

Agora podemos adicionar os ícones das redes sociais na coluna esquerda da seção interna, para isso clicamos neste ícone para voltar abrir a lista de elementos, mas desta vez para não perdemos tempo a rolar à procura do elemento podemos simplesmente procurar aqui em cima escrevendo social e repara que aparecem todos os elementos relacionados com redes sociais.

O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, vamos arrastá-lo para a coluna do lado esquerdo.

Muito bem agora vamos tratar do design dos ícones. Em conteúdo podemos alterar a ordem dos ícones e ao clicarmos sobre eles podemos alterar o ícone e colocar o link para a nossa página. Neste exemplo vou substituir o Google Plus pelo Instagram e vou alinhar os ícones à esquerda.

A seguir passamos para o menu estilo, em cor vou alterar a opção de cor oficial para personalizar. A cor primária controla a cor do quadrado que envolve o logo e neste exemplo não quero que apareça.

Portanto vou arrastar a barra da transparência até cá abaixo. Como podes ver os quadrados desapareceram. Mas ainda aparecem quando passamos com o mouse por cima, já vamos tratar disso.

A cor secundária controla o ícone da rede social e uma cor clara como o branco fica bem para contrastar com a cor de fundo escura. O branco já está definido como padrão, mas podemos confirmar colocando aqui.

Aqui em baixo tens outras opções como por exemplo o tamanho dos ícones, o padding e o espaçamento. Vou deixar estas opções todas em padrão apagando os valores.

Agora vamos melhorar o design quando o mouse passa por cima, repara que estas cores originais não ficam bem.

Para isso clicamos na opção “ícone ao passar o mouse”.

Em cor primária voltamos a trazer a barra da transparência até cá abaixo e em cor secundária colocamos branco e reduzimos muito ligeiramente a barra da transparência.

E como podes ver, agora quando passamos com o mouse por cima os ícones ficam com este aspeto mais profissional.

Muito bem, antes de continuarmos vamos gravar o nosso trabalho clicando em Publicar, mais logo vamos definir onde queremos mostrar este modelo, por enquanto clicamos apenas em “Salvar e Fechar”.

Ok, no próximo passo podemos adicionar o nosso contato do lado direito.

Para isso voltamos a abrir os elementos e procuramos por icon, o elemento que procuro é este que diz “lista de ícones” – vamos arrastar para a coluna interna direita.

Clicamos sobre o primeiro item, aqui podemos colocar o nosso Whatsapp e no ícone pesquisamos por whats e repara que vai aparecer o logo do Whatsapp, selecionamos, minimizamos o item e passamos para o próximo que é o email. Colocamos o nosso email e em ícone pesquisamos por envelope. Clicamos na aba para minimizar e podemos apagar o terceiro item da lista porque não vamos usar mais nenhum neste exemplo.

Muito bem, agora vamos tratar do design no menu estilo. Em primeiro lugar vou alinhar a lista à direita. Em ícone vou colocar a cor branca, claro que podes colocar a cor que quiseres, em tamanho vou aumentar ligeiramente para 20.

Em texto vou colocar a cor branca e vou colocar 10 no recuo do texto para aumentar ligeiramente a distância entre o texto e os ícones.

Muito bem no próximo passo vamos adicionar o nosso logo à coluna interna do meio e podemos fazer isso de várias formas.

Podemos por exemplo arrastar o elemento imagem para a coluna do meio e a seguir só temos de ir buscar o nosso logo à biblioteca de mídia. Vou excluir para mostrar outra forma. Pesquisamos por logo e encontramos aqui um elemento chamado custom header logo, ao arrastarmos este elemento para a página repara que ele vai buscar o nosso logo. E ele vai buscar o logo que fizemos upload no menu Personalizar do tema.

A desvantagem deste elemento é que a única opção que temos é a posição, colocamos ao centro e é só isso que podemos fazer com este elemento.

Também podemos usar o elemento “logo do site” que se encontra já aqui no menu Site, este é um elemento que pertence à versão pro do Elementor portanto vais ter mais flexibilidade no design.

O que eu gosto de fazer é ajustar o tamanho da imagem. Para isso seleciono aqui Personalizado, e em largura coloco 100 não é preciso colocar nada em altura porque ao clicarmos em aplicar o Elementor calcula automaticamente
o rácio certo para o valor da altura. E como podes ver o tamanho do logo é reduzido. Se quiseres um tamanho maior é só aumentares aqui a largura. Outra opção interessante é aqui no menu estilo, podemos diminuir a opacidade do logo e cria este efeito.

Lembra-te que se não tiveres o Elementor Pro podes usar o elemento “imagem” ou o elemento “custom header logo” que te mostrei à pouco.

O próximo passo é adicionar o menu ao cabeçalho e podemos fazer isso com dois elementos. Vamos pesquisar por “menu” e as duas opções são o elemento “custom menu” e o elemento “Menu de navegação”. Este elemento já vem como padrão na versão gratuita do Elementor e este pertence à versão profissional.

Eu vou-te mostrar como é que funciona cada um deles para criares o teu menu personalizado e explicar-te as vantagens e desvantagens de cada um.

Vamos começar pelo elemento gratuito e podemos arrastá-lo para esta linha que pertence à seção principal. Repara que deves largar o elemento quando a largura da seção principal se encontra selecionada e não numa das colunas da seção interna.

Agora podemos editar o elemento custom menu do lado esquerdo. Na opção Select Menu selecionamos o menu e neste exemplo tenho as opções menu mobile e menu principal. Vou escolher menu principal e na posição vou colocar ao centro.

Descemos um pouco e na opção Menu Link color colocamos o código da cor branca que é # seguido de 6fs e na cor menu link hover

colocamos este código de cor para obtermos este efeito subtil quando o mouse passa por cima.

Na altura da fonte em “font size” vou colocar 14 e como podes ver o nosso menu está pronto. No entanto lembra-te que no início eu disse que queria criar um menu personalizado para esta página sem os itens sobre nós e contato.

Portanto como é que podemos fazer isso? Vou guardar o que fizemos até agora clicando em Atualizar > Salvar e Fechar

Vamos clicar aqui neste ícone e vamos sair para o painel. Para criarmos o nosso menu personalizado vamos a Aparência > Personalizar Menus e vamos criar um novo menu que vou dar o nome de “menu página contato”

Na localização do menu não selecionamos nada, se selecionares principal o tema vai substituir este menu pelo menu principal portanto aqui na opção localizações de menu não coloques nada.

Vamos sim clicar neste botão que diz “Adicionar itens” e agora sim vamos adicionar os itens ao nosso menu que neste caso não são páginas mas sim links personalizados. O primeiro é Planos. Aqui no link vou colocar a página principal
como exemplo, claro neste caso deves colocar aqui um link âncora para a seção correspondente da página.

Um link âncora é um link que se encontra dentro da própria página e ao clicarmos nele somos levados à seção correspondente, como neste exemplo.

Se quiseres aprender como criar links âncora no menu do teu site para criares o efeito one page, coloquei um tutorial na descrição que te ensina o passo a passo para criar este tipo de menus.

Voltando ao tutorial eu aqui vou colocar só o link do site para ser mais rápido e vou clicar em “adicionar ao menu”.

O próximo item é “Nosso trabalho”, mais uma vez coloco aqui o link do site e vou adicionar ao menu. Podemos ver que o menu Nosso trabalho tem os sub-menus portfolio e serviços, portanto vamos criar esses dois itens. Para torná-los sub-menus basta arrastá-lo para a direita do item “Nosso trabalho” como neste exemplo.

Vou finalizar o menu personalizado com o item Blog e neste caso o blog é uma página. Clicamos em Adicionar itens vamos a páginas selecionamos a página do blog, como podes ver já aparece aqui no menu. Vamos clicar sobre o item e no rótulo de navegação vamos colocar blog com letras maiúsculas.

Muito bem, por fim clicamos em Publicar. Agora podemos fechar o menu personalizar e voltar para a edição do cabeçalho.

Vou te mostrar outra forma de chegares até aqui. Clicas em Modelos, modelos salvos e vais reparar que muitas vezes não vão aparecer aqui os teus modelos de cabeçalho apesar de teres gravado tudo, isto é um erro do Elementor.

A solução para isso é procurares o modelo através do nome, por isso é muito importante dares um nome ao teu modelo, vou escrever aqui “cabeçalho” e repara que já aparecem aqui mais barras em cima e aqui aparece o nosso modelo, vamos clicar “em editar com Elementor”.

Clicamos no elemento custom menu, na opção “select menu” vamos escolher aqui “menu página de contato” e repara como o nosso menu personalizado fica impecável, pelo menos em desktop.

Vamos ver como é fica em Tablet, repara que não fica nada mal e por fim vamos ver como é que fica em Mobile e aqui é que começam os problemas e não me estou a referir ao alinhamento destes elementos, isso é fácil de tratar, já te mostro mais logo.

Estou-me a referir ao aspeto do menu personalizado. Neste exemplo o problema não parece muito óbvio porque temos poucos itens no menu, mas se o teu site ou o site do teu cliente tiver muitos itens, como neste exemplo, repara que o menu fica uma grande confusão.

Para além disso, outra desvantagem deste elemento é o facto de não podermos editar o menu através das opções que temos do lado esquerdo e pode tornar o nosso design inconsistente. Portanto estas são as principais limitações do elemento custom menu.

Por isso vou-te mostrar agora um elemento que tem a solução para estes dois problemas que é o Elemento Nav menu da versão profissional do Elementor.

Vamos voltar ao modo desktop, excluimos este elemento e vamos arrastar o Elemento Menu de Navegação, que se encontra aqui para a seção principal.
Antes de editar o menu conteúdo deste elemento vou ao menu estilo só para colocar a cor do texto branco, dessa para conseguirmos ver melhor as alterações. Vamos passar para o menu conteúdo, já voltamos ao menu estilo.

Em menu vamos selecionar “menu página contato”, em horizontal vamos colocar ao centro e em ponto de interrupção vou colocar smartphone, ou seja esta é a opção que vai solucionar o problema da responsividade do menu ao colocar um ícone de menu nos dispositivos móveis, assim como este, depois já te mostro como podemos alterar a cor e o tamanho deste ícone.

Voltamos para o modo desktop. Passamos para o menu estilo e em tipografia colocamos o mesmo tipo de letra que usámos no menu principal para o design ficar consistente. Na opção pairar, vou colocar branco e reduzir ligeiramente a barra da transparência para criar este efeito quando o mouse por cima.

A próxima opção que vou editar é esta que diz “lista suspensa”, em cor do texto vou colocar preto, cor de fundo branco, em tipografia Open Sans e no peso 400.

Como podes ver já temos o tipo de letra configurado, no entanto temos de editar mais algumas coisas.

Vamos alterar as letras quando o rato passa por cima, clicamos em pairar, em cor de texto colocamos preto e na cor de fundo vou usar este cinza claro. E como vou usar este código mais vezes vou copiá-lo.

No tipo de borda podemos editar o contorno da lista, repara que neste caso ele confunde-se com o fundo branco. Eu não quero colocar uma borda sólida, mas quero colocar uma sombra no bloco, seleciono este opção, vou colar
o cinza claro e em borrar vou diminuir de 10 para 5 e temos este efeito de sombra.

Agora vou colocar um divisor entre o item portfolio e serviços e podemos fazer isso com a opção Divisor, tipo de borda “Sólido” na cor voltamos a usar o cinza claro e na largura colocamos 1, repara no que é possível fazermos com este elemento de menu de navegação.

Dá-nos uma flexibilidade impressionante a nível de design e permite-nos editar todos os pormenores do menu. Se quiseres por exemplo mudar este indicador de sub-menu para ficar mais parecido com o menu padrão do OceanWP vens aqui ao menu Conteúdo e na opção Indicador de Sub-menu passas de clássico para ângulo e como podes ver estou menu personalizado ficou com o design igual ao menu padrão do OceanWP.

Isto é muito importante para a consistência do teu design, mas ainda mais importante do que isto é o facto deste elemento nos permitir criar um menu responsivo.

Podemos ver que em Tablet o menu personalizado encontra-se em boas condições, mas em mobile ainda precisa de ser trabalhado.

Então vamos voltar ao modo desktop e criar uma versão do cabeçalho para mostrar apenas em mobile.  Para isso vamos clicar na seção principal com o botão do lado direito e clicamos em Publicar.

Vamos definir o cabeçalho original para mostrar apenas em Desktop e Mobile. Clicamos na edição da seção, vamos ao menu avançado e na opção responsivo vamos esconder esta seção em celulares.

Agora vamos clicar na edição da cópia do cabeçalho > Menu Avançado > Responsivo e vamos esconder esta seção em Desktop e Tablets, ou seja, esta cópia será apenas para mostrar em mobile.

O que podemos fazer aqui para transformar o design do cabeçalho para mobile? Um regra simples para mobile e que funciona quase sempre é centrar tudo.  Lembra-te que os ecrãs mobile são estreitos, portanto o ideal é termos uma coluna por elemento, então vou começar por arrastar o elemento das redes sociais para baixo do logo, vou centrar o elemento e fazer o mesmo com o elemento “lista de ícones”, vamos ao menu estilo e centramos.

Para ver como é que fica o menu em mobile vamos colocar o modo responsivo em mobile, minimizamos e podes ver que o design do cabeçalho para mobile está a ficar bom, mas ainda temos que melhorar este ícone do menu. Vamos colocar a cor branca, aumentar o tamanho e colocar um cinza claro quando o mouse passa por cima.

Não recomendo fazeres essas edições no modo mobile, lembra-te que a seção mobile é a 2ª e não a primeira, mas às vezes o modo mobile tem problemas por isso a melhor forma de garantir que editas a seção correta é fazeres a edição da seção mobile no modo desktop.

Portanto clicamos sobre o elemento menu de navegação, vamos ao menu estilo, abrimos a opção “botão de alternar” na cor colocamos branco, na cor de fundo colocamos transparente arrastando esta barra completamente até baixo. Na opção pairar quando o mouse passa por cima colocamos um cinza muito claro e no fundo voltamos a colocar transparente.

Agora podemos aumentar o tamanho do ícone para 40.

Para ver como é que ficou, colocamos o elementor em modo “mobile” e repara que o design ficou muito melhor e agora quando as pessoas quiserem abrir o menu nos seus celulares podem simplesmente clicar neste ícone para acederem ao menu principal.

Tenho a certeza que este elemento menu de navegação vai ser muito útil nos teus projetos, tanto para os teus sites como para os sites dos teus clientes. Portanto se estiveres interessado em usar o menu de navegação vai até vivedanet.com/pro

Nessa página vais encontrar um tutorial passo a passo que te mostrar cpmo instalar e ativar o Elementor Pro no teu site e também vais encontrar as respostas às tuas perguntas mais frequentes sobre o Elementor Pro.

Muito bem, estamos quase a acabar o tutorial, vamos terminar em beleza com uns pormenores de classe que muita gente se esquece.

Vamos colocar um pouco mais de espaço entre os elementos no modo desktop.
Repara que o logo e o menu encontram-se muito próximos e desalinhados. Vamos criar algum espaço inferior e superior para separar o logo do topo do cabeçalho e do menu e para criar alguma estrutura no design. Vou colocar 30 no espaço superior e 20 no espaço inferior. A utilização do espaço vazio é fundamental para criarmos um bom design.

Como podes ver, com o espaço o cabeçalho fica melhor no modo desktop. Se quiseres ir um pouco mais longe podes fazer uma seção específica só para
mostrar no modo tablet, mas não vou fazer isso neste tutorial senão nunca mais saimos daqui hoje.

Podemos terminar o nosso design colocando o mesmo espaço que temos em cima, aqui em baixo, para isso clicamos na edição da seção principal, retiramos a seleção dos valores em conjunto e em inferior colocamos 10.

Muito bem, agora vamos terminar o tutorial publicando este cabeçalho com menu personalizado na página que desejamos. Para isso clicamos em Atualizar
e desta vez, em vez de clicarmos apenas em Salvar e fechar vamos adicionar uma condição.

Podemos optar por mostrar este cabeçalho no site todo. Ou podemos adicionar uma condição de exclusão. Imagina que queres mostrar este cabeçalho em todas as páginas do site menos na página de blog, então neste caso crias uma nova condição para excluir, selecionas aqui singular, páginas e aqui escreves blog. Ou seja neste caso irias mostrar este cabeçalho em todo site,
menos na página de blog.

Mas neste exemplo eu quero mostrar este cabeçalho apenas na página de contato, então vou apagar estas condições e criar uma nova condição
de inclusão, clicar aqui e selecionar singular, clicamos em todos os singulares e podemos selecionar páginas, também podes optar por mostrar em posts
individuais, neste exemplo vou selecionar páginas e aqui escrevemos o nome da página e selecionamos a página.

Por fim clicamos em Salvar e Fechar.

Agora vamos ver como ficou o nosso cabeçalho personalizado. Copiamos o link do site, abrimos num novo separador, vamos à página Contato e voila,
como podes ver ficámos com um cabeçalho e menu personalizado profissional apenas na página de contato.

Se quiseres também podes colocar o menu fixo no topo quando rolamos para baixo, basta para isso ires até à edição da página, aqui em baixo vais até à opção
que diz sticky header e onde diz sticky header colocas default. Se não tiveres esta opção no teu WordPress eu vou colocar um link na descrição deste vídeo
para um tutorial onde mostro como podes criar um menu fixo no OceanWP.

Por fim vamos clicar em Atualizar, ver página e repara que agora temos o menu fixo no topo.

Muito bem, chegámos ao fim deste tutorial de como criar um cabeçalho personalizado no teu site WordPress com Elementor.

Espero que o tutorial tenha sido útil e que te ajude a criar projetos de webdesign mais profissionais, tanto para ti como para os teus clientes 🙂

Uma forma fantástica de indicares ao YouTube que os meus tutoriais são úteis
é subscreveres ao canal, comentares abaixo e partilhares o tutorial nas redes sociais.

Se gostas do meu conteúdo e quiseres dar apoio ao Vive da Net visita a página de Recursos do meu site em Vivedanet.com/recursos

e faz uma compra de um dos produtos recomendados através dos meus links de afiliado. O teu suporte é muito importante para o Vive da Net e permite-me continuar a ajudar.te com conteúdo gratuito de alta qualidade.

O meu nome é Tiago Dantas do Vivedanet.com obrigado por teres assistido, grande abraço vemo-nos no próximo vídeo. Fui!

O Elemento que vou usar neste exemplo é este, chama-se ícones sociais, e se não me engano este elemento faz parte do elementor pro. Se não tiveres o Elementor Pro a alternativa gratuita é este elemento que diz social icons.

A desvantagem deste elemento gratuito está no facto de não podermos alterar o seu design usando o elementor, por isso vou apagar este elemento e usar o elemento “ícones sociais” do Elementor Pro. Se ainda não tens o Elementor Pro e queres aprender como instalá-lo no teu site podes clicar no link que está na descrição ou ir até vivedanet.com/pro

Nesta página eu mostro-te como podes instalar o elementor pro no teu site – ao realizares a compra do Elementor Pro por este link o Elementor paga-me uma pequena comissão sem custo extra para ti, e por isso obrigado pelo teu suporte

Fechar Menu

Usamos cookies para garantir que tem a melhor experiência possível no nosso site.

Usamos cookies para garantir que tem a melhor experiência possível no nosso site. Aprender mais

Usamos cookies para garantir que tem a melhor experiência possível no nosso site.

Espera, Isso é Abandono!

70% dos visitantes do teu site fazem isso e nunca mais voltam.

Neste tutorial grátis mostro como converter visitantes que abandonam o teu site em subscritores e clientes usando o Elementor.

Dicas exclusivas para designers não-programadores

Recebe o Modelo no teu Email

Detesto SPAM e prometo manter o teu endereço de e-mail seguro. Podes ler a minha política de privacidade.

Já subscrito? Podes submeter o formulário, não te preocupes, não serás adicionado à lista duas vezes.

Recebe as Minhas Melhores Dicas

Subscreve para receberes as novidades e as minhas melhores dicas para Elementor, WordPress, Tutoriais e Cursos. Descadastra com 1 clique quando quiseres.

Detesto SPAM e prometo manter o teu endereço de e-mail seguro. Podes ler a minha política de privacidade.

Já subscrito? Podes submeter o formulário, não te preocupes, não serás adicionado à lista duas vezes.