Como criar um site com Elementor: confira o passo a passo

Com toda certeza, se você já precisou criar um site ou se é profissional da área, sabe que, já há algum tempo, o Elementor é o principal plug-in para criação de páginas. Com mais de 5 milhões de instalações ativas e designs ilimitados, criar um site com Elementor é simples e, ao mesmo tempo, completo. E, com os mais modernos recursos.

Nesse sentido, a aplicação foi pensada para facilitar a vida de programadores e publicitários. No entanto, a ferramenta é tão intuitiva que o cidadão comum também pode ser autodidata e se aventurar na criação dos próprios projetos.

Com efeito, o site é uma das mais poderosas estratégias de marketing e autoridade de uma empresa, no digital. Por isso, criar um site bem formatado, com boa navegabilidade e conteúdo bem escrito é fundamental para ter uma marca reconhecida no mercado. Em outras palavras, um site bem construído é tão importante quanto a sede de uma empresa física.

Em 24 de junho de 2022 e, em celebração ao 6º aniversário do plug-in mais utilizado do mundo, criamos um passo a passo completo com tudo que você precisa saber para usar o Elementor. Abordaremos desde a configuração técnica necessária até a criação das páginas. Ainda mais, orientaremos no processo de personalização do seu site. Você não pode perder, confira!

O que é o Elementor?

Antes de mais nada, o Elementor é um plug-in feito exclusivamente para o CMS WordPress. CMS é o acrônimo de Content Management System, isto é, uma plataforma que contém em si própria todas as ferramentas para criar e gerir um site de conteúdos. E, o WordPress se evidenciou como o exemplo mais popular de CMS da atualidade.

Em termos técnicos, a grande sacada do Elementor é a facilitação dos procedimentos criativos para o leigo. Como assim?

Bom, antes, para criar um site era necessário entender de programação detalhada, codificação a fundo, o que tornava a criação de sites difícil e direcionada a um grupo muito seleto de profissionais. Além de lentificar e encarecer demais todo o processo.

Só que, dado ao gigantesco crescimento do comércio e das atividades digitais, como um todo, surgiu a necessidade da construção mais rápida e acessível de sites, bem como a criação quase irrefreada de conteúdo. Hoje, a internet é, basicamente, conteúdo constante com foco em vendas.

A partir disso, começaram a surgir modelos pré-prontos de site, por assim dizer, mas que tinham muitas limitações. Tanto em formato, quanto em funcionalidades, ainda não havia-se chegado a uma ferramenta ideal que agilizasse e tivesse tanta qualidade quanto um trabalho manual.

- Advertisement -

Até que o Elementor foi criado. De fato, o plugin do wordpress foi o único capaz de facilitar códigos complexos e criar páginas pré-prontas ou do zero, no modelo drag and drop. Desse modo, basta instalar o plug-in no painel principal do wordpress para aproveitar todos os recursos que oferece.

 Principais vantagens do Elementor

Como dissemos anteriormente, o Elementor diminuiu o tempo e a complexidade de criação do site, facilitando a dinâmica dos códigos e programação com modelos prontos personalizáveis. Nesse contexto,  dentre os principais benefícios do Elementor estão:

• Permite a criação de qualquer tipo de página, desde sites pessoais ou institucionais, blogs, landing pages, portfólios, plataformas de e-commerce, lojas virtuais e muito mais;
• Não carece de conhecimento prévio no código HTML, tampouco na linguagem CSS, PHP ou JavaScript, as mais utilizadas por programadores para criar sites responsivos;
• Boa parte dos recursos são gratuitos, embora haja a versão Elementor Pro, que também vale a pena adquirir;
• Oferece edição de front-end em tempo real;
• Layouts personalizados, ou seja, com o Elementor é possível dar ao site uma aparência única, que vai além dos modelos pré-prontos;
• A integração com outros plugins e ferramentas do WordPress, como o Yoast, para SEO e o MailChimp, ferramenta para E-mail Marketing

 O que é necessário para criar um site com Elementor 

O primeiro passo para criar um site com a extensão é garantir que você tem todos os sistemas no lugar. Portanto, confira a seguir a lista dos elementos fundamentais para criar um site com Elementor:

 Domínio e hospedagem

