Gutenberg vs Elementor: existe uma escolha certa? Talvez. Mas isso depende dos recursos que você deseja do seu construtor de páginas WordPress.

Explicaremos os conceitos básicos do Gutenberg e do Elementor e, em seguida, faremos uma comparação direta entre os dois.

Continue lendo para ver uma análise detalhada da comparação entre o Gutenberg e o Elementor, com base em anos de experiência no uso de ambos e em testes rigorosos.

O que é Gutenberg?

Gutenberg é o construtor de páginas padrão do WordPress. Ele foi introduzido em 2018 e substituiu o que agora é chamado de editor “Clássico” do WordPress, que era o editor original de conteúdo rich text/HTML sem nenhuma funcionalidade de drag and drop.

Na verdade, o Gutenberg foi uma resposta a uma onda de plugins de construtores de páginas de terceiros, incluindo Elementor, Divi e Visual Composer, que foram lançados para substituir o Editor Clássico.

Do ponto de vista dos recursos, o Gutenberg oferece uma biblioteca de “blocos” de fácil acesso para você arrastar elementos de conteúdo para as páginas e artigos.

A aba Blocos no Gutenberg.
A aba Blocos no Gutenberg.

O Gutenberg vem com cerca de 100 blocos de conteúdo, alguns dos quais permitem integrações e incorporações de serviços de terceiros, como Twitter, Reddit e Amazon Kindle. Também é possível criar blocos dinâmicos para atualizar o conteúdo do bloco automaticamente. Alguns exemplos de blocos do Gutenberg incluem:

  • Parágrafo
  • Título
  • Tabela
  • Imagem
  • Galeria
  • Vídeo
  • Botões
  • Calendário
  • HTML personalizado
  • Artigos mais recentes

A maioria dos temas de WordPress funciona bem com o Gutenberg (eles são essencialmente necessários agora).

A interface do Gutenberg apresenta o conteúdo da página ou do artigo no centro, com conteúdo renderizado (como a exibição de formulários ou botões) quando possível. Essa é uma atualização significativa do Editor Clássico, pois o Gutenberg oferece suporte à edição rápida de markdown juntamente com uma experiência visual do usuário. E, se necessário, há acesso direto a seções de codificação personalizadas para CSS e HTML.

Cada bloco fornece sua própria longa lista de configurações, e o Gutenberg tem painéis rápidos para um controle poderoso sobre as configurações de documentos e blocos, como tags alt, cores de fundo e moderação de comentários.

O que é Elementor?

Elementor é um construtor de páginas, muito parecido com o Gutenberg. No entanto, o Elementor é anterior ao Gutenberg como um dos aplicativos de construtor de páginas de terceiros que acabou levando à criação de um construtor de páginas padrão de WordPress.

Introduzido em 2016, o Elementor tem sido um dos favoritos dos designers de WordPress devido à sua interface de web design totalmente visual, templates iniciais elegantes (prontos para importação) e módulos de conteúdo de drag and drop.

Elementor
Elementor.

Uma das diferenças mais imediatamente perceptíveis entre o Elementor e o Gutenberg é que o Elementor não está integrado ao WordPress. Ele é feito por uma empresa diferente, portanto, você deve instalar seu plugin gratuito (versões premium também estão disponíveis).

Você também notará que o Elementor tem nomes exclusivos para seus recursos. O que eles chamam de “blocos” no Gutenberg é chamado de “widgets” no Elementor. Por falar nisso, o Elementor possui mais de 100 desses widgets de conteúdo.

Exemplos de widgets de conteúdo do Elementor:

  • Artigos
  • Editor de texto
  • Título
  • Imagem
  • Texto
  • Testemunho
  • Alternar
  • Barra de progresso

Muitos dos widgets criam integrações entre um site WordPress e aplicativos de terceiros, como Stripe, Facebook e Sound Cloud.

No geral, o Elementor é um dos principais criadores de páginas de WordPress com uma comunidade vibrante de desenvolvedores e usuários. A interface visual de drag and drop é difícil de ser superada, você recebe centenas de templates de designers e toda a edição é feita em tempo real.

