Gutenberg vs Elementor: o que é melhor em 2022
Publicados: 2022-06-16Gutenberg e Elementor são termos bastante comuns que você pode ter encontrado no mundo WordPress. Ao projetar um site WordPress, o pensamento de qual construtor de páginas ou editor de site usar é algo que pode ter passado pela sua cabeça. Um construtor de páginas que vem no topo da lista é o Elementor. O editor Gutenberg também é algo que provavelmente chamará sua atenção.
Tanto o editor Gutenberg quanto o construtor de páginas Elementor são ótimos e selecionar qual deles usar é algo que pode ser confuso, especialmente para iniciantes do WordPress.
Neste guia, examinaremos cada um deles, como usá-los e algumas das principais comparações entre eles com base em métricas específicas.
Índice
Gutenberg
- O que é Gutemberg
- Recursos do Gutenberg
Elementor
- O que é Elementor
- Recursos do Elementor
Principais comparações entre Gutenberg e Elementor
Conclusão
Gutenberg
O que é Gutemberg
É o editor padrão do WordPress, também conhecido como editor de blocos. Foi introduzido em 2018, como uma inclusão no WordPress 5.0.
O editor usa blocos que podem ser usados para adicionar conteúdo a um post/página e podem ser estilizados de acordo com a preferência dos usuários.

Quando introduzido, o editor de blocos substituiu o editor clássico. Gutenberg é fácil de usar especialmente para usuários iniciantes em comparação com o editor clássico. Você não precisa mais adicionar HTML e CSS ao editor para adicionar e estilizar seu conteúdo.
No entanto, ainda está em fase de crescimento e espera-se que ofereça ainda mais recursos com o passar do tempo, pois ainda é continuamente desenvolvido e melhorias adicionadas.
Recursos do Gutenberg
O Gutenberg possui vários recursos existentes. Aqui, examinaremos cinco desses recursos no editor.
Blocos
Ele contém blocos embutidos que permitem adicionar qualquer tipo de conteúdo, como mídia e texto, em sua postagem ou página.
Esses blocos podem ser adicionados a uma postagem ou página clicando no insersor de bloco dentro dela.

Dentro do editor, você pode adicionar cada bloco separadamente, proporcionando muito mais controle sobre as configurações de cada bloco.
Há também um grande número de blocos disponíveis. A ampla seleção de blocos disponíveis permite que você adicione diferentes conjuntos de conteúdo ao seu site. Você também pode criar blocos personalizados para usar em seu site.
Blocos reutilizáveis
Ele fornece uma opção para ter blocos reutilizáveis no lugar. Blocos reutilizáveis são um grupo de blocos que podem ser usados repetidamente no conteúdo do seu site.
Blocos reutilizáveis acabam sendo bastante econômicos. Isso ocorre porque você não precisa recriar as seções para usar em diferentes seções do seu site.
Abaixo está uma ilustração de captura de tela de exemplo sobre como você pode criar um bloco reutilizável a partir de um bloco específico:

Ao clicar no link “Adicionar aos blocos reutilizáveis”, você terá um pop-up onde precisará adicionar o nome do bloco reutilizável e salvar suas alterações.

(WYSIWYG) Edição
Ele apresenta um editor de conteúdo WYSIWYG (What You See Is What You Get). Isso permite que você edite o conteúdo em sua postagem ou páginas e esteja em condições de visualizar sua exibição antes de publicá-la.
Esse é um ótimo recurso, pois você não precisa mais salvar suas alterações para visualizar a exibição da página ou postagem. Inicialmente, isso é algo que não foi fornecido pelo editor WordPress anterior.
Aspectos de fonte ajustáveis
O editor facilita bastante o ajuste de vários aspectos da fonte do seu conteúdo, como tamanho e aparência da fonte. Isso permite que você personalize a exibição do conteúdo em seu site.
Quaisquer alterações de fonte feitas em seu conteúdo ficam imediatamente visíveis no editor.
Funcionalidade de arrastar e soltar
O editor permite que você arraste e solte blocos em suas páginas ou posts. Isso permite que você crie layouts simplificados de sua preferência, muito mais rápido.
Elementor
O que é Elementor
O Elementor é um construtor de páginas que permite criar layouts altamente personalizáveis em seu site WordPress.

É um dos construtores de páginas mais populares. Sua versão gratuita tem mais de 5 milhões de instalações como está atualmente.
Ao usá-lo, você não precisa de nenhuma experiência em codificação para projetar seu site. Ele tem um grande número de widgets no lugar. Eles permitem que você adicione facilmente diferentes recursos ao seu site.
O construtor de páginas também pode ser usado para uma variedade de tipos de sites, como blogs, sites de comércio eletrônico, sites de listagem e muito mais. Não há limitação para nenhum tipo de conteúdo específico.
Recursos do Elementor
O Elementor possui uma ampla gama de recursos que o tornam bastante ideal para desenvolvedores de sites e usuários iniciantes do WordPress.
Alguns desses recursos incluem:
Capacidade de resposta
O construtor permite que você crie seu site para todos os dispositivos (celular, laptop e desktop). Isso ajuda a garantir que você obtenha um design responsivo perfeito em pixels do seu site que funcione conforme o esperado em todos os dispositivos.
Essa capacidade de resposta é alcançada com a ajuda de pontos de interrupção que são ativados com base no tamanho da tela do dispositivo. Você também pode criar pontos de interrupção personalizados com a ajuda do Elementor.
Edição ao vivo e experiência de visualização

