Revisão e Tutorial 2021 Do Construtor De Páginas Elementor
Elementor PRÓS
  • O produto principal é 100% gratuito
  • Ótima interface de usuário
  • Widgets globais são fantásticos
  • Código aberto
  • Grupo ativo do Facebook
  • Personalização extrema
  • Atualizações regulares

Elementor CONTRAS

  • Estilo forçado por padrão
  • Modelos globais versus estáticos podem ser confusos
  • Faltando alguns recursos orientados para o marketing
  • Menos modelos de página do que alguns concorrentes

 

O Que É Elementor?

Lembro-me da primeira vez que ouvi falar do Elementor.

Pelo contexto, não pude realmente dizer o que era.

E estranhamente, tudo que eu conseguia pensar era nos Dementadores de Harry Potter.

dementors harry potter - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Depois de assistir a todos os oito filmes naquele fim de semana, não demorou muito para que eu percebesse mais e mais pessoas falando sobre isso.

Elemento ou isso . Elemento ou aquilo .

Agora eu realmente precisava descobrir o que era. E desta vez, eu não iria deixar minha imaginação levar o melhor de mim.

Então, abri uma nova guia, passei para o Google e digitei a palavra “Elementor”.

Para minha decepção, percebi que era apenas OUTRO construtor de páginas WordPress .

Não fazia Sentido.

Como todos podem estar tão entusiasmados com um construtor de páginas WordPress? Quer dizer, não é nada que não tenhamos visto antes.

Será que realmente vale a pena o hype?

Nossa Análise Elementor

elementor user interface - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Elementor não é mais o novo garoto do bairro. É um construtor de sites totalmente desenvolvido e em constante evolução, com muitos ases na manga.

Apesar da competição acirrada, ele rapidamente se tornou um dos criadores de páginas visuais mais populares para WordPress e continua a crescer em um ritmo rápido.

Desde seu lançamento em meados de 2016, o Elementor teve mais de 5 milhões de  instalações e uma  classificação impressionante de 4,8 estrelas no WordPress.org.

As pessoas claramente adoram – mas isso é apenas a última moda ou o Elementor é realmente o criador de páginas definitivo para WordPress?

Vamos descobrir em nossa análise Elementor.

O Bom, O Mau E O Feio

Para esta revisão, iniciei o Elementor para ver como este construtor de páginas se sai em comparação com as alternativas populares.

De agora em diante, compartilharei minhas experiências com esta ferramenta, bem como o que gostei e não gostei ao longo do caminho.

Vamos fazer isso.

Instalando Elementor

Não há nada pior (bem, quase nada) do que querer testar um novo construtor de páginas do WordPress e encontrar problemas técnicos ao tentar instalá-lo.

Adicionar Elementor à instalação do WordPress é tão fácil quanto adicionar qualquer outro bom plugin:

Elementor Plugin Installation - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

 

Se você tiver a sorte de possuir a versão Pro, a instalação aqui também é fácil. Basta baixar o arquivo ZIP de instalação, enviá-lo por meio da tela ‘Adicionar plug-ins’ e pronto.

Isso é muito mais fácil do que o processo que certos criadores de páginas do WordPress seguem, incluindo o que tive de carregar via FTP.

Se você não está familiarizado com FTP, é o que Fred Flintstone usou para enviar seus plug-ins de construtor de páginas.

NB Elementor Pro é um “add-on” para a versão gratuita do Elementor, ou seja, você precisa da versão gratuita instalada para que a versão Pro funcione.

A Interface Do Usuário

Antes de mergulharmos nos detalhes da interface de usuário do Elementor, queremos dar aos desenvolvedores recursos para uma adição inovadora – o Elementor Finder .

Elementor Finder

Um dos maiores problemas que a maioria das pessoas tem com os criadores de páginas é que fazer uma alteração em uma página ou seção significa muitos cliques ou ter que sair manualmente para o painel do WordPress.

Isso não só consome muito tempo, mas também pode ser muito, muito frustrante.

Não tema, o Elementor Finder está aqui.

Pressione CTRL + E (ou CMD + E em Macs) para abrir a janela de pesquisa ‘Finder’:

Elementor Finder 1024x332 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Você também pode acessar o Finder a partir do menu Elementor principal:

Elementor finder in the main menu - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Depois de abrir o Finder, basta digitar o que você está procurando e ele mostrará uma lista de opções disponíveis:

how to use Elementor Finder - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Isso fornece uma maneira fácil de pular entre diferentes configurações, páginas, postagens, pop-ups ou seções.

Mas – e estou realmente criticando aqui – ele não permite que você “encontre” widgets.

Por que Elementor? Por quê!

Dica Profissional

Se você quiser uma lista de outros atalhos que pode usar no Elementor, use Ctrl +? no Windows ou CMD +? em Macs.

Elementor keyboard shortcuts 1024x581 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O Painel Lateral Elementor

Como acontece com a maioria dos criadores de páginas, o painel lateral constitui a maior parte da interface das ferramentas.

Acho que esse formato funciona bem, especialmente para criadores de páginas visuais, porque não ocupa muito espaço na tela – o que é obviamente importante neste caso.

Elementor side panel - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Um toque interessante é que você também pode expandir ou contrair o painel arrastando-o.

Devo admitir, isso é algo que só percebi depois de várias horas usando o construtor … * blush *

Contratar o painel dá a você mais espaço para trabalhar e não sacrifica a usabilidade de forma alguma.

Muito útil.

Quase sinto que eles poderiam ter levado isso mais longe e ter os ícones de elemento padrão em uma lista, permitindo que o painel diminuísse ainda mais.

Clicar na pequena seta no painel lateral o abre completamente, permitindo que você visualize a página.

Claro, você não pode editar a página na visualização.

how does Elementor side panel work - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Isso pode parecer uma coisa pequena, mas a velocidade e a simplicidade de poder visualizar assim foi enorme para mim.

Dica Profissional

Você também pode pressionar ‘Cmd + P’ em um Mac ou ‘Ctrl + P’ em um PC para deslizar rapidamente o painel lateral para dentro e para fora de vista.

Praticamente tudo o que a ferramenta tem a oferecer é feito por meio deste painel, então deixe-me examiná-lo.

No canto superior esquerdo, você encontrará as configurações da página.

Elementor Side Panel settings 1024x321 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

(Não se preocupe, vou desmontar isso em breve).

Na parte inferior, você tem várias outras opções:

page settings in Elementor 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

  1. Configurações
  2. Navegador
  3. Histórico de revisão (sua versão de ‘Desfazer’)
  4. Modo responsivo (visualização em desktop, tablet ou celular)
  5. Pré-visualizar alterações
  6. Ummm … salva ou atualiza suas alterações

E, finalmente, clicar no ícone de grade no canto superior direito o levará de volta à biblioteca de elementos:

Elementor Elements library - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Quanto a adicionar diferentes elementos ao seu conteúdo, basta arrastá-los e soltá-los da biblioteca direto para a página.

Não há queixas. O construtor de páginas Elementor faz jus ao hype até agora.

Section Navigator

Outro toque interessante é o recurso ‘Section Navigator’. É uma janela flutuante que permite pular rapidamente entre as diferentes seções do seu layout.

Você também pode clicar com o botão direito em qualquer elemento de ‘Section Navigator’ e começar a editá-lo.

Elementor Navigator settings 1024x373 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Elementor – Pré-Visualizar Alterações

Quando você atualiza seu layout, ele é atualizado automaticamente na janela de visualização.

Não ter que atualizar manualmente uma segunda guia do navegador para verificar as alterações em seu layout é uma ideia tão simples, mas uma grande economia de tempo para designers e profissionais de marketing.

Devo admitir que demorou um pouco para me acostumar a onde tudo estava, mas isso só é esperado ao trocar de outro construtor de páginas.

No geral, a interface do usuário inicial é limpa e super fácil de usar.

 

Elementor – Opções De Layout E Colunas

Ser capaz de criar layouts específicos é o objetivo dos construtores de páginas.

Então, como o Elementor se compara?

Para começar a criar um layout, primeiro você desejará ‘ Adicionar nova seção’ na área de conteúdo.