Juntamente com widgets especializados de WooCommerce e ferramentas de marketing para landing pages e formulários, o Elementor continua sendo um gigante no espaço de construção de sites, e isso é perceptível quando você compara o Gutenberg com o Elementor.

Comparação entre o Gutenberg e o Elementor

Vamos comparar o Gutenberg com o Elementor em áreas como recursos, interface de usuário, preços e muito mais. Após nossa análise, você terá uma compreensão mais sólida de qual construtor de páginas é o mais adequado para suas necessidades.

Principais recursos

Nesta seção, selecionamos o que consideramos ser os recursos “principais” de um construtor de páginas e, em seguida, comparamos o Gutenberg com o Elementor em cada categoria.

Gutenberg vs Elementor: Funcionalidade de drag and drop e codificação

O problema com os construtores de páginas é que eles geralmente preenchem a interface com ferramentas de criação visual e deixam de lado a funcionalidade mais avançada, como a edição de código.

Preferimos ver uma mistura de ambos, em que os iniciantes têm uma interface elegante de drag and drop que é facilmente acessível, e os usuários avançados podem usar CSS sem ter que procurar o campo certo.

A funcionalidade de drag and drop do Gutenberg é direta e sem atrasos. Você só precisa de um momento para procurar blocos de conteúdo e arrastá-los – ou clicar e inseri-los – no conteúdo. Em seguida, as configurações do bloco aparecem para você personalizar.

Há dezenas de blocos de conteúdo disponíveis.
Há dezenas de blocos de conteúdo disponíveis.

Uma desvantagem é que, para arrastar os blocos colocados atualmente, você precisa primeiro selecionar um bloco e, em seguida, clicar e manter pressionado um pequeno ícone Drag. Isso exige precisão ao clicar, o que não é necessário em outros construtores de páginas.

Use o ícone Drag para mover blocos.
Use o ícone Drag para mover blocos.

Quando se trata de codificação, o Gutenberg torna seu Editor de Código fácil de encontrar.

O Editor de Código é facilmente acessível.
O Editor de Código é facilmente acessível.

Os usuários encontraram problemas com blocos que bagunçam seu código e dificuldades com os blocos pré-fabricados, exigindo que os desenvolvedores produzam dezenas de blocos personalizados.

Apesar das reclamações, o construtor de páginas melhorou para os programadores, e as ferramentas estão definitivamente disponíveis, mas talvez com uma curva de aprendizado mais acentuada do que a disponível no Editor clássico.

Você pode até mesmo adicionar âncoras HTML e classes CSS adicionais diretamente da aba Block no Gutenberg, o que antes exigia um tedioso trabalho na aba HTML do Editor Clássico.

Ajuste as âncoras HTML e as classes CSS.
Ajuste as âncoras HTML e as classes CSS.

O Elementor também oferece a funcionalidade de drag and drop. Ele funciona com a maioria dos temas de WordPress e apresenta uma biblioteca de blocos para você inserir rapidamente em qualquer página.

Uma lista de blocos básicos.
Uma lista de blocos básicos.

Como o Elementor usa um sistema de grade gerado de forma semiautomática, é possível colocar widgets na maioria das áreas de uma página.

Arrastando um bloco de botões para o editor.
Arrastando um bloco de botões para o editor.

Mover blocos de conteúdo previamente colocados é mais fácil com o Elementor do que no Gutenberg. Você simplesmente clica e segura em qualquer lugar do bloco para movê-lo.

Você pode mover qualquer bloco com um clique e arrastar.
Você pode mover qualquer bloco com um clique e arrastar.

Ao inserir ou selecionar um widget de conteúdo, você verá o conteúdo, o estilo e as configurações avançadas desse widget. Quanto à codificação, ela é simplificada com muitas das configurações de bloco. Por exemplo, você pode adicionar âncoras HTML, atributos e CSS personalizado diretamente nas configurações do widget ou da página.

Você pode inserir CSS personalizado com facilidade.
Você pode inserir CSS personalizado com facilidade.

O Elementor também oferece widgets de código HTML para inserir qualquer código personalizado que você queira em uma página da web.

Você pode usar a caixa de código HTML para suas próprias personalizações.
Você pode usar a caixa de código HTML para suas próprias personalizações.