Em primeiro lugar, obtenha um domínio e hospedagem na web. Na verdade, o próprio WordPress tem parceria de criação de domínios e hospedagens, pagando pelo pacote completo do CSM. Ou, caso já possua um, pode migrar para o sistema também.

De acordo com o Ranking 2022 do site Melhor Hospedagens, as 10 principais hospedagens do Brasil são, em ordem: Hostinger; Hostgator; Locaweb; Hostmidia; Uol Host; Configr; Umbler; GoDaddy; King Host e Super Domínios.

 Instale o WordPress

Antes de tudo, importante saber diferenciar wordpress.org e wordpress.com porque ainda causam muita confusão entre os usuários.

WordPress.org é a extensão que você deve acessar para instalar o wordpress. É a versão gratuita do software WordPress. Um ponto chave da extensão .org, além do fato de ser gratuita, é que necessita de hospedagem externa para o site, por meio dos serviços de hospedagens, como os que mencionamos acima.

Já o WordPress.com oferece mais serviços e opções e, portanto, é uma assinatura paga. Nela, você terá a opção de obter um site, com hospedagem em poucos minutos, sem serviços adicionais de terceiros, por uma quantia em dinheiro.

Outrossim, o wordpress.org é dedicado a pessoa jurídica, sites institucionais e plataformas business enquanto a extensão .com é voltada para blogs e sites pessoais, menos pesados. Então, veja abaixo o passo a passo do procedimento de instalação do sistema:

• Após a compra do domínio e da hospedagem, acesse a sua conta no site, faça seu cadastro e entre na página principal do servidor comprado;
• No painel de controle da sua conta no servidor, acesse ou pequise pelo ícone do WordPress;
• Faça o dowload do software (em arquivo zipado) para o HD do seu computador sede;
• Em seguida, é necessário fazer o upload do arquivo do WordPress no gerenciador de arquivos do servidor, configurando o FTP (File Transfer Protocol) no cPanel;
• Logo após, crie um sistema de gerenciamento de banco de dados, para armazenar todas as informações do seu site. Os mais comuns são: oracle, SQL server, MySQL, entre outros;
• Não se esqueça de colocar seu username e password e preencher o cadastro no WordPress;
• Por fim, clique em Finalizar instalação.

Pronto! O programa foi instalado e você já pode iniciar a criação do site. O proximo passo que segue a instalação do WordPress, é a instalação do próprio Elementor.

 Como instalar o plug-in Elementor

Após a instalação do WordPress, clique no ícone e acesse o programa e o site ainda a montar. Digite o nome e a senha que você configurou e clique em “Entrar” para acessar seu painel (dashboard).

Em segundo lugar, para a versão gratuita, no painel do WordPress, navegue até Plugins > Adicionar novo. Procure “Elementor” e clique em Instalar. Assim que o Elementor for instalado, clique em Ativar. Rápido e certeiro, como intenta a própria ferramenta! Agora é só botar a mão na massa e começar a preparar o seu site.

Mas antes, se acaso você se interessar por usar os recursos do Elementor Pro, visite Elementor.com e compre a versão Pro do plug-in, instale e ative da mesma maneira descrita acima. Depois que o Elementor Pro for instalado, você precisará inserir sua licença acessando o painel do WordPress e navegando até Elementor > Licença.

 Principais diferenças entre o Elementor grátis e o Elementor Pro

Sem dúvida, a versão grátis do Elementor já tem funcionalidades e recursos incríveis para um site totalmente competente. Agora, a versão Pro conta com suporte ao cliente, de maneira contínua, para tirar qualquer dúvida que possa surgir durante a criação do site, além de recursos e quantidades muito mais variadas que a versão não paga.

Nesse sentido, a versão Elementor Pro tem 3 planos diferentes:

• O mais simples, plano Personal, que comporta 1 site apenas;
• O plano intermediário, para até 3 sites, chamado Plus;
• E, o terceiro, plano Expert, que pode absorver a criação de até 1.000 sites.

Abaixo, a tabela com as principais diferenças entre o modo gratis e o pago da ferramenta Elementor:

Além de todas as funções acima, o Pro também permite:

• Adicionar CSS personalizado a widgets ou qualquer local do site ou página e,
• Igualmente, permite salvar as criações e widgets diferentes, bem como aceita integrar widgets novos, com códigos curtos e onde o usuário quiser, no projeto.

