Como instalar e usar o plugin Elementor Wordpress

Interessado em construir um site incrível utilizando elementor wordpress plugin?

Equipe Planejador WebAtualizado em 16 min de leitura
Como instalar e usar o plugin Elementor Wordpress
Neste artigo
  1. Introdução ao Elementor
  2. Instalando Elementor
  3. Explorando as opções do Elementor
  4. Configurações Elementor
  5. Quais widgets estão incluídos?
  6. Elementor Free vs. Elementor Pro
  7. Tabela de comparação de recursos Elementor
  8. Preços Elementor Pro
  9. Como usar o Construtor de páginas gratuito da Elementor
  10. Etapa 1. Crie uma nova postagem ou página
  11. Etapa 2. Edite com Elementor
  12. Etapa 3. Arraste elementos para a página principal
  13. Etapa 4. Editar configurações
  14. Etapa 5. Publique sua página
  15. Resumo do Construtor de Páginas
  16. Como usar o Theme Builder da Elementor
  17. Criar um cabeçalho / rodapé com Elementor
  18. Etapa 1. Clique em “Modelos” no Painel do WordPress
  19. Etapa 2. Adicionar novo ou importar modelo
  20. Etapa 3. Edite seu novo modelo
  21. Crie páginas do WooCommerce com Elementor
  22. O que Elementor está faltando
  23. Como criar modelos com Elementor
  24. Criar um modelo de página com Elementor
  25. Etapa 1. Clique em “Modelos” no Painel do WordPress
  26. Etapa 2. Adicionar novo ou importar modelo
  27. Etapa 3. Edite o modelo de página
  28. Conclusão
Tempo de leitura estimado: 13 minutos

Interessado em construir um site incrível utilizando elementor wordpress plugin?

Bem, boas notícias … Agora é mais fácil do que nunca! Não há necessidade de codificar manualmente cada página do zero porém mesmo com tanta facilidade criar um site exige um tempo de experiência de tela. Isso significa horas e horas ajustando widgets assim os contrutores da Wix.

A diferença de usar o WordPress, é que o Wix foi feito para pessoas sem conhecimento em programação e o WordPress para desenvolvedores com um pouco de conhecimento. O WordPress contém muito mais recurso do que um site da Wix entre outros construtores 33% dos sites online do mundo são WordPress. Qualquer dúvida acesse wix vs wordpress.

Oferecemos serviços de criação de sites profissionais caso queira um site incrível com preço justo.

Hoje em dia, tudo o que você realmente precisa é de um plugin chamado Elementor , um dos criadores de páginas WordPress mais versáteis e acessíveis do mercado. Melhor ainda, é totalmente gratuito para começar!

Homepage da Elementor - Construtor de páginas líder mundial

Neste post, abordaremos como usar o Elementor passo a passo e abordaremos alguns de seus melhores recursos. No final, você deve ter tudo o que precisa para criar um site WordPress que impressiona em pouco tempo!

Introdução ao Elementor

O Elementor é um construtor de páginas popular que combina bem com temas leves do WordPress, como o Astra . Este construtor de páginas permite controlar todos os aspectos da aparência visual e do layout das páginas e postagens do seu site, com dezenas de widgets adicionando funcionalidade por meio de uma interface limpa de arrastar e soltar.

Agora, lembre-se, o próprio Elementor não é um tema do WordPress – é estritamente um plugin. Isso é importante porque você ainda precisará escolher um tema dedicado para lidar com outros aspectos do seu site.

Instalando Elementor

Agência Planejador Web possui mais de 30 profissionais de marketing, está há 9 anos no mercado atendendo mais de 5 mil empresas. Montamos equipe de 3 a 7 profiisionais para executar mensalmente o marketing digital da sua empresa. agência de mídias sociais e anunciar no Google a partir de R$590/mês, Criação de sites a partir de R$990. Confira agora nossos Planos e preços clicando aqui.