No geral, a funcionalidade de drag and drop do Elementor é mais forte do que a do Gutenberg. No entanto, as opções de codificação personalizada parecem igualmente acessíveis em ambos os construtores de páginas.

Gutenberg vs Elementor: Templates (para sites, blocos, páginas, pop-ups e muito mais)

Os templates do construtor de páginas permitem que os desenvolvedores criem sites com uma velocidade incrível. Os templates permitem que você comece com sites profissionais ou designs de páginas em vez de construir do zero.

Muitos construtores de páginas oferecem templates pré-fabricados para você:

  • Sites completos
  • Páginas
  • Artigos de blog
  • Seções de página
  • Blocos de conteúdo
  • Cabeçalhos
  • Rodapés
  • Landing pages
  • E muito mais

O Gutenberg tem uma grave falta de templates pré-fabricados. A aba Patterns fornece templates de seção úteis, mas isso é tudo.

A aba Patterns.
A aba Patterns.

No entanto, é possível instalar plugins de terceiros com templates iniciais para páginas e sites completos. plugins como Gutentor, Twentig e Otter Blocks são adequados para você.

O Elementor, por outro lado, é alimentado por centenas de templates iniciais em seu Theme Builder.

Os templates do Elementor incluem:

  • Cabeçalhos
  • Rodapés
  • Páginas únicas
  • Artigos únicos
  • Arquivos
  • Páginas de resultados de pesquisa
  • Páginas de produtos
  • Arquivos de produtos
  • Páginas 404
Os vários elementos do construtor de temas do Elementor.
Os vários elementos do construtor de temas do Elementor.

Quase todos os templates do Elementor exigem uma assinatura premium, mas ela é acessível e melhor do que a que você obtém do Gutenberg.

Gutenberg vs Elementor: Estilo

Os recursos de estilo do Gutenberg permitem personalizações rápidas no painel de blocos do lado direito – depois de selecionar o bloco que você deseja editar.

Estilizando uma imagem no Gutenberg.
Estilizando uma imagem no Gutenberg.

As configurações de estilo são bastante básicas em comparação com o que há no Elementor, mas o essencial está quase sempre lá, como opções para alterar bordas e dimensões de imagens ou configurações de cor, tipografia e margem para blocos de parágrafos.

Juntamente com o CSS personalizado para todos os blocos, você encontrará uma barra de ferramentas flutuante quando um bloco for clicado. Esta seção oferece o estilo do texto, a edição com HTML, a cópia desse estilo e a duplicação.

A barra de ferramentas flutuante.
A barra de ferramentas flutuante.

As configurações de estilo no Elementor estão contidas em três guias quando um widget é selecionado. Ajuste as configurações de conteúdo para dimensionamento de imagem e texto e, em seguida, vá para as áreas avançadas, com tudo, desde animações de foco até filtros CSS e máscaras para transformar efeitos.

Ajuste o estilo de qualquer bloco selecionado.
Ajuste o estilo de qualquer bloco selecionado.

Não há dúvida de que o Elementor tem uma coleção mais forte de ferramentas de estilo do que o Gutenberg. No entanto, aqueles que desejam o máximo de simplicidade se sentirão em casa com os recursos de estilo disponíveis no Gutenberg.

Gutenberg vs Elementor: Blocos de conteúdo/widgets:

O Gutenberg vem com um pouco mais de 90 blocos de conteúdo. O Elementor fornece mais de 100.

Aqui estão as categorias de blocos do Gutenberg:

  • Texto
  • Mídia
  • Design
  • Widgets
  • Incorporações de temas

Você obtém todos os elementos essenciais (blocos de parágrafo, imagem e botão), além de elementos exclusivos para coisas como Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read e muito mais.

O Elementor também categoriza seus widgets de conteúdo:

  • Básico
  • Pro
  • Geral
  • Site
  • WooCommerce
  • WordPress

Essas não são as categorias mais úteis, mas pelo menos elas estão organizadas de alguma forma.

São fornecidos widgets de conteúdo padrão, como divisores, seções e cabeçalhos. Há também widgets exclusivos para o Google Maps, Code Highlights, WooCommerce Product Data e muito mais.