Portanto, como de fácil observação, dependendo do nível da sua demanda e do nicho de atuação de mercado, vale muito a pena adquirir a versão Pro do Elementor também.

Então, agora que você sabe as principais diferenças entre as versões da ferramenta e como instalar o plug-in no seu WordPress, vamos entender melhor como customizar o site!

Como personalizar o site com Elementor 

Decerto que a melhor maneira de se familiarizar com o Elementor é pela prática, isto é, trabalhando, remexendo e vendo-o em ação. Assim, comece acessando Páginas > Todas as páginas.

Em seguida, escolha o template que mais se adequa às suas necessidades Na página principal, escolha “Add Template” para adicionar e personalizar como quiser. O plug-in tem uma diversidade bastante relevante de designs na versão grátis e muito mais ainda, na versão paga.

Sem contar que é possível ainda baixar templates previamente salvos e carregar para o WordPress. Após selecionar o template, então, encontre a página inicial que você acabou de criar e passe o mouse sobre o nome da página. Quando os links do menu aparecerem abaixo, clique em Editar com Elementor.

Assim que a página carregar, vão aparecer duas seções na tela:

• À esquerda, a tela de edição do Elementor, e
• Do lado direito, a aparência da página com a possibilidade de edição da estrutura e do conteúdo.

O Elementor usa seções, colunas e widgets para criar o layout de qualquer página. As seções são os blocos maiores de construção, nos quais você vai adicionar colunas que são chamadas de seções internas. E, dentro das colunas internas, você pode adicionar widgets, ou seja, blocos de conteúdo que acrescem texto, imagens, botões e outros elementos à sua página.

 Trabalhando com as Seções do Elementor

Ao passar o mouse sobre uma seção, surge uma borda azul com alça, que permite editar a seção, adicionar uma nova seção ou excluir totalmente uma seção da página. Sem prejuízo, você também pode clicar com o botão direito do mouse na alça e acessar os controles da seção.

Para adicionar uma nova seção localizada acima da seção existente, basta clicar no sinal de +. Do mesmo modo, clicando no símbolo da pasta, você começa a personalizar a estrutura da seção ou escolher um modelo pré-fabricado.

Como trabalhar com seções ou colunas internas do Elementor

Semelhantemente ao item anterior das seções, para editar as seções internas e colunas, basta clicar na borda cinza e na alça correspondente. Assim, você pode modificar a largura e alterar o espaçamento entre as colunas. Por outro lado, clicar com o botão direito do mouse na alça permite adicionar mais colunas, duplicar as existentes, excluí-las e muito mais.

Editando os Widgets

Por fim, para editar os widgets existentes – ou os que você decidir acrescentar, conforme mencionamos acima – basta clicar no ícone “Lápis” (ou Pencil, dependendo do idioma do WordPress), localizado na alça do widget.

Ainda mais, para alterar e personalizar o conteúdo do widget, bem como acessar controles de estilo, duplicar widgets ou, até, exclui-los, é só clicar com o botão direito do mouse.

Ademais, você também pode adicionar novos widgets com um simples arrastar e soltar (drag and drop) do lado esquerdo da tela e soltá-los em sua página. Muito simples e facil.

Com efeito, para todas as opções de personalização, basta usar a criatividade. Uma recomendação é estudar a fundo o funcionamento do plug-in, como, por exemplo, ao ler conteúdos de autoridade, como neste artigo. E, a partir de então, montar um mockup das suas ideias principais, anteriormente a iniciar o processo criativo.

E as cores, como personalizar?

Certamente que uma das personalizações mais antecipadas dos usuários do Elementor é o ajuste das cores do template escolhido. Porque um dos features da ferramenta permite a integração das cores da marca ou empresa, o que garante a identidade visual. E, por conseguinte, a mais absoluta customização.

Desse modo, com o Elementor (e o Elementor Pro), você pode modificar as cores em nível global ou em nível de widget individual. Editar cores em um nível global significa que qualquer nova página construída com o Elementor vai herdar tais estilos. Então, uma vez editadas, não é necessário continuar alterando as cores a cada nova criação. Basta criar a estrutura e inserir o conteúdo.