how to add a section in Elementor 1024x287 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

(Abordaremos o assunto do modelo mais tarde)

Clicar no botão roxo ‘adicionar nova seção’ exibe uma pequena opção de layout.

how to add a new section in Elementor 1024x343 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

No início, não achei que faria sentido passar por isso toda vez que você adicionar uma nova seção, mas simplesmente soltar um elemento na página irá padronizar para uma única seção de coluna de qualquer maneira.

É estar ciente dessas nuances que tendem a acelerar as coisas com os construtores de páginas.

Então, digamos que eu queira uma seção de 2 colunas.

how to add 2 column section in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E adicionar mais colunas a uma seção também é simples.

Basta clicar com o botão direito do mouse no botão da coluna de qualquer elemento e você terá a opção de adicionar uma coluna extra.

how to add a new column in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

 

3 column section in Elementor 1024x306 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

 

E como as colunas estão contidas em seções, você pode empilhá-las facilmente para criar layouts mais complexos.

elementor columns contained with sections - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Outro recurso útil é ser capaz de criar colunas extras arrastando e soltando elementos no lugar.

Tudo que você precisa fazer é arrastar o elemento usando o botão ‘coluna’, e você pode pressioná-lo em praticamente qualquer lugar.

how to add an extra column in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Por enquanto, tudo bem. Usar Elementor parece uma explosão.

Mas que tal ajustar a largura?

Novamente, muito direto.

Apenas pairar sobre um elemento para revelar a fronteira , em seguida, arraste o lado para aumentar / diminuir a largura.

adjusting column width in Elementor 1024x507 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Finalmente, há um elemento ‘Seção Interna’ na barra lateral (cujo padrão é 2 colunas) se você preferir fazer dessa forma.

Inner Section element in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

No geral, descobri que as opções de layout funcionaram bem e não consigo ver nenhuma área óbvia em que isso falhe.

Elementor – Edição E Estilo Forçado

Agora, vamos aprofundar um pouco mais e falar sobre a experiência de edição / estilo.

As versões anteriores do Elementor tinham essa coisa irritante onde você só podia editar elementos de dentro da barra lateral.

Isso está agora em um passado distante.

E deixe-me fazer uma observação rápida aqui – voltaremos à sua seção de análise do Elementor solicitada em breve.

Quero ressaltar que Elementor é um dos melhores construtores de páginas, especificamente por causa das atualizações constantes. Falaremos mais sobre sua atualização mais recente neste artigo, mas deixe-me dar um exemplo: 

A atualização do Elementor 3.0 veio embalada com muitas melhorias de desempenho, uma vez que era uma grande reclamação de alguns clientes no passado.

Isso é o que você obtém com Elementor.

Agora, de volta à modificação dos elementos da página.

Editar elementos agora é tão fácil quanto você esperaria de um construtor de páginas tão popular como o Elementor.

Por exemplo, a edição e o estilo do texto podem ser executados em linha ou na barra lateral.

inline and sidebar text editing in Elementor 1024x519 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Por que oferecer duas maneiras de atingir o mesmo objetivo?

Porque as pessoas são criaturas de hábitos. Dessa forma, o construtor suporta qualquer fluxo de trabalho com o qual as pessoas estão acostumadas.

Você também pode acessar os menus ‘Estilo’ e ‘Avançado’ sem ter que sair da mesma guia.

Advanced style formatting in Elementor 1024x528 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Do meu ponto de vista, prefiro muito mais essa abordagem para editar texto porque posso visualizar meu layout e texto “ao vivo” .

Outros elementos – como imagens – só podem ser manipulados de dentro da barra lateral, mas isso faz todo o sentido porque você pode visualizar suas alterações conforme as faz.

Estilo

Elementor também merece elogios adicionais por suas opções de estilo de texto.

Pode parecer uma coisa trivial, mas eu realmente aprecio o fato de que eles dão a você tanto controle sobre como os elementos de texto funcionam.

Você não terá apenas opções de tamanho da fonte, negrito, itálico e sublinhado.

Não.

O Elementor permite que você ajuste coisas como espaçamento entre letras, altura da linha e até mesmo definir uma sombra projetada para o seu texto.

Elementor style settings 1024x485 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Ok, sombras projetadas são um pouco de 2002, mas ainda tenho um ponto fraco por elas.

E então você precisa acenar com a cabeça em apreciação ao fato Elementor também inclui opções de estilo de texto na forma de modos de ‘Mistura’ como luminosidade, clarear, escurecer, etc.

Um construtor de páginas gratuito que dá a você esse nível de controle sobre sua tipografia é praticamente inédito.

Tem que amar isto.

Estilo Forçado

Mas houve problemas, como por que meus títulos estavam azuis?

Indo para o menu ‘ Configurações ‘, tornou-se aparente que o Elementor tem suas próprias opções de estilo, ignorando completamente o estilo do meu tema.

Elementor forced styling 1024x660 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Ainda não sei por que o Elementor forçaria um esquema de cores em você por padrão.

O mesmo vale para as fontes. Eu gosto das minhas fontes.

Não toque nas fontes, ok?

O Elementor levou o feedback do usuário a bordo, então agora você é avisado que as configurações do seu tema podem ser sequestradas, e você também pode desligar os esquemas de cores padrão do Elementor.

Portanto, se você ativar um tema que reconhece o Elementor (Hestia por exemplo), você obterá este pop-up que permite que o Elementor pare de substituir as configurações do seu tema.

Elementor default styles - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E podemos verificar o menu ‘Configurações’ para confirmar isso.

Arrumado!

disabled color palettes in Elementor 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se você se deparar com um problema em que o Elementor assumiu o controle do estilo de seu tema padrão para fontes e cores, não se preocupe – nem tudo está perdido!

Basta ir ao menu ” Configurações ‘e escolher’ Descartar ‘para as cores e fontes.

Elementor global fonts - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E você pode dar um passo adiante.

No menu ‘Configurações’, escolha ‘Configurações do painel’.

Dashboard Settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora você está a apenas dois cliques do mouse de impedir o sequestro de estilo do Elementor imediatamente.

global Style Settings in Elementor 1024x183 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Oh, o drama!

E olhe.

Não quero tirar nada do Elementor aqui – é ÓTIMO que você possa até definir cores / fontes diferentes para páginas individuais – só não estou muito interessado em ter isso definido como padrão.

No entanto, com a atualização mais recente do Elementor (Elementor 3.0, lançado em 30 de setembro de 2020), eles adicionaram ainda mais opções de estilo.

Elementor – Opções De Design Global

No Elementor 3.0 você tem acesso a um Sistema de Design Global.

Basicamente, esta é uma forma de unir todas as suas páginas sob um guarda-chuva de estilo, com recursos como fontes globais, cores e algumas outras funcionalidades.

global design options in elementor 1024x545 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

“Configurações do site” é o painel que você pode usar para encontrar a maioria dessas opções, e eles são uma lufada de ar fresco para web designers que usam o Elementor.

Elementos / Widgets

Então, vamos falar sobre os elementos reais (ou widgets) dentro do Elementor.

list of basic elements in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Esses são os pequenos blocos de construção que você usa para reunir seu conteúdo , e o Elementor oferece uma biblioteca generosa para você escolher.

Se você tiver a versão Pro do Elementor, também terá acesso a estes widgets adicionais:

Elementor Pro Elements - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Também é bom ver que o Elementor suporta widgets padrão do WordPress , bem como quaisquer widgets de terceiros que você possa ter instalado.

WordPress widgets in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

No geral, definitivamente não é uma seleção ruim, mas está longe de estar completa.

Especialmente em comparação com alguns outros criadores de páginas do WordPress.

A questão é: o que está faltando?

Bem, às vezes pode ser difícil saber até o momento em que você precisa realizar uma ação específica.

Por exemplo, digamos que você esteja criando uma postagem de revisão resumida e queira finalizá-la com uma bela tabela de comparação.

Adivinha?

Elementor não tem um elemento de tabela.

elementor table element comment 768x273 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Por enquanto, se você quiser uma tabela, terá que instalar outro plugin – como TablePress – e colar o shortcode no Elementor.

