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!

há 3 anos 7 meses


Você sabia que a TreinaWeb é a mais completa escola para desenvolvedores do mercado?

O que você encontrará aqui na TreinaWeb?

Conheça os nossos cursos

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.

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
Curso Wordpress - Primeiros Passos
Conhecer o curso

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

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

Também podemos acessar a página de 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

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, 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

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

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

Pagina de exemplo com Page Builder SiteOrigin

Wordpress - Personalização do tema Avada
Curso Wordpress - Personalização do tema Avada
Conhecer o curso

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

Você também pode baixar o 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

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

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
Formação Administrador Wordpress
Conhecer a formação

Por fim, caso queira aprender mais sobre Wordpress saiba que aqui na TreinaWeb temos o curso Wordpress - Personalização 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.

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.

Autor(a) do artigo

Wesley Gado
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

Artigos relacionados Ver todos