Elementor vs Gutenberg – o confronto de 2021: qual construtor de páginas é melhor?

Somos capazes de lembrar os tempos em que o WordPress funcionava sem construtores de páginas?

O tempo voa, os avanços tecnológicos e o WordPress com seus recursos muito limitados é apenas uma vaga memória agora , graças às funcionalidades dos temas do WordPress, mas especialmente aos plugins do WordPress, como construtores de páginas.

Neste artigo, abordaremos dois dos construtores de páginas mais populares entre os usuários do OceanWP – Elementor e Gutenberg . As informações que forneceremos aqui não se baseiam apenas em nossa opinião e experiência pessoal, mas também no feedback dos usuários do OceanWP que recebemos diariamente.

Que comece o Showdown!

O que é Elementor?

Com a classificação média de 4,7 de 5 e mais de 5 milhões de instalações ativas – não há dúvida: Elementor é o construtor de páginas mais popular entre os usuários do WordPress .

A Elementor foi introduzida pela primeira vez em 2016 e assumiu a liderança muito rapidamente. A razão para sua popularidade quase instantânea foi a diferença entre o construtor visual de arrastar e soltar da Elementor e o editor de texto usual do WordPress (a era pré-Gutenberg).

Os usuários do WordPress finalmente ganharam algo que não se parecia com o Microsoft Word – um editor flexível que permitiu que sua criatividade brilhasse , tudo graças a vários widgets que reduziram a necessidade de todos os tipos de codificação personalizada ou criação de modelos personalizados de HTML / PHP / CSS.

E, se você estiver procurando por alguns novos modelos de site Elementor WordPress? Confira nossa coleção mais recente da HubSpot.

Nesta comparação Elementor vs Gutenberg, abordaremos apenas os recursos da versão gratuita do Elementor.

O que é Gutemberg?

Gutenberg, também conhecido como editor de blocos , é o editor padrão de página/post do WordPress. Foi introduzido em 2018 pela primeira vez, com a versão WordPress Bebo 5.0.

A equipe do WordPress entendeu as necessidades da comunidade por um editor padrão mais avançado e intuitivo , bem como as tendências na construção de sites. Foi assim que surgiu o editor Gutenberg e substituiu o seu antecessor – o editor clássico.

Embora o Gutenberg ainda não esteja totalmente desenvolvido e seu pico seja esperado nos próximos anos , a equipe do WordPress entregou o que prometeu – um editor visual simples, mas poderoso, que fez a mudança de um editor de conteúdo para um construtor de páginas.

E, se você estiver procurando por alguns modelos de site WordPress do Gutenberg, confira nossa coleção mais recente de modelos WooCommerce que usam o Gutenberg.

Elementor vs Gutenberg: Comparação

Elementor vs Gutenberg: facilidade de uso

Qualquer usuário do WordPress que teve o prazer de usar as duas ferramentas lhe dirá algo com o qual também podemos concordar – o Elementor ganha a comparação de facilidade de uso .

Graças à sua enorme flexibilidade e mobilidade, o Elementor realmente se assemelha a ferramentas avançadas de edição de imagens. Basta selecionar o widget que você precisa e colocá-lo em qualquer lugar no conteúdo – é isso.

Precisa criar seções? Ou seções com um número diferente de colunas? Escolher um design ou imagens diferentes para diferentes dispositivos? Também não é um problema. O Elementor realmente permite que você configure todo o conteúdo até a perfeição. Sem mencionar várias animações que os designers de sites gostam (mesmo que as ferramentas de medição de velocidade não sejam).

Por outro lado, o Gutenberg é um construtor de páginas limpo e simples . Ao contrário do Elementor, o Gutenberg não oferece o recurso de arrastar e soltar (pelo menos ainda não). Mesmo que você possa facilmente adicionar e mover os blocos, as coisas não são tão simples quanto com o Elementor. Além disso, estilizar um bloco pode ser um pouco desafiador, especialmente para quem está acostumado com o ambiente luxuoso que o Elementor oferece.

Gutenberg é o editor padrão do WordPress há 3 anos, mas ainda há pessoas que relutam em experimentá-lo . Esses usuários não favorecem nenhum construtor de páginas – eles preferem o editor clássico (conteúdo) do WordPress sobre qualquer outra coisa.