Este não é um grande negócio, mas espero que eles incluam um widget de tabela integrado em uma versão futura.

Você também tem a opção de instalar o plugin Ultimate Addons For Elementor , que adiciona um widget de mesa, e uma tonelada de outros recursos interessantes também. Este não é um plugin gratuito, mas você obtém muito valor pelo dinheiro aqui.

Agora, falando de valor para o dinheiro, Elementor simplesmente é um criador de páginas de código aberto.

O primeiro de sua espécie. O quebrador de correntes. A mãe de Dragon … deixa pra lá.

Fã de Game of Thrones aqui.

Ser open source significa que desenvolvedores terceiros podem criar widgets, modelos e blocos para sites construídos com Elementor, todos os recursos que você pode encontrar gratuitamente, ou por uma taxa, no mercado de plug-ins para WordPress.

Isso apresenta a qualquer comerciante com sua própria equipe / pessoa de desenvolvimento uma oportunidade de negócio – o desenvolvimento de complementos para o Elementor.

Elementor tem uma comunidade ativa de mais de 61.000 membros, então é um grande mercado para você explorar.

Como você tem ideias para um addon para o Elementor?

Encontre algo que você não goste e peça ao seu desenvolvedor para criar uma solução para resolver o problema 🙂

Economizando Tempo Com Widgets

Ao criar um layout complexo para um novo site, pode ser muito útil incluir um grupo de elementos pré-estilizados.

Por exemplo, no Thrive Architect , posso incluir rapidamente um elemento de call to action pré-estilizado como este:

Elementor Pro Elements 2 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Claro, o design em si é bastante básico, mas é mais do que suficiente para a maioria das pessoas.

E, o mais importante, levou apenas um segundo para cair na página .

Em seus primeiros dias, Elementor costumava lutar contra isso. Não apresentava a mesma quantidade de elementos pré-fabricados e, para sermos honestos, ainda não chegou lá.

Ao falar sobre recursos ou modelos, a Elementor pode ficar atrás de concorrentes como Thrive Architect ou Divi Builder.

Mas é o suficiente para competir com nomes como Thrive Architect? 

Sim definitivamente. Elementor é uma escolha fenomenal, especialmente se você for um desenvolvedor experiente e web designer que deseja mais controle sobre seu fluxo de trabalho.

Mas isso não significa que seja perfeito. Nosso objetivo é fazer uma avaliação justa do Elementor, então considere o fato de que Divi tem uma quantidade incomparável de modelos de página, e Thrive Architect tem recursos e widgets que são mais adequados para profissionais de marketing.

Ele luta para encontrar seu foco .

Pode parecer que está tentando atender a todos.

Mas está ficando melhor a cada atualização.

Outra solução potencial para uma falta percebida ou real de modelos é usar algo como o plugin Envato Elements .

Você obtém centenas de “kits” de template gratuitos e blocos que você pode importar diretamente para o Elementor para uso posterior.

Envanto Elementor Element 1024x435 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Lembre-se, entretanto, de que isso pode afetar o back-end do seu site. Misturar tantos elementos de vários plug-ins pode tornar seu site difícil de carregar. Portanto, não exagere.

Dito isso, eu acho que Elementor cobre o básico muito bem e se você não se importar em instalar um punhado de plug-ins adicionais, ele faz um excelente trabalho ao lidar com todo o resto.

Agora vamos continuar com nossa análise do Elementor.

Elementor – Widgets Globais

Como você pode esperar de qualquer construtor de página hoje em dia, o Elementor permite que você crie ‘widgets’ personalizados a partir de seus elementos de conteúdo.

(Eles são diferentes dos modelos de página, que abordaremos em breve.)

Digamos que eu esteja usando uma ‘caixa de ícone’ e tenha estilizado exatamente como gosto.

Elementor icon box widget 1024x308 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se eu quiser usá-lo novamente no futuro, posso salvar esse elemento (agora personalizado) em minha biblioteca.

Tudo o que você precisa fazer é clicar com o botão direito do mouse no elemento e clicar em ‘Salvar como modelo’ .

Em seguida, você verá uma janela pop-up.

Insira um nome, clique em ‘Salvar’ e seu elemento personalizado será adicionado à sua biblioteca.

how to save widget as template in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

global elemetns in Elementor 1024x525 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O elemento que você salvou também terá uma borda amarela para indicar que é um widget global.

Neste ponto, você pode usar o widget global em qualquer página (ou mesmo novamente, na mesma página) acessando a guia widget global.

Elementor global widget list - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Ok, então é assim que funciona, mas vamos ser práticos.

E se você quiser fazer alterações em seu widget global ?

Bem, se você clicar no widget, notará algumas coisas no painel esquerdo.

making changes to global widgets in Elementor 1024x548 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Em primeiro lugar, o widget global está bloqueado .

Isso significa que você não pode editá-lo ou fazer alterações de estilo como faria com um elemento normal.

Você pode desbloquear temporariamente o elemento clicando no botão ‘Editar’, que aplicará suas alterações a este widget global em TODAS as suas páginas.

E se você quiser fazer alterações no widget sem aplicar essas alterações globalmente?

É aí que entra a ‘ desvinculação ‘.

elementor global widget unlinking - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Clicar neste botão converterá efetivamente seu widget global em sua forma normal, ‘elementar’.

Você notará que a borda amarela volta a ficar azul, e você pode fazer alterações como faria normalmente no Elementor.

elementor global widget editor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E o que é ótimo em usar widgets globais com Elementor, é que eles podem ser usados ​​virtualmente em qualquer lugar em seu site.

Se você não precisa mais de um determinado widget, eles são igualmente fáceis de remover.

Basta ir ao painel do WordPress, clicar em ‘ Modelos’ , ‘Modelos salvos’ e destacar o widget que deseja enviar para a sua lixeira digital.

saved templates in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Elementor – Shortcodes

Elementor shortcodes 1024x188 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Os códigos de acesso do Elementor funcionam nas páginas, independentemente de terem ou não sido construídos com o Elementor.

E há até um widget WordPress dedicado para eles.

elementor library wordpress widget - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Usando isso, você pode criar facilmente “frases de chamariz” dentro do Elementor e, em seguida, exibi-los globalmente em sua barra lateral.

Aqui está um exemplo do Copyblogger.

elementor global element in sidebar on copyblogger - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

No geral, o Elementor lida com widgets globais muito bem.

Na verdade, ele faz isso muito melhor do que alguns outros construtores de páginas “premium”.

O recurso de shortcode facilita a mistura de elementos de plug-in, ampliando seu conjunto de ferramentas e ajudando a personalizar páginas.

Elementor – Modelos De Seção

Isso meio que segue o recurso ‘Global Widgets’ que acabamos de ver, mas ‘Seções’ funcionam de maneira um pouco diferente.

Então, o que exatamente é um ‘Modelo de seção’?

É basicamente um contêiner, combinando elementos individuais em uma determinada seção para dar a você controle sobre o grupo como um todo.

section template example in Elementor 1024x362 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Para evitar ter que recriar as mesmas seções repetidamente, posso simplesmente salvá-las como um ‘Modelo de seção’.

save as template in Elementor 1024x498 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Estamos salvando a seção inteira porque minha frase de chamariz é composta de vários elementos individuais.

Então, vou dar um nome e clicar em “Salvar”.

elementor save your section to library - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora posso essencialmente adicionar essa seção a qualquer página com apenas alguns cliques.

Legal.

Mas foi aqui que as coisas ficaram um pouco confusas.

Ao contrário dos widgets globais, os modelos de seção não aparecem na guia ‘Global’.

global elements in Elementor 1024x478 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Então, onde Elementor os mantém escondidos?

Existem duas maneiras de importar seções e, como descobri, ambas se comportam de maneira muito diferente:

  1. O widget de modelos
  2. O botão Adicionar modelo

how to find templates in Elementor 1024x430 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O método do botão ‘Adicionar modelo’

  1. Clique no botão ‘Adicionar modelo’ na área de trabalho principal.
  2. Clique na guia ‘Meus modelos’
  3. Escolha o seu modelo
  4. Clique em ‘Inserir’

 