Os elementos mais avançados incluem Imagens de produtos, Meta de produtos e Upsells.
Os elementos mais avançados incluem Imagens de produtos, Meta de produtos e Upsells.

Nossa conclusão é que o Gutenberg organiza e explica muito melhor seus blocos de conteúdo, mas o Elementor oferece uma quantidade maior de blocos (widgets) com configurações mais fortes.

Gutenberg vs Elementor: Suporte ao WooCommerce

O WooCommerce é um plugin de terceiros que transforma qualquer site WordPress em uma loja on-line. Quando combinado com um construtor de páginas, você geralmente recebe blocos do WooCommerce para maior personalização do carrinho de compras, das páginas de produtos e muito mais.

O Gutenberg não é exceção. Quando você instala o WooCommerce, uma infinidade de blocos do Gutenberg aparece para fortalecer o design da sua loja WooCommerce. Há blocos de Pesquisa de Produtos, opções para mostrar Filtros Ativos e maneiras de exibir os Produtos Mais Vendidos. Contamos 26 blocos do Gutenberg/WooCommerce e há vários plugins de terceiros para você expandir essa lista.

Os blocos do WooCommerce.
Os blocos do WooCommerce.

O Elementor também funciona bem com o WooCommerce, mas por um preço. Você deve ter uma assinatura do Elementor Pro para desbloquear qualquer um dos widgets de conteúdo ou templates de página do WooCommerce. Dito isso, o Elementor Pro é acessível, e os blocos fornecem ferramentas de estilo mais poderosas do que qualquer coisa no Gutenberg.

No momento da publicação deste artigo, 20 blocos do WooCommerce estavam disponíveis no Elementor. A lista inclui imagens de produtos, botões Adicionar ao carrinho, classificações de produtos e galerias de produtos.

Você também pode usar blocos adicionais do WooCommerce, como Menu Cart e Product Title.
Você também pode usar blocos adicionais do WooCommerce, como Menu Cart e Product Title.

Há até mesmo widgets exclusivos, como Upsells e Product Meta Data.

Gutenberg vs Elementor: Integrações

É importante que você não confunda integrações com compatibilidade. Abordaremos a compatibilidade de temas e plugins mais adiante neste artigo, mas as integrações são mais como links para outros aplicativos, plataformas e softwares, em que os dados são enviados para o construtor de páginas ou a partir dele.

Por exemplo, uma integração com o Facebook pode mostrar um botão para que as pessoas sigam sua página ou uma lista das suas publicações mais recentes no Facebook.

O Gutenberg tem uma pequena lista de integrações diretas, principalmente usando blocos para extrair conteúdo de fontes externas.

Aqui está uma amostra das 32 integrações atuais do Gutenberg:

  • Openverse
  • Twitter
  • YouTube
  • WordPress
  • SoundCloud
  • Spotify
  • Crowdsignal
  • Dailymotion
  • Imgur
  • Issue
  • Kickstarter
  • Amazon Kindle
  • Pinterest
  • Reddit
  • Slideshare

O Elementor tem uma forte lista de integrações, de plataformas de mídia a sites sociais.

Aqui estão algumas das mais de 40 integrações do Elementor:

  • PayPal
  • Facebook (para comentários, incorporações, páginas e botões)
  • YouTube
  • Vimeo
  • Google Maps
  • SoundCloud
  • MailChimp
  • ActiveCampaign
  • ConvertKit
  • HubSpot
  • Zapier
  • Discord
  • Bibliotecas de ícones personalizados
  • Slack
  • ReCaptcha
  • Drip

Ambos têm integrações respeitáveis, mas as integrações do Elementor parecem mais fortes e mais abundantes. Você pode acessar os principais provedores de e-mail marketing, vender por meio de processadores de pagamento e conectar-se ao seu software de gerenciamento de relacionamento com o cliente no Elementor. Enquanto o Gutenberg se concentra mais na vinculação a bibliotecas de mídia e sites sociais.

Interface do usuário: Gutenberg vs Elementor

