{"id":16720,"date":"2019-07-23T14:10:51","date_gmt":"2019-07-23T17:10:51","guid":{"rendered":"https:\/\/blog.hostinger.io\/br-tutoriais\/?p=16720"},"modified":"2024-09-26T15:36:13","modified_gmt":"2024-09-26T18:36:13","slug":"elementor-ou-beaver-builder","status":"publish","type":"post","link":"\/br\/tutoriais\/elementor-ou-beaver-builder","title":{"rendered":"Elementor ou Beaver Builder &#8211; Qual construtor de sites usar no WordPress?"},"content":{"rendered":"<p>Voc&ecirc; procura por uma maneira mais f&aacute;cil de criar um <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/wordpress\/\">site WordPress<\/a>? Por que n&atilde;o considerar usar um <em>plugin<\/em> de cria&ccedil;&atilde;o de p&aacute;gina? Eles s&atilde;o repletos de recursos para criar um belo website sem inc&ocirc;modos! Existem v&aacute;rios <em>plugins<\/em> de constru&ccedil;&atilde;o de p&aacute;ginas por a&iacute;, mas o Elementor e o Beaver Builder s&atilde;o aqueles que mais se destacam. Neste artigo, artigo vamos explorar a fundo os detalhes e recursos de cada, para ajud&aacute;-lo a descobrir se voc&ecirc; deve escolher Beaver Builder ou Elementor para criar seu site WordPress.<\/p><h2 class=\"wp-block-heading\" id=\"h-o-que-e-um-page-builder-do-wordpress\"><strong>O Que &Eacute; Um Page Builder do WordPress?<\/strong><\/h2><p>Se voc&ecirc; est&aacute; criando um website para um cliente ou para si pr&oacute;prio, provavelmente n&atilde;o ir&aacute; querer perder as muitas vantagens de usar um <em>page builder <\/em>para o WordPress.<\/p><p>Mas como exatamente isso pode benefici&aacute;-lo? Continue lendo para descobrir:<\/p><h3 class=\"wp-block-heading\" id=\"h-para-que-servem-os-construtores-de-pagina\"><strong>Para Que Servem os Construtores de P&aacute;gina?<\/strong><\/h3><p>Quando voc&ecirc; for customizar um tema do WordPress, existem muitas coisas que podem dar errado &mdash; um layout desorganizado, erros, ou simplesmente ele n&atilde;o ter o visual que voc&ecirc; deseja.<\/p><p>Felizmente, esses problemas se tornaram coisas do passado gra&ccedil;as aos <em>plugins <\/em>&nbsp;de constru&ccedil;&atilde;o de p&aacute;gina, que voc&ecirc; pode instalar no WordPress.<\/p><p>Ent&atilde;o, o que voc&ecirc; pode fazer com um <em>page builder<\/em>? D&ecirc; uma olhada na lista abaixo:<\/p><ul class=\"wp-block-list\">\n<li><strong>Criar p&aacute;gina e postagens<\/strong>. Fora o editor cl&aacute;ssico ou o <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/gutenberg-pros-e-contras\/\">Gutenberg<\/a>, voc&ecirc; pode criar uma p&aacute;gina e uma postagem usando o construtor de p&aacute;ginas. A diferen&ccedil;a &eacute; que pode experimentar loucamente com a customiza&ccedil;&atilde;o visual &mdash; estruturar um <em>layout<\/em>, adicionar elementos e estilos de forma&ccedil;&atilde;o com facilidade.<\/li>\n\n\n\n<li><strong>Customiza&ccedil;&atilde;o sempre facilitada<\/strong>. Voc&ecirc; pode substituir a antiga p&aacute;gina de customiza&ccedil;&atilde;o do WordPress com uma interface WYSIWYG (O que se v&ecirc; &eacute; o que se obt&eacute;m) &mdash; tornando poss&iacute;vel ver instantaneamente o resultado das mudan&ccedil;as que voc&ecirc; promove.<\/li>\n\n\n\n<li><strong>Utilizar interface arrastar-e-soltar<\/strong>. Ao inv&eacute;s de modificar o c&oacute;digo para mover determinado elemento, voc&ecirc; pode s&oacute; arrast&aacute;-lo e solt&aacute;-lo para uma determinada se&ccedil;&atilde;o com precis&atilde;o.<\/li>\n\n\n\n<li><strong>N&atilde;o exige habilidades t&eacute;cnicas<\/strong>. Como dissemos antes, um <em>page builder<\/em> elimina quase que totalmente a necessidade de programar &mdash; o que significa que qualquer pessoa n&atilde;o muito ligada em tecnologia possa criar um belo site. Claro, voc&ecirc; ainda pode adicionar <a href=\"https:\/\/www.hostinger.com\/br\/tutoriais\/o-que-e-css-guia-basico-de-css\/\">CSS<\/a> customizado se desejar, mas &eacute; completamente opcional.<\/li>\n\n\n\n<li><strong>Usa <em>templates<\/em> para criar belas p&aacute;ginas<\/strong>. Uma coisa da qual construtores de p&aacute;ginas se orgulham &eacute; a sua facilidade de uso. Mesmo com pouca habilidade de <em>design<\/em>, voc&ecirc; ainda pode fazer um site que tenha um visual fant&aacute;stico, gra&ccedil;as aos v&aacute;rios <em>templates <\/em>pr&eacute;-produzidos dispon&iacute;veis que esses <em>plugins<\/em> trazem.<\/li>\n\n\n\n<li><strong>&Oacute;tima funcionalidade nas pontas de seus dedos<\/strong>. &Agrave;s vezes, voc&ecirc; precisa de outro <em>plugin<\/em> para adicionar um <em>widget<\/em> simples &mdash; como bot&otilde;es de redes sociais, por exemplo. Um <em>page builder<\/em> tem uma biblioteca de <em>widgets<\/em> incorporados que voc&ecirc; pode adicionar diretamente ao seu site, incluindo galeria, se&ccedil;&atilde;o de depoimentos, <em>sliders<\/em> de conte&uacute;do e mais.<\/li>\n<\/ul><p>Est&aacute; claro que um construtor de p&aacute;ginas oferece muito mais do que a maneira antiga de customizar um site, especialmente para novatos. Al&eacute;m disso, os <em>builders <\/em>s&atilde;o mais f&aacute;ceis de se configurar e de se familiarizar.<\/p><h3 class=\"wp-block-heading\" id=\"h-por-que-usar-um-page-builder\"><strong>Por Que Usar um Page Builder?<\/strong><\/h3><p>Falamos sobre que recursos um <em>page builder<\/em> tem guardado para voc&ecirc;. Agora, vamos falar sobre como esses recursos podem ajud&aacute;-lo a criar um site do WordPress sem <em>stress<\/em>.<\/p><ul class=\"wp-block-list\">\n<li><strong>Economiza tempo<\/strong>. Com customiza&ccedil;&atilde;o facilitada, voc&ecirc; tem menos chances de enfrentar problemas. Quanto menos problemas voc&ecirc; tem, mais r&aacute;pido &eacute; para estabelecer sua presen&ccedil;a online. Por que levar uma semana quando voc&ecirc; pode fazer algo em minutos?<\/li>\n\n\n\n<li><strong>N&atilde;o requer habilidades t&eacute;cnicas<\/strong>. Do momento que voc&ecirc; instala o <em>plugin<\/em> at&eacute; quando voc&ecirc; publica seu site, tudo &eacute; t&atilde;o f&aacute;cil quanto poderia ser. Tudo o que voc&ecirc; precisa fazer &eacute; trocar as imagens e copi&aacute;-las de seus pr&oacute;prios <em>templates<\/em>, ajustando a localiza&ccedil;&atilde;o ao seu gosto.<\/li>\n\n\n\n<li><strong>Permite que o usu&aacute;rio tenha uma atitude pr&aacute;tica para design e recursos<\/strong>. A interface de customiza&ccedil;&atilde;o de um <em>page builder<\/em> &eacute; simples e direta. Voc&ecirc; n&atilde;o precisa procurar fundo para encontrar recursos e o <em>design<\/em> de <em>template<\/em> que voc&ecirc; est&aacute; procurando &mdash; tudo pode ser acessado a partir de uma p&aacute;gina.<\/li>\n<\/ul><h2 class=\"wp-block-heading\" id=\"h-elementor-ou-beaver-builder\"><strong>Elementor ou Beaver Builder<\/strong><\/h2><p>Os <em>page builders<\/em> do WordPress est&atilde;o no mercado h&aacute; um longo tempo e existem muitos que voc&ecirc; pode levar em considera&ccedil;&atilde;o. Contudo, decidimos escolher por esses dois construtores de p&aacute;gina porque eles s&atilde;o os mais cheios de recursos &mdash; ao menos sem precisar desembolsar uma boa quantidade de dinheiro.<\/p><p>Seu pre&ccedil;o competitivo faz com que ambos sejam maneiras ideias e eficientes de construir um site. Adicionalmente, sua popularidade permitiu que usu&aacute;rios ao redor do mundo criassem grandes comunidades para ajudar outros criadores de p&aacute;ginas a lidar com seus problemas.<\/p><h3 class=\"wp-block-heading\" id=\"h-o-basico-sobre-o-elementor\"><strong>O B&aacute;sico Sobre o Elementor<\/strong><\/h3><p>Desde sua funda&ccedil;&atilde;o em 2016, o <a href=\"https:\/\/elementor.com\/features\/\" target=\"_blank\" rel=\"noopener\">Elementor<\/a> tem sido recebido de maneira positiva por sua habilidade de dar controle total para as pessoas sobre seus sites.<\/p><p>Agora, o Elementor j&aacute; acumula mais de dois milh&otilde;es de instala&ccedil;&otilde;es ativas. E como poderia ser diferente? &Eacute; um <em>plugin<\/em> que tem amig&aacute;vel para novatos escrito em todos os lugares. Seja voc&ecirc; um dono de neg&oacute;cio procurando entrar no mundo digital, um desenvolvedor web <em>freelancer<\/em> ou simplesmente algu&eacute;m que procura uma maneira de canalizar seus pensamentos em posts de blog, qualquer um pode criar um belo site com o Elementor.<\/p><h3 class=\"wp-block-heading\" id=\"h-o-basico-sobre-o-beaver-builder\"><strong>O B&aacute;sico Sobre o Beaver Builder<\/strong><\/h3><p>O Beaver Builder foi lan&ccedil;ado no mercado em 2014, dois anos antes do Elementor. Ele foi criado a partir de uma ideia de Robby McCoullogh, o co-fundador do Beaver Builder, que precisava de um &uacute;nico <em>framework<\/em> que sua companhia pudesse usar para satisfazer as necessidades de <em>design <\/em>de seus clientes.<\/p><p>Anteriormente conhecido como FastLinePage Builder, o Beaver Builder tem sido um dos <em>plugins<\/em> de constru&ccedil;&atilde;o de p&aacute;gina l&iacute;deres do mercado &mdash; especialmente depois que eles decidiram adora uma GPL (Licen&ccedil;a P&uacute;blica Geral). Isso permite que seu produto seja modificado, possibilitando que uma grande quantidade de desenvolvedores crie <em>add-ons third-party<\/em> para expandir ainda mais a funcionalidade do <em>plugin<\/em>.<\/p><p>Com mais de 100.000 sites criadores no Beaver Builder no ar hoje, esse &eacute; um <em>page builder<\/em> que mais do que merece a sua considera&ccedil;&atilde;o.<\/p><h3 class=\"wp-block-heading\" id=\"h-elementor-vs-beaver-builder-recursos\"><strong>Elementor vs. Beaver Builder &ndash; Recursos<\/strong><\/h3><p>Agora que cobrimos a parte introdut&oacute;ria, vamos mergulhar mais fundo nos muitos recursos que ambos os <em>plugins<\/em> t&ecirc;m a oferecer.<\/p><h4 class=\"wp-block-heading\" id=\"h-disponibilidade-de-temas-e-widgets\"><strong>Disponibilidade de Temas e Widgets<\/strong><\/h4><p>Quando se trata de cole&ccedil;&otilde;es de temas, o Elementor facilmente ganha esse <em>round<\/em>. Ele tem mais de 300 lindos <em>templates <\/em>pr&eacute;-criados, enquanto o Beaver Builder possui apenas cerca de 30. Os temas que ambos possuem s&atilde;o adequados para categorias de diversos nichos.<\/p><p>Adicionalmente, cada <em>widget<\/em> em ambos os <em>builders<\/em> tem um papel em melhorar a funcionalidade do seu site. Existem mais de 30 p&aacute;ginas de <em>widgets<\/em> na vers&atilde;o gratuita do Elementor e outros 50 <em>widgets<\/em> profissionais que voc&ecirc; tem acesso com a vers&atilde;o paga.<\/p><p>Enquanto isso, o Beaver Builder Lite (a vers&atilde;o gr&aacute;tis) traz apenas m&oacute;dulos b&aacute;sicos como imagem, v&iacute;deo, HTML, &aacute;udio e texto. Para m&oacute;dulos avan&ccedil;ados, voc&ecirc; precisa comprar a vers&atilde;o <em>premium<\/em>.<\/p><h4 class=\"wp-block-heading\" id=\"h-interface\"><strong>Interface<\/strong><\/h4><p>Nesta &aacute;rea, voc&ecirc; ter&aacute; um sentimento muito similar quando voc&ecirc; promove altera&ccedil;&otilde;es em seu site com qualquer um dos <em>plugins<\/em>. Apesar disso, h&aacute; diferen&ccedil;as que voc&ecirc; precisa observar.<\/p><p>Por exemplo, o Elementor usa um painel de controle posicionado no lado esquerdo de sua tela &mdash; &eacute; ali que voc&ecirc; poder&aacute; adicionar <em>widgets <\/em>simplesmente arrastando-os para o seu site. Voc&ecirc; tamb&eacute;m pode encontrar op&ccedil;&otilde;es para cada elemento ali (customizar as margens, tamanho tipografia, etc.).<\/p><p>Para al&eacute;m disso, o Elementor providencia um editor de textos que permite que voc&ecirc; promova altera&ccedil;&otilde;es em seus textos diretamente na p&aacute;gina &mdash; funcionalidade que n&atilde;o &eacute; encontrada no Beaver Builder.<\/p><p>Ao mesmo tempo, no Beaver Builder, voc&ecirc; pode adicionar m&oacute;dulos ao clicar no <strong>s&iacute;mbolo de adi&ccedil;&atilde;o<\/strong> no canto superior direito. Uma janela ir&aacute; aparecer mostrando algumas abas para m&oacute;dulos, fileiras, <em>templates<\/em> e itens salvos (voc&ecirc; pode ver uma lista de fileiras e <em>templates<\/em> que voc&ecirc; salvou anteriormente).<\/p><p>O que &eacute; mais interessante &eacute; que poder&aacute; adicionar fileiras pr&eacute;-criadas facilmente a partir da janela. Apenas navegue para Rows (Fileiras) e escolha um dos menus suspensos em <strong>Premade Rows <\/strong>(Fileiras Pr&eacute;-Criadas), como <em>call-to-actions<\/em>, conte&uacute;do, FAQ e mais.<\/p><h4 class=\"wp-block-heading\" id=\"h-seguranca\"><strong>Seguran&ccedil;a<\/strong><\/h4><p>Como ningu&eacute;m quer um <em>plugin<\/em> que possa comprometer o seu website, seguran&ccedil;a &eacute; um dos aspectos mais importantes para se ficar de olho.<\/p><p>Bom, houve um <a href=\"https:\/\/www.acunetix.com\/vulnerabilities\/web\/wordpress-plugin-elementor-page-builder-security-bypass-1-7-12\/\" target=\"_blank\" rel=\"noopener\">not&aacute;vel incidente<\/a> onde o Elementor permitiu que usu&aacute;rios logados que n&atilde;o s&atilde;o <em>admins<\/em> pudessem acessar e editar o conte&uacute;do do site.<\/p><p>Contudo, nenhum acidente da mesma magnitude aconteceu no Beaver Builder &mdash; tornando-o um melhor competidor quando se trata de seguran&ccedil;a.<\/p><p>Mas isso n&atilde;o significa que o Elementor n&atilde;o possui medidas de seguran&ccedil;a. Em sua vers&atilde;o pro, voc&ecirc; pode usar um <em>widget<\/em> chamado Honeypot para garantir que n&atilde;o existem <em>bots<\/em> de <em>spam<\/em> nos formul&aacute;rios que voc&ecirc; colocar em seu site.<\/p><h4 class=\"wp-block-heading\" id=\"h-funcionalidades-unicas\"><strong>Funcionalidades &Uacute;nicas<\/strong><\/h4><p>Tanto o Elementor quanto o Beaver Builder possuem seus pr&oacute;prios recursos que n&atilde;o est&atilde;o presentes no concorrente. Dependendo de suas necessidades, isso pode ser usado como fator de desempate. Veja por conta pr&oacute;pria qual recurso pode benefici&aacute;-lo mais.<\/p><p>O Elementor oferece <strong><em>widgets <\/em><\/strong><strong>globais <\/strong>e a habilidade de <strong>incorporar <\/strong><strong><em>templates<\/em><\/strong><strong> em qualquer lugar<\/strong>.<\/p><p>Os <em>widgets<\/em> globais permitem que voc&ecirc; use um <em>widget<\/em> atrav&eacute;s de m&uacute;ltiplas &aacute;reas atrav&eacute;s de diferentes p&aacute;ginas ou websites. Cada mudan&ccedil;a que voc&ecirc; promove num <em>widget<\/em> tamb&eacute;m ser&aacute; aplicada para o mesmo <em>widget<\/em> em todas as p&aacute;ginas.<\/p><p><em>Templates<\/em> incorporados tamb&eacute;m significam que uma vez que voc&ecirc; criou um <em>template<\/em> (digamos uma caixa de <em>newsletter<\/em>), n&atilde;o h&aacute; limites para onde voc&ecirc; pode exibi-lo &mdash; barra lateral, rodap&eacute; ou at&eacute; posts de blogs.<\/p><p>Do lado do Beaver Builder, voc&ecirc; ter&aacute; acesso a um recurso de <strong>white label<\/strong>. Ele permite que voc&ecirc; oferece o servi&ccedil;o de cria&ccedil;&atilde;o de p&aacute;ginas do Beaver Builder para o seu cliente &mdash; com sua pr&oacute;pria marca&rdquo; Adicionalmente, uma licen&ccedil;a do tipo Agency &eacute; o suficiente para que o Beaver Builder seja usado em m&uacute;ltiplos sites.<\/p><h3 class=\"wp-block-heading\" id=\"h-elementor-vs-beaver-builder-facilidade-de-uso\"><strong>Elementor vs. Beaver Builder &ndash; Facilidade de Uso<\/strong><\/h3><p>Ser amig&aacute;vel para os novatos &eacute; um dos pontos de venda dos construtores de p&aacute;ginas. A ideia de criar uma p&aacute;gina na internet sem ter habilidades de programa&ccedil;&atilde;o significa que qualquer um deve poder fazer isso sem ficar confuso co&ccedil;ando sua cabe&ccedil;a.<\/p><p>&Eacute; por isso que iremos comparar o qu&atilde;o f&aacute;cil &eacute; para os usu&aacute;rios come&ccedil;arem e criarem uma bel&iacute;ssima p&aacute;gina na web com ambos os <em>plugins<\/em> de <em>page building<\/em>.<\/p><h4 class=\"wp-block-heading\" id=\"h-facilidade-de-comecar\"><strong>Facilidade de Come&ccedil;ar<\/strong><\/h4><p>Primeiramente, ambos possuem vers&otilde;es gratuitas que voc&ecirc; pode facilmente instalar a partir do painel do WordPress. Apenas v&aacute; para <strong>Plugins <\/strong>e digite o nome do plugin, clique em <strong>Install <\/strong>(Instalar) e ent&atilde;o <strong>Activate<\/strong> (Ativar).<\/p><p>Vamos dizer que voc&ecirc; acabou de ativar o Elementor. O pr&oacute;ximo passo ent&atilde;o &eacute; customizar seu site. Isso pode ser feito indo para <strong>Pages &rarr; Add New <\/strong>(P&aacute;ginas &rarr; Adicionar Nova).<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"303\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/public\" alt=\"op&ccedil;&atilde;o de adicionar nova p&aacute;gina para o elementor no wordpress\" class=\"wp-image-17022\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/adicionar-nova-pagina-elementor.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Voc&ecirc; percebe o bot&atilde;o azul no topo que diz &ldquo;Edit with Elementor&rdquo; (&ldquo;Editar com Elementor&rdquo;)? Clique nele e voc&ecirc; ser&aacute; direcionado para a interface de customiza&ccedil;&atilde;o. Note que voc&ecirc; pode querer inserir o t&iacute;tulo primeiro, pois do contr&aacute;rio o nome da p&aacute;gina pode ser randomizado.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"653\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/public\" alt=\"tela de edi&ccedil;&atilde;o de configura&ccedil;&otilde;es de p&aacute;gina no elementor\" class=\"wp-image-17024\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/configuracoes-pagina-elementor-1.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>Depois disso, voc&ecirc; pode definir o <em>layout<\/em> da p&aacute;gina ao navegar para o &iacute;cone <strong>Settings <\/strong>(Configura&ccedil;&otilde;es) no canto inferior. Tem alguns <em>layouts<\/em> de p&aacute;ginas dentre os quais voc&ecirc; pode escolher, como por exemplo:<\/p><ul class=\"wp-block-list\">\n<li><strong>Padr&atilde;o<\/strong>. Esse <em>layout<\/em> ir&aacute; mostrar elementos j&aacute; existentes do tema do WordPress que voc&ecirc; tem ativado &mdash; barra lateral, cabe&ccedil;alho, rodap&eacute;.<\/li>\n\n\n\n<li><strong>Elementor Canvas<\/strong>. Isso ir&aacute; lhe dar uma tela totalmente em branco. Se voc&ecirc; quer come&ccedil;ar do zero, esse <em>layout<\/em> de p&aacute;gina ser&aacute; o certo para voc&ecirc;.<\/li>\n\n\n\n<li><strong>Elementor Full-width<\/strong>. Voc&ecirc; n&atilde;o encontrar&aacute; uma barra lateral aqui, mas o cabe&ccedil;alho e o rodap&eacute; ainda ir&atilde;o aparecer.<\/li>\n<\/ul><p>J&aacute; no Beaver Builder, o processo &eacute; bastante similar. Quando voc&ecirc; cria uma nova p&aacute;gina, ir&aacute; encontrar a op&ccedil;&atilde;o de iniciar o Beaver Builder para lev&aacute;-lo para sua interface de cria&ccedil;&atilde;o de p&aacute;ginas.<\/p><div class=\"wp-block-image\">\n<figure class=\"aligncenter\"><img decoding=\"async\" width=\"1024\" height=\"475\" src=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/public\" alt=\"bot&atilde;o para adicionar nova p&aacute;gina no beaver builder\" class=\"wp-image-17025\" srcset=\"https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/w=1024,fit=scale-down 1024w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/w=150,fit=scale-down 150w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/w=300,fit=scale-down 300w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/w=768,fit=scale-down 768w, https:\/\/imagedelivery.net\/LqiWLm-3MGbYHtFuUbcBtA\/wp-content\/uploads\/sites\/53\/2019\/09\/nova-pagina-beaver-builder.png\/w=990,fit=scale-down 990w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure><\/div><p>O problema com esse <em>plugin <\/em>&eacute; que voc&ecirc; n&atilde;o pode mudar o <em>layout<\/em> da p&aacute;gina de maneira t&atilde;o f&aacute;cil quanto com o Elementor. Se voc&ecirc; quer se livrar do cabe&ccedil;alho ou da barra lateral, &eacute; necess&aacute;rio comprar a vers&atilde;o <em>premium <\/em>antes e ir at&eacute; o menu do Beaver Builder no painel.<\/p><p>Se o menu n&atilde;o estiver l&aacute;, v&aacute; para <strong>Settings &rarr; User Access <\/strong>(Configura&ccedil;&otilde;es &rarr; Acesso do Usu&aacute;rio) no <em>dashboard<\/em> do WordPress e ative o menu do Beaver Builder.<\/p><p>Comparado com o Elementor, voc&ecirc; de fato precisa fazer alguns malabarismos para chegar onde deseja.<\/p><h4 class=\"wp-block-heading\" id=\"h-customizacao\"><strong>Customiza&ccedil;&atilde;o<\/strong><\/h4><p>Na se&ccedil;&atilde;o anterior, cobrimos ambas as suas interfaces, ent&atilde;o voc&ecirc; deve ter uma ideia de como funciona o processo. Agora, vamos ver o qu&atilde;o f&aacute;cil &eacute; a customiza&ccedil;&atilde;o em ambos os <em>plugins<\/em>.<\/p><p>No Elementor, existem tr&ecirc;s abas onde voc&ecirc; pode escolher determinada op&ccedil;&atilde;o para seu <em>widget <\/em>&mdash; <strong>Content <\/strong>(Conte&uacute;do),<strong> Styling <\/strong>(Estilo) e <strong>Advanced <\/strong>(Avan&ccedil;ado).<\/p><p>Vamos dizer que voc&ecirc; est&aacute; customizando uma se&ccedil;&atilde;o FAQ (Perguntas Frequentes). A op&ccedil;&atilde;o <em>Content<\/em> deixa voc&ecirc; preencher as informa&ccedil;&otilde;es e algumas formata&ccedil;&otilde;es b&aacute;sicas como tamanho, links e alinhamento. Na aba <em>Styling<\/em>, voc&ecirc; pode encontrar uma customiza&ccedil;&atilde;o mais profunda &mdash; tipografia, cor, sombras, espa&ccedil;amento das letras e muito mais.<\/p><p>A aba <em>Advanced<\/em> lhe d&aacute; a liberdade para definir uma anima&ccedil;&atilde;o de entrada, adicionar uma imagem de fundo, aplicar um gradiente, criar um efeito de rolagem, etc. Por aqui, voc&ecirc; tamb&eacute;m pode escolher esconder determinado elemento na visualiza&ccedil;&atilde;o para dispositivos m&oacute;veis, adicionar CSS customizado e modificar a margem e o preenchimento.<\/p><p>O lado esquerdo do painel de controle &eacute; recheado de recursos, com tantas funcionalidades e configura&ccedil;&otilde;es de <em>widget<\/em> quanto voc&ecirc; pode imaginar &mdash; n&atilde;o &eacute; necess&aacute;rio muito esfor&ccedil;o para se acostumar com o fluxo de trabalho.<\/p><p>Agora, vamos mudar nosso foco para a customiza&ccedil;&atilde;o do Beaver Builder.<\/p><p>Ao inv&eacute;s do painel de controle, existe uma janela <em>pop-up<\/em> flutuante que cont&eacute;m toda a funcionalidade de que voc&ecirc; pode precisar.<\/p><p>Depois de inserir um m&oacute;dulo, voc&ecirc; pode mexer com suas configura&ccedil;&otilde;es atrav&eacute;s das tr&ecirc;s abas &mdash; <strong>General <\/strong>(Geral),<strong> Styling <\/strong>(Estilo) e <strong>Advanced <\/strong>(Avan&ccedil;ado).<\/p><p>A customiza&ccedil;&atilde;o &eacute; bem similar ao Elementor &mdash; mas o Beaver Builder tem a habilidade integrada de adicionar um efeito de paralaxe no plano de fundo. Enquanto no Elementor voc&ecirc; precisa primeiro instalar um <em>add-on<\/em> para fazer isso.<\/p><p>Mais do que isso, voc&ecirc; pode arrastar a janela de <em>pop-up <\/em>para o lado esquerdo ou para a direita, com ele ent&atilde;o se tornando num painel de controle similar ao do Elementor.<\/p><h3 class=\"wp-block-heading\" id=\"h-elementor-vs-beaver-builder-preco\"><strong>Elementor vs Beaver Builder &ndash; Pre&ccedil;o<\/strong><\/h3><p>Com os recursos e a facilidade de uso fora do caminho, &eacute; hora de falar sobre as op&ccedil;&otilde;es de pre&ccedil;o para ambos os <em>plugins<\/em> e o que voc&ecirc; receber&aacute; por cada pacote.<\/p><p>A vers&atilde;o gratuita do Elementor possui apenas os recursos mais b&aacute;sicos. Aqui est&aacute; o que a vers&atilde;o Pro ir&aacute; trazer para voc&ecirc;.<\/p><ul class=\"wp-block-list\">\n<li><strong>Templates profissionais, widgets e blocks<\/strong>. Ele te traz muito mais liberdade, flexibilidade e funcionalidade para seu site. Voc&ecirc; ganha acesso a 300 <em>templates<\/em> profissionais, 50 <em>widgets<\/em> pro e tamb&eacute;m desbloqueia todos os blocos profissionais como cabe&ccedil;alho, rodap&eacute;, postagem simples, p&aacute;gina 404, exibi&ccedil;&atilde;o de pre&ccedil;o, assinatura de <em>newsletter<\/em> e outras op&ccedil;&otilde;es.<\/li>\n\n\n\n<li><strong>Suporte ao WooCommerce<\/strong>. Voc&ecirc; ter&aacute; acesso ao construtor de loja, que funciona bem com o WooCommerce.<\/li>\n\n\n\n<li><strong>Widget global<\/strong>. Esse &eacute; um recurso &uacute;nico que cobrimos anteriormente &mdash; ele permite que voc&ecirc; aplique configura&ccedil;&otilde;es para um <em>widget<\/em> de maneira global.<\/li>\n\n\n\n<li><strong>Suporte e atualiza&ccedil;&atilde;o gratuitos<\/strong>. A equipe de suporte deles est&aacute; pronta para resolver qualquer problema que voc&ecirc; tenha com rela&ccedil;&atilde;o ao Elementor por um ano.<\/li>\n\n\n\n<li><strong>Chega com tr&ecirc;s op&ccedil;&otilde;es de pre&ccedil;os<\/strong>. Cada uma permite que voc&ecirc; use o Elementor para um ou mais sites &mdash; Personal\/&Uacute;nico Site <strong>($49\/ano)<\/strong>, Business\/Tr&ecirc;s Sites <strong>($99\/ano)<\/strong>, e Sites Ilimitados <strong>($199\/ano)<\/strong>.<\/li>\n<\/ul><p>J&aacute; com o Beaver Builder, sua vers&atilde;o Lite parece mais com uma demonstra&ccedil;&atilde;o, ao inv&eacute;s de uma vers&atilde;o gratuita, devido ao qu&atilde;o limitados s&atilde;o os seus recursos. Embora ela certamente &eacute; boa o suficiente se voc&ecirc; busca criar um site simples.<\/p><p>Aqui est&aacute; o que voc&ecirc; perde sem o plano <em>premium<\/em>:<\/p><ul class=\"wp-block-list\">\n<li><strong>M&oacute;dulos premium e fileiras pr&eacute;-criadas<\/strong>. Al&eacute;m de recursos b&aacute;sicos como imagens, texto, &aacute;udio, v&iacute;deo e HTML, voc&ecirc; ir&aacute; habilitar muitos m&oacute;dulos &uacute;teis e fileiras visualmente deslumbrantes como um <em>slider<\/em> de conte&uacute;do, galeria, Google Maps, <em>call-to-action<\/em>, formul&aacute;rio de contato, etc.<\/li>\n\n\n\n<li><strong>Duplique seus templates<\/strong>. Para economizar tempo, voc&ecirc; pode salvar seu <em>template<\/em> e reutiliz&aacute;-lo em outros sites ou p&aacute;ginas.<\/li>\n\n\n\n<li><strong>Templates<\/strong>. A vers&atilde;o Lite n&atilde;o lhe d&aacute; qualquer<em> template<\/em> &mdash; o que &eacute; outro motivo para se tornar <em>premium<\/em>. Criar um site agora toma muito menos esfor&ccedil;o, j&aacute; que voc&ecirc; n&atilde;o tem que fazer tudo a partir do zero.<\/li>\n\n\n\n<li><strong>Sites ilimitados<\/strong>. Todo plano <em>premium<\/em> que eles possuem permite que voc&ecirc; use o Beaver Builder em tantos sites quanto voc&ecirc; desejar.<\/li>\n\n\n\n<li><strong>Suporte premium por um ano<\/strong>. N&atilde;o h&aacute; necessidade de se preocupar com qualquer problema quando voc&ecirc; pode contar com equipe de suporte deles para ter ajuda.<\/li>\n\n\n\n<li><strong>Vem com tr&ecirc;s op&ccedil;&otilde;es de pre&ccedil;os<\/strong>. Todos os benef&iacute;cios acima (com exce&ccedil;&atilde;o dos <em>templates<\/em>) est&atilde;o dispon&iacute;veis com o plano Standard <strong>($99)<\/strong>. Fazer upgrade para o Pro <strong>($199)<\/strong> adiciona <em>templates<\/em> e capacidades de multi-site para a lista de recursos. A&iacute;, tem o plano Agency <strong>($399)<\/strong> que oferece o recurso <em>white-label<\/em> e o Beaver Themer.<\/li>\n<\/ul><p>\n\n\n<div class=\"protip\">\n                    <h4 class=\"title\">Dica<\/h4>\n                    <p>Tanto o Elementor quanto o Beaver podem ser instalados e usados a todo vapor nos planos de hospedagem WordPress da <strong><a href=\"\/br\/hospedagem-wordpress\">Hostinger<\/a><\/strong>.<\/p>\n                <\/div>\n\n\n\n<\/p><h2 class=\"wp-block-heading\" id=\"h-em-suma\"><strong>Em Suma<\/strong><\/h2><p>Passamos por uma compara&ccedil;&atilde;o profunda entre o Elementor e o Beaver Builder com seus recursos, facilidade de uso e pre&ccedil;o.<\/p><p>Ambos possuem suas pr&oacute;prias for&ccedil;as e fraquezas, mas no final das contas cabe a voc&ecirc; decidir qual ser&aacute; melhor.<\/p><p>Tudo sobre o Elementor grita amig&aacute;vel para o usu&aacute;rio. Ent&atilde;o voc&ecirc; pode considerar us&aacute;-lo se isso &eacute; algo que possui apelo para voc&ecirc; &mdash; especialmente com o qu&atilde;o acess&iacute;vel &eacute; o pre&ccedil;o de sua vers&atilde;o Pro.<\/p><p>Dito isso, o Beaver Builder &eacute; prefer&iacute;vel se voc&ecirc; requer integra&ccedil;&atilde;o multi-sites ou qual voc&ecirc; necessita de um recurso <em>white label <\/em>para oferecer um servi&ccedil;o de desenvolvimento web conveniente para seus clientes.<\/p><p>Lembre-se de pesar cuidadosamente as informa&ccedil;&otilde;es para tomar uma decis&atilde;o informada entre o Elementor e o Beaver Builder. Feliz constru&ccedil;&atilde;o de p&aacute;ginas!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Voc&ecirc; procura por uma maneira mais f&aacute;cil de criar um site WordPress? Por que n&atilde;o considerar usar um plugin de cria&ccedil;&atilde;o de p&aacute;gina? Eles s&atilde;o repletos de recursos para criar um belo website sem inc&ocirc;modos! Existem v&aacute;rios plugins de constru&ccedil;&atilde;o de p&aacute;ginas por a&iacute;, mas o Elementor e o Beaver Builder s&atilde;o aqueles que mais [&#8230;]<\/p>\n<p><a class=\"btn btn-secondary understrap-read-more-link\" href=\"\/br\/tutoriais\/elementor-ou-beaver-builder\">Read More&#8230;<\/a><\/p>\n","protected":false},"author":125,"featured_media":16722,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"rank_math_title":"Elementor ou Beaver Builder | Comparativo de Construtor de Sites","rank_math_description":"Plugins de constru\u00e7\u00e3o de p\u00e1gina permitem criar um belo site sem aborrecimentos! Veja se o Elementor ou Beaver Builder \u00e9 o melhor para voc\u00ea!","rank_math_focus_keyword":"elementor ou beaver builder","footnotes":""},"categories":[4911],"tags":[6850,6849,6851,6852],"class_list":["post-16720","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-wordpress","tag-beaver-builder","tag-elementor","tag-elementor-ou-beaver-builder","tag-page-builder"],"hreflangs":[{"locale":"en-US","link":"https:\/\/www.hostinger.com\/tutorials\/elementor-vs-beaver-builder","default":0},{"locale":"pt-BR","link":"https:\/\/www.hostinger.com\/br\/tutoriais\/elementor-ou-beaver-builder","default":0},{"locale":"es-ES","link":"https:\/\/www.hostinger.com\/es\/tutoriales\/elementor-vs-beaver-builder","default":0},{"locale":"en-UK","link":"https:\/\/www.hostinger.com\/uk\/tutorials\/elementor-vs-beaver-builder","default":0},{"locale":"en-MY","link":"https:\/\/www.hostinger.com\/my\/tutorials\/elementor-vs-beaver-builder-everything-you-need-to-know","default":0},{"locale":"en-PH","link":"https:\/\/www.hostinger.com\/ph\/tutorials\/elementor-vs-beaver-builder-everything-you-need-to-know","default":0},{"locale":"es-MX","link":"https:\/\/www.hostinger.com\/mx\/tutoriales\/elementor-vs-beaver-builder","default":0},{"locale":"es-CO","link":"https:\/\/www.hostinger.com\/co\/tutoriales\/elementor-vs-beaver-builder","default":0},{"locale":"es-AR","link":"https:\/\/www.hostinger.com\/ar\/tutoriales\/elementor-vs-beaver-builder","default":0},{"locale":"pt-PT","link":"https:\/\/www.hostinger.com\/pt\/tutoriais\/elementor-ou-beaver-builder","default":0},{"locale":"en-IN","link":"https:\/\/www.hostinger.com\/in\/tutorials\/elementor-vs-beaver-builder","default":0},{"locale":"en-CA","link":"https:\/\/www.hostinger.com\/ca\/tutorials\/elementor-vs-beaver-builder","default":0},{"locale":"en-AU","link":"https:\/\/www.hostinger.com\/au\/tutorials\/elementor-vs-beaver-builder","default":0},{"locale":"en-NG","link":"https:\/\/www.hostinger.com\/ng\/tutorials\/elementor-vs-beaver-builder","default":0}],"acf":[],"_links":{"self":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/16720","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/users\/125"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/comments?post=16720"}],"version-history":[{"count":8,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/16720\/revisions"}],"predecessor-version":[{"id":46102,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/posts\/16720\/revisions\/46102"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media\/16722"}],"wp:attachment":[{"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/media?parent=16720"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/categories?post=16720"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hostinger.com\/br\/tutoriais\/wp-json\/wp\/v2\/tags?post=16720"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}