Como usar o construtor de páginas Elementor com WordPress

Quando falamos sobre construtores de páginas WordPress, o mais popular, o que tem o maior número de instalações ativas e a maior comunidade é definitivamente o Elementor. Até agora, existem cerca de 8 milhões de sites construídos com Elementor. É recomendado por muitos especialistas por sua facilidade de uso, velocidade e enormes possibilidades ao construir sites WordPress.

Testei a versão Pro do Elementor e construí uma página de destino. Ele vem com a funcionalidade de arrastar e soltar e funciona com qualquer tema e você pode usar todos os widgets Free, Pro e WordPress ao mesmo tempo. Vamos ler este artigo para saber mais sobre a instalação e configuração do Elementor com WordPress.

Por que escolher o Elementor Page Builder?

Elementor é um dos primeiros e um dos mais avançados criadores de páginas WordPress do mercado no momento. Ele também possui um enorme ecossistema ao seu redor e muitos autores menores estão construindo complementos e modelos úteis que você pode usar para reduzir o tempo necessário para o resultado final.

No caso da Elementor, o resultado final pode ser um site realmente incrível, bem projetado com todas as funcionalidades que você precisa ou pode precisar. Você não encontrará nenhum tipo de site WordPress que não possa construir usando o Elementor. Se você precisar de alguma funcionalidade extra, ela pode ser facilmente implementada com códigos de acesso.

Recursos do Elementor Page Builder

A versão gratuita do Elementor vem com um número limitado de elementos, mas com a versão Pro, você obtém add-ons como QI, Ultimate Add Ons, etc. Além disso, você terá um monte de elementos úteis e modelos para construir seu site com facilidade .

Não seria justo deixar de fora o add-on Crocoblock para Gutenberg e Elementor, que é uma das ferramentas favoritas para a maioria dos usuários do Elementor, pois estende as funcionalidades nativas do Elementor.

Elementor dividiu seus recursos em 4 categorias.

1. Widgets básicos

Os widgets básicos vêm com a versão gratuita e são suficientes para construir um site impressionante que não requer opções avançadas como índice, portfólio ou formulário. Além disso, na versão gratuita, você não pode construir um Menu de Cabeçalho / Nav e pode precisar encontrar algum tema legal do WordPress com o Menu de Navegação de sua preferência.

2. Pro Widgets

Os Widgets Pro com Elementor Pro cobrem quase todos os aspectos e todos os widgets de que você pode precisar para construir qualquer tipo de site. Adicione e escolha postagens de diferentes categorias, tipos de postagens ou simplesmente liste os mais recentes, Tabelas de preços, Galeria, Flip Box, Easy Social Media Networks incorporadas, Vários carrosséis de mídia, Lottie Widget e HotSpot (falarei sobre isso mais tarde).

3. Elementos do tema

Os Elementos do Tema também vêm com o Elementor Pro e são importantes para construir todas as páginas de modelo e um único modelo de postagem, é claro. Como você sabe, existem páginas que são preenchidas dinamicamente com conteúdo como Categoria, Tag, Autor, etc.

Para essas páginas, você precisa criar um modelo usando elementos de tema. O mesmo acontece com a Postagem Única, onde você pode criar um lindo modelo para suas postagens que será usado por todas as postagens sem a necessidade de criá-los todas as vezes. Basta adicionar o conteúdo como você está acostumado e pronto.

4. Widgets WooCommerce

E por último, mas não menos importante, WooCommerce Widgets. Esses widgets permitem que você crie novamente semelhante ao Theme Builder, as páginas de modelo e o modelo de produto único com facilidade usando elementos WooCommerce.

Preços e planos do Elementor Page Builder

Elementor Pro vem com 5 planos diferentes, todos eles contêm o mesmo criador de páginas Elementor Pro e recursos como:

• Drag & Drop Live Editor
• Design Responsivo
• Mais de 90 widgets básicos e profissionais
• Mais de 300 modelos básicos e profissionais
• Theme Builder

