Page Builders para WordPress: o que são e como podem nos ajudar? \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 06 Horas 

 00 Min 

 03 Seg 

   Tempo restante da oferta: 06 00 03 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) Page Builders para WordPress: o que são e como podem nos ajudar?  [ WordPress ](https://www.treinaweb.com.br/blog/categoria/wordpress) 

# Page Builders para WordPress: o que são e como podem nos ajudar?

 Saiba o que são os Page Builders para WordPress e como eles podem te ajudar a criar sites e blogs incríveis!

 [ Wesley Gado ](https://www.treinaweb.com.br/blog/autor/wesley-gado) 6 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/page-builders-para-wordpress-o-que-sao-e-como-podem-nos-ajudar.png)  

Os Page Builders para WordPress são plugins que permitem um grande poder de personalização na criação de layouts e páginas sem o conhecimento prévio em programação, desta forma, expandindo as ferramentas nativas que o WordPress possui como padrão. Caso você não conheça a ferramenta WordPress aconselho ler o nosso artigo sobre [o que é o WordPress e como instalar em sua máquina](https://www.treinaweb.com.br/blog/o-que-e-wordpress-e-como-instalar-na-sua-maquina/ "o que é o WordPress e como instalar em sua máquina").

Existem vários page builders, tanto gratuitos quanto pagos, neste artigo vamos mostrar como utilizar dois deles: O Page Builder SiteOrigin e o Elementor, ambos possuem planos gratuitos e pagos (que são mais robustos com maiores complementos de personalização), porém a versão gratuita de ambos já nos permite criar páginas bem interessantes.

[  ![Wordpress - Primeiros Passos](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg)   Curso Wordpress - Primeiros Passos Conhecer o curso ](https://www.treinaweb.com.br/curso/wordpress-primeiros-passos)

## Page Builder SiteOrigin

O Plugin de Page Builder da SiteOrigin é muito utilizado pela comunidade WordPress, possui a versão gratuita e a versão premium onde é disponibilizado mais complementos para a sua utilização, porém a versão gratuita é o suficiente para tirar muitas ideias do papel!

![Home SiteOrigin Page Builder](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Home-SiteOrigin-Page-Builder.png)

Podemos instalar o plugin de duas formas, pelo próprio painel do WordPress em Plugin > Adicionar novo, pesquisar na barra de pesquisa sobre o Page builder SiteOrigin, irá exibir os resultados, vamos instalar e ativar.

![Plugin WordPress Page Builder Site Origin](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Plugin-WordPress-Page-Builder-Site-Origin.png)

Também podemos acessar a página de [download do SiteOrigin](https://siteorigin.com/page-builder/ "download do SiteOrigin"), baixar o arquivo zip e instalar manualmente.

O SiteOrigin possui um pacote de widgets que são os elementos pré-definidos que você pode usar na criação de suas páginas, ou seja, vale a pena baixar esse pacote no site do SiteOrigin e fazer a instalação da mesma forma que o Plugin do Page Builder ou baixar pelo painel administrativo pesquisando por “SiteOrigin widgets Bundle”, e após ativar ambos os plugins, a área de gerenciamento de plugins deve exibir os dois ativados conforme abaixo.

![Plugins WordPress Ativados](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Plugins-WordPress-Ativados.png)

Logo em seguida vamos localizar no menu as configurações, é importante revisar as configurações e adaptar as suas necessidades, após ajustar as configurações estamos prontos para criar uma página ou um artigo utilizando o Page Builder, no caso se você estiver utilizando uma versão do WordPress acima da versão 5.0 com o [editor Gutenberg](https://www.treinaweb.com.br/blog/como-usar-o-novo-editor-gutenberg-do-wordpress/ "editor Gutenberg"), o próprio plugin irá configurar o editor clássico como padrão e adicionar uma tab “Page Builder”, ela que vamos utilizar para criar nossas páginas.

![Opção Page Builder no Editor do WordPress](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Opcao-Page-Builder-no-Editor-do-WordPress.png)

Ao clicar na tab “Page Builder” será exibido o editor para criarmos a nossa página, ele funciona com o sistema de “arrastar e soltar” e segue a estrutura de widgets, linhas e colunas.

No exemplo abaixo criamos uma linha com duas colunas e adicionamos um widget de imagem em cada uma delas, desta forma posicionando uma imagem ao lado da outra. Podemos seguir essa lógica e criar várias combinações com diferentes números de colunas e com os mais variados widgets como slider de imagens, área de depoimentos, carrossel de posts, google maps, enfim, diversas opções.

![Exemplo Utilizando Editor Page Builder SiteOrigin](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Exemplo-Utilizando-Editor-Page-Builder-SiteOrigin.png)

Após criar o exemplo podemos visualizar a publicação efetivamente em uma página como abaixo:

![Pagina de exemplo com Page Builder SiteOrigin](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Pagina-de-exemplo-com-Page-Builder-SiteOrigin.png)

[  ![Wordpress - Personalização do tema Avada](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/avada.svg)   Curso Wordpress - Personalização do tema Avada Conhecer o curso ](https://www.treinaweb.com.br/curso/wordpress-personalizacao-do-tema-avada)

## Page Builder Elementor

Outro Page Builder conhecido da comunidade WordPress é o Elementor, ele se assemelha bastante ao SiteOrigin e conta com a função de construtor “ao vivo”, que facilita e agiliza a criação de páginas mais personalizadas.

O processo de instalação é semelhante ao Page Builder da SiteOrigin, por se tratar de um Plugin ele pode ser instalado pelo próprio painel do WordPress, basta ir em Plugins > Adicionar Novo e pesquisar por Elementor Page Builder.

![Plugin Elementor Page Builder](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Plugin-Elementor-Page-Builder.png)

Você também pode baixar o [Elementor](https://elementor.com/ "Elementor") e efetuar a instalação manual a partir do arquivo zip.

Após instalar o plugin basta ativa-lo que ele estará pronto para uso, ao criar uma página ou post teremos a opção de “Editar com o Elementor”.

![Opcao Editor Elementor](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Opcao-Editor-Elementor.png)

Aqui está um diferencial em relação ao Page Builder da SiteOrigin, o Elementor apresenta um editor “ao vivo”, com esta barra lateral podemos navegar entre as configurações da página e sobre os widgets com o sistema arrasta e solta a ferramenta se torna intuitiva e simples de utilizar.

![Exemplo Editor ao vivo Elementor](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/Exemplo-Editor-ao-vivo-Elementor.png)

No exemplo construímos uma linha com três colunas para simular uma área de features, de forma simplificada, adicionando os widgets e ícone e texto somente “arrastando e soltando˜, podemos visualizar em tempo real antes mesmo de publicar as alterações.

## Vantagens x Desvantagens

Podemos dizer que utilizar os Plugins Page Builders para WordPress traz vantagens como: nos poupa tempo e facilita a criação de sites personalizados sem a necessidade de conhecimento em programação, além de utilizar o WordPress que é um CMS gratuito. Em contrapartida, para projetos maiores e mais complexos, por se tratar de complementos prontos e não otimizados para determinadas necessidades, eles podem não ser indicados por não alcançarem o desempenho esperado e por não ter a flexibilidade que um programador tem ao desenvolver algo específico.

## Conclusão

Se você está buscando uma ferramenta para criação de sites institucionais, landing pages e projetos mais “simples”, os Page Builders para WordPress com certeza vão lhe atender e serão eficazes para construir sites e blogs com uma ótima aparência, de forma prática e objetiva.

[  ![Administrador Wordpress](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/wordpress.svg)   Formação Administrador Wordpress Conhecer a formação ](https://www.treinaweb.com.br/formacao/administrador-wordpress)

Por fim, caso queira aprender mais sobre [Wordpress](https://www.treinaweb.com.br/blog/o-que-e-wordpress-e-como-instalar-na-sua-maquina) saiba que aqui na [TreinaWeb](https://treinaweb.com.br/) temos o curso [Wordpress - Personalização do tema Avada](https://www.treinaweb.com.br/curso/wordpress-personalizacao-do-tema-avada) que possui **03h37 de vídeos** e um total de **36 exercícios**. Conheça também nossos outros cursos de [Wordpress](https://www.treinaweb.com.br/busca?q=wordpress).

Veja quais são os tópicos abordados durante o curso de Wordpress - Personalização do tema Avada:

- Como comprar, instalar e ativar a ferramenta;
- Qual a lógica de uso do Avada e o básico sobre os menus;
- Definir configurações estruturais, layout e responsividade;
- Personalizar partes específicas do tema (cabeçalho, menus, barras laterais e rodapé);
- Quais são os widget adicionados pelo Avada e como utilizá-los;
- Utilizar o construtor de páginas Fusion Page Builder;
- Outros recursos como salvar configurações, utilizar layouts prontos, criar layouts e outras utilidades.

- [ #CMS ](https://www.treinaweb.com.br/blog/tag/cms)
- [ #WordPress ](https://www.treinaweb.com.br/blog/tag/wordpress)
- [ #WordPress Plugins ](https://www.treinaweb.com.br/blog/tag/wordpress-plugins)

Autor

 ![Wesley Gado](//secure.gravatar.com/avatar/1b770ca482a7232b1885881430a592bb?d=mm)

## Wesley Gado

 Formado em Análise e Desenvolvimento de Sistemas pelo Instituto Federal de São Paulo, atuou em projetos como desenvolvedor Front-End. Nas horas vagas grava Podcast e arrisca uns três acordes no violão. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/wesley-gado)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/10162055/asp-net-beanstalk-400x280.png)  [ C# ](https://www.treinaweb.com.br/blog/categoria/csharp) 

     7 anos atrás

    ##  [ Publicando uma aplicação .NET Core 3.0 no AWS Elastic Beanstalk ](https://www.treinaweb.com.br/blog/publicando-uma-aplicacao-net-core-3-0-no-aws-elastic-beanstalk) 

     Nesse artigo vamos aprender como publicar e configurar um projeto desenvolvido em ASP.NET Core 3.0 no Elastic Beanstalk, o serviço do tipo plataforma como serviço da AWS especializado para aplicações web.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/TEMPLATES-GRATUITOS-LANDING-PAGES-400x280.png)  [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 

     6 anos atrás

    ##  [ Templates gratuitos para Landing Page ](https://www.treinaweb.com.br/blog/templates-gratuitos-para-landing-page) 

     Veja neste artigo templates gratuitos para Landing Page.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/FERRAMENTAS-LANDING-PAGE-400x280.png)  [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 

     6 anos atrás

    ##  [ Ferramentas para criar Landing Page ](https://www.treinaweb.com.br/blog/ferramentas-para-criar-landing-page) 

     Veja neste artigo algumas ferramentas para criar Landing Page.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/07/O-QUE-É-LANDING-PAGE-400x280.png)  [ Marketing Digital ](https://www.treinaweb.com.br/blog/categoria/marketing-digital) 

     6 anos atrás

    ##  [ O que é Landing Page? ](https://www.treinaweb.com.br/blog/o-que-e-landing-page) 

     Veja neste artigo o que é Landing Page.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/09/spa-e-ssr-quais-as-diferencas-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     6 anos atrás

    ##  [ SPA e SSR: quais as diferenças? ](https://www.treinaweb.com.br/blog/spa-e-ssr-quais-as-diferencas) 

     Confira neste artigo as diferenças entre SPA e SSR, as vantagens e desvantagens de cada uma, além de quando utilizá-las.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/netdata-400x280.png)  [ Computação em nuvem ](https://www.treinaweb.com.br/blog/categoria/computacao-em-nuvem) 

     6 anos atrás

    ##  [ Monitorar o Nginx com o Netdata ](https://www.treinaweb.com.br/blog/monitorar-o-nginx-com-o-netdata) 

     Veja como você pode monitorar as conexões ao servidor Nginx e aos seus logs de acesso com o Netdata.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/08/28112233/capa-SPA-400x280.png)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     7 anos atrás

    ##  [ O que são aplicações SPA? ](https://www.treinaweb.com.br/blog/o-que-sao-aplicacoes-spa) 

     Neste artigo, vamos abordar o que são as aplicações baseadas em tecnologias SPA e o porquê de estas fazerem tanto sucesso nos dias atuais.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/dicas-projetos-frontend-min-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     4 anos atrás

    ##  [ 5 ideias de projetos para praticar - front-end ](https://www.treinaweb.com.br/blog/5-ideias-de-projetos-para-praticar-front-end) 

     Confira neste artigo algumas dicas de projetos de front-end, para que você possa praticar e melhorar suas habilidades.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/VUE-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     6 anos atrás

    ##  [ O que é o Vue.js? ](https://www.treinaweb.com.br/blog/o-que-e-o-vue-js) 

     Atualmente, graças à popularização do JavaScript, existe uma grande variedade de frameworks front-end para diferentes propósitos. Neste artigo, será abordado o Vue.js, um dos frameworks JavaScript SPA da atualidade.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/06/ANGULAR-400x280.png)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     7 anos atrás

    ##  [ O que é o Angular e para que serve? ](https://www.treinaweb.com.br/blog/o-que-e-o-angular-e-para-que-serve) 

     Frameworks SPA atualmente são um padrão de mercado quando falamos sobre desenvolvimento front-end. Neste artigo, vamos abordar o Angular, um dos mais populares.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/27144616/AWS-S3-400x280.png)  [ Amazon ](https://www.treinaweb.com.br/blog/categoria/amazon) 

     7 anos atrás

    ##  [ O que é AWS S3? ](https://www.treinaweb.com.br/blog/o-que-e-aws-s3) 

     Nesse artigo vamos conhecer o AWS S3, um serviço de armazenamento de arquivos na nuvem da Amazon. Vamos conhecer suas vantagens, suas aplicações mais comuns e quando não utilizá-lo.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/14165347/GITHUB-400x280.png)  [ Tecnologia ](https://www.treinaweb.com.br/blog/categoria/tecnologia) 

     7 anos atrás

    ##  [ 5 utilidades do GitHub ](https://www.treinaweb.com.br/blog/5-utilidades-do-github) 

     Veja neste artigo 5 funcionalidades úteis do GitHub.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **06h 00min 03s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58