Como somos todos criaturas de hábitos, achamos que não seria objetivo marcar Gutenberg como não intuitivo e difícil de usar apenas porque o editor clássico é mais fácil de usar. Mas, podemos dizer uma coisa – depois de criar um post com Gutenberg e superar essa curva de aprendizado inicial, você continuará usando .

Elementor vs Gutenberg, qual escolher? A resposta é sempre OceanWP, porque usamos tanto

PS Um dos blocos de Gutenberg também é o bloco Clássico, então não há razão para usar plugins adicionais para usar o recurso antigo

Resumo da facilidade de uso do Elementor vs Gutenberg

O Elementor oferece widgets avançados e ferramentas de edição que o tornam mais fácil de usar do que o Gutenberg, mas pode se tornar tão desafiador quanto surgir a necessidade de tornar as páginas do site responsivas .

Gutenberg vem com sua própria curva de aprendizado que você pode superar facilmente. Entender como o Gutenberg funciona ajudará você a gerenciar todos os outros construtores de páginas , incluindo o Elementor.

Elementor vs Gutenberg: Recursos

Elementor tem widgets, Gutenberg tem blocos – o mais simples é isso.

O termo widget , no entanto, é usado no WordPress há muito tempo, quando se refere a um recurso que utilizava elementos combinados . Por exemplo, uma imagem com um título, uma lista de postagens de blog com diferentes opções de consulta, etc.

Os widgets Elementor funcionam de maneira semelhante - fornecendo recursos com opções agrupadas e várias configurações de consulta e estilo. Naturalmente, os widgets Elementor oferecem muito mais opções e versatilidade do que os widgets do WordPress (Aparência > Widgets).

Gutenberg começou com blocos muito básicos , como o bloco de parágrafo, imagem, vídeo, etc. Embora os blocos também ofereçam opções de estilo, esses recursos não são tão ricos nem intuitivos como no Elementor. Mas, para ser justo, quando se trata de configurações fáceis de usar, o Elementor definitivamente lidera o caminho - não apenas em comparação com o Gutenberg, mas em comparação com quase todos os construtores de páginas disponíveis.

Por outro lado, o “problema de blocos excessivamente simples” pode ser facilmente resolvido com alguns dos plugins Gutenberg adicionais que oferecem blocos altamente funcionais com mais recursos e opções de usuário .

Falando nisso, você teve a chance de explorar nosso mais recente produto – Ocean Gutenberg Blocks? Se você é cliente, este plugin já está disponível em seu painel para download e uso. Se você considera se tornar profissional, verifique nossa oferta mais recente.

Resumo dos recursos Elementor vs Gutenberg

Elementor usa widgets, Gutenberg usa blocos. A versão gratuita do Elementor vem com muitos widgets avançados que todo designer de sites pode usar para criar um site fantástico. Para obter uma mão de blocos mais avançados, são necessários plugins adicionais para o Gutenberg – como o Ocean Gutenberg Blocks.

Elementor vs Gutenberg: Desempenho

Você deve ter notado que usamos intencionalmente o termo "desempenho" em vez de "velocidade da página".

A razão é simples e direta – a maioria das ferramentas online mede pontuações de sites que não refletem a velocidade de um site . Além disso, existem muitos fatores dos quais a velocidade do site depende . Infelizmente, o sucesso do desempenho de um site não depende apenas do tema ou dos plugins que você está executando.

Sem falar que os proprietários de sites geralmente esquecem que essas ferramentas não refletem o status de todo o site – apenas a página atribuída ao URL testado . Resumindo, cuide de todas as páginas do site da mesma forma que cuida da página inicial .

No entanto, a qualidade de um tema e plugins pode ter um impacto substancial no desempenho geral do site . E os construtores de páginas também.

Comparação de configuração do WordPress

Antes de começarmos, gostaríamos de dar uma pequena introdução sobre como construímos templates WordPress . Desta forma, os resultados da comparação Elementor vs Gutenberg podem ser entendidos na íntegra.