O plano mais baixo é Essential para 1 site ao preço de $ 49. Com este plano, você obtém Suporte Premium, o que significa que pode esperar uma resposta em 24h. O próximo plano é o Advanced e cobre uma licença para 3 sites ao preço de $ 99 com o mesmo tipo de suporte.

Provavelmente, o mais popular é o Expert por US $ 199 para 25 sites. Além disso, você receberá um Perfil de Especialista do Elementor, onde poderá postar seus projetos concluídos no Elementor e obter alguns novos clientes.

Um antes do topo é o Studio para 100 sites ao preço de $ 499 e aí você tem um benefício extra de Suporte VIP, o que significa que você tem prioridade e seus tíquetes serão respondidos em 30 minutos. O mesmo acontece com o plano de Agência mais caro para 1000 sites ao preço de $ 1000.

Todos os planos são anuais e se você se pergunta o que acontecerá com os sites se sua assinatura expirar, a resposta é: os sites terão a mesma aparência de antes, mas você não poderá editar ou usar elementos e modelos da Elementro Pro.

Requisitos de sistema / hospedagem do Elementor

De acordo com a página de requisitos do sistema do Elementor, ele deve funcionar mesmo com 128 MB de PHP, MySQL 5.6 ou superior ou MariaDB 10.0 ou superior. Além disso, deve funcionar com qualquer PHP 7 +. Para fins de teste, usei VultrHF com memória PHP de 2 GB.

Claro, você precisaria da versão mais recente do WordPress e de todos os outros plug-ins atualizados.

Instalar e configurar o Elementor Page Builder

A instalação da versão gratuita do Elementor é igual a de qualquer outro plugin no repositório de plugin do WordPress, vá para o painel do WordPress → Plugins → Adicionar novo, navegue para Elementor, instale e ative o plugin.

Para a versão Pro, você precisa comprar o plano que criará automaticamente uma conta no Elementor. Ao fazer login, você verá o botão de download para baixar a versão Pro mais recente.

Enquanto você ainda está conectado ao painel do Elementor, faça o login no Painel do WordPress → Plugins → Adicionar novo e selecione Upload, navegue pelo arquivo baixado do Elementor Pro do seu computador, instale e ative-o.

Quando terminar na barra lateral esquerda do painel do WordPress, vá para Elementor → clique em Licença → clique no botão Conectar e ativar.

Quando clicado, você será redirecionado automaticamente para o seu painel no Elementor para ativá-lo. Clique no botão verde Ativar e pronto. Seu Elementor Pro está conectado e ativado.

Após a ativação, você verá a confirmação de que seu Elementor está ativo. No entanto, se você construiu o site em um domínio de teste e não deseja comprar outra licença ao vivo, pode facilmente desconectar a conta no teste e ativá-lo no domínio ao vivo.

É hora de começar a usar o Elementor e construir seu site. Minha sugestão é usar o Hello Theme by Elementor criado especificamente para o Elementor.

Para fazer isso, vamos começar criando uma página “Homepage” e editá-la com o Elementor. Vá para Pages → Add New, chame-o de Homepage e publique-o, então clique no botão Edit With Elementor.

Na página Editar, você verá Elementos que não pode editar porque o Layout está definido como padrão. Para usar o Elementor em uma tela vazia, selecione Elementor Full Width ou Elementor Canvas clicando no ícone de engrenagem no canto inferior esquerdo.

Antes de começar a construir o site, certifique-se de clicar no ícone do hambúrguer no canto superior esquerdo e definir todas as configurações globais necessárias para o resto do trabalho.

As configurações do site são bastante semelhantes à configuração do tema. Aqui, você pode selecionar as cores globais, as fontes que usará e a tipografia completa do site para cada tag HTML.

Além disso, você pode definir o estilo do botão global, cabeçalho, rodapé, CSS personalizado se necessário e tudo que você precisa para definir e manter assim em todo o site para manter a consistência também.