Começar a usar o Gutenberg é tão intuitivo quanto o próprio WordPress. Isso porque o Gutenberg está integrado automaticamente ao painel do WordPress. Não há necessidade de instalar um plugin ou complemento. Basta você abrir um editor de página ou artigo e o Gutenberg começa a trabalhar.

Você pode adicionar blocos por meio da barra de pesquisa ou no editor.
Você pode adicionar blocos por meio da barra de pesquisa ou no editor.

Você pode pesquisar e inserir blocos clicando em um dos vários botões “+” (Adicionar bloco) espalhados pelo editor. Você encontrará uma barra de pesquisa, além de várias guias para Blocos, Padrões e Mídia. Você até perceberá que o Gutenberg se integra aos populares provedores de imagens Creative Commons para encontrar gráficos adequados gratuitamente.

A rapidez na criação de conteúdo faz do Gutenberg um dos melhores construtores de páginas para blogueiros e qualquer pessoa que publique on-line. Você pode escrever diretamente no editor e utilizar a marcação e os atalhos de teclado para inserir rapidamente elementos como títulos, links e imagens.

Sem mencionar que o Gutenberg se integra a uma ampla gama de outros editores de texto de terceiros, ou você pode copiar conteúdo de outros programas diretamente para o Gutenberg (sem precisar carregar imagens uma segunda vez ou ajustar a formatação).

A aba Page oferece configurações de publicação e focadas na página, como ferramentas para imagens em destaque, trechos e comentários.

A aba Imagem em destaque.
A aba Imagem em destaque.

Também é fácil ajustar as configurações voltadas para blocos. Basta clicar na aba Block. Isso abrirá os recursos de personalização exclusivos do bloco que você selecionou. Por exemplo, um bloco Image mostra tudo, desde os campos Alt Text até as configurações de Image Dimensions. É aqui também que você adicionaria tags CSS, âncoras HTML ou atributos de título.

Use a aba Block para acessar todas as configurações do bloco.
Use a aba Block para acessar todas as configurações do bloco.

Quando se trata de facilidade de uso, o Elementor não é novato em tornar as coisas intuitivas. No entanto, há uma curva de aprendizado, principalmente devido à robusta coleção de recursos fornecidos.

No editor, você recebe uma réplica exata da interface de uma página como o editor. Todo widget de conteúdo do Elementor está disponível para arrastar ou editar a partir da biblioteca.

Elementos do Elementor categorizados.
Elementos do Elementor categorizados.

Embora as categorias não tenham nomes úteis, você pode encontrar os widgets em Basic, Pro, General, Site, WooCommerce e WordPress. Há também um painel Favoritos para você salvar widgets personalizados para uso posterior.

A verdadeira facilidade de uso do Elementor vem de seu editor baseado em grade, que permite arrastar e soltar um elemento praticamente em qualquer lugar da página. Não só isso, mas você pode arrastar seções inteiras, deletar seções ou adicionar seções clicando dentro do editor.

Arrastando um bloco para outro local.
Arrastando um bloco para outro local.

Você também tem acesso rápido à biblioteca de blocos e templates. Você pode salvar templates personalizados para uso posterior ou aproveitar os blocos e templates de página criados por profissionais. Muitos deles são para situações específicas, como se você precisasse de uma página 404 ou de um carrinho personalizado do WooCommerce.

Você pode ver apenas uma pequena parte dos blocos disponíveis no Elementor.
Você pode ver apenas uma pequena parte dos blocos disponíveis no Elementor.

A principal desvantagem da interface do Elementor é sua natureza de terceiros. Você precisa instalar um plugin para torná-lo ativo no WordPress. Mesmo assim, você sempre precisa clicar no botão “Editar com o Elementor”, pois o Gutenberg continua tecnicamente instalado em segundo plano.

No geral, a interface do Gutenberg é mais fácil de entender, mas não há nada como trabalhar com o Elementor. Ele é suave, divertido de usar e capaz de muito mais do que o Gutenberg, assim que você pegar o jeito.

Gutenberg vs Elementor: Desempenho e impacto na velocidade da página

Os criadores de páginas oferecem muitos recursos. Isso pode levar a um conjunto volumoso de ferramentas que entra em conflito com plugins e temas e também inibe a velocidade da página. Ao analisar as avaliações dos usuários, o Elementor e o Gutenberg parecem ter um bom desempenho quando você usa as ferramentas de otimização adequadas e um provedor de hospedagem de sites rápido.