Depois de instalar o WordPress e um tema escolhido em seu site, existem algumas rotas diferentes que você pode seguir para instalar o construtor de páginas Elementor:

Método 1: Site da Elementor. Visite o site da Elementor e obtenha a versão gratuita do Elementor diretamente. Um botão de download é exibido com destaque na parte superior da página inicial. Depois de inserir seu e-mail, seu navegador fará o download automaticamente do arquivo ZIP.

elementor obrigado por baixar a página

Em seguida, navegue até a seção de plug-ins no back-end do seu site WordPress, clique em “Adicionar novo” e carregue o arquivo .ZIP no seu site através do botão “Carregar plug-in” na parte superior.

WordPress adicionar menu de seção de plugins

Uma vez instalado, basta clicar em “Ativar” e está pronto para começar!

Método 2: Painel do WordPress. Entre no back-end do seu site WordPress e prepare-se para instalar o plug-in clicando no botão “Adicionar novo” na guia Plug-ins.

Para encontrar o Elementor, basta digitar a palavra “Elementor” na barra de pesquisa do plugin. O Elementor Page Builder deve aparecer como a primeira opção de plug-in para você instalar.

Adicionando o plugin Elementor através da página do plugin

Basta clicar em “Instalar” e depois em “Ativar” depois de baixado.

ou baixa aqui  arquivo:

Elementor Website Builder Elementor Website Builder

Author(s): Elementor.com

Current Version: 3.0.10

Last Updated: 23/09/2020

elementor.3.0.10.zip

96%Ratings 5.000.000+Installs WP 5.0+Requires

Qualquer que seja o método escolhido para instalar o Elementor, você poderá encontrar o Elementor na sua lista de “Plugins Instalados” a partir de agora – e também terá sua própria entrada no menu lateral. Nessa área, você poderá ajustar as configurações do plug-in.

Opção de configurações do Elementor

Ao contrário de muitos plugins, no entanto, a maior funcionalidade do Elementor acontece nas próprias páginas. Isso significa que você passará a maior parte do tempo usando o Elementor ao criar ou editar páginas e postagens.

Explorando as opções do Elementor

Vamos dar uma olhada na criação de nossas próprias páginas e modelos com o Elementor em breve, mas primeiro, vamos dar uma olhada de alto nível nas opções que você tem com o Elementor !

Um dos recursos mais importantes de qualquer construtor de páginas é a facilidade de uso. Você precisa entrar em cena e tornar sua visão uma realidade sem muitas pesquisas frenéticas e violentas no YouTube.

Felizmente, o Elementor é um dos construtores de páginas mais fáceis que já usei. É um editor front-end, o que significa que você pode ver exatamente como a página ficará enquanto estiver trabalhando nela.

Depois de se acostumar com o fluxo de trabalho de arrastar widgets para a página e ajustar as propriedades na barra lateral, você perceberá que é o mais intuitivo possível.

A maioria das opções de personalização encontradas no Elementor são baseadas nos widgets que acompanham o plug-in.

Configurações Elementor

O Elementor possui várias configurações de nível superior que você pode encontrar diretamente no plug-in. Isso permite que você faça coisas como verificar com quais tipos de postagens o Elementor trabalha, definir fonte e espaçamento padrão e ajustar as configurações de responsividade.

Configurações gerais do Elementor - Painel do WordPress

Há também uma útil função Role Manager no Elementor que permite categorizar quais tipos de usuários podem ter acesso ao editor Elementor (nota: esse é apenas um recurso no Pro ).

Quais widgets estão incluídos?

Em geral, o Elementor é baseado em um editor de arrastar e soltar que acomoda seções, colunas e widgets. O sistema está dividido da seguinte forma:

Seções – Contêineres para colunas e widgets.

Colunas – seções que contêm widgets.

Widgets – elementos individuais na página.

Widgets gratuitos Elementor

Esses widgets são categorias simples de conteúdo que permitem personalizar sua página da web. Na versão gratuita do Elementor , você obtém acesso a elementos básicos.

