Elementor

Elementor é um plugin de construtor de páginas completo para WordPress. Ele é conhecido por adicionar um design avançado e personalizado, através de um editor do estilo “arrasta e solta”.

Isso significa que você pode criar seu site em WordPress com um layout totalmente personalizado, sem a necessidade de aprender uma linha de código sequer ou contratar um desenvolvedor.

Através deste construtor, é possível criar páginas e posts com design únicos rapidamente em comparação com os modelos-padrão que podem vir com o tema escolhido em seu site. Sem qualquer tipo de limitação do tema.

O principal benefício de utilizar o Elementor é criar layouts de páginas sem necessidade de qualquer experiência ou formação na área de design.

Você tem uma interface separada para trabalhar com seu conteúdo e criar seu design fora do editor padrão. Além disso, ele não requer nenhuma habilidade com HTML/CSS/PHP ou qualquer linguagem de programação para sua utilização.

Dentro do curso WpSamurai, você encontra dois módulos somente sobre Elementor: um módulo básico onde é explicado como utilizar os principais componentes do Elementor e criar suas primeiras páginas, e o módulo avançado onde criamos projetos de páginas reais. Clique aqui para conferir o conteúdo do treinamento.

Neste artigo, vamos dar os primeiros passos com o Elementor.

Como funciona o Elementor?

O editor é um dos mais simples e poderosos do mercado. Com ele, você pode utilizar recursos como componentes e arrastá-los para área de visualização do seu site.

A maioria dos elementos visuais são de “arrastar e soltar”, o que significa é que praticamente tudo é feito com o mouse e dispensa configurações ou programação. Além disso, o código gerado é aderente às boas práticas de SEO.

Você também conta com imensa biblioteca de modelos pré-prontos que podem ser facilmente inseridos em seu site. Há mais de 150 modelos gratuitos e mais de 300 modelos profissionais. Você também pode criar seus próprios modelos e inserir em sua biblioteca pessoal.

Entendendo a Interface do editor

Quando você acessar o editor, você terá uma tela similar abaixo:

Imagem do editor de páginas do plugin Elementor

Nós podemos dividir a área do editor em três partes:

  • A área de conteúdo: Você poderá construir a partir de um tema ou selecionar uma modelo em branco utilizando o layout Elementor Canva. Você pode adicionar seus componentes na área marcada com a linha pontilhada.
  • Componentes: Estes são os blocos de construção que você irá utilizar para desenvolver suas páginas.
  • Configurações: Exibem o histórico de alterações, visualizar o seu projeto em diferentes dispositivos e telas, e outras configurações gerais.

Componentes visuais do Elementor

Há mais de 90 elementos e módulos de conteúdo para escolher.

Componentes do editor do Elementor
Tela com componentes visuais do Elementor

Entre eles, você pode adicionar imagens, cabeçalhos, botões, carrosséis, ícones de mídia, barras de progresso, botões, galerias de imagens, testemunhos e muito mais.

Além disso, você pode usar quaisquer widgets que você já tem em seu site.

Como mencionei anteriormente, a funcionalidade principal do plugin é permitir que você construir, ajustar e ajustar suas páginas livremente e ter a visualização prévia do seu trabalho.

Esse recurso de pré-visualização significa que você não tem que se perguntar o que sua página vai parecer quando publicado, o que acontece de forma padrão quando dependemos unicamente do tema escolhido para criar nosso layout.

Nós podemos destacar as seguintes características principais da ferramenta:

  • 90 elementos/módulos adicionais de conteúdo.
  • 300 modelos de páginas adicionais.
  • Construtor de temas
  • Construtor de WooCommerce
  • Construtor de Popup
  • Visual Form Builder
  • Você pode criar widgets globais e, em seguida, reutilizá-los em todo o site.
  • Adicione CSS personalizado a qualquer bloco dentro do Elementor.
  • Implantar elementos Elementor em barras laterais e widgets.

Modo de exibição de páginas

