Info
Content

Como utilizar o Page Builder

O que é o Page Builder no Magento 2?

O Page Builder do Magento 2 é uma ferramenta visual que permite criar e editar conteúdos de forma prática, sem necessidade de programação.

Com ele, você pode:

  • Criar descrições de produtos mais atrativas.
  • Personalizar páginas institucionais.
  • Montar layouts para categorias.
  • Organizar banners, imagens, textos e vídeos.

Essa ferramenta funciona no estilo arrastar e soltar (drag and drop), oferecendo total liberdade para criação de layouts personalizados.

Passo a passo em vídeo:

Passo a passo em Texto:

Onde o Page Builder pode ser utilizado?

O Page Builder está disponível em três principais áreas do Magento:

Produtos

Caminho:
Catálogo > Produtos

  • Campo Descrição → onde o Page Builder é utilizado.

Categorias

Caminho:
Catálogo > Categorias

  • Campo Descrição permite uso completo do Page Builder.

Páginas

Caminho:
Conteúdo > Páginas

  • Ideal para páginas institucionais (Sobre Nós, Home, Landing Pages).

Estrutura Básica do Page Builder

Layout

Campo Explicação
Row (Linha) É o primeiro elemento da estrutura.
Ela funciona como uma linha que agrupa os conteúdos.
👉 Sempre comece criando uma Row.
Columns (Colunas)

Columns (Colunas)

Você pode:

  • Criar 2 colunas (imagem + texto).
  • Criar 3 ou 4 colunas (grid de conteúdos).
  • Ajustar largura e espaçamento.
Tabs (Abas)

As Tabs (Abas) permitem organizar conteúdos em diferentes seções dentro do mesmo espaço, criando uma navegação por abas (como “Descrição”, “Especificações”, “Avaliações”, etc.).

 

Elements

Campo Explicação
Text (Texto)

Permite inserir textos descritivos.

Você pode:

  • Escrever descrições de produtos ou categorias.
  • Aplicar formatação (negrito, listas, alinhamento)
  • Organizar conteúdos em parágrafos.
Heading (Título)

Utilizado para títulos e subtítulos.

Você pode:

  • Definir hierarquia (H1, H2, H3...)
  • Melhorar o SEO da página
  • Destacar seções importantes.
Button (Botão)

Cria botões clicáveis para ações.

Você pode:

  • Redirecionar para páginas, categorias ou produtos.
  • Inserir chamadas como “Comprar agora” ou “Saiba mais”.
Divider (Divisor)

Adiciona uma linha de separação entre conteúdos.

Você pode:

  • Organizar melhor o layout.
  • Criar separações visuais entre seções.
HTML Code

Permite inserir código HTML personalizado.

Você pode:

  • Adicionar conteúdos avançados
  • Incorporar scripts ou estruturas externas
  • Ter maior controle sobre o layout

 

Media

Campo Explicação
Image (Imagem)

Permite adicionar imagens ao layout.

Você pode:

  • Inserir imagens de produtos ou banners.
  • Ajustar tamanho e alinhamento.
  • Criar composições visuais com texto.
Video

Permite inserir vídeos (geralmente do YouTube).

Você pode:

  • Adicionar demonstrações de produtos.
  • Inserir conteúdo institucional.
  • Melhorar engajamento da página.
Banner / Slider

Permite criar banners ou carrosséis.

Você pode:

  • Exibir promoções.
  • Criar sliders com várias imagens.
  • Destacar campanhas.
Map (Mapa)

Permite inserir um mapa (geralmente Google Maps).

Você pode:

  • Mostrar localização da empresa.
  • Inserir mapas em páginas institucionais.

Add Content

Campo Explicação
Bloquear

Permite inserir um bloco estático já criado no Magento dentro do Page Builder.

Você pode:

  • Reutilizar conteúdos prontos (ex: banners, textos institucionais).
  • Padronizar informações em várias páginas.
  • Facilitar atualizações (alterando o bloco, atualiza em todos os locais).
Produtos

Permite exibir produtos dentro da página.

Você pode:

  • Criar vitrines de produtos.
  • Exibir produtos em grid ou carrossel.
  • Destacar itens específicos.

💡 Muito utilizado na Home ou páginas promocionais.

 

Como Criar uma Descrição de Produto com Page Builder

1. Acessar o produto

Vá em:
Catálogo > Produtos
Selecione o produto desejado.

2. Abrir o Page Builder

  • Role até a seção Conteúdo.
  • Clique no campo Descrição (área azul).

3. Criar estrutura inicial

  1. Adicione uma Row.
  2. Insira um Título (Heading).
  3. Adicione um Texto (Text) com a descrição.

4. Criar layout com imagem + texto

  1. Adicione uma nova Row.
  2. Insira Columns (2 colunas).
  3. Arraste:
    • Imagem para um lado.
    • Texto para o outro.

💡 Você pode inverter os lados em diferentes linhas para deixar o layout mais dinâmico.

5. Formatação de conteúdo (SEO)

  • Utilize corretamente as headings:
    • H1 → título principal.
    • H2 → subtítulos.
    • H3 → seções menores.
  • Destaque palavras importantes com:
    • Negrito
    • Listas
    • Espaçamentos

Boas Práticas de SEO com Page Builder

Estrutura de títulos

Use hierarquia correta:

  • Apenas 1 H1 por página.
  • Use H2 e H3 para organização.

Imagens otimizadas

  • Utilize nomes de arquivos descritivos.
  • Evite imagens muito pesadas.
  • Sempre que possível, adicione contexto no texto próximo.

Conteúdo escaneável

  • Parágrafos curtos.
  • Uso de listas.
  • Destaques visuais.

Palavras-chave

Inclua naturalmente:

  • Nome do produto.
  • Categoria.
  • Características principais.

Como Salvar e Utilizar Templates

Salvar Template

  1. Clique em Salvar Template.
  2. Defina um nome.
  3. Salve.

Aplicar Template

  1. Clique em Aplicar Template.
  2. Escolha um modelo salvo.
  3. Visualize e aplique.

 Ideal para padronizar descrições de produtos.

Como Criar Descrição de Categoria

Passo a passo

  1. Acesse: Catálogo > Categorias
  2. Escolha a categoria.
  3. Vá até o campo Descrição.
  4. Utilize o Page Builder normalmente.

💡 Pode incluir:

  • Título da categoria.
  • Texto institucional.
  • Imagens e vídeos.

Como Criar Páginas com Page Builder

Passo a passo

  1. Acesse: Conteúdo > Páginas
  2. Clique em Adicionar Nova Página.
  3. Preencha:
    • Título
    • URL
    • SEO
  4. Utilize o Page Builder no conteúdo.

Uso do Page Builder na Home

O Page Builder também pode ser utilizado para:

  • Criar banners personalizados.
  • Organizar vitrines de produtos.
  • Definir grids ou carrosséis.
  • Montar layouts completos da Home.

Conclusão

O Page Builder é uma ferramenta essencial do Magento 2 que permite criar páginas profissionais sem conhecimento técnico.

Com ele, você consegue:

  • Melhorar a apresentação dos produtos.
  • Aumentar a conversão.
  • Criar layouts modernos e organizados.

 

Dúvidas?

Em caso de dúvida, fale com a gente pelo chat no painel da sua loja Magento ou envie um e-mail para web@tryideas.com.br durante o horário comercial – vamos ter prazer em ajudar você, seja sobre o Popt.in ou qualquer outra solução para sua loja.
Back to top