22/07/22

Elementor: Como criar menu no WordPress

Em tempos de pandemia, ter uma boa presença digital se mostrou uma necessidade de importância ainda maior. E parte disso, claro, inclui construir seu site para começar a difundi-lo pela internet.

Por muito tempo, construir o site foi uma tarefa muito difícil, e restrita apenas àqueles que, de fato, tinham conhecimentos em linguagens de programação, para poder construir a página e o conteúdo.

Contudo, para o bem do avanço da internet, diversas ferramentas foram criadas e disponibilizadas – muitas delas gratuitamente – para que esse processo fosse mais prático e menos técnico, focando mais no que sua criatividade pode fazer, não no que você sabe fazer.

Uma dessas ferramentas é o Elementor, um poderoso plugin construtor de páginas, desenvolvido para o WordPress, que atualmente é a plataforma de construção de sites mais utilizada em todo o mundo.

Se você está interessado em saber como o Elementor pode ajudar na construção de seu site, acompanhe nosso artigo até o final e confira algumas dicas e sugestões de como iniciar seu novo projeto.

O que é o Elementor?

O Elementor é um plugin Freemium (com uma versão grátis e uma paga, contando com recursos extras) e sua metodologia consiste em um sistema bem simples, baseado em arrasta-e-solta, no qual você tem acesso a uma série de elementos que ajudam a compor a estrutura e conteúdo do site.

Arrastando esses elementos para a página do site, você pode organizá-los e compor todo o visual da página, adicionando recursos que vão desde textos e imagens até carrosséis, atualizações automáticas de posts e mapas.

Caso queira conferir um pouco mais sobre vários aspectos do construtor, temos um post inteiro dedicado a ele, cobrindo um pouco mais do plugin e recursos do plugin.

Nesse post, nos ateremos apenas às dicas iniciais para que você tenha as noções básicas para criar o seu cabeçalho de forma simples.

Como instalar o Elementor em meu WordPress?

Todo o processo de instalação do plugin é extremamente tranquilo, e pode ser feito diretamente da área de administração do seu site WordPress.

Como o plugin possui duas versões, a paga e a gratuita, é possível instalar a versão grátis direto da loja de plugins do WordPress, facilitando todo o processo.

Para isso, claro, você precisará já ter o WP instalado e ter acesso de administrador do site, com permissões suficientes para realizar a instalação de um plugin. Vamos lá:

Ao navegar pelo wp-admin, você poderá localizar a guia de plugins e, ao clicar em “Adicionar novo”;
Agora, basta buscar pelo plugin Elementor e clicar em “Instalar agora”;
Feito isso, basca clicar em “Ativar” e o processo de instalação e ativação da versão gratuita estará finalizado.

Com essas poucas etapas concluídas, você já poderá começar a utilizar o plugin sem qualquer dificuldade.

E um ponto muito importante é de que ele não requer qualquer configuração inicial, o que significa que assim que ele é ativado no site, você já pode ir direto para a criação de suas páginas.

Contudo, uma página de boas-vindas e cadastro será exibida. Como não é algo mandatório, você pode fechar essa guia caso não deseje prosseguir preenchendo as informações.

Criando o Menu no WordPress

Ainda dentro de seu WP Admin, você precisará criar a estrutura do seu cabeçalho que será utilizado no site, isto é, inserir as informações que estarão presentes.

Fazer isso é bem simples, e você poderá seguir os seguintes passos:

Na barra lateral à esquerda, encontre a seção “Aparência” e, nela, acesse a opção “Menus;
Agora, você poderá criar o seu menu, inserindo o nome dele e configurando onde ele estará localizado. Neste caso, estará em nosso cabeçalho;
Uma vez criado, você poderá usar a guia lateral para adicionar novos componentes, como Páginas, Categorias, Posts e Links personalizados;
Com nossos componentes devidamente adicionados, agora vamos salvar e partir para a customização da parte visual;

Como criar menu com Elementor?

A construção de páginas no Elementor é bem intuitiva, uma vez que parte do processo básico de adição de uma página comum no WordPress.

Após criar a página no WordPress, aí sim começamos a compor o visual e adicionar nossos elementos do site. Para criar o menu, o processo é semelhante, mas é feito através dos “Modelos”.

Com esses modelos, poderemos criar uma predefinição, que pode ser inserida mais facilmente nas páginas.

Antes disso, vamos partir do começo, a criação da página:

Em nosso WP admin, com acesso administrador, seguiremos passando o mouse em “Novo” e clicando em “Página”;
Assim que a tela de criação for carregada, você poderá adicionar o nome que será dado ao modelo e, feito isso, clique em “Editar com Elementor”;
Quando a página do construtor carregar, teremos uma visão parecida com essa:
Como pode ver, a página vem com alguns elementos um pouco desconexos. Para corrigir isso, vamos clicar no ícone de engrenagem, no canto inferior esquerdo;
Na guia de configurações gerais, vamos alterar o layout da página para “Elementor Canvas”, assim teremos uma página completamente em branco.

Feito isso, fecharemos rapidamente a guia de saudação da navegação fácil ao clicar no X. Apenas para limpar nossa área de trabalho mesmo;

Agora, começaremos a parte interessante, a adição dos elementos.

É importante dizer que independente de realizar a criação com o Elementor Pro ou Free, esse processo será exatamente o mesmo até aqui.

Agora, siga as instruções para sua versão do Elementor de acordo com o que preparamos abaixo, para que você consiga fazer todo o processo corretamente em sua versão.

Adicionando menu no Elementor Pro

o seu site está com a versão Pro ativa, os passos abaixo vão te ajudar a preparar tudo para seguir com a personalização. não pode faltar em nosso pequeno projeto. Veja como podemos fazer:

Primeiramente, vamos clicar no botão vermelho de +, para adicionar uma seção;
Agora, temos de selecionar como será a estrutura que usaremos. Em nosso caso, vamos dividir em duas colunas: uma para uma pequena logo e a outra com os links e informações;
Para selecionar, basta clicar na estrutura desejada;
Podemos ver, de primeiro momento, que nossa seção foi criada, com duas divisões. Na primeira, vamos adicionar um elemento de imagem com nossa logo;
O elemento de imagem pode ser adicionado ao arrastar o botão de imagem, na guia de elementos à esquerda para a área que desejamos. E é o que faremos agora;

Uma dica importante é clicar no ícone com vários quadradinhos, caso não consiga fazer aparecer a tela abaixo.

Inicialmente, uma imagem genérica será adicionada. Para enviar sua imagem, você pode usar a guia à esquerda, usando a opção “Escolher imagem”, para enviar seu arquivo;
Com o envio feito, podemos ver que nossa barra já tomou proporções bem diferentes, adaptando ao tamanho da imagem;
Ao passar o mouse pela seção, faremos um pequeno ajuste, deslocando a primeira parte mais à esquerda, para que a divisão de espaço entre logo e os links fique mais adequada;

Ajuste de tamanho

Com isso preparado, vamos à adição do menu que criamos ao nosso modelo. Para fazer isso, busque pelo “Nav Menu” e insira-o na tela de edição;

Feito isso, você terá o seu menu já inserido na página e, agora, é a hora de seguirmos com as personalizações. E vale lembrar que tudo aqui é extremamente de gosto pessoal, nada é uma regra;

Com isso, você terá sua base preparada para seguir com as personalizações. Vamos começar!

Adicionando menu com a versão gratuita

Se você não tem a versão Pro, o processo que fizemos acima não será exatamente o mesmo no seu caso.

Considerando que a versão gratuita não nos disponibiliza a opção de usar o “Nav Menu”, agora teremos que fazer essa adição de uma forma um pouco diferente, mas ainda assim eficaz.

Para isso, precisaremos instalar um novo plugin, o “Elementor Header & Footer Builder” que, como o nome sugere, nos habilitará com as ferramentas para fazer os ajustes necessários.

Com o plugin instalado e devidamente ativado em seu site, passamos para as etapas abaixo:

Para começar, você deverá acessar a seção do plugin, dentro da área “Aparência”;
Assim que a tela se abrir, você poderá iniciar a criação do seu modelo;
Nessa tela, você poderá inserir o nome e configurar as opções do plugin. Nesse caso, usaremos ele como cabeçalho, visível em todo o site e para todos e inserido apenas nas páginas em que o colocarmos;
Com as configurações prontas, clique para editar com o Elementor;
Agora na página de construção, vamos iniciar a construção da seção. Para isso, usaremos o modelo de duas colunas;
Com a seção criada, vamos colocar a nossa logo, arrastando o elemento de imagem para o primeiro bloco;
Agora, é necessário escolher a imagem correta dentro da biblioteca, ou fazer o upload de uma nova, caso ainda não esteja no site;
Com isso, temos a imagem inserida, agora vamos passar para a adição do menu no bloco ao lado, usando o bloco “Navigation Menu”;
Podemos ver que ficou um pouco desformatado, mas não é problema! Para corrigir, devemos ajustar a largura das colunas, o que pode ser feito arrastando a barrinha para o lado;

Assim que finalizar essas etapas, a base de seu menu estará pronta para seguir para a personalização, e o processo a partir daqui será exatamente o mesmo que para quem possui a versão pro.