Aqui está uma lista rápida de vários widgets básicos que você usará com frequência:

  • Título
  • Imagem
  • Editor de texto
  • Vídeo
  • Botão
  • Divisor
  • Ícone
  • Espaçador
  • Google Maps

No total, você recebe quase 30 elementos básicos que oferecem tudo o que você precisa para criar uma página funcional. Simplesmente arraste uma instância de um elemento para a página principal.

Se esses elementos básicos não forem suficientes, é possível obter widgets adicionais atualizando para o Elementor Pro . No entanto, eu argumentaria que a maior parte do que você pode fazer no Pro é possível na versão gratuita – leva apenas mais tempo.

Agência Planejador Web possui mais de 30 profissionais de marketing, está há 9 anos no mercado atendendo mais de 5 mil empresas. Montamos equipe de 3 a 7 profiisionais para executar mensalmente o marketing digital da sua empresa. agência de mídias sociais e anunciar no Google a partir de R$590/mês, Criação de sites a partir de R$990. Confira agora nossos Planos e preços clicando aqui.

Cabe a você decidir se precisa dos widgets premium encontrados na versão Pro. Aqui está uma amostra rápida das dezenas de widgets encontrados no Elementor Pro:

  • Portfólio
  • Formato
  • Flip box
  • Tabela de preços
  • Bloco de citação
  • Apelo à ação

Esses elementos Pro ajudarão a tornar seu site mais elegante e profissional e também foram projetados para apoiar os esforços de comércio eletrônico, incluindo uma integração profunda com o WooCommerce.

Leitura adicional:  Guia de Migração de HTTP para HTTPS em Profundidade para WordPress

Por fim, o Elementor suporta widgets de terceiros. Você pode encontrar muitos complementos Elementor de terceiros que expandem ainda mais seus widgets disponíveis ou até mesmo desenvolvem seu próprio widget com recursos de desenvolvimento da Elementor!

Não tem certeza de que deseja adicionar widgets extras? Embora possa ser conveniente ter widgets para tudo o que você deseja fazer em seu site, não é absolutamente necessário – ainda existem inúmeros plugins gratuitos de WordPress de terceiros que funcionam bem em conjunto com Elementor e seu tema WordPress.

Elementor Free vs. Elementor Pro

Se você quer um sofisticado criador de páginas grátis com mais recursos do que muitas opções pagas , o Elementor Free é uma ótima opção!

Com isso dito, o Elementor Pro adiciona vários recursos desejáveis ​​para acelerar seu fluxo de trabalho e fornecer ainda mais controle sobre a aparência e a funcionalidade do seu site. As inclusões do construtor de temas, dos widgets premium e dos elementos globais são bem-vindas, mas você certamente não precisa deles para criar um ótimo site.

Tabela de comparação de recursos Elementor

Aqui está uma rápida visão geral das principais diferenças que você encontrará entre Elementor Free e Elementor Pro.

Elementor Free Elementor Pro
Preço Livre A partir de US $ 49 / ano
Número de Widgets 25+ 50+
Construtor de páginas ✓ ✓
Theme Builder X ✓
Suporte 24/7 incluído X ✓
Conteúdo Dinâmico X ✓
Modelos e blocos profissionais X ✓
Integrações X ✓

Este é um instantâneo geral das diferenças entre as duas versões, mas você pode aprender mais sobre o Elementor Pro vs Free aqui no site da Elementor.

Preços Elementor Pro

Se você está pensando em escolher uma das versões pagas do Elementor Pro, observe que todos os três planos oferecem exatamente os mesmos recursos!

Quero deixar claro: a única diferença entre os planos Pro é quantas licenças você está comprando ao mesmo tempo.

tabelas elementor pro prcing

Com o Personal , você obtém o Elementor Pro por um site por US $ 49 por ano.

Com o Plus , você obtém o Elementor Pro em 3 sites por US $ 99 por ano.

Com o Expert , você obtém o Elementor Pro em mil sites por US $ 199 por ano.