inserting saved template in Elementor 1024x185 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora você verá todos os modelos que já salvou no Elementor, incluindo os modelos de ‘Seção’.

Clique em ‘Inserir’ e a seção aparecerá em sua página. Simples assim.

Uma observação rápida aqui é que se você pode importar acidentalmente as configurações do documento do modelo.

Ou, em termos gerais, você acidentalmente importará uma grande quantidade de sujeira que pode (e provavelmente irá) bagunçar seu layout.

Mas Elementor avisa com antecedência sobre isso:

Import Document Settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O bom de adicionar uma seção dessa maneira é que você pode fazer alterações imediatamente antes de salvá-la novamente.

editing template in Elementor 1024x523 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

É tudo muito simples, com tudo funcionando conforme o esperado.

O método do ‘widget de modelo’

Isso me leva à nossa segunda opção.

Estranhamente, isso não funciona da mesma maneira que a função ‘Adicionar modelo’.

Desta vez, vamos inserir o template de seção usando o ‘widget Template’ no painel lateral.

Template widget in Elementor 1024x531 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Como com qualquer outro widget Elementor, primeiro você precisa arrastar e soltar na página.

Depois disso, ele pedirá que você selecione o modelo salvo.

Neste caso, estamos procurando nosso modelo de seção salvo .

Agora, aqui está uma peculiaridade aleatória – o widget de modelo não mostra uma lista de modelos de seção até que você realmente digite algo no campo de pesquisa:

Template Widget in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Você deve “inserir 1 ou mais caracteres” para que qualquer coisa apareça aqui.

Template Widget search in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Essa é uma escolha de UX muito bizarra do ponto de vista do usuário.

Obviamente, se você tiver centenas de seções salvas, isso faz sentido.

Mas mesmo assim, se você não consegue se lembrar como sua seção salva é chamada, você terá que voltar do Elementor, ir para o seu painel e encontrar o nome da seção salva em ‘Modelos’.

O modelo de seção será carregado … mas é aqui que as coisas ficam um pouco confusas.

Desta vez, os modelos de seção são tratados como um único bloco , portanto, para fazer alterações, é necessário clicar no botão ‘Editar modelo’.

editing template block in Elementor 1024x519 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E assim que você clicar em ‘Editar modelo’, a seção será aberta em um editor separado em uma nova guia do navegador.

É aqui que você deve fazer as alterações desejadas e, em seguida, salvar a seção do modelo.

Além disso, todos os modelos importados usando o ‘elemento de modelo’ são automaticamente considerados como “globais” .

Mas – e este é um grande MAS – ao contrário dos widgets globais, esses modelos não podem ser desvinculados .

Levei um tempo para descobrir isso porque Elementor não me deu nenhuma indicação de que eles seriam tratados de forma diferente.

Muito confuso.

Então, aqui está o resultado final:

Se você quiser uma seção estática e desvinculada, precisará usar o botão ‘Adicionar modelo’.

Caso contrário, use o widget de modelo.

Elementor – Modelos De Página

O que é um construtor de páginas sem alguns modelos de página inteira, hein?

Novamente, existem duas maneiras de carregar um modelo de página de página no Elementor.

  1. A partir do botão ‘Adicionar modelo’ na área de trabalho principal
  2. Do widget ‘Modelo’ na barra lateral

adding templates in Elementor 1024x360 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Os modelos de página sofrem do mesmo problema que os modelos de seção – usar o widget de modelo deixa você com um único elemento que precisa ser editado em uma janela separada do editor para alterar qualquer coisa.

Então, vamos ignorar isso como uma opção.

Tenho certeza de que os desenvolvedores têm um motivo para lidar com os modelos dessa maneira, mas não consigo entender.

O Elementor vem pré-carregado com um monte de modelos projetados profissionalmente, que você pode usar imediatamente.

Para verificar os modelos disponíveis, clique no botão ‘Adicionar modelo’:

designed templates in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

A partir daí, clique para visualizar um modelo individual e, se gostar do que vir, poderá implantá-lo em sua página clicando em ‘Inserir’ .

NB: Uma coisa que notei ao inserir um modelo é que se você tiver muito conteúdo existente na página, pode demorar um pouco para carregar.

Depois que o modelo carregar, você provavelmente descobrirá que ele não se parece em nada com a visualização que você viu.

inserting Elementor template 1024x366 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Isso acontece porque o Elementor está restrito aos limites do seu tema.

Basicamente, se o seu tema diz “o conteúdo vai aqui!”, É para onde o conteúdo vai.

elementor content area - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Então, o que vem a seguir?

Para utilizar adequadamente um template de página inteira, você primeiro precisa ter um template de página de largura total (ou em branco) para o Elementor trabalhar.

Um modelo de largura total retém o cabeçalho e o rodapé do seu tema, enquanto um modelo em branco é exatamente isso, em branco.

Não existe um certo ou errado para usar, só depende do que você está tentando alcançar.

Agora, vou ser franco com você.

No primeiro rascunho desta revisão, fiz um discurso épico sobre o Elementor não ter essa funcionalidade incorporada, junto com as maneiras de contornar isso.

Pouco depois, adivinha o que aconteceu?

Isso mesmo, eles foram e o adicionaram .

E embora seja sempre divertido excluir uma seção inteira de seu artigo, ainda fiquei satisfeito em ver que estamos todos na mesma página. (Sem trocadilhos.)

Para acessá-lo, clique no botão ‘Configurações da página’ e procure o menu suspenso ‘Layout da página’:

page settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

page layout settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora você pode escolher entre ‘largura total’, ‘tela do Elementor’ e quaisquer outros modelos incluídos em seu tema.

Nota

A opção ‘Elementor Canvas’ é apenas um modelo em branco. Por algum motivo, eles decidiram se divertir com o nome: P

Então, vamos tentar novamente com a opção ‘Tela’ selecionada.

Canvas option in Elementor 1024x459 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Assim é, Elementor!

Agora, com o material técnico resolvido, e os modelos de página reais?

Honestamente, fiquei bastante impressionado com os designs.

Eles são limpos, profissionais e fáceis de trabalhar.

Em uma iteração anterior desta revisão, eu fui lírico sobre a existência de uma boa mistura de modelos, mas que eles podem ficar sujeitos ao uso excessivo.

Mas isso só se:

  1. Você faz muito pouco para personalizar o modelo para seu próprio uso
  2. Você nunca atualiza para o Elementor Pro

Elementor comete o “erro” de tentar ser o criador de páginas WordPress perfeito para todos na Terra.

O que significa que eles nunca serão capazes de manter todos felizes, não importa o quanto tentem.

templates library in Elementor 1024x526 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se você depende de páginas de destino ou de vendas pré-construídas, os modelos do Elementor Pro devem ter algo para atender você

Mas se – como eu – você estiver feliz em construir páginas de destino você mesmo, pode simplesmente salvar seus próprios modelos de página para reutilizá-los novamente e novamente.

Por fim, você também pode importar modelos de outras pessoas.

Este site tem uma seleção muito respeitável de modelos de página, modelos de pop-up e blocos de seção, com alguns tutoriais incluídos para uma boa medida.

Melhor ainda – não vai custar um centavo, embora o site aceite doações 🙂

imported templates in Elementor 1024x646 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

No entanto, mais um ponto antes de continuarmos com a revisão do Elementor. Embora os modelos de página sejam ótimos e, para algumas pessoas, os modelos de página não tenham nenhuma importância, o Elementor começou a ficar para trás em relação à concorrência.

O Thrive Architect é voltado para profissionais de marketing, portanto, seus modelos de página de destino são mais complexos.

A Divi simplesmente expande o Elementor, entregando 2.000 modelos de páginas individuais à sua disposição. 

Portanto, se os modelos de página são importantes para você, o Elementor pode nem sempre ser a melhor escolha.

Elementor – Capacidade De Resposta

Assim como a maioria dos criadores de páginas hoje, o Elementor é responsivo por padrão, então seu design se adaptará automaticamente a diferentes tamanhos de tela.

O Elementor segue o padrão de mercado dos criadores de páginas, permitindo que os usuários visualizem seu site ao vivo, em diferentes tamanhos de dispositivo, com o toque de um botão.