Com o Elementor, você pode realizar edições em sua página ou postagem e visualizá-la à medida que as edições são realizadas. Você não precisa, por exemplo, salvar uma página e depois visualizá-la para ter uma visão das alterações feitas.
Funcionalidade de arrastar e soltar
Ele oferece uma funcionalidade de arrastar e soltar ao projetar seu site. Você só precisa arrastar os widgets para a tela em sua postagem ou página.

Esse é um recurso que o torna um ótimo construtor de páginas a ser considerado, especialmente para usuários iniciantes, pois não é necessário nenhum conhecimento de codificação.
Modelos Prontos
Ele fornece mais de 300 modelos prontos que você pode usar no design do seu site.
Você pode usar esses modelos para criar sites de qualquer tipo de indústria. Uma vez adicionado à sua página, você pode personalizar ainda mais os modelos de acordo com sua preferência.
Vários widgets
Ele incorpora um número diversificado de widgets que podem ser usados para adicionar vários tipos de conteúdo. Também existem plugins de terceiros que se integram facilmente ao construtor para fornecer widgets extras que você pode usar em seu site.
Principais comparações entre Gutenberg e Elementor
Tanto o Elementor quanto o Gutenberg têm várias semelhanças, como visto em seus recursos descritos acima. No entanto, eles realmente superam uns aos outros em diferentes aspectos. Abaixo estão algumas dessas comparações.
Capacidade de resposta
Tanto o Gutenberg quanto o Elementor podem ser usados para criar sites responsivos.
Com o Elementor, você pode controlar a exibição de widgets em diferentes telas de dispositivos. Por exemplo, você pode ocultar um botão em dispositivos móveis e renderizá-lo apenas em computadores e tablets. Você também pode adicionar estilos extras a vários elementos em diferentes telas de dispositivos. Essa funcionalidade oferece flexibilidade extra ao projetar seu site.
No Gutenberg, no entanto, por padrão, você não pode ajustar a exibição de blocos com base nas telas do dispositivo, a menos que esteja usando um tema ou plug-in que adicione esse recurso.
Facilidade de uso e compreensão
Ao usar o Gutenberg, você pode facilmente adicionar blocos ao seu site, apenas clicando no insersor de blocos e selecionando o bloco desejado. Uma desvantagem deste editor é que não é muito intuitivo e os usuários podem ter que aprender como projetar layouts corretamente usando blocos.
Quanto ao Elementor, os usuários só precisam arrastar e soltar o widget desejado na página e modificar seu conteúdo para renderizar o conteúdo desejado. Esta é uma abordagem muito mais fácil, especialmente para novos usuários do WordPress.
atuação
O Gutenberg alcança melhores pontuações de desempenho em comparação com o Elementor.
Uma página projetada com Gutenberg provavelmente carregará muito mais rápido em comparação com uma página projetada com Elementor.
Abaixo está uma comparação de desempenho de amostra entre uma página criada com Elementor e uma criada com Gutenberg:
Página usando Elementor

Página usando Gutenberg

O Elementor possui mais recursos e dados de personalização, portanto, um dos motivos que contribuem para as pontuações de desempenho mais baixas em comparação com o Gutenberg. O Gutenberg também está integrado ao próprio WordPress, ao contrário do Elementor, que você precisa primeiro instalar o plug-in Elementor para poder projetar seu site com ele.
Arraste e Solte
Tanto o Gutenberg quanto o Elementor fornecem uma funcionalidade de arrastar e soltar ao projetar seu site.
Com o Elementor, você pode arrastar e soltar widgets dentro de outros widgets, permitindo criar layouts complexos. No entanto, em Gutenberg, essa funcionalidade é limitada, pois você só pode arrastar e soltar blocos para onde deseja renderizá-los, por exemplo, em colunas, mas não arrastar e soltar blocos em outros blocos. Por exemplo, você não pode arrastar um bloco de citação para ser renderizado sobre uma imagem. Em vez disso, ele será renderizado como um bloco separado na parte superior da imagem. Isso torna um pouco desafiador criar layouts complexos em seu site.
Preços
Como o Gutenberg está integrado ao próprio WordPress, é gratuito.
O Elementor, por outro lado, está disponível como plug-in gratuito e plug-in profissional. O plugin gratuito é um pouco limitante, especialmente em termos de widgets e modelos prontamente disponíveis. Para aproveitar o grande número de widgets e modelos, você será forçado a comprar o plug-in pro dos planos disponíveis.
Existem quatro planos diferentes disponíveis. Estes incluem: Essential, Expert, Studio e Agency. As variações de preços em cada um desses planos dependem muito do número de sites em que o plug-in pro será ativado.

Conclusão
Neste artigo, analisamos os recursos e as métricas de comparação do Elementor e do Gutenberg. A escolha de qual usar depende exclusivamente de você.
Se você deseja criar apenas um design de layout simples para o seu site, o Gutenberg seria a escolha apropriada. Você também pode estender os blocos padrão do Gutenberg usando vários complementos, como Spectra (anteriormente conhecido como Ultimate Addons for Gutenberg) e Stackable. Também se espera que o Gutenberg cresça com o tempo, portanto, você deve esperar ver mais alguns recursos interessantes no local.
Por outro lado, se você deseja criar um layout complexo com um construtor aparentemente fácil de usar, o Elementor seria uma ótima opção.
No entanto, se você tiver alguma dúvida em relação a qualquer um deles, sinta-se à vontade para entrar em contato na seção de comentários abaixo.