Qual é a certa para você? Para indivíduos ou equipes pequenas, o Plus é definitivamente o melhor valor, desde que seja provável que você gerencie mais de um site com o Elementor Pro no próximo ano.

Você sempre pode optar por começar com o Personal e atualizar para o Plus mais tarde, se decidir gostar do Elementor e desejar mais licenças.

Como usar o Construtor de páginas gratuito da Elementor

Então, com tudo isso fora do caminho, você está pronto para ver o Elementor em ação?

Este construtor de páginas funciona com tipos de postagem personalizados e tem muitos modelos prontos para escolher, mas, para esta postagem, vamos ver como é começar no ponto inicial.

Etapa 1. Crie uma nova postagem ou página

Vá para o painel do seu site WordPress e clique em “Adicionar novo” em Postagens ou páginas. Para este tutorial, vou fazer uma nova postagem no blog.

Etapa 2. Edite com Elementor

Depois de chegar a essa tela, você pode optar por editar a página com o editor padrão do WordPress. Para usar o Elementor, você deve clicar no botão “Editar com o Elementor”.

Botão Editar com Elementor

Etapa 3. Arraste elementos para a página principal

Esta página estará vazia inicialmente. Escolha e arraste elementos da barra lateral Elementor.

Vamos criar um novo cabeçalho para a página. Tudo que você precisa fazer é clicar na caixa que diz “Título”, mantenha pressionado o botão do mouse e arraste-o para a área do widget na página (onde diz “Arraste o widget aqui”).

Se você não deseja que esse elemento ocupe toda a largura da sua página (o que ocorre por padrão), clique no pequeno botão “mais” para personalizar a estrutura dessa seção da sua página.

Adicionar elemento Elementor com sinal de adição

Depois de clicar no botão de adição, você verá uma opção para “Selecionar sua estrutura”. Vamos com três colunas iguais.

Seletor de estrutura Elementor com opções diferentes

Depois de clicar nesse ícone com as três colunas, agora vemos uma seção totalmente nova na página com três colunas, cada uma com um botão de adição.

E se queremos personalizar o que vemos nesta seção? Você adivinhou: arrastamos um widget para lá.

Arrastei um elemento de vídeo para a coluna do meio, que é pré-carregada com uma lista de reprodução de vídeo Elementor por padrão.

Adicionando vídeo na coluna

Etapa 4. Editar configurações

Para cada seção ou elemento que você coloca na página, você tem opções para personalizá-lo ainda mais. Basta procurar os seis pontos.

Editar seção Elementor

Se selecionarmos o cabeçalho, por exemplo, podemos alterar seu conteúdo, estilo ou recursos avançados, como margens e preenchimento, capacidade de resposta e assim por diante.

Etapa 5. Publique sua página

Quando estiver satisfeito com as configurações, é hora de verificar o produto final. Vimos como é esta página no editor, mas se dermos uma olhada na pré-visualização da página real, veremos que é a mesma!

Isso é uma coisa muito boa. Isso significa que, quando a página em que você está trabalhando estiver no ar, você pode ter certeza de que ela se parece exatamente com a enquanto a editava. Essa é uma das características mais importantes do Elementor.

Resumo do Construtor de Páginas

Obviamente, esse foi um exemplo rápido – e a divulgação completa, eu não sou designer – mas mostra como é fácil colocar elementos e criar um site em funcionamento!

O ponto principal é que você não precisa ser um especialista para criar um site com a Elementor. E com vários modelos para escolher, você nunca precisa começar do zero, a menos que queira. É altamente recomendável que você analise o Tema Astra – ele inclui vários modelos Elementor incluídos, chamados de Modelos para iniciantes, que você pode usar.

Há mais um ponto importante que quero enfatizar aqui: se você escolhe Elementor Free ou Elementor Pro , as porcas e parafusos do construtor de páginas da Elementor são idênticos. O Pro oferece apenas funcionalidades mais avançadas por meio de widgets premium para ajudá-lo imediatamente com marketing, comércio eletrônico, design e integrações com outras ferramentas comuns, como MailChimp e Adobe TypeKit.