E o que me surpreendeu ainda mais foi que você pode fazer alterações independentes para cada dispositivo .

Para ilustrar o que quero dizer, tenho dois títulos aqui:

headings in Elementor 1024x440 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se eu alternar para a visualização de ‘Celular’, meus títulos parecem mais ou menos os mesmos.

Mobile preview in Elementor 1024x771 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Mas, para fins de discussão, digamos que não estou satisfeito com o espaçamento entre eles em dispositivos móveis

Isso é realmente fácil de consertar no Elementor.

  1. Selecione o elemento que deseja ajustar
  2. Clique em ‘Avançado’
  3. Adicione uma margem para o elemento
  4. Tudo feito!

editing mobile preview in Elementor 1024x503 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E aqui está a verdadeira magia.

Quando volto para a visualização da minha área de trabalho, o Elementor não aplicou as mesmas alterações ao layout da minha área de trabalho.

headings in Elementor 2 1024x451 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Sério, como você pode não amar isso?

Se você já lutou com um design responsivo e se esforçou para fazer seu conteúdo parecer bom em qualquer dispositivo, isso é uma virada de jogo real .

Dica Profissional

Você também pode pressionar ‘Cmd + Shift + M’ em um Mac ou ‘Ctrl + Shift + M’ em um PC para percorrer as visualizações do dispositivo.

Mas gente … fica ainda melhor.

Você não apenas pode controlar o estilo de diferentes dispositivos, mas também pode ocultar o elemento completamente .

responsive settings in Elementor 1024x573 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E isso não está limitado a elementos únicos, também funciona com seções.

Embora essa quantidade de controle sobre sua página também seja apresentada em outros construtores de páginas, o Elementor foi o primeiro a retirá-lo, e ainda está forte com uma das maneiras mais fáceis de fazer uma edição responsiva.

Elementor Theme Builder

Você sabe quando encontra um tema de que realmente gosta, mas ainda precisa ajustar certos aspectos dele para deixá-lo com a aparência correta?

Especialmente o cabeçalho ou rodapé, porque eles nunca parecem exatamente como você deseja.

E se … houvesse algum tipo de ferramenta que permitiria a você construir cabeçalhos, rodapés e outros elementos de layout personalizados?

E se você pudesse implantá-los em todo o site com apenas alguns cliques do mouse?

Sim, sim, estou começando a falar sobre o Elementor Theme Builder .

Então, como isso funciona?

Como de costume, o Elementor mantém isso agradável e simples – você o inicia no painel do WordPress:

Elementor Theme Builder - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Em seguida, basta clicar em ‘Adicionar novo’ e escolher um tipo de modelo e clicar em ‘Criar modelo’.

Para o propósito desta revisão, vamos criar um novo cabeçalho.

creating header template type in Elementor 1024x586 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Você pode então escolher criar seu próprio cabeçalho do zero ou usar um dos modelos de cabeçalho padrão úteis que você pode redefinir de acordo com sua preferência.

header templates in Elementor 1024x477 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

inserting header template in Elementor 1024x283 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E com alguns cliques do mouse você pode criar um logotipo que se parece mais com você.

edited header template in Elementor 1024x285 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Então, tudo que você precisa fazer é clicar em ‘Publicar’ e usar a função ‘Adicionar condição’ para dizer ao Elementor onde você deseja que seu novo cabeçalho seja implantado:

Ei pronto – seu novo cabeçalho é publicado em todas as páginas do seu site.

Você pode seguir exatamente o mesmo processo para criar um novo rodapé elegante para todo o seu site.

E se você cometer um erro, você sempre pode fazer backup e alterar as ‘Condições de exibição’ para o cabeçalho.

Portanto, agora você pode fazer com que qualquer tema se adapte à sua vontade.

Mas fica melhor. Com a nova atualização, Elementor 3.0, o Theme Builder oferece uma tonelada de opções de personalização, disponibilizando todo o site em um painel.

Com o novo Theme Builder, você pode fazer ajustes avançados para:

  • Cabeçalhos
  • Rodapés
  • Páginas
  • Postagens
  • Páginas de produtos
  • Páginas de erro

E muito mais, de acordo com o que você precisar. É uma grande atualização para uma ferramenta já poderosa, e o controle adicionado que dá ao usuário regular é notável.

Definitivamente uma vantagem em nossa análise do Elementor.

Isso é muito legal, Elementor. Bem feito.

Bem, cronometramos a atualização para esta revisão muito bem, porque o Elementor recentemente lançou seu construtor de pop-up.

Yay!

Nota: Isso só está disponível na versão Pro.

Esta é uma grande mudança da parte deles por uma série de razões:

1. Mostra que eles ouvem as solicitações de recursos do cliente
2. Agora você não precisará de um plug-in separado para criar pop-ups

Então, como você usa?

Você presumiria que esse recurso estaria disponível como um widget, mas você tem que voltar para o painel do WordPress para encontrá-lo … em modelos.

popup templates in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora, o estranho é que você inicia o processo de criação do pop-up no painel do WordPress em vez de dentro do Elementor … mas edita o pop-up no espaço de trabalho regular do Elementor.

how to add a new popup in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

how to create a new popup in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Parece que faria mais sentido integrá-lo à própria interface, não?

Obviamente, o raciocínio por trás da localização do construtor de pop-up provavelmente se baseia na frequência com que o desenvolvedor da Web médio cria um pop-up.

Uma vez por semana, talvez?

E você sempre pode usar o novo recurso ‘Finder’ para voltar ao painel quando precisar.

Mas estou divagando.

options to display popups in Elementor 1024x585 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Existem dezenas de modelos de pop-up diferentes para escolher , com algo que se adequa a praticamente qualquer pessoa, incluindo os profissionais de marketing.

Um toque interessante é que você pode escolher qual categoria de pop-up deseja em um menu suspenso:

  • Barra Inferior
  • Clássico
  • Voar em
  • Tela cheia
  • Hello Bar
  • Deslize

Basta clicar no modelo de sua escolha e clicar no botão verde ‘Inserir’ conforme ilustrado aqui:

how to insert popup in Elementor 1024x400 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Outra opção é fechar a janela da Biblioteca e você será levado diretamente ao editor Elementor.

A partir daqui, você pode criar seu próprio pop-up do zero, se realmente quiser:

design popup from scratch in Elementor 1024x334 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Você obtém um número estonteante de opções de design que permitem ajustar não apenas o conteúdo do pop-up, mas também suas dimensões, forma, esquema de cores, etc., etc.

popup in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Alguns recursos muito interessantes na guia ‘Avançado’ incluem a capacidade de impedir que os visitantes fechem o pop-up com a tecla Escape e desabilitar a rolagem da página até que você interaja com o pop-up.

Popup Settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Isso atrai o minúsculo pedaço de Sith em mim, mas espero que esses recursos não sejam abusados.

Afinal, algumas pessoas são mais cheias de Sith do que outras. *tosse*

Você também obtém dezenas de animações de entrada para brincar na guia de configurações pop-up principal – “Lightspeed” é meu favorito atual.

Popup animation settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Quando estiver satisfeito com o layout do pop-up, clique em ‘Publicar.

É aqui que você é apresentado às várias configurações para controlar o comportamento de sua nova criação:

Condições – você escolhe onde deseja que o pop-up apareça, por exemplo, uma página em vez de todo o seu site. Você também pode definir várias condições para o mesmo pop-up.

Gatilhos – isso é o que faz com que o pop-up seja disparado em primeiro lugar. Todos os suspeitos usuais são cobertos, incluindo “na rolagem”, “no clique” e “na intenção de saída da página”, entre outros.

Regras avançadas – tem configurações para cobrir coisas como exibir o pop-up apenas depois que seu visitante ler x número de páginas ou visitar seu site x número de vezes, por exemplo.

Popup advanced settings in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Integração com Autoresponder?

Assim, você pode criar pop-ups de aparência incrível e configurá-los para disparar de dezenas de maneiras diferentes.

Quão bem o construtor de pop-up se integra com MailChimp, GetResponse ou Aweber ?

Idealmente, isso seria um caso de apontar e clicar.

Mas isso não.

