O que \u00e9 Gutenberg?<\/h2>\n
Gutenberg<\/a> \u00e9 o construtor de p\u00e1ginas padr\u00e3o do WordPress. Ele foi introduzido em 2018 e substituiu o que agora \u00e9 chamado de editor “Cl\u00e1ssico” do WordPress, que era o editor original de conte\u00fado rich text\/HTML sem nenhuma funcionalidade de drag and drop.<\/p>\n Na verdade, o Gutenberg foi uma resposta a uma onda de plugins de construtores de p\u00e1ginas de terceiros<\/a>, incluindo Elementor<\/a>, Divi<\/a> e Visual Composer, que foram lan\u00e7ados para substituir o Editor Cl\u00e1ssico.<\/p>\n Do ponto de vista dos recursos, o Gutenberg oferece uma biblioteca de “blocos” de f\u00e1cil acesso para voc\u00ea arrastar elementos de conte\u00fado para as p\u00e1ginas e artigos.<\/p>\n O Gutenberg vem com cerca de 100 blocos de conte\u00fado, alguns dos quais permitem integra\u00e7\u00f5es e incorpora\u00e7\u00f5es de servi\u00e7os de terceiros, como Twitter, Reddit e Amazon Kindle. Tamb\u00e9m \u00e9 poss\u00edvel criar blocos din\u00e2micos<\/a> para atualizar o conte\u00fado do bloco automaticamente. Alguns exemplos de blocos do Gutenberg incluem:<\/p>\n A maioria dos temas de WordPress funciona bem com o Gutenberg (eles s\u00e3o essencialmente necess\u00e1rios agora).<\/p>\n A interface do Gutenberg apresenta o conte\u00fado da p\u00e1gina ou do artigo no centro, com conte\u00fado renderizado (como a exibi\u00e7\u00e3o de formul\u00e1rios ou bot\u00f5es) quando poss\u00edvel. Essa \u00e9 uma atualiza\u00e7\u00e3o significativa do Editor Cl\u00e1ssico, pois o Gutenberg oferece suporte \u00e0 edi\u00e7\u00e3o r\u00e1pida de markdown juntamente com uma experi\u00eancia visual do usu\u00e1rio. E, se necess\u00e1rio, h\u00e1 acesso direto a se\u00e7\u00f5es de codifica\u00e7\u00e3o personalizadas para CSS<\/a> e HTML<\/a>.<\/p>\n Cada bloco fornece sua pr\u00f3pria longa lista de configura\u00e7\u00f5es, e o Gutenberg tem pain\u00e9is r\u00e1pidos para um controle poderoso sobre as configura\u00e7\u00f5es de documentos e blocos, como tags alt, cores de fundo e modera\u00e7\u00e3o de coment\u00e1rios.<\/p>\n Elementor \u00e9 um construtor de p\u00e1ginas, muito parecido com o Gutenberg. No entanto, o Elementor \u00e9 anterior ao Gutenberg como um dos aplicativos de construtor de p\u00e1ginas de terceiros que acabou levando \u00e0 cria\u00e7\u00e3o de um construtor de p\u00e1ginas padr\u00e3o de WordPress.<\/p>\n Introduzido em 2016, o Elementor tem sido um dos favoritos dos designers de WordPress<\/a>\u00a0devido \u00e0 sua interface de web design totalmente visual, templates iniciais elegantes<\/a> (prontos para importa\u00e7\u00e3o) e m\u00f3dulos de conte\u00fado de drag and drop.<\/p>\n Uma das diferen\u00e7as mais imediatamente percept\u00edveis entre o Elementor e o Gutenberg \u00e9 que o Elementor n\u00e3o est\u00e1 integrado ao WordPress. Ele \u00e9 feito por uma empresa diferente, portanto, voc\u00ea deve instalar seu plugin gratuito (vers\u00f5es premium tamb\u00e9m est\u00e3o dispon\u00edveis).<\/p>\n Voc\u00ea tamb\u00e9m notar\u00e1 que o Elementor tem nomes exclusivos para seus recursos. O que eles chamam de “blocos” no Gutenberg \u00e9 chamado de “widgets” no Elementor. Por falar nisso, o Elementor possui mais de 100 desses widgets de conte\u00fado.<\/p>\n Exemplos de widgets de conte\u00fado do Elementor:<\/p>\n Muitos dos widgets criam integra\u00e7\u00f5es entre um site WordPress e aplicativos de terceiros, como Stripe<\/a>, Facebook e Sound Cloud.<\/p>\n No geral, o Elementor \u00e9 um dos principais criadores de p\u00e1ginas de WordPress com uma comunidade vibrante de desenvolvedores e usu\u00e1rios. A interface visual de drag and drop \u00e9 dif\u00edcil de ser superada, voc\u00ea recebe centenas de templates de designers e toda a edi\u00e7\u00e3o \u00e9 feita em tempo real.<\/p>\n Juntamente com widgets especializados de WooCommerce<\/a>\u00a0e ferramentas de marketing para landing pages e formul\u00e1rios, o Elementor continua sendo um gigante no espa\u00e7o de constru\u00e7\u00e3o de sites, e isso \u00e9 percept\u00edvel quando voc\u00ea compara o Gutenberg com o Elementor.<\/p>\n Vamos comparar o Gutenberg com o Elementor em \u00e1reas como recursos, interface de usu\u00e1rio, pre\u00e7os e muito mais. Ap\u00f3s nossa an\u00e1lise, voc\u00ea ter\u00e1 uma compreens\u00e3o mais s\u00f3lida de qual construtor de p\u00e1ginas \u00e9 o mais adequado para suas necessidades.<\/p>\n Nesta se\u00e7\u00e3o, selecionamos o que consideramos ser os recursos “principais” de um construtor de p\u00e1ginas e, em seguida, comparamos o Gutenberg com o Elementor em cada categoria.<\/p>\n O problema com os construtores de p\u00e1ginas \u00e9 que eles geralmente preenchem a interface com ferramentas de cria\u00e7\u00e3o visual e deixam de lado a funcionalidade mais avan\u00e7ada, como a edi\u00e7\u00e3o de c\u00f3digo.<\/p>\n Preferimos ver uma mistura de ambos, em que os iniciantes t\u00eam uma interface elegante de drag and drop que \u00e9 facilmente acess\u00edvel, e os usu\u00e1rios avan\u00e7ados podem usar CSS sem ter que procurar o campo certo.<\/p>\n A funcionalidade de drag and drop do Gutenberg \u00e9 direta e sem atrasos. Voc\u00ea s\u00f3 precisa de um momento para procurar blocos de conte\u00fado e arrast\u00e1-los – ou clicar e inseri-los – no conte\u00fado. Em seguida, as configura\u00e7\u00f5es do bloco aparecem para voc\u00ea personalizar.<\/p>\n Uma desvantagem \u00e9 que, para arrastar os blocos colocados atualmente, voc\u00ea precisa primeiro selecionar um bloco e, em seguida, clicar e manter pressionado um pequeno \u00edcone Drag<\/strong>. Isso exige precis\u00e3o ao clicar, o que n\u00e3o \u00e9 necess\u00e1rio em outros construtores de p\u00e1ginas.<\/p>\n Quando se trata de codifica\u00e7\u00e3o, o Gutenberg torna seu Editor de C\u00f3digo<\/strong> f\u00e1cil de encontrar.<\/p>\n Os usu\u00e1rios encontraram problemas com blocos que bagun\u00e7am seu c\u00f3digo e dificuldades com os blocos pr\u00e9-fabricados, exigindo que os desenvolvedores produzam dezenas de blocos personalizados.<\/p>\n Apesar das reclama\u00e7\u00f5es, o construtor de p\u00e1ginas melhorou para os programadores, e as ferramentas est\u00e3o definitivamente dispon\u00edveis, mas talvez com uma curva de aprendizado mais acentuada do que a dispon\u00edvel no Editor cl\u00e1ssico.<\/p>\n Voc\u00ea pode at\u00e9 mesmo adicionar \u00e2ncoras HTML e classes CSS adicionais diretamente da aba Block <\/strong>no Gutenberg, o que antes exigia um tedioso trabalho na aba HTML<\/strong> do Editor Cl\u00e1ssico.<\/p>\n O Elementor tamb\u00e9m oferece a funcionalidade de drag and drop. Ele funciona com a maioria dos temas de WordPress<\/a>\u00a0e apresenta uma biblioteca de blocos para voc\u00ea inserir rapidamente em qualquer p\u00e1gina.<\/p>\n Como o Elementor usa um sistema de grade gerado de forma semiautom\u00e1tica, \u00e9 poss\u00edvel colocar widgets na maioria das \u00e1reas de uma p\u00e1gina.<\/p>\n Mover blocos de conte\u00fado previamente colocados \u00e9 mais f\u00e1cil com o Elementor do que no Gutenberg. Voc\u00ea simplesmente clica e segura em qualquer lugar do bloco para mov\u00ea-lo.<\/p>\n Ao inserir ou selecionar um widget de conte\u00fado, voc\u00ea ver\u00e1 o conte\u00fado, o estilo e as configura\u00e7\u00f5es avan\u00e7adas desse widget. Quanto \u00e0 codifica\u00e7\u00e3o, ela \u00e9 simplificada com muitas das configura\u00e7\u00f5es de bloco. Por exemplo, voc\u00ea pode adicionar \u00e2ncoras HTML, atributos e CSS personalizado diretamente nas configura\u00e7\u00f5es do widget ou da p\u00e1gina<\/a>.<\/p>\n O Elementor tamb\u00e9m oferece widgets de c\u00f3digo HTML<\/strong> para inserir qualquer c\u00f3digo personalizado que voc\u00ea queira em uma p\u00e1gina da web.<\/p>\n No geral, a funcionalidade de drag and drop do Elementor \u00e9 mais forte do que a do Gutenberg. No entanto, as op\u00e7\u00f5es de codifica\u00e7\u00e3o personalizada parecem igualmente acess\u00edveis em ambos os construtores de p\u00e1ginas.<\/p>\n Os templates do construtor de p\u00e1ginas permitem que os desenvolvedores criem sites com uma velocidade incr\u00edvel. Os templates permitem que voc\u00ea comece com sites profissionais ou designs de p\u00e1ginas em vez de construir do zero.<\/p>\n Muitos construtores de p\u00e1ginas oferecem templates pr\u00e9-fabricados para voc\u00ea:<\/p>\n O Gutenberg tem uma grave falta de templates pr\u00e9-fabricados. A aba Patterns<\/strong> fornece templates de se\u00e7\u00e3o \u00fateis, mas isso \u00e9 tudo.<\/p>\n No entanto, \u00e9 poss\u00edvel instalar plugins de terceiros com templates iniciais para p\u00e1ginas e sites completos. plugins como Gutentor<\/a>, Twentig<\/a> e Otter Blocks<\/a> s\u00e3o adequados para voc\u00ea.<\/p>\n O Elementor, por outro lado, \u00e9 alimentado por centenas de templates iniciais em seu Theme Builder<\/a>.<\/p>\n Os templates do Elementor incluem:<\/p>\n Quase todos os templates do Elementor exigem uma assinatura premium, mas ela \u00e9 acess\u00edvel e melhor do que a que voc\u00ea obt\u00e9m do Gutenberg.<\/p>\n Os recursos de estilo do Gutenberg permitem personaliza\u00e7\u00f5es r\u00e1pidas no painel de blocos<\/strong> do lado direito – depois de selecionar o bloco que voc\u00ea deseja editar.<\/p>\n As configura\u00e7\u00f5es de estilo s\u00e3o bastante b\u00e1sicas em compara\u00e7\u00e3o com o que h\u00e1 no Elementor, mas o essencial est\u00e1 quase sempre l\u00e1, como op\u00e7\u00f5es para alterar bordas e dimens\u00f5es de imagens ou configura\u00e7\u00f5es de cor, tipografia e margem para blocos de par\u00e1grafos.<\/p>\n Juntamente com o CSS personalizado para todos os blocos, voc\u00ea encontrar\u00e1 uma barra de ferramentas flutuante quando um bloco for clicado. Esta se\u00e7\u00e3o oferece o estilo do texto, a edi\u00e7\u00e3o com HTML, a c\u00f3pia desse estilo e a duplica\u00e7\u00e3o.<\/p>\n As configura\u00e7\u00f5es de estilo no Elementor est\u00e3o contidas em tr\u00eas guias quando um widget \u00e9 selecionado. Ajuste as configura\u00e7\u00f5es de conte\u00fado para dimensionamento de imagem e texto e, em seguida, v\u00e1 para as \u00e1reas avan\u00e7adas, com tudo, desde anima\u00e7\u00f5es de foco at\u00e9 filtros CSS e m\u00e1scaras para transformar efeitos.<\/p>\n N\u00e3o h\u00e1 d\u00favida de que o Elementor tem uma cole\u00e7\u00e3o mais forte de ferramentas de estilo do que o Gutenberg. No entanto, aqueles que desejam o m\u00e1ximo de simplicidade se sentir\u00e3o em casa com os recursos de estilo dispon\u00edveis no Gutenberg.<\/p>\n O Gutenberg vem com um pouco mais de 90 blocos de conte\u00fado. O Elementor fornece mais de 100.<\/p>\n Aqui est\u00e3o as categorias de blocos do Gutenberg:<\/p>\n Voc\u00ea obt\u00e9m todos os elementos essenciais (blocos de par\u00e1grafo, imagem e bot\u00e3o), al\u00e9m de elementos exclusivos para coisas como Speaker Deck, Kickstarter, Query Loops, Verse, Time To Read e muito mais.<\/p>\n O Elementor tamb\u00e9m categoriza seus widgets de conte\u00fado:<\/p>\n Essas n\u00e3o s\u00e3o as categorias mais \u00fateis, mas pelo menos elas est\u00e3o organizadas de alguma forma.<\/p>\n S\u00e3o fornecidos widgets de conte\u00fado padr\u00e3o, como divisores, se\u00e7\u00f5es e cabe\u00e7alhos. H\u00e1 tamb\u00e9m widgets exclusivos para o Google Maps<\/a>, Code Highlights, WooCommerce Product Data e muito mais.<\/p>\n Nossa conclus\u00e3o \u00e9 que o Gutenberg organiza e explica muito melhor seus blocos de conte\u00fado, mas o Elementor oferece uma quantidade maior de blocos (widgets) com configura\u00e7\u00f5es mais fortes.<\/p>\n O WooCommerce<\/a> \u00e9 um plugin de terceiros que transforma qualquer site WordPress em uma loja on-line. Quando combinado com um construtor de p\u00e1ginas, voc\u00ea geralmente recebe blocos do WooCommerce para maior personaliza\u00e7\u00e3o do carrinho de compras<\/a>, das p\u00e1ginas de produtos e muito mais.<\/p>\n O Gutenberg n\u00e3o \u00e9 exce\u00e7\u00e3o. Quando voc\u00ea instala o WooCommerce, uma infinidade de blocos do Gutenberg aparece para fortalecer o design da sua loja WooCommerce. H\u00e1 blocos de Pesquisa de Produtos, op\u00e7\u00f5es para mostrar Filtros Ativos e maneiras de exibir os Produtos Mais Vendidos. Contamos 26 blocos do Gutenberg\/WooCommerce e h\u00e1 v\u00e1rios plugins de terceiros para voc\u00ea expandir essa lista.<\/p>\n O Elementor tamb\u00e9m funciona bem com o WooCommerce, mas por um pre\u00e7o. Voc\u00ea deve ter uma assinatura do Elementor Pro para desbloquear qualquer um dos widgets de conte\u00fado ou templates de p\u00e1gina do WooCommerce. Dito isso, o Elementor Pro \u00e9 acess\u00edvel, e os blocos fornecem ferramentas de estilo mais poderosas do que qualquer coisa no Gutenberg.<\/p>\n No momento da publica\u00e7\u00e3o deste artigo, 20 blocos do WooCommerce estavam dispon\u00edveis no Elementor. A lista inclui imagens de produtos, bot\u00f5es Adicionar ao carrinho, classifica\u00e7\u00f5es de produtos e galerias de produtos.<\/p>\n H\u00e1 at\u00e9 mesmo widgets exclusivos, como Upsells e Product Meta Data.<\/p>\n \u00c9 importante que voc\u00ea n\u00e3o confunda integra\u00e7\u00f5es com compatibilidade. Abordaremos a compatibilidade de temas e plugins mais adiante neste artigo, mas as integra\u00e7\u00f5es s\u00e3o mais como links para outros aplicativos, plataformas e softwares, em que os dados s\u00e3o enviados para o construtor de p\u00e1ginas ou a partir dele.<\/p>\n Por exemplo, uma integra\u00e7\u00e3o com o Facebook pode mostrar um bot\u00e3o para que as pessoas sigam sua p\u00e1gina ou uma lista das suas publica\u00e7\u00f5es mais recentes no Facebook.<\/p>\n O Gutenberg tem uma pequena lista de integra\u00e7\u00f5es diretas, principalmente usando blocos para extrair conte\u00fado de fontes externas.<\/p>\n Aqui est\u00e1 uma amostra das 32 integra\u00e7\u00f5es atuais do Gutenberg:<\/p>\n O Elementor tem uma forte lista de integra\u00e7\u00f5es, de plataformas de m\u00eddia a sites sociais.<\/p>\n Aqui est\u00e3o algumas das mais de 40 integra\u00e7\u00f5es do Elementor:<\/p>\n Ambos t\u00eam integra\u00e7\u00f5es respeit\u00e1veis, mas as integra\u00e7\u00f5es do Elementor parecem mais fortes e mais abundantes. Voc\u00ea 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<\/a> no Elementor. Enquanto o Gutenberg se concentra mais na vincula\u00e7\u00e3o a bibliotecas de m\u00eddia e sites sociais.<\/p>\n Come\u00e7ar a usar o Gutenberg \u00e9 t\u00e3o intuitivo quanto o pr\u00f3prio WordPress. Isso porque o Gutenberg est\u00e1 integrado automaticamente ao painel do WordPress<\/a>. N\u00e3o h\u00e1 necessidade de instalar um plugin ou complemento. Basta voc\u00ea abrir um editor de p\u00e1gina ou artigo e o Gutenberg come\u00e7a a trabalhar.<\/p>\n Voc\u00ea pode pesquisar e inserir blocos clicando em um dos v\u00e1rios bot\u00f5es “+” (Adicionar bloco)<\/strong> espalhados pelo editor. Voc\u00ea encontrar\u00e1 uma barra de pesquisa, al\u00e9m de v\u00e1rias guias para Blocos<\/strong>, Padr\u00f5es<\/strong> e M\u00eddia<\/strong>. Voc\u00ea at\u00e9 perceber\u00e1 que o Gutenberg se integra aos populares provedores de imagens Creative Commons para encontrar gr\u00e1ficos adequados gratuitamente.<\/p>\n A rapidez na cria\u00e7\u00e3o de conte\u00fado faz do Gutenberg um dos melhores construtores de p\u00e1ginas<\/a> para blogueiros e qualquer pessoa que publique on-line. Voc\u00ea pode escrever diretamente no editor e utilizar a marca\u00e7\u00e3o e os atalhos de teclado para inserir rapidamente elementos como t\u00edtulos, links e imagens.<\/p>\n Sem mencionar que o Gutenberg se integra a uma ampla gama de outros editores de texto de terceiros, ou voc\u00ea pode copiar conte\u00fado de outros programas diretamente para o Gutenberg (sem precisar carregar imagens uma segunda vez ou ajustar a formata\u00e7\u00e3o).<\/p>\n A aba Page<\/strong> oferece configura\u00e7\u00f5es de publica\u00e7\u00e3o e focadas na p\u00e1gina, como ferramentas para imagens em destaque, trechos e coment\u00e1rios.<\/p>\n Tamb\u00e9m \u00e9 f\u00e1cil ajustar as configura\u00e7\u00f5es voltadas para blocos. Basta clicar na aba Block<\/strong>. Isso abrir\u00e1 os recursos de personaliza\u00e7\u00e3o exclusivos do bloco que voc\u00ea selecionou. Por exemplo, um bloco Image <\/strong>mostra tudo, desde os campos Alt Text <\/strong>at\u00e9 as configura\u00e7\u00f5es de Image Dimensions<\/strong>. \u00c9 aqui tamb\u00e9m que voc\u00ea adicionaria tags CSS<\/strong>, \u00e2ncoras HTML<\/strong> ou atributos de t\u00edtulo<\/strong>.<\/p>\n Quando se trata de facilidade de uso, o Elementor n\u00e3o \u00e9 novato em tornar as coisas intuitivas. No entanto, h\u00e1 uma curva de aprendizado, principalmente devido \u00e0 robusta cole\u00e7\u00e3o de recursos fornecidos.<\/p>\n No editor, voc\u00ea recebe uma r\u00e9plica exata da interface de uma p\u00e1gina como o editor. Todo widget de conte\u00fado do Elementor est\u00e1 dispon\u00edvel para arrastar ou editar a partir da biblioteca.<\/p>\n Embora as categorias n\u00e3o tenham nomes \u00fateis, voc\u00ea pode encontrar os widgets em Basic<\/strong>, Pro<\/strong>, General<\/strong>, Site<\/strong>, WooCommerce<\/strong> e WordPress<\/strong>. H\u00e1 tamb\u00e9m um painel Favoritos<\/strong> para voc\u00ea salvar widgets personalizados para uso posterior.<\/p>\n 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\u00e1gina. N\u00e3o s\u00f3 isso, mas voc\u00ea pode arrastar se\u00e7\u00f5es inteiras, deletar se\u00e7\u00f5es ou adicionar se\u00e7\u00f5es clicando dentro do editor.<\/p>\n Voc\u00ea tamb\u00e9m tem acesso r\u00e1pido \u00e0 biblioteca de blocos e templates. Voc\u00ea pode salvar templates personalizados<\/a> para uso posterior ou aproveitar os blocos e templates de p\u00e1gina criados por profissionais. Muitos deles s\u00e3o para situa\u00e7\u00f5es espec\u00edficas, como se voc\u00ea precisasse de uma p\u00e1gina 404<\/a> ou de um carrinho personalizado do WooCommerce.<\/p>\n A principal desvantagem da interface do Elementor \u00e9 sua natureza de terceiros. Voc\u00ea precisa instalar um plugin para torn\u00e1-lo ativo no WordPress. Mesmo assim, voc\u00ea sempre precisa clicar no bot\u00e3o “Editar com o Elementor”<\/strong>, pois o Gutenberg continua tecnicamente instalado em segundo plano.<\/p>\n No geral, a interface do Gutenberg \u00e9 mais f\u00e1cil de entender, mas n\u00e3o h\u00e1 nada como trabalhar com o Elementor. Ele \u00e9 suave, divertido de usar e capaz de muito mais do que o Gutenberg, assim que voc\u00ea pegar o jeito.<\/p>\n Os criadores de p\u00e1ginas oferecem muitos recursos. Isso pode levar a um conjunto volumoso de ferramentas que entra em conflito com plugins e temas e tamb\u00e9m inibe a velocidade da p\u00e1gina. Ao analisar as avalia\u00e7\u00f5es dos usu\u00e1rios, o Elementor e o Gutenberg parecem ter um bom desempenho quando voc\u00ea usa as ferramentas de otimiza\u00e7\u00e3o adequadas e um provedor de hospedagem de sites r\u00e1pido.<\/p>\n Em nosso teste, instalamos o Gutenberg e o Elementor em inst\u00e2ncias separadas do que sabemos ser um servidor de alto desempenho e com CDN (da Kinsta)<\/a>. Tamb\u00e9m usamos o mesmo tema com conte\u00fado de demonstra\u00e7\u00e3o para tornar o teste o mais igual poss\u00edvel. Mantivemos o mesmo local de servidor (Iowa) para ambos os testes e instalamos dois plugins comuns (WooCommerce e Yoast SEO<\/a>) para ver como os criadores de p\u00e1ginas responderam a um ambiente do mundo real.<\/p>\n Aqui est\u00e3o os resultados usando o Pingdom<\/a> e o Google PageSpeed Insights<\/a>:<\/p>\n Executamos o mesmo teste com um servidor de teste em Londres:<\/p>\n E aqui est\u00e3o os resultados do Google PageSpeed Insights:<\/p>\n E os resultados do servidor de teste de Londres:<\/p>\n Resultados do Google PageSpeed Insights:<\/p>\n O Gutenberg quase sempre apresentou uma pontua\u00e7\u00e3o de desempenho mais alta, menor tamanho de p\u00e1gina e tempo de carregamento mais r\u00e1pido, al\u00e9m de menos solicita\u00e7\u00f5es. No entanto, isso pode ocorrer porque o Elementor tem designs de blocos mais avan\u00e7ados e o Gutenberg \u00e9 tecnicamente sempre instalado junto com o Elementor, de modo que voc\u00ea fica preso a dois construtores de p\u00e1ginas em execu\u00e7\u00e3o ao mesmo tempo, o que pode deixar o site mais lento.<\/p>\n Independentemente disso, ambos oferecem altas velocidades. A parte mais importante para manter velocidades de p\u00e1gina aceit\u00e1veis \u00e9 que voc\u00ea opte por um provedor de hospedagem de sites gerenciado e alimentado por CDN, como a Kinsta.<\/p>\n Voc\u00ea pode obter tanto o Gutenberg quanto o Elementor gratuitamente. A principal diferen\u00e7a \u00e9 que o Gutenberg \u00e9 totalmente gratuito, para sempre. O Elementor oferece uma vers\u00e3o gratuita robusta de seu construtor de p\u00e1ginas e v\u00e1rias atualiza\u00e7\u00f5es e complementos para aqueles interessados em recursos mais avan\u00e7ados.<\/p>\n Gratuito, pois \u00e9 o editor do WordPress e est\u00e1 integrado ao WordPress por padr\u00e3o.<\/p>\n A marca Elementor oferece produtos e servi\u00e7os adicionais, mas, para fins de compara\u00e7\u00e3o, limitamos os pre\u00e7os ao plugin do construtor de p\u00e1ginas.<\/p>\n A princ\u00edpio, pode parecer que um plugin “gratuito para sempre” (como o Gutenberg) \u00e9 o melhor neg\u00f3cio. Mas a vers\u00e3o gratuita do Elementor est\u00e1 repleta de ferramentas suficientes para muitos tipos de projetos, e eles mant\u00eam os planos premium com pre\u00e7os razo\u00e1veis.<\/p>\n N\u00f3s argumentar\u00edamos que o Elementor tem um valor melhor do que o Gutenberg simplesmente porque \u00e9 um construtor de p\u00e1ginas mais simplificado e poderoso do que o Gutenberg, e voc\u00ea ainda pode obter muitos dos recursos gratuitamente. Mas se voc\u00ea precisa manter o or\u00e7amento em $0 para sempre, o Gutenberg \u00e9 o ideal.<\/p>\n \u00c9 dif\u00edcil identificar a compatibilidade (ou a falta dela) dos criadores de p\u00e1ginas com os milhares de temas e plugins do WordPress no mercado. No entanto, podemos examinar as avalia\u00e7\u00f5es dos usu\u00e1rios para descobrir se existem alguns problemas de compatibilidade evidentes com temas ou plugins populares.<\/p>\n O Gutenberg parece funcionar com a maioria dos temas e plugins. Afinal de contas, os desenvolvedores de terceiros devem atender ao construtor de p\u00e1ginas, j\u00e1 que o Gutenberg est\u00e1 integrado ao WordPress por padr\u00e3o.<\/p>\n De acordo com nossa pesquisa, os problemas de compatibilidade mais comuns com o Gutenberg surgem quando ele \u00e9 combinado com outros construtores de p\u00e1ginas no mesmo site. Tamb\u00e9m descobrimos que os desenvolvedores de plugins est\u00e3o tentando recuperar o atraso para produzir blocos do Gutenberg relacionados aos seus plugins. Portanto, voc\u00ea pode descobrir que alguns plugins mais antigos e atualizados com menos frequ\u00eancia n\u00e3o possuem blocos do Gutenberg.<\/p>\n At\u00e9 a data deste artigo, existem cerca de 12 quest\u00f5es de compatibilidade abertas nos f\u00f3runs do WordPress.org, algumas das quais parecem ser erros do usu\u00e1rio. Mas n\u00e3o \u00e9 inimagin\u00e1vel supor que voc\u00ea possa encontrar alguns problemas.<\/p>\n O Elementor \u00e9 conhecido por ter s\u00f3lida compatibilidade em toda a comunidade WordPress<\/a>. No entanto, \u00e9 um construtor de p\u00e1ginas de terceiros, por isso \u00e9 sensato ficar atento \u00e0s tags de compatibilidade<\/a> (notas que explicam quando um plugin n\u00e3o \u00e9 compat\u00edvel). E ao procurar por um tema, sempre verifique se ele \u00e9 compat\u00edvel com o Elementor (se \u00e9 isso que voc\u00ea est\u00e1 usando como construtor de p\u00e1ginas).<\/p>\n Tanto para o Gutenberg quanto para o Elementor, voc\u00ea deve ficar atento aos temas WordPress “multiprop\u00f3sito” com templates iniciais. Esses templates iniciais s\u00e3o projetados para construtores de p\u00e1ginas espec\u00edficos, ent\u00e3o um para Gutenberg n\u00e3o funcionar\u00e1 com o Elementor e vice-versa. E alguns temas n\u00e3o t\u00eam templates iniciais para esses construtores de p\u00e1ginas.<\/p>\n N\u00e3o h\u00e1 como voc\u00ea editar o conte\u00fado no frontend de um site com o Gutenberg. Mas esse \u00e9 o objetivo. O Gutenberg se esfor\u00e7a para combinar aspectos da edi\u00e7\u00e3o do frontend com a experi\u00eancia do backend, permitindo que voc\u00ea se atenha a uma \u00fanica interface.<\/p>\n Ent\u00e3o, por exemplo, toda a edi\u00e7\u00e3o ocorre no backend do WordPress, mas muitos dos blocos s\u00e3o exibidos em tela cheia para a visualiza\u00e7\u00e3o mais realista do que esperar quando publicado.<\/p>\n O Elementor n\u00e3o \u00e9 muito diferente. Ele costumava oferecer edi\u00e7\u00e3o de backend e frontend, mas acabou combinando a experi\u00eancia de edi\u00e7\u00e3o em um \u00fanico m\u00f3dulo. Portanto, n\u00e3o \u00e9 poss\u00edvel acessar o frontend de seu site e arrastar elementos.<\/p>\n Entretanto, o Elementor traz suas p\u00e1ginas e artigos para o seu pr\u00f3prio editor de backend, que apresenta uma bela visualiza\u00e7\u00e3o da p\u00e1gina de frontend. Dessa forma, voc\u00ea v\u00ea exatamente o que acontece quando uma altera\u00e7\u00e3o \u00e9 feita.<\/p>\n Por fim, esses dois criadores de p\u00e1ginas t\u00eam salvamento autom\u00e1tico, al\u00e9m de bot\u00f5es de salvamento manual.<\/p>\n Geralmente, voc\u00ea s\u00f3 obt\u00e9m suporte ao cliente quando paga<\/em> por um construtor de p\u00e1ginas. Durante nossa pesquisa, essa suposi\u00e7\u00e3o se aplicou tanto ao Gutenberg quanto ao Elementor.<\/p>\n O construtor de p\u00e1ginas aut\u00f4nomo Gutenberg n\u00e3o tem uma linha direta de suporte ao cliente para contato. Voc\u00ea pode, no entanto, discutir problemas no f\u00f3rum de usu\u00e1rios do Gutenberg<\/a>. Os membros do WordPress.com recebem suporte dedicado ao cliente, portanto voc\u00ea pode pedir a eles que ajudem com as perguntas sobre o Gutenberg. Os usu\u00e1rios do WordPress.org, infelizmente, s\u00e3o deixados para f\u00f3runs e artigos de blog para completar suas pr\u00f3prias pesquisas.<\/p>\n O plugin gratuito Elementor tem uma base de conhecimento<\/a> e um f\u00f3rum de usu\u00e1rios<\/a>.<\/p>\n Para receber suporte por e-mail de uma pessoa real, voc\u00ea deve pagar pelo Elementor Pro. Dito isso, h\u00e1 um m\u00f3dulo de chat em tempo real para perguntas sobre vendas.<\/p>\n Ap\u00f3s anos de experi\u00eancia trabalhando com usu\u00e1rios de WordPress e uma compara\u00e7\u00e3o detalhada entre o Gutenberg e o Elementor, chegamos a algumas conclus\u00f5es finais.<\/p>\n Aqui est\u00e3o as conclus\u00f5es:<\/p>\n Cada construtor de p\u00e1ginas tem seu espa\u00e7o. O Elementor \u00e9 para usu\u00e1rios mais experientes ou aqueles que precisam de uma biblioteca de templates de p\u00e1ginas. O Gutenberg atua como o construtor de p\u00e1ginas pronto para uso no WordPress, com ferramentas e configura\u00e7\u00f5es de estiliza\u00e7\u00e3o simplificadas e f\u00e1ceis de usar, tornando-o perfeito para a cria\u00e7\u00e3o r\u00e1pida de conte\u00fado.<\/p>\n![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg.jpg\")
\n
O que \u00e9 Elementor?<\/h2>\n
![\"Elementor\"](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor.png\")
\n
Compara\u00e7\u00e3o entre o Gutenberg e o Elementor<\/h2>\n
Principais recursos<\/h3>\n
Gutenberg vs Elementor: Funcionalidade de drag and drop e codifica\u00e7\u00e3o<\/h4>\n
![\"H\u00e1](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-blocks.jpg\")
![\"Use](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-icon.jpg\"){kind=icon}
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/code-editor.jpg\")
![\"Ajuste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/anchors-and-css.jpg\")
![\"Uma](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/basic-blocks.jpg\")
![\"Arrastando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/drag-block.jpg\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/Elementor-movement.gif\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/advanced.jpg\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/html-code.jpg\")
Gutenberg vs Elementor: Templates (para sites, blocos, p\u00e1ginas, pop-ups e muito mais)<\/h4>\n
\n
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/patterns.jpg\")
\n
![\"Os](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-theme-builder.jpg\")
Gutenberg vs Elementor: Estilo<\/h4>\n
![\"Estilizando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/styling.jpg\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/toolbar.jpg\")
![\"Ajuste](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/style-and-more.jpg\")
Gutenberg vs Elementor: Blocos de conte\u00fado\/widgets:<\/h4>\n
\n
\n
![\"Os](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/product-images.jpg\")
Gutenberg vs Elementor: Suporte ao WooCommerce<\/h4>\n
![\"Os](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/blocks-wocommerce.jpg\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/additional-blocks.jpg\")
Gutenberg vs Elementor: Integra\u00e7\u00f5es<\/h4>\n
\n
\n
Interface do usu\u00e1rio: Gutenberg vs Elementor<\/h3>\n
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/add-blocks.jpg\")
![\"A](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/featured-image.jpg\")
![\"Use](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/block-tab.jpg\")
![\"Elementos](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-elements.jpg\")
![\"Arrastando](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/move-block.jpg\")
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-blocks.jpg\")
Gutenberg vs Elementor: Desempenho e impacto na velocidade da p\u00e1gina<\/h3>\n
Testes de velocidade de p\u00e1gina do Gutenberg<\/h4>\n
\n
\n
\n
Testes de velocidade de p\u00e1gina do Elementor<\/h4>\n
\n
\n
\n
Gutenberg vs Elementor: Pre\u00e7os<\/h3>\n
Pre\u00e7os do Gutenberg<\/h4>\n
Pre\u00e7os do Elementor<\/h4>\n
\n
Gutenberg vs Elementor: Compatibilidade com temas e plugins:<\/h3>\n
Edi\u00e7\u00e3o Backend vs Frontend no Gutenberg e Elementor<\/h3>\n
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/gutenberg-backend.jpg\")
![\"O](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/elementor-edit.jpg\")
Suporte ao cliente: Gutenberg vs Elementor<\/h3>\n
![\"Voc\u00ea](\"https:\/\/kinsta.com\/wp-content\/uploads\/2023\/07\/search-for-help.jpg\")
Gutenberg vs Elementor: Qual deles voc\u00ea deve escolher?<\/h2>\n
\n
Resumo<\/h2>\n