Portanto, confira as dicas de personalização no tópico logo abaixo.

Personalização do menu

Finalmente, com todos esses preparativos, chegamos à parte que tanto te apetece! Agora que as estruturas do menu estão inseridas

Primeiramente, vamos definir as alterações para todo o bloco. Por isso, vamos editar o a seção inteira ao mesmo tempo;
Vamos inserir a cor de fundo na aba “Estilo”, alterando no campo “Cor”;
Uma alteração bem legal que podemos fazer adicionar é adicionar um pouco de transparência, o que pode ser feito na mesma área onde a cor é adicionada, movendo a bolinha abaixo das cores mais à esquerda;
Outra personalização bem buscada é o uso de cantos arredondados, que pode ser feito definindo o arredondamento na área de “Borda”;
Agora, vamos fazer alguns ajustes, dessa vez na logo. Para isso, precisaremos selecionar o bloco da logo e marcá-lo para edição;
Na aba “Layout”, vamos ajustar o alinhamento vertical, para que a imagem fique centralizada. Caso ache necessário, faça o mesmo com o alinhamento horizontal;
Assim, fica notável que o alinhamento deu uma aparência melhor;
Algo que talvez seja importante que altere é a cor dos links quando passamos o mouse por cima, escolhendo uma cor que combine melhor com seu site;
Para fazer isso, clique no bloco do menu e vá para a aba “Estilo”. Na área de “Main Menu”, localize a parte de tipografia e altere para “Hover” (ação de passar o mouse por cima).
Em “Text color”, será possível alterar a cor do texto, enquanto poderá alterar a cor do ponteiro em “Pointer color”;
Caso deseje alterar também as cores quando um dos itens do menu estiver ativo, siga para a abinha “Active”;
Seguindo agora para a guia “Avançado”, você pode ativar a opção “Sticky” na seção de efeitos de movimento (Apenas na versão PRO do Elementor), para que o menu permaneça visível quando o visitante rolar a página para baixo;
Alterando para a vista em mobile, é possível que seu menu não esteja com uma aparência tão boa, então vamos corrigir;
Aqui, você pode ajustar a proporção como preferir, e as alterações serão feitas apenas para celulares. Seu design para PCs não será alterado;
Em nosso exemplo, manteremos a proporção de 80 para a logo e 20 para a lista de itens, mas isso depende totalmente do seu layout e preferência, para aproveitar melhor os espaços;
É possível notar que a logo não está sincronizada com o ícone, e vamos alterar a opção de alinhamento para corrigir;
Com o alinhamento vertical configurado, agora temos ambos na mesma altura, com uma harmonia muito melhor;
Com o “Espaçamento uniforme”, o resultado está assim:
Agora, teremos um último ajuste, para que as opções não fiquem tão para cima do menu;
Para corrigir isso, usaremos a configuração de Padding superior dentro da própria seção, na guia “Avançado”. Nesse caso, definiremos o valor para 10px;
Menu mobile final
Com isso, temos um visual muito mais sóbrio e polido no nosso cabeçalho.

E é assim que você poderá dar seus passos iniciais para a criação do seu menu. Esse post, claro, traz apenas recursos mais básicos que poderão te ajudar a se basear em que funções usar.

Por isso, deixe sua criatividade fluir e coloque em prática seus próprios toques de personalização para criar um site ainda mais incrível!

Assim que concluir suas personalizações, você poderá salvar como um modelo, o que te permitirá utilizá-lo para fácil inserção em novas páginas.

Para salvar como modelo, você deverá clicar na setinha logo ao lado do botão de “Atualizar”, escolhendo “Salvar como modelo”

Salvar como modelo

Inserindo o menu em páginas

Para adicionar seu novo menu dentro de alguma página já existente, você precisaria importar o modelo que acabou de salvar.

Isso será feito clicando no botão de pasta, ao lado do símbolo de mais ao adicionar uma nova seção. Assim, será aberta a biblioteca de modelos, para que você selecione qual utilizar.

Importando modelo

Conclusão

Agora que tem as dicas iniciais de como começar a criação e personalização do seu menu, deixe toda a sua criatividade falar bem alto para turbinar ainda mais o seu novo projeto!

Esse artigo tem por intuito te informar de algumas funções principais e mais básicas para começar o desenvolvimento de um site profissional por conta própria e de forma simples.

Brinque bastante com as diversas ferramentas e parâmetros até criar o resultado que seja perfeito para você e seu site e, para isso, solicite sua ativação gratuita do Elementor Pro em nossa central de atendimento, se você já é nosso cliente.

Conta pra gente o que achou e mostre seus resultados, estamos ansiosos para descobrir que criações incríveis surgirão daqui.