Sim, você pode integrar qualquer um dos autoresponders acima com o pop-up … você só precisa obter uma chave de API e então descobrir quais elementos do formulário em seu pop-up você precisa ajustar para que funcione.

Ou, como alternativa, você pode usar um plugin como Mailoptin , embora eu não tenha testado isso pessoalmente. Ele é apenas recomendado pelo pessoal legal da Elementor, e eu confio neles 🙂

Seria ótimo ter a funcionalidade de resposta automática diretamente no Elementor porque mais plug-ins = mais potencial para que as coisas dêem errado.

Elementor Os Campos Personalizados

Ok, sabemos que este é um território de puro nerd, mas precisamos cobri-lo.

Por quê?

Porque o Elementor torna o gerenciamento dessas coisas muito fácil.

E se você estiver interessado mesmo que remotamente em e-commerce, precisa aprender um pouco mais sobre como funcionam os dados dinâmicos e os campos personalizados.

Também faz todo o sentido se você criar sites afiliados, e você verá o porquê enquanto examinamos como você realmente usa campos personalizados e dados dinâmicos neste construtor de páginas.

Antes de prosseguirmos, devemos mencionar que existem três requisitos para os exemplos que usamos aqui:

  1. Elementor Pro
  2. plugin de UI de tipo de postagem personalizada
  3. plugin Advanced Custom Fields .

Depois de instalar os dois plug-ins acima, é hora de realmente criar seus tipos de postagem personalizados.

Mas espere … o que são tipos de postagem personalizados?

Esses são basicamente tipos de postagens que não se enquadram no layout de postagem padrão.

Exemplos típicos disso são as páginas de produtos de uma loja de comércio eletrônico ou talvez o portfólio de um artista que precisa incluir preços e outras informações.

São os tipos de postagens em que você precisa adicionar informações extras de uma forma que uma instalação padrão do WordPress não suporta.

Portanto, vamos configurar alguns tipos de postes personalizados para o Empório de bicicletas de Dave.

Fazemos isso no painel do WordPress, usando o plugin Customer Post Type UI.

custom post type in Elementor 1024x475 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Depois de adicionar um novo tipo de postagem, você verá que tem uma nova opção de menu no painel do WordPress.

Neste exemplo, é ‘Bikes; porque… bem… .Dave vende bicicletas.

menu option after adding custom post type in Elementor 1024x284 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Em seguida, precisamos adicionar uma taxonomia para nossas postagens personalizadas.

Uma taxonomia é basicamente uma maneira de agrupar pedaços de dados semelhantes em um só lugar.

Por isso, estamos chamando nossa taxonomia de “biketipo” .

Também precisamos anexá-lo ao nosso tipo de postagem personalizada de “Bicicletas”.

custom post taxonomy in Elementor 1024x577 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Agora precisamos adicionar diferentes subcategorias (novos tipos de bicicletas) em nossa estrutura de postagens personalizada:

sub categories for custom post type in Elementor 1024x376 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Ok, legal, esse é o tipo de postagem personalizada que está sendo resolvida, mas como adicionamos os detalhes do produto?

É aqui que entra em jogo o Advanced Custom Fields (ACF).

Quando vamos aprender a usar essas coisas no Elementor?

Paciência Padawan… paciência.

Aqui estão os campos personalizados que criamos adicionando novos ‘Grupos de campo’ no ACF:

how to create custom fields in Elementor 1024x462 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O asterisco vermelho ao lado de cada ‘Etiqueta’ significa que é um campo obrigatório, apenas no caso de você estar se perguntando.

Agora, quando você clica em ‘Adicionar novo’ no tipo de postagem personalizada ‘Bicicletas’, você obtém esta tela:

example of custom post type data in Elementor 1024x558 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Depois de adicionar alguns dados de amostra aqui, é hora de realmente obter e criar um único modelo de postagem no Elementor.

Observação: você faz isso em ‘Modelos’ no painel e, em seguida, em ‘Adicionar novo’.

how to create a single post in Elementor 1024x540 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Você pode escolher usar um dos modelos elegantes do Elementor ou ir sozinho com um layout prático.

Escolhemos a abordagem manual porque já havíamos projetado um cabeçalho básico para o Empório de Bicicletas de Dave anteriormente.

A primeira parte do conteúdo dinâmico que adicionamos à nossa página de modelo é uma imagem de fundo.

Fazemos isso clicando na seção em que queremos trabalhar e indo para a guia ‘Estilo’.

A partir daí, clicamos no tipo ‘Plano de fundo’ e depois no botão de dados ‘Dinâmico’.

how to add background image in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Também adicionamos um widget dinâmico ‘Título da postagem’ da categoria de widget ‘Único’ – eles eram chamados de ‘Elementos do tema’ até que uma atualização recente mudou isso.

Na verdade, se você não usa o Elementor há alguns meses, pode se sentir um pouco perdido.

Uma queixa menor, mas aí está.

dynamic post title widget in Elementor 1024x534 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Adicionar o widget ‘Título da postagem’ insere automaticamente o nome da primeira bicicleta de nossos tipos de postagem personalizados – a “Hustle 2000”.

Esse fim de tudo funciona muito bem.

Mas e quanto a estilizar outras partes do seu layout com dados dinâmicos?

Vamos adicionar uma caixa de ícone e usar campos personalizados para arrastar alguns dados para ela.

icon box and custom fields in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Um recurso que realmente gostei é a capacidade de visualizar seu projeto final com dados diferentes antes de clicar no botão Publicar.

preview of a template with custom fields - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Dessa forma, você pode testar se o seu modelo funciona para cada uma das suas postagens / produtos / itens de portfólio personalizados, etc.

Por fim, clique em ‘Publicar’ quando estiver tudo pronto e escolha onde deseja que o modelo seja aplicado, ou seja, todo o seu site versus certos tipos de postagens ou páginas.

Então, quão bem o Elementor lida com tipos de post personalizados, campos personalizados e dados dinâmicos?

Honestamente, uma vez que você tenha entendido sua estrutura, projetar essas páginas modelo é muito fácil .

Mesmo iniciantes completos podem ter páginas dinâmicas instaladas e funcionando em uma tarde.

The Downsides

Mas não é perfeito.

Por quê?

Bem, por algumas razões estranhas, o Elementor esquece certos campos de dados quando saio de uma página.

Isso aconteceu mesmo depois de atualizar a página e verificar as visualizações.

Para ser justo, pode ser algo que estou perdendo, mas se for esse o caso, atualizaremos esta análise novamente no futuro.

Alguma outra reclamação?

O layout do menu de dados dinâmicos é confuso e não é tão intuitivo.

O que queremos dizer com isso é que quando você escolhe seu campo ACF para inserir dados na página, você deve clicar nele novamente para escolher sua chave em ‘Configurações’

… E então outro sub-submenu para adicionar texto antes ou depois dos dados dinâmicos.

how to add data in custom fields in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Parecia desajeitado, embora realmente faça o trabalho.

Desfazer E Revisar Histórico

Ok, esta é uma área que eu estava ansioso para cobrir.

Todos nós cometemos erros ao projetar layouts. As coisas mudam. Outras coisas são excluídas.

Ou você se desliga mentalmente por alguns segundos e faz algo catastroficamente idiota … mas não consegue se lembrar o quê.

Acontece.

Mas e se você quiser simplesmente desfazer uma ação ?

Isso não deve ser muito difícil, certo?

Nas versões anteriores do Elementor, a falta de uma função ‘Desfazer’ era um grande problema para mim.

Estou começando a suspeitar que a equipe Elementor rasteja por análises de produtos e encontra as falhas mais gritantes em seus produtos … e então as corrige imediatamente.

Eles estão me perseguindo …?

Elementor deixou de ter nenhuma função “Desfazer” real para ter 2,5

O .5 é que você pode usar CTRL + Z para desfazer manualmente suas alterações mais recentes, mas, além disso, você precisa contar com a função ‘Histórico’ e a guia ‘Revisões’.

As outras duas opções para desfazer seu “trabalho manual” estão disponíveis através do botão ‘Histórico’.

History option in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Clicar em ‘Histórico’ leva você a uma tela com duas guias separadas: ‘Ações’ e ‘Revisões’.