Além disso, Elementor te dá acesso a configurações de exibição. Aqui é onde você pode mudar os fundos, margens e valores de preenchimento, cores padrão, fontes, e assim por diante.

Configurações de página
Menu de Configuração de Páginas

Além disso, há um histórico completo de revisão, o que significa que você pode reverter para uma versão anterior da página.

Responsividade

Com uma boa parte dos usuários vindo para nossos sites através de dispositivos móveis, é importante que seu site esteja adequado a ser exibido para esses dispositivos.

Todos os projetos que você cria com Elementor são responsivos.

Se alguma vez quiser ver como o seu design fica num dispositivo diferente, o Elementor permite-lhe lançar rapidamente uma antevisão sem deixar a interface.

Responsividade do Elementor
Opções dentro do Elementor que permite visualizar a responsividade de páginas

Configurações especiais para cada dispositivo

Através do Elementor, além de ter uma tela totalmente responsiva, você também pode decidir quando mostrar ou esconder elementos da página.

Por exemplo, se você tem um slider que funciona muito bem no desktop/notebook e tablets, entretanto, não funciona muito bem ou simplesmente não faz sentido em telas menores.

Você pode optar por não exibir esse componente na versão móvel do seu site. Os controles de design responsivo do Elementor permitem escondê-lo em dispositivos móveis com o clique de uma comutação.

Painel de configurações de responsividade

Como começar a usar o Elementor

O plugin principal está disponível através do repositório oficial WordPress. A boa notícia é que o plugin principal é gratuito, portanto,não há custos ou registro necessário.

Há um segundo plugin que complementa o plugin-base, que é a versão profissional do produto.

Elementor Free

  • Poucos componentes de conteúdo
  • A biblioteca de blocos e páginas é limitada
  • Plugins de terceiros que estendem as funcionalidades podem causar problemas
  • Não há construtor de cabeçalhos, nem rodapé
  • Não há construtor de popups

Elementor Pro

A compra da licença do Elementor Pro se dá mediante a uma assinatura anual, então você também recebe suporte 24 horas por dia, 7 dias por semana e atualizações, desde que você permaneça subscrito.

Tem três planos de preços: Pessoal, negócios e ilimitado. Você pode comprar o plano pessoal para 1 licença de site, negócios para 3 sites, e ilimitado para sites ilimitados.

No Elementor Pro, você conta com mais de 300 modelos pré-prontos da versão profissional, além dos 150 modelos gratuitos.

Você também obter o que é chamado Elementor Kits — coleções de modelos que todos seguem a mesma estética de design e permitem que você crie um site inteiro, consistente.

A biblioteca contém todos os tipos de páginas comuns para diferentes propósitos.

Você vai encontrar uma boa seleção de páginas, páginas de Contato, páginas de entrada, páginas de destino (também para vários nichos, como um hotel, restaurante e assim por diante), portfólios, páginas de equipe e muito mais.

Entre os benefícios de usar a versão profissional:

  • Biblioteca rica de blocos de construção e modelos pré-prontos
  • Mais opções de responsividade para dispositivos de telas menores
  • Construtor de popup incrível
  • Possibilidade de criar um tema personalizado para seu site

Qual escolher: Elementor Free ou Elementor Pro?

Muitos tem essa dúvida na hora de escolher qual versão utilizar. Afinal, qual é a melhor para seu negócio: elementor Free vs Pro?

Em geral, se você só quer projetar algumas posts/páginas ou páginas básicas landing page, você provavelmente pode se safar com a versão gratuita.

Como falamos dentro do WpSamurai, a versão Elementor Pro não é a única maneira de estender as funcionalidades do Elementor.

Por exemplo, se você quiser mais flexibilidade para personalizar o seu tema, você não precisa comprar Elementor Pro. Em vez disso, você pode utilizar um bom tema e adicionar plugins gratuitos extras que poderão te ajudar num melhor resultado.

Quer aprender passo a passo a desenvolver sites profissionais?

Veja nossas vídeo-aulas do extremo básico ao profissional avançado!