Os modelos do WordPress são exemplos de conteúdo do site (páginas, postagens de blog, pré-construídos e estilizados). Esses modelos servem para acelerar o processo de construção ou inspirar. No caso dos templates do Ocean Website, quando o construtor de páginas Elementor é usado, ele é usado apenas nas páginas principais (home, contato, sobre, etc).

Todas as outras páginas, como postagens de blog, loja, páginas de produtos, páginas de arquivo são páginas padrão do WordPress gerenciadas pelo tema OceanWP.

Para este pequeno experimento, usamos nossos dois modelos de site WordPress: Agenda e Agenda Gutenberg .

À primeira vista e apenas olhando as imagens, você seria capaz de dizer a diferença entre esses dois e adivinhar qual foi construído usando Elementor e qual usando Gutenberg?

Ambos os sites estão localizados no mesmo servidor e têm absolutamente a mesma configuração:

• Software: Apache/2.4.51 (Unix)
• MySQL: (Ubuntu) v5.7.36
• PHP: 7.4.24
• WordPress: 5.8.1
• Limite de memória do WordPress (PHP): 256M
• Tema WordPress: OceanWP (pisca pisca)

Ambos os sites têm a maioria dos plugins do WordPress em comum :

• Mar Extra
• Compartilhamento de produtos oceânicos
• Compartilhamento Social do Oceano
• WooCommerce
• Lista de desejos TI WooCommerce
• WPforms Lite
• Cabeçalho Fixo do Oceano
• WP Rocket (não utilizado na criação de templates WordPress).

Modelo de agenda WordPress:

• Elementor
• Widgets do Elementor do Oceano

Modelo WordPress da Agenda de Gutenberg:

• Blocos do Oceano Gutenberg

Como você pode ver, a versão do Gutenberg não requer nenhum plugin adicional para ser executado. Tudo o que você precisa é do editor de blocos padrão do WordPress – Gutenberg .

Elementor vs Gutenberg: Google Page Speed ​​Insights

Para todos aqueles que pularam alguns trechos do texto e vieram direto para cá – é importante enfatizar que o Google Page Speed ​​Insights não mede a velocidade do site . Em vez disso, ele pontua o site levando em consideração diferentes fatores.

Além disso, também é importante reconhecer que as pontuações podem não apenas ser falsos positivos (pontuações baixas, mas site rápido e vice-versa), mas muitas vezes não representam a imagem real. Quando se trata de pontuações de PSI (Page Speed ​​Insights) para dispositivos móveis, o Google coleta informações de usuários reais que navegam em seu site usando telefones celulares .

Isso significa que a situação real se tornará visível ao longo do tempo – não instantaneamente. Isso também significa que sugerimos sutilmente que você não verifique suas pontuações e tente trabalhar nelas no momento em que instalar o WordPress ou criar uma página – as informações não são precisas.

Para compreender completamente como funciona a coleta de dados sobre o desempenho do site e o processamento de dados, recomendamos verificar esta resposta de um funcionário do Google. Não há nada melhor do que obter a resposta diretamente da fonte.

No entanto, entendemos que as pontuações são importantes para os usuários. E é por isso que estamos compartilhando os resultados com você.

Quando se trata de pontuações PSI móveis , na corrida Elementor vs Gutenberg, o vencedor é Gutenberg .

As diferenças entre todos os dados são bastante aparentes e a favor de Gutenberg.

O resultado que mais nos surpreendeu é a diferença do Tempo Total de Bloqueio (TBT). No caso da página construída pelo Elementor, o TBT foi de 310ms, enquanto o TBT em uma página construída pelo Gutenberg foi de apenas 50ms .

Você pode imaginar quais seriam os resultados se nós realmente otimizássemos as imagens no site antes de carregar e configurar o WP Rocket corretamente em vez de executar as configurações padrão? Não seja como nós – otimize suas imagens e encontre as configurações de cache ideais para o seu site .

Na comparação desktop Elementor vs Gutenberg , as diferenças não são tão drásticas, embora os resultados sejam ligeiramente a favor de Gutenberg . Pelo menos, não de acordo com o PSI.

É por isso que estamos mudando para outra ferramenta que costumamos recomendar aos nossos usuários – GTmetrix.

Elementor vs Gutenberg: Comparação GTmetrix

