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.
Sumário:
- O que é o Elementor?
- Como instalar?
- Criando menu no WordPress
- Adicionando menu no Elementor PRO
- Adicionando na versão free FREE
- Personalizando o modelo
- Importando dentro de páginas
- Conclusão
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.
É 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;
- 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”
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.
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.