Ações são as mudanças que você fez durante a sua sessão de design atual. Para desfazer qualquer mudança que você acabou de fazer, passe o mouse sobre ela e você verá uma opção de “reversão”.

Gosto disso porque é muito semelhante ao que estou acostumado a ver em outros programas de design como o Photoshop.

history of actions in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se você clicar na guia ‘Revisões’, verá uma lista de alterações que datam de até 30 dias.

Assim que encontrar a revisão que procura, clique no botão verde ‘Aplicar’ .

revision history in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Funciona muito bem, é justo.

Mas…

Em primeiro lugar, não é tão simples como clicar em um botão.

Requer navegar pelos menus e visualizar diferentes revisões antes mesmo de encontrar a correta.

Algum tipo de sistema de nomenclatura lógico ajudaria a impedir que isso fosse um incômodo.

Em segundo lugar – e este é o verdadeiro kicker – esse recurso é construído no sistema de revisões do WordPress, o que significa que as revisões só aparecem a cada vez que você clica no botão salvar / atualizar.

Basicamente, se você não salva suas alterações há algum tempo e realmente bagunça alguma coisa, o jogo termina.

O que geralmente resulta em arrancar de cabelo, ranger de dentes e questionar seu lugar no universo.

Dica Profissional

Pode parecer uma boa ideia ter um mês de revisões, mas elas podem realmente consumir recursos e tornar seu site mais lento.

Quão?

Porque cada revisão salva adiciona mais confusão e inchaço à instalação do WordPress, aumentando o tamanho do banco de dados que executa o show.

Uma solução é usar ocasionalmente um plugin “mais limpo” de banco de dados WordPress , como este .

Não testei o plug-in sozinho, por isso aconselho fazer um backup antes de executá-lo.

Mas me disseram que ele faz um trabalho sólido ao limpar o histórico de revisão (assim como outras informações do banco de dados).

Embora não seja exatamente um problema – e eu realmente gosto do recurso de histórico de revisões – ainda me confunde que um construtor de páginas tão bem pensado não tenha uma abordagem mais visual para lidar com as revisões de página / site.

Ainda assim, para uma revisão justa da Elementor – eles fazem um bom trabalho mesmo assim.

Elementor Copiar Estilo E Copiar Colar

Se você já conhece o mundo dos sites e criadores de páginas há algum tempo, entenderá como isso pode ser tedioso às vezes.

Não é o processo de design e layout – essa é sempre a parte divertida.

O tédio surge quando você precisa atualizar o estilo de vários elementos ou seções do seu site.

Normalmente, por causa de uma pequena alteração que você fez, que agora deve ser propagada para o restante do seu site.

Insira horas de trabalho não muito divertido.

Claro que você pode escrever um monte de CSS customizado para isso … ou você pode esperar por uma solução de apontar e clicar em vez disso.

Elementor obviamente ouviu os gritos de desenvolvedores sofrendo de RSI quando introduziram os recursos Copy Style e Copy Paste em meados de 2018.

Então, como esses recursos funcionam?

Bem, digamos que você acabou de criar um novo elemento que está bastante satisfeito com a aparência de:

Copy Style and Copy Paste feature in Elementor 1024x479 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Mas você deseja recriar esse estilo em outro lugar em seu design.

how to copy icon box style in Elementor 1024x369 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Urrghhh … ótimo, agora eu tenho que ir manualmente e atualizar o estilo de todos os outros elementos!

Ou eu poderia simplesmente usar a função “Copiar estilo” do Elementor .

Tudo o que você precisa fazer é clicar com o botão direito no elemento de origem – aquele cujo estilo você deseja copiar – e escolher “Copiar”.

Em seguida, clique com o botão direito do mouse no elemento de destino e escolha “Colar estilo”.

Copy Style and Copy Paste feature in Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se você não gostar das alterações feitas, simplesmente clique com o botão direito novamente e “Redefinir estilo”.

how to reset style in Elementor 1024x417 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Quão fácil é isso?

Novamente, isso pode parecer um recurso trivial para alguns, mas vale seu peso em ouro se e quando você precisar alterar o estilo de um monte de elementos diferentes.

Então, o que dizer do recurso “Copiar e colar” que mencionei anteriormente?

O Elementor oferece uma interface completa de arrastar e soltar, que funciona muito, muito bem.

Mas e se você quiser apenas copiar uma coluna ou seção inteira para uma parte diferente da página?

Você pode recriar os elementos em uma nova seção e, a seguir, atalhos aplicando a função “Copiar estilo”.

Ou você pode simplesmente copiar e colar a seção inteira em uma nova parte da página.

Que é exatamente o que vamos fazer.

Destaque a seção ou elemento que deseja copiar, neste caso estamos copiando uma seção inteira, e selecione “Copiar”.

Copy feature in Elementor 1024x479 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Em seguida, role até a parte da página em que deseja colocá-la e selecione “Colar”

Paste feature in Elementor 1024x316 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Tarefa concluída!

Bom recurso para economizar tempo, certo?

Copy Paste feature in Elementor 1024x614 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O que é isso – você deseja copiar e colar seções inteiras em outra página ?

Sem problemas.

Basta copiar seu elemento ou seção como fizemos no exemplo anterior,

Em seguida, saia para o painel do WordPress. Abra a nova página no Elementor e clique com o botão direito onde deseja colocar o conteúdo copiado.

Esse pequeno recurso significa ser capaz de adicionar seções inteiras a outras páginas em segundos, em vez de (potencialmente) horas.

Não vamos ser hiperbólicos aqui e descrever qualquer um desses recursos como “viradores de jogo”.

Mas quando você se acostumar a usá-los, achará difícil trabalhar de outra maneira.

Elementor Código Aberto

Vamos levantar o clima novamente. 🙂

Facilmente, uma das maiores diferenças entre o Elementor e outros criadores de páginas é que ele é open source.

Isso significa … uhm … Google, o que significa?

Código aberto: denota software para o qual o código-fonte original é disponibilizado gratuitamente e pode ser redistribuído e modificado.

Como o código está disponível gratuitamente, ele permite aos usuários corrigir bugs, melhorar recursos existentes e até mesmo introduzir recursos completamente novos ao software.

Na verdade, você pode ver toda a “ação” no GitHub, bem aqui .

elementor open source - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Como resultado, o desenvolvimento geralmente se move mais rápido do que com os construtores de páginas “internos”. E a maioria das pessoas concorda que o código aberto é o caminho a seguir.

Ele também abre as portas para plug-ins úteis de terceiros.

Os efeitos disso já são evidentes ao pesquisar por ‘Elementor’ no repositório de plug-ins do WordPress:

Elementor plugin search in WordPress 1024x510 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Todos esses são plug-ins de terceiros projetados para aprimorar o Elementor, e muitos deles são gratuitos.

Enquanto alguns deles oferecem pequenas melhorias, outros virtualmente dão superpoderes a Elementor.

Um bom exemplo disso são os Complementos Essenciais para Elementor .

Essential Addons for Elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Este plugin adiciona uma pilha de novos widgets à biblioteca Elementor, e mais de 100 ‘blocos’ prontos para você colocar em seus layouts.

Existem muitos outros plug-ins do Elementor que eu adoraria incluir aqui, mas isso ocuparia um post inteiro.

Hmmm … fique ligado nisso … talvez.

Embora seja um pouco incômodo ter que instalar plug-ins em cima de plug-ins, sempre fui um fã dessa abordagem porque mantém o produto básico enxuto para aqueles que não precisam de todos os recursos adicionais.

Apoio, Suporte

Eu não acho que já tenha visto tantos elogios por suporte como vi no Elementor.

Onde isso normalmente seria devido a algum suporte de bate-papo ao vivo de alto nível, esse não é o caso aqui.

Na verdade, Elementor não oferece suporte de chat ao vivo .

Em vez disso, tem algo ainda melhor.

Uma comunidade ativa e delirante de “Elementoristas” à sua disposição.

Elementor Community on Facebook 1024x753 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Eu me referi a essa comunidade várias vezes ao escrever este comentário e, sem dúvida, continuarei a fazer isso enquanto usar o Elementor.