Em nosso teste, instalamos o Gutenberg e o Elementor em instâncias separadas do que sabemos ser um servidor de alto desempenho e com CDN (da Kinsta). Também usamos o mesmo tema com conteúdo de demonstração para tornar o teste o mais igual possível. Mantivemos o mesmo local de servidor (Iowa) para ambos os testes e instalamos dois plugins comuns (WooCommerce e Yoast SEO) para ver como os criadores de páginas responderam a um ambiente do mundo real.

Aqui estão os resultados usando o Pingdom e o Google PageSpeed Insights:

Testes de velocidade de página do Gutenberg

  • Pontuação de desempenho do Pingdom: 92 (servidor de teste de São Francisco)
  • Tamanho da página: 905,2 KB
  • Tempo de carregamento: 1,32 s
  • Solicitações: 19

Executamos o mesmo teste com um servidor de teste em Londres:

  • Pontuação de desempenho: 92
  • Tamanho da página: 905,8 KB
  • Tempo de carregamento: 1,50 s
  • Solicitações: 19

E aqui estão os resultados do Google PageSpeed Insights:

  • Desempenho na área de trabalho: 99
  • Acessibilidade para desktop: 100
  • Práticas recomendadas para desktop: 92
  • SEO para desktop: 67
  • Desempenho em dispositivos móveis: 93
  • Acessibilidade em dispositivos móveis: 100
  • Práticas recomendadas para celular: 92
  • SEO para celular: 71

Testes de velocidade de página do Elementor

  • Pontuação de desempenho do Pingdom: 88 (servidor de teste de São Francisco)
  • Tamanho da página: 2,5 MB
  • Tempo de carregamento: 1,93s
  • Solicitações: 48

E os resultados do servidor de teste de Londres:

  • Pontuação de desempenho: 87
  • Tamanho da página: 2,5 MB
  • Tempo de carregamento: 1,97s
  • Solicitações: 48

Resultados do Google PageSpeed Insights:

  • Desempenho na área de trabalho: 94
  • Acessibilidade para desktop: 100
  • Práticas recomendadas para desktop: 92
  • SEO para desktop: 67
  • Desempenho em dispositivos móveis: 81
  • Acessibilidade em dispositivos móveis: 100
  • Práticas recomendadas para celular: 92
  • SEO para celular: 71

O Gutenberg quase sempre apresentou uma pontuação de desempenho mais alta, menor tamanho de página e tempo de carregamento mais rápido, além de menos solicitações. No entanto, isso pode ocorrer porque o Elementor tem designs de blocos mais avançados e o Gutenberg é tecnicamente sempre instalado junto com o Elementor, de modo que você fica preso a dois construtores de páginas em execução ao mesmo tempo, o que pode deixar o site mais lento.

Independentemente disso, ambos oferecem altas velocidades. A parte mais importante para manter velocidades de página aceitáveis é que você opte por um provedor de hospedagem de sites gerenciado e alimentado por CDN, como a Kinsta.

Gutenberg vs Elementor: Preços

Você pode obter tanto o Gutenberg quanto o Elementor gratuitamente. A principal diferença é que o Gutenberg é totalmente gratuito, para sempre. O Elementor oferece uma versão gratuita robusta de seu construtor de páginas e várias atualizações e complementos para aqueles interessados em recursos mais avançados.

Preços do Gutenberg

Gratuito, pois é o editor do WordPress e está integrado ao WordPress por padrão.

Preços do Elementor

A marca Elementor oferece produtos e serviços adicionais, mas, para fins de comparação, limitamos os preços ao plugin do construtor de páginas.

  • Plano gratuito: $0 para mais de 40 widgets gratuitos, funcionalidade de drag and drop e uma API para desenvolvedores
  • Plano Essential: $59 por ano para oferecer suporte a um site com mais de 100 widgets, mais de 300 templates, o criador de temas de drag and drop, o criador de lojas WooCommerce, o criador de landing pages, ferramentas de marketing, criador de pop-ups e suporte premium
  • Plano Expert: $199 por ano para oferecer suporte a 25 sites e recebe todos os recursos mencionados no Plano Essential
  • Plano Agency: $399 por ano para todos os recursos mencionados nos planos anteriores, mas com suporte para 1.000 sites