Portanto, para modificar as configurações globais de cores, clique no menu hamburguer CSS, do lado esquerdo na tela de edição da página. Em seguida, clique no link “Cores Padrão”, na guia Estilo. Você pode ajustar o esquema de cores padrão inserindo códigos próprio de cores hexadecimais. Ou pode usar um esquema de cores pré-fabricado do plug-in, se não tiver um esquema de cores particular.

Já para personalizar as cores de widgets individuais, selecione o widget que deseja estilizar e clique na guia “Estilo” na tela de edição do próprio widget. Configurações globais de estilo podem ser substituídas personalizando cada widget separadamente.

 Personalizar o layout da página com o Elementor

Em quinto lugar, depois de configurar todos os estilos de maneira personalizada, é hora de começar a ajustar o layout. A título de ilustração, se a página inicial do template selecionado tiver apenas 3 colunas, mas a empresa realizar 4 serviços, o que fazer?

Nesse caso, será necessário adicionar outra coluna e, para fazer isso, basta clicar com o botão direito do mouse na alça da seção interna e selecione “Adicionar Coluna”. Uma nova coluna será criada e tantos widgets quanto quiser poderão ser adicionados. Como alternativa, você também pode duplicar uma coluna existente para economizar tempo e apenas editar o conteúdo.

Ademais, o Elementor permite a adição de uma nova seção, como já mencionamos acima. Suponhamos, para fins de exemplo, que seja preciso acrescentar uma aba “About us”. Veja, a seguir, o passo a passo para adicionar essa seção:

• Primeiramente, clique no ícone + na alça da seção abaixo do preço do menu;
• Em seguida, defina a estrutura para uma coluna;
• Logo após, ajuste a coluna para largura total;
• Arraste um widget de título (Heading) e digite seu título personalizado;
• Igualmente, arraste um widget de seção interna e escolha duas colunas;
• Adicione uma imagem à coluna da esquerda e adicione um widget de texto à coluna da direita;
• Escolha uma imagem do seu HD e faço o upload dela no widget “Imagem”;
• Insira uma breve descrição do seu negócio no widget Texto;
• Passe o widget de botão por cima do widget de texto e,
• Defina o botão para vincular à sua página “About us”.

Desse modo, após a finalização das alterações desejadas, basta clicar no botão verde “Publicar” e as alterações serão publicadas no site.

 Como personalizar as imagens no Elementor

Um dos últimos elementos que os usuários ficam ansiosos para personalizar são as imagens do site. De fato, os elementos visuais são um dos mais importantes para a identificação do negócio e para conferir autoridade a uma empresa.

Lembrando sempre que as imagens tem de ser totalmente profissionais. Isto é, de qualidade elevada, com ângulos e formatos específicos. Porque, por melhor que seja o Elementor, a qualidade da customização sera do usuário. Portanto, capriche!

Então, para substituir as imagens do banco de imagens do Elementor por imagens personalizadas, comece clicando na seção em que deseja trabalhar. Antes de tudo, elimine a imagem existente clicando em “Excluir” e, em seguida, clique no sinal + para fazer upload de sua própria imagem.

Depois que a Biblioteca de mídia for carregada, clique em “Carregar Arquivos” e, logo após, no botão “Selecionar Arquivos”. Selecione a imagem desejada e clique no botão “Inserir Mídia”. Se acaso a imagem for de plano de fundo, também é possível alterar a posição e controlar o tamanho.

Alem disso, outro recurso de imagens muito interessante, você tem a opção de alterar ou remover completamente a sobreposição de fundo (background overlay), bem como definir as cores do texto da imagem.

Ainda mais, você pode aplicar estilos diferentes de foco da imagem e esses estilos ficarão visíveis quando um visitante passar o mouse sobre a imagem, por exemplo. Em resumo, para personalizar o restante das imagens no site, basta repetir as etapas acima e clicar em “Publicar” para salvá-las.

Muito legal, não é mesmo? Viu como é fácil criar um site com o Elementor? Nesse artigo, abordamos os dados mais importantes e o passo a passo abrangente para construir um site personalizado e de maneira muito intuitiva com o plug-in mais famoso da atualidade.

Existem centenas de recursos que não mencionamos porque são muito melhor explicados com a vivência e prática diária. Portanto, arregace as mangas e bote a mão na massa, baixando, hoje, o seu Elementor e obtenha resultados incríveis de maneira rápida, prática e, o melhor, barata. Até a próxima!