Foi uma ótima decisão configurar o Elementor dessa maneira, porque você não precisará reaprender nada quando estiver pronto para dar o salto do Elementor Free para o Elementor Pro.

Como usar o Theme Builder da Elementor

Geralmente, quando algo fica mais fácil de usar, ele tem que abandonar recursos úteis. Felizmente, o Elementor é um caso especial que é fácil de usar e incrivelmente versátil, graças em grande parte ao seu construtor de temas.

Leitura adicional:  O que é e como usar o painel de controle administrativo (wp-admin) WordPress

Disponível na versão Pro da Elementor, o construtor de temas é um divisor de águas para qualquer pessoa familiarizada com os construtores de páginas, porque permite criar cabeçalhos, rodapés e outros conteúdos dinâmicos personalizados para o seu site. Ele ainda permite que você substitua aspectos do seu tema WordPress, para que você possa manter o que está funcionando e apenas fazer as alterações desejadas!

Por que você precisaria de conteúdo dinâmico? Bem, às vezes você pode hospedar uma página de vendas que não possui um cabeçalho e barra lateral tradicionais ou salvar um layout de postagem de blog personalizado que pode ser usado sempre que adicionar uma nova postagem. As possibilidades são infinitas.

Criar um cabeçalho / rodapé com Elementor

Pronto para criar um cabeçalho ou rodapé personalizado com Elementor usando o construtor de temas? Aqui está como é feito!

Etapa 1. Clique em “Modelos” no Painel do WordPress

Após fazer login no painel do WordPress, vá para “Modelos” em Elementor no menu lateral.

Painel de modelos Elementor

Etapa 2. Adicionar novo ou importar modelo

É aqui que você cria um novo modelo para o seu cabeçalho.

Seção de modelos salvos no menu Elementor

Se você já viu um cabeçalho que gostou da aparência, pode importá-lo para usá-lo como ponto de partida. Caso contrário, clique em “Adicionar novo”.

Isso abrirá uma caixa de diálogo, permitindo que você escolha o tipo de modelo – neste caso, o cabeçalho – junto com o nome do seu modelo.

Tela Novos Modelos Elementor

(Nota: o Elementor Free inclui apenas modelos de seção e página. A versão Pro inclui várias categorias de modelos adicionais, incluindo widget global, cabeçalho, rodapé, único e arquivo.)

Etapa 3. Edite seu novo modelo

Se essa etapa parecer familiar, é porque é o mesmo editor exato que usamos para criar uma página inteira anteriormente. Agora, é aplicado à criação de um cabeçalho personalizado.

Você pode seguir o processo para criar seu layout com diferentes widgets e até imagens específicas ou outro conteúdo. Depois de salvar seu novo cabeçalho, ele é facilmente acessível a partir de uma nova página.

Adicionar elemento Elementor com sinal de adição

Crie páginas do WooCommerce com Elementor

O processo para criar uma página personalizada do produto WooCommerce é semelhante a qualquer outra página ou seção que você possa criar. Sentindo um padrão aqui?

Com seu WooCommerce Builder, a Elementor suporta a capacidade de criar um modelo para uma página de “Produto único”. Depois de criar um novo modelo, você verá uma biblioteca de modelos cheia de blocos ou páginas inteiras que você pode usar para a página do seu produto WooCommerce.

Lembre-se de que este modelo do WooCommerce terá vários widgets de produtos dinâmicos, incluindo título, imagem e preço do produto. Você pode definir os detalhes dos produtos com o WooCommerce e usar o Elementor para exibir informações atualizadas sobre o produto no front end.

É simples assim!

O que Elementor está faltando

Eu queria mostrar quantas características diferentes o construtor de temas da Elementor tem!

No entanto, apesar de toda essa flexibilidade, ainda há algumas coisas que a Elementor não pode fazer. Lembre-se, Elementor não é um tema – apenas usa seu construtor de temas para substituir determinados recursos do tema.