A princípio, pode parecer que um plugin “gratuito para sempre” (como o Gutenberg) é o melhor negócio. Mas a versão gratuita do Elementor está repleta de ferramentas suficientes para muitos tipos de projetos, e eles mantêm os planos premium com preços razoáveis.

Nós argumentaríamos que o Elementor tem um valor melhor do que o Gutenberg simplesmente porque é um construtor de páginas mais simplificado e poderoso do que o Gutenberg, e você ainda pode obter muitos dos recursos gratuitamente. Mas se você precisa manter o orçamento em $0 para sempre, o Gutenberg é o ideal.

Gutenberg vs Elementor: Compatibilidade com temas e plugins:

É difícil identificar a compatibilidade (ou a falta dela) dos criadores de páginas com os milhares de temas e plugins do WordPress no mercado. No entanto, podemos examinar as avaliações dos usuários para descobrir se existem alguns problemas de compatibilidade evidentes com temas ou plugins populares.

O Gutenberg parece funcionar com a maioria dos temas e plugins. Afinal de contas, os desenvolvedores de terceiros devem atender ao construtor de páginas, já que o Gutenberg está integrado ao WordPress por padrão.

De acordo com nossa pesquisa, os problemas de compatibilidade mais comuns com o Gutenberg surgem quando ele é combinado com outros construtores de páginas no mesmo site. Também descobrimos que os desenvolvedores de plugins estão tentando recuperar o atraso para produzir blocos do Gutenberg relacionados aos seus plugins. Portanto, você pode descobrir que alguns plugins mais antigos e atualizados com menos frequência não possuem blocos do Gutenberg.

Até a data deste artigo, existem cerca de 12 questões de compatibilidade abertas nos fóruns do WordPress.org, algumas das quais parecem ser erros do usuário. Mas não é inimaginável supor que você possa encontrar alguns problemas.

O Elementor é conhecido por ter sólida compatibilidade em toda a comunidade WordPress. No entanto, é um construtor de páginas de terceiros, por isso é sensato ficar atento às tags de compatibilidade (notas que explicam quando um plugin não é compatível). E ao procurar por um tema, sempre verifique se ele é compatível com o Elementor (se é isso que você está usando como construtor de páginas).

Tanto para o Gutenberg quanto para o Elementor, você deve ficar atento aos temas WordPress “multipropósito” com templates iniciais. Esses templates iniciais são projetados para construtores de páginas específicos, então um para Gutenberg não funcionará com o Elementor e vice-versa. E alguns temas não têm templates iniciais para esses construtores de páginas.

Edição Backend vs Frontend no Gutenberg e Elementor

Não há como você editar o conteúdo no frontend de um site com o Gutenberg. Mas esse é o objetivo. O Gutenberg se esforça para combinar aspectos da edição do frontend com a experiência do backend, permitindo que você se atenha a uma única interface.

Então, por exemplo, toda a edição ocorre no backend do WordPress, mas muitos dos blocos são exibidos em tela cheia para a visualização mais realista do que esperar quando publicado.

O backend do Gutenberg com seus blocos e planos de fundo em exibição total.
O backend do Gutenberg com seus blocos e planos de fundo em exibição total.

O Elementor não é muito diferente. Ele costumava oferecer edição de backend e frontend, mas acabou combinando a experiência de edição em um único módulo. Portanto, não é possível acessar o frontend de seu site e arrastar elementos.

Entretanto, o Elementor traz suas páginas e artigos para o seu próprio editor de backend, que apresenta uma bela visualização da página de frontend. Dessa forma, você vê exatamente o que acontece quando uma alteração é feita.

O editor do Elementor.
O editor do Elementor.

Por fim, esses dois criadores de páginas têm salvamento automático, além de botões de salvamento manual.

Suporte ao cliente: Gutenberg vs Elementor