GTmetrix parece feliz com ambas as versões do nosso template Agenda WordPress – Elementor e Gutenberg.

Mas não podemos ignorar a enorme diferença entre o Time to Interactive e o DOM Interactive Time – ambas as métricas a favor de Gutenberg.

Tempo para Interação : Elementor vs Gutenberg : 912ms vs 408ms .

Tempo interativo do DOM: Elementor vs Gutenberg : 714ms vs 405ms .

Quando se trata da comparação da estrutura Elementor vs Gutenberg, o GTmetrix está novamente nos mostrando uma varredura verde.

Mas há uma coisa que imediatamente chamou nossa atenção – o tamanho do DOM . Mais uma vez, os resultados são a favor de Gutenberg.

Evite um tamanho excessivo de DOM : Elementor vs Gutenberg : 1251 elementos vs 929 elementos .

Seja você um fã de Gutenberg ou não, você tem que admitir que mais de 300 elementos a menos para uma página com conteúdo quase idêntico é uma grande vitória . Para não mencionar, também é uma vitória fora da caixa.

Em suma, os gráficos falaram. Embora as pontuações de desempenho e estrutura sejam exatamente as mesmas, onde ambos os sites obtiveram o GTmetrix Grade A, Performance Score 100% e Structure Score 98% - há muitas estatísticas a favor do Gutenberg que podem ser importantes para você se você estiver um grande fã de otimização e desempenho.

A julgar pela GTmetrix, as coisas estão límpidas. Quando se trata da comparação de desempenho lado a lado Elementor vs Gutenberg – Gutenberg é o vencedor absoluto .

Mas, espere um minuto. Isso significa que o Elementor é ruim e não deve ser usado? Não, porque alcançar pontuações satisfatórias das quais você pode se orgulhar também pode ser feito com o Elementor .

Os resultados mostram apenas que o Gutenberg fornece ganhos de desempenho instantâneos, sem complicações e de vanguarda , enquanto quando se trata do Elementor, você precisa ser um web designer experiente e responsável.

Resumo do desempenho do Elementor vs Gutenberg

Nenhum dos nossos modelos de site foi otimizado para velocidade / pontuação, e usamos as configurações padrão de cache do WP Rocket em ambos. O Gutenberg oferece mais ganhos de desempenho imediatos e algumas das diferenças de métricas são bastante drásticas em comparação com o Elementor , especialmente as métricas de tempo total de bloqueio, tamanho do DOM, tempo para interativo e tempo interativo do DOM.

Designers de sites experientes com habilidades avançadas de otimização que seguem as melhores práticas de criação de sites e usam ferramentas adequadas não terão problemas para alcançar a melhor velocidade ou pontuação usando o Elementor.

Os sites com tecnologia Gutenberg também exigem menos recursos , principalmente o limite de memória do WordPress, para funcionar sem problemas em comparação com os sites Elementor em combinação com vários plugins Elementor adicionais.

Elementor vs Gutenberg: Benefícios

Em relação à comparação de benefícios Elementor vs Gutenberg, é difícil decidir.

Cada construtor de páginas tem suas próprias vitórias e motivos para ser usado . Da mesma forma, cada construtor de páginas tem seus contras. Tanto os prós quanto os contras podem ser de natureza subjetiva .

Claro, todos nós amamos o Elementor por causa de seu recurso de arrastar e soltar, mas usar o Gutenberg também não é tão difícil .

As configurações de capacidade de resposta do Elementor e a capacidade de ocultar seções ou elementos com base em dispositivos ou estilizar completamente elementos com base no dispositivo também é um dos motivos adicionais para amá-lo . Agora, são os mesmos recursos que podem fazer com que os iniciantes se sintam desencorajados e sobrecarregados quando estão começando, pois percebem que a construção de sites exige mais esforço do que costumavam ler sobre isso em vários blogs.

Em termos de uso amigável e criatividade, votamos no Elementor .

Mas, quando nossos usuários nos perguntam sobre alternativas ao Elementor, eles mencionam a estabilidade como o principal motivo da necessidade de uma mudança . Para ser claro, erros e bugs acontecem, mesmo para empresas como o Facebook. E não importa qual configuração os proprietários e desenvolvedores de sites estejam executando, ser responsável e seguir as práticas recomendadas é essencial para evitar inconvenientes . Sim, estamos falando em fazer backups ou testar novas atualizações em áreas de teste.