A segunda opção é Theme Builder, que permite criar as páginas de modelo e modelos de post / produto únicos, que serão usados ​​automaticamente pela página, postagem ou produto específico gerado dinamicamente. Como todo tema do WordPress precisa ter arquivos de modelo para exibir todos os itens acima, o Elementor permite que você faça isso sem escrever nem mesmo uma única linha do código.

A última opção são as preferências do usuário, onde você pode configurar seu ambiente de trabalho no Elementor, nada que afete o site em si, mas sua UI como administrador.

Para lançar o seu site, todos os widgets disponíveis são colocados na barra lateral esquerda e tudo pode ser editado visualmente e arrastando e soltando. Se desejar uma maneira mais fácil de fazer isso, você pode começar usando um dos blocos ou modelos predefinidos clicando no ícone da pasta.

O ícone da pasta abrirá uma janela pop-up, onde você poderá ver os blocos e modelos predefinidos, bem como os que você salvou antes. Você também pode salvar um bloco ou um modelo inteiro criado e reutilizá-lo em alguma outra página interna. É bastante comum usar o seu bloco salvo para depoimentos, alguma frase de chamariz específica que não deveria ser exibida em todas as páginas, mas em algumas.

Há mais uma coisa que você precisa saber quando você começa a construir um site sem nenhuma experiência anterior, é fácil de usar, bastante intuitivo e sem nenhuma experiência anterior em alguns dias, você será mais do que capaz de construir um bom site , Posso dizer que até mesmo com aparência profissional.

No entanto, seu site precisa ter uma ótima aparência em todos os tamanhos de dispositivo e, da mesma forma que você editou a versão para desktop, você pode editar todos os outros tamanhos. Observe que os elementos e widgets só podem ser adicionados à versão desktop e, em seguida, você pode enganar a aparência em tamanhos menores.

Além disso, você pode definir facilmente o widget ou a visibilidade da seção em diferentes dispositivos, para que possa ter conteúdo diferente em uma seção semelhante, deixando uma seção visível em uma área de trabalho, mas oculta em um tablet e celular. Da mesma forma, outro escondido de um desktop, mas visível no tablet e celular.

Para editar as versões para celular e tablet, clique no ícone modo responsivo na parte inferior da barra lateral esquerda, ele mostrará seu site no celular. E, na parte superior, você pode alternar entre diferentes tamanhos de tela.

Para maior clareza, adicionei duas seções em que uma está oculta no celular e no tablet e a outra está oculta no desktop. Por favor, veja o exemplo abaixo.

O resultado final está no celular.

E o resultado final na área de trabalho tem apenas uma seção, mas a diferente.

Desempenho do Elementor Page Builder em Cloudways

Elementor tem um desempenho muito bom e pontua 100 no GTMetrix e as outras ferramentas de teste mostram um desempenho realmente excelente. Observe que não otimizei nenhuma imagem para ter exatamente o mesmo tamanho de página e imagens em todos os testes que fizemos.

- Resultados do Elementor no GTMetrix

- Resultados do Elementor nas Ferramentas Pingdom

- Resultados de Elementor em WebPageTest

Resumo

Se você precisa de um construtor de páginas intuitivo e fácil de usar, o Elementor pode cobrir todos os aspectos necessários para construir um bom site. Não é tão difícil construir sites perfeitos a partir do design se você tiver algum conhecimento de CSS.

Com a enorme comunidade e centenas de add-ons e plug-ins externos estendendo as funcionalidades básicas do Elementor, não consigo ver nenhum tipo de site que não possa ser construído usando o Elementor.

Muitas vezes vemos como o Elementor está inchado, muito código desnecessário está sendo carregado, é difícil de otimizar, mas como você pode ver nos testes, parece que o Elementor tem um desempenho muito bom no Cloudways. Testei a landing page com 25 imagens internas e 7 seções + Cabeçalho e Rodapé, o que está acima da média para a página inicial.

Outra coisa excelente sobre o Elementor é que a curva de aprendizado não é íngreme, mas bastante leve e em apenas alguns minutos, usando alguns modelos ou blocos pré-fabricados, você pode ter um site realmente bem projetado e de aparência moderna.