Geralmente, você só obtém suporte ao cliente quando paga por um construtor de páginas. Durante nossa pesquisa, essa suposição se aplicou tanto ao Gutenberg quanto ao Elementor.

O construtor de páginas autônomo Gutenberg não tem uma linha direta de suporte ao cliente para contato. Você pode, no entanto, discutir problemas no fórum de usuários do Gutenberg. Os membros do WordPress.com recebem suporte dedicado ao cliente, portanto você pode pedir a eles que ajudem com as perguntas sobre o Gutenberg. Os usuários do WordPress.org, infelizmente, são deixados para fóruns e artigos de blog para completar suas próprias pesquisas.

O plugin gratuito Elementor tem uma base de conhecimento e um fórum de usuários.

Você pode pesquisar a documentação de ajuda com o Elementor Academy.
Você pode pesquisar a documentação de ajuda com o Elementor Academy.

Para receber suporte por e-mail de uma pessoa real, você deve pagar pelo Elementor Pro. Dito isso, há um módulo de chat em tempo real para perguntas sobre vendas.

Gutenberg vs Elementor: Qual deles você deve escolher?

Após anos de experiência trabalhando com usuários de WordPress e uma comparação detalhada entre o Gutenberg e o Elementor, chegamos a algumas conclusões finais.

Aqui estão as conclusões:

  • As funcionalidades do Gutenberg são mais simples do que as do Elementor. São ótimas para os fundamentos do design web, mas os usuários avançados vão preferir as configurações de estilo avançado e os blocos de conteúdo do Elementor.
  • A interface do usuário do Gutenberg está integrada ao WordPress, enquanto a do Elementor sempre será um plugin de terceiros. No entanto, a experiência do usuário no Elementor é contínua, e é muito mais difícil simplesmente arrastar e soltar um elemento no Gutenberg.
  • Em termos de desempenho, tanto o Gutenberg quanto o Elementor têm bom desempenho. Nossos testes mostraram isso. Independentemente disso, você pode encontrar lentidão na velocidade da página. A principal maneira de contornar isso é com um provedor de hospedagem de sites de qualidade como a Kinsta.
  • O Gutenberg será sempre gratuito, mas você está limitado ao que está disponível. O Elementor tem uma poderosa versão gratuita com a opção de atualizar para mais recursos e suporte ao cliente real.
  • Gutenberg e Elementor são compatíveis com uma ampla variedade de temas e plugins do WordPress.
  • A edição no backend do Gutenberg fornece uma interface visualmente agradável com opções de estilização rápidas. A edição de frontend não existe. No entanto, é possível ver uma visualização em tempo real do frontend no editor do backend. O Elementor também oferece apenas edição no backend, mas com uma pré-visualização real que mostra tudo do frontend.
  • O Gutenberg possui templates de seção, mas nada além disso. O Elementor vem com vários templates de seção, site, página, cabeçalho e landing pages, todos os quais requerem um plano premium.
  • O suporte ao cliente para o Gutenberg está contido em fóruns de usuários e em quaisquer artigos de blog que você possa encontrar sobre ele. Usuários pagantes do WordPress.com podem obter assistência com o Gutenberg. Usuários pagantes do Elementor recebem suporte humano, enquanto os usuários gratuitos têm acesso a muitos recursos on-line, incluindo uma base de conhecimento.

Resumo

Cada construtor de páginas tem seu espaço. O Elementor é para usuários mais experientes ou aqueles que precisam de uma biblioteca de templates de páginas. O Gutenberg atua como o construtor de páginas pronto para uso no WordPress, com ferramentas e configurações de estilização simplificadas e fáceis de usar, tornando-o perfeito para a criação rápida de conteúdo.

Ao criar um site WordPress, você precisará de um provedor de hospedagem de sites poderoso ao seu lado. Na Kinsta, oferecemos uma variedade de planos de hospedagem WordPress com desempenho otimizado para todas às suas necessidades do Elementor ou do Gutenberg.

Jeremy Holcombe Kinsta

Editor de Conteúdo & Marketing na Kinsta, Desenvolvedor Web WordPress e Escritor de Conteúdo. Fora do universo WordPress, eu curto praia, golfe e filmes. Também enfrento problemas de gente alta ;).