É incrível ver como essa comunidade cresceu rapidamente! A última vez que verifiquei, havia menos de 5.000 membros.

No momento, existem mais de 30.000 Elementorists que provavelmente já responderam a quaisquer perguntas que você possa ter sobre o plugin.

search option in Elemenor Community on Facebook - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Se uma pesquisa falhar, basta perguntar no grupo.

É uma comunidade colaborativa e geralmente você obterá respostas inundando dentro de uma hora ou mais após a postagem.

Além disso, achei o canal deles no YouTube muito útil .

Elementor Youtube channel - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

O Elementor tem muitas partes móveis e pode ser opressor quando você começa a usá-lo – principalmente se você nunca usou um construtor de páginas antes.

Na minha opinião, seus vídeos são o ponto de partida perfeito, já que cobrem todos os principais recursos da ferramenta.

Eles até têm playlists dedicadas a novatos, como a ‘ Getting Started ‘, e o ‘ One Minute How To ‘ s é outra escolha sólida para iniciantes.

Eles também têm documentação detalhada , se você for mais um leitor.

SE por algum motivo você ainda precisar de ajuda, existe uma opção VIP, mas ela está disponível apenas para membros Pro.

elementor technical support - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Para ser honesto, acho isso justo, dada a qualidade das opções de suporte gratuito disponíveis para você.

O suporte premium é basicamente um sistema de tickets.

Claro, fiz uma solicitação para testar o quão confiável era para esta revisão.

elementor contact form 768x620 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Como esperado, foi estelar.

No geral, você realmente não pode reclamar.

E se você fez, tenho certeza que eles cuidariam de você;)

Você É Elementor PRO Ou Não?

Ao longo desta análise, eu apenas mencionei brevemente a versão paga do Elementor – também conhecido como Pro.

E embora o Elementor seja, na maior parte, um plugin gratuito, a atualização oferece um pouco mais de poder de fogo.

Elementor pricing 1024x638 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Então, quais são os benefícios de se tornar um profissional?

Não vou escrever um romance sobre isso, porque você pode pegar direto na fonte, bem aqui.

O que farei, entretanto, é comentar as diferenças mais notáveis ​​entre a versão gratuita e a versão Pro.

Então, para começar, você tem acesso a vários widgets extras.

Elementor Pro widgets 1024x529 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Embora eu classifique alguns deles como ligeiramente enigmáticos, há algumas adições muito úteis.

Outros recursos importantes da versão Pro do Elementor incluem:

  • Um construtor de formas visuais
  • Integração WooCommerce
  • Construtor de pop-up e modelos
  • O construtor de tema

Você também poderá usar widgets globais que podem ser usados ​​em todo o seu conteúdo, bem como em outras áreas do seu site.

elementor global widgets - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Eu abordei os widgets globais no início da análise, então você provavelmente não ficará surpreso se eu recomendaria o Pro apenas por esse motivo.

Quanto aos modelos de página, você ficará satisfeito em saber que a atualização irá desbloquear uma série de modelos de página premium para você brincar.

elementor pro premium page templates - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

E o último que mencionarei oferece uma camada extra de controle de design com ‘CSS personalizado ao vivo’.

Então, se você é um ninja de folha de estilo, você vai gostar deste.

elementor heading custom css - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Pessoalmente, acho que a ideia de um construtor de páginas é eliminar totalmente a necessidade de CSS. Quase vejo isso como uma rede de segurança para quando a ferramenta não pode entregar.

Por esse motivo, não acho que esse seja um recurso Pro.

Elementor É Certo Para Você?

Agora que cobri todos os diferentes recursos e funções do Elementor, pesando os prós e contras e dando minha experiência ao longo do caminho – vamos falar sobre VOCÊ.

Como acontece com qualquer ferramenta, Elementor não vai ser a escolha certa para todos , então eu quero chegar ao fim de para quem exatamente este construtor de páginas é adequado.

Bloggers De Orçamento

Eu vou sair direto e dizer isso.

Elementor é um sonho molhado de blogueiros de orçamento. Quer dizer, vamos … é 100% grátis !

elementor free version download - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Sim, existe uma versão Pro.

E sim, como mencionei antes, oferece algumas adições úteis.

Mas este não é o seu produto “freemium” usual.

Na maioria dos casos, freemium significa obter acesso a uma pequena fatia do bolo. Uma fatia crivada de restrições pesadas e muitas vezes irritantes e / ou publicidade intrusiva.

O Elementor dá acesso à MAIOR PARTE do bolo sem tirar nada significativo do produto. Na minha opinião, é 100% utilizável sem se tornar um profissional .

Isso significa que você não deve atualizar?

Bem, não exatamente .

Como eu disse antes, existem algumas vantagens definitivas da versão paga, mas essas são coisas que você pode absolutamente viver sem se … bem …

no money wallet - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor
(Desculpe, eu só tive que jogar isso lá.)

Bloggers Iniciantes

O Elementor é adequado para iniciantes?

Apesar da pequena curva de aprendizado que experimentei, provavelmente por estar muito familiarizado com o funcionamento do Thrive Architect , ainda acho que é um GRANDE construtor de páginas para iniciantes .

Claro, se você nunca usou um construtor de páginas antes, levará algum tempo para se acostumar, mas acho que o mesmo pode ser dito para qualquer construtor de páginas com os mesmos recursos.

Houve alguns casos em que as coisas simplesmente não faziam sentido – os modelos globais versus não globais sendo um bom exemplo.

Mas, na maioria dos casos, uma simples postagem no grupo do Facebook rapidamente esclareceu minha confusão.

No geral, se você é um iniciante e está procurando um construtor de páginas que ofereça o mínimo de atrito com o máximo de flexibilidade, o Elementor é uma excelente escolha.

Profissionais De Marketing De Alto Nível

Eu mencionei isso no início da revisão, mas queria elaborá-lo aqui.

O Elementor não é voltado para profissionais de marketing, o que significa que estão faltando alguns recursos .

Coisas que nós – como profissionais de marketing – podemos contar de um construtor de páginas.

Com isso dito, Elementor veio aos trancos e barrancos.

Um exemplo perfeito disso é a integração dos autoresponders mais populares via API:

autoresponders API integration in Elementor 1024x447 1 - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

Portanto, se você for um usuário GetResponse, Drip, Mailchimp, ConvertKit (e outros), não terá que depender de hackear o Elementor para fazê-lo funcionar.

Uma área que ainda falha é que não há como executar testes A / B em pop-ups ou opt-ins .

Isso é uma pena, considerando que você pode integrar o Elementor com a maioria das plataformas de email marketing / resposta automática, mas sua capacidade de aproveitar ao máximo seus recursos é limitada.

Mas o que eu gostaria de focar aqui são as coisas positivas.

Sim, o Elementor tem falhas, mas ainda é um ótimo construtor de páginas para profissionais de marketing em quase todos os níveis.

Conclusão

Não há dúvida de que o Elementor é um dos melhores, senão o melhor, criador de páginas gratuitas do mercado.

Este plugin WordPress repleto de recursos até mesmo se mantém contra muitos criadores de páginas premium e mais estabelecidos, com o desenvolvimento não mostrando sinais de desaceleração.

Talvez o mais interessante seja o fato de ser o primeiro criador de páginas de código aberto.

Quanto ao Elementor Pro, já é uma atualização atraente, apesar de estar em sua infância, e imagino que a maioria dos novos recursos a partir deste ponto serão exclusivos para membros.

Só o tempo dirá!

E esta foi a nossa análise Elementor. 

botao comprar do elementor - Revisão e Tutorial 2021 Do Construtor De Páginas Elementor

 

Conteúdo Vip

Insira o seu endereço de email abaixo para receber gratuitamente as atualizações do blog!

Não enviamos spam. Seu e-mail está 100% seguro!

About the Author

Fabiano
Fabiano

Empreendedor digital em marketing de afiliados e analista de sistemas como formação. Estarei compartilhando o máximo de informação para quem esta começando no mercado de afiliados.

    Este site utiliza Cookies e Tecnologias semelhantes para melhorar a sua experiência. Ao utilizar nosso site você concorda que está de acordo com a nossa Política de Privacidade.