Para obter um controle louco do seu tema, é altamente recomendável usar o Astra Pro e o Elementor. O Astra oferece opções de cabeçalho e rodapé, mega menus e muito mais!

Modelos iniciais para Elementor

Outro grande benefício do Astra é sua coleção de modelos iniciais prontos para importar para o Elementor, incluindo opções gratuitas e pagas.

Por exemplo, se você estivesse configurando um site para um instrutor de fitness, poderia usar o site inicial do Astra como instrutor de fitness e fundá-lo.

astra fitness trainer starter site com elementor com cara boxe em segundo plano

É fácil importar um site inicial Astra! Você só precisa da versão gratuita ou paga do Astra Theme instalada, além do plugin Starter Templates gratuito . Depois de configurar os dois, você poderá fazer login no painel do WordPress, navegar para Aparência> Modelos iniciais e selecionar o site que deseja importar.

Complementos finais para Elementor

Além desses modelos, temos um plugin chamado Ultimate Addons for Elementor que oferece funcionalidade adicional não encontrada no Elementor. Isso vai além do Elementor Pro ao oferecer widgets avançados, como alternância de conteúdo, pop-up modal, linha do tempo e índice.

Para controle e flexibilidade máximos, vale a pena conferir Ultimate Ultimate Addons for Elementor!

Como criar modelos com Elementor

Você pode criar modelos para todos os tipos de seções e páginas, incluindo:

  • Página
  • Cabeçalho
  • Rodapé
  • Postagem única
  • Arquivo do blog
  • Páginas do produto

Neste exemplo, vamos trabalhar com o modelo de postagem / página.

Criar um modelo de página com Elementor

No Elementor, a página e a postagem são cobertas pelo “modelo de página”. Este é um modelo salvo que você pode usar para qualquer nova página ou postagem de blog, permitindo manter a consistência, mesmo com vários membros da equipe fazendo a postagem.

Melhor ainda, este está disponível para todos os usuários Elementor, incluindo o Elementor Free.

Etapa 1. Clique em “Modelos” no Painel do WordPress

Após fazer login no painel do WordPress, vá para “Modelos” em Elementor no menu lateral.

Painel de modelos Elementor

Etapa 2. Adicionar novo ou importar modelo

É aqui que você cria um novo modelo para o seu cabeçalho.

Na caixa de diálogo, escolha o tipo de modelo de página e atribua um nome ao seu novo modelo.

Em seguida, clique em “Criar modelo” para começar!

Etapa 3. Edite o modelo de página

Assim como anteriormente, quando criamos nossa própria página, você usará o mesmo editor aqui. É tão simples quanto criar novas seções, alterar as colunas e arrastar widgets diferentes para a página.

Depois de criar uma página que você gosta, você pode salvá-la como um modelo para que fique acessível para qualquer outra página daqui para frente.

Conclusão

Uau, nós cobrimos muito terreno com a Elementor neste post!

Em termos de tópicos principais, espero que você possa ver por que o Elementor é um construtor de páginas fantástico que tira muitas das suposições do design da web. Ele alcança um equilíbrio ideal entre facilidade de uso e funcionalidade profunda, tornando-o um dos criadores de páginas mais acessíveis disponíveis para o WordPress.

Também espero que você se lembre de dar uma olhada no Astra como tema do WordPress para parear com o Elementor. O Astra é leve, rápido e incrivelmente flexível, adicionando recursos complementares ao Elementor para que você possa criar qualquer coisa que sua mente sonhar!

Obrigado pela leitura! Felizmente, este post deu a você um ótimo ponto de partida para o sucesso com a Elementor. Se você tiver quaisquer perguntas ou comentários, compartilhe-os abaixo!

Avalie este artigo post Compartilhe com alguém ou em suas redes sociais

Leia também

Pronto para crescer no digital?

Receba um diagnóstico gratuito do seu site e das suas campanhas.

↗