De fato, mesmo os usuários experientes que seguem essas práticas guardam um pouco de rancor por causa das inovações e mudanças da Elementor que muitas vezes os deixam sem a possibilidade de usar [adequadamente] essa ferramenta por alguns períodos de tempo.

Quando se trata de Gutenberg, como desenvolvedores, torcemos por seu desempenho (tanto frontend quanto backend), acessibilidade e estabilidade . Esteja ciente de que alguns plugins do Gutenberg podem adicionar tanto ou até mais inchaço ao HTML do que outros editores de página que não são do Gutenberg, então escolha sabiamente.

Apesar de Gutenberg não parecer tão amigável para iniciantes quanto o Elementor, definitivamente incentivamos os iniciantes a experimentá-lo . E, nossa recomendação se baseia exatamente na ausência de alguns recursos avançados que exigem uma abordagem mais profissional ou experiente (como editar em modos responsivos e ajustar conteúdo para diferentes dispositivos).

Também é seguro dizer que aqueles que lidam e aprendem a lidar com Gutenberg também terão uma compreensão rápida de todos os outros construtores de páginas - incluindo o Elementor.

Resumo dos benefícios Elementor vs Gutenberg

As opções e configurações de capacidade de resposta do Elementor podem ajudar qualquer pessoa a ajustar o design do site para todos os dispositivos , mesmo de maneira diferente, se necessário. Mas também são as mesmas configurações que podem provocar os iniciantes do WordPress , uma vez que eles percebem que a construção de sites requer um pouco mais de tempo, esforço e prática do que eles leram sobre isso.

Gutenberg pode parecer intimidante e totalmente não intuitivo no começo , mas na verdade é um ponto de partida de aprendizado incrível. Superar o Gutenberg ajudará todos a entender melhor todos os construtores de páginas . Além disso, o Gutenberg oferece mais estabilidade, acessibilidade, SEO e ganhos de desempenho geral .

Elementor vs Gutenberg: Qual construtor de páginas é melhor?

Você sabe o que dizem – um sapato não serve em todos os pés, mas você não saberá disso a menos que experimente o sapato primeiro.

Alguns usuários adoram Elementor, alguns Gutenberg , e há várias razões por trás disso. Já que estamos falando do seu site, é essencial descobrir o que se adapta a você e às necessidades do seu site .

Quando nossos usuários nos procuram para obter conselhos sobre como usar o Elementor sem comprometer a estabilidade, o desempenho, o SEO, a acessibilidade do site e muitas outras coisas que são cruciais para a criação de sites , recomendamos que eles usem o Elementor da mesma maneira que o usamos para criar modelos de site WordPress . Use o Elementor nas páginas principais que precisam ser atraentes e atraentes – deixe todo o resto para o WordPress e seu tema.

Em suma, evite criar modelos de arquivo personalizados, especialmente se você não for um designer experiente ou tiver pouca experiência em otimização geral de sites.

Se você é um iniciante e quer se preocupar menos com edição e estilo adicionais , ou se você é um profissional que não se importa em colocar um pouco mais de esforço no design do site (estamos nos referindo à ausência do arrastar e -drop) e não se oponha à ausência de várias opções de animação, então você definitivamente deve optar pelo Gutenberg . Especialmente considerando todos os benefícios de desempenho e o fato de que você pode criar design com a mesma qualidade usando o Gutenberg .

A única coisa que você absolutamente nunca deve fazer e já vimos esses designs, é criar modelos personalizados com o Elementor e usar o Gutenberg em combinação com ele para adicionar conteúdo. Não torne sua vida mais difícil do que deveria e não destrua seu site

Se o seu construtor de páginas preferido é Elementor ou Gutenberg, a resposta é sempre OceanWP e o Ocean Core Extensions Bundle, porque oferecemos widgets e blocos para alcançar o design do site desejado

Qual é o seu veredicto? Qual é o seu construtor de páginas favorito e por quê? E sim, você pode escolher e usar os dois.

Depois de descansar da construção de sites, deixe um comentário e diga-nos o que pensa.