- O Page Builder permite criar conteúdos personalizados dentro da loja virtual sem necessidade de programação.
- Com ele, é possível criar páginas, descrições de produtos, categorias, banners, vitrines de produtos e layouts personalizados utilizando o sistema de arrastar e soltar.
- O recurso pode ser utilizado em produtos, categorias, páginas institucionais e também na página inicial da loja virtual.
Passo a Passo em vídeo
Passo a Passo por Escrito
1. Acesse a área onde deseja utilizar o Page Builder
O Page Builder pode ser utilizado em diferentes áreas da loja virtual.
Para produtos, acesse: Catálogo → Produtos
Para categorias, acesse: Catálogo → Categorias
Para páginas, acesse: Conteúdo → Páginas
Resultado esperado: Você estará na área correta para começar a criar ou editar conteúdos utilizando o Page Builder.
2. Abra o Page Builder
Após acessar a área desejada:
Em Produtos, role até a seção Conteúdo e localize o campo Descrição.
Em Categorias, localize o campo Descrição.
Em Páginas, crie ou edite uma página e localize o editor de conteúdo.
Ao clicar na área do editor de conteúdo (destacada em azul), o Page Builder será aberto.
Resultado esperado: O editor visual do Page Builder será exibido para edição.
3. Crie a estrutura inicial da página
Antes de adicionar conteúdos, comece criando a estrutura da página.
- Adicione uma Row (linha).
- Adicione Columns (colunas) caso queira dividir conteúdos.
- Escolha quantas colunas deseja utilizar.
Exemplos:
- 1 coluna para conteúdos simples
- 2 colunas para imagem + texto
- 3 ou mais colunas para grids
Recomendamos sempre começar criando uma Row antes de adicionar outros elementos.
Resultado esperado: A estrutura básica da página estará pronta para receber conteúdos.
4. Adicione elementos de conteúdo
O Page Builder possui diversos elementos para criação de conteúdo.
Principais opções:
Text (Texto)
- Inserir descrições
- Criar listas
- Aplicar formatações
Heading (Título)
- Criar títulos
- Utilizar H1, H2 e H3
- Organizar conteúdos
Button (Botão)
- Criar botões clicáveis
- Direcionar clientes para páginas, categorias ou produtos
Divider (Divisor)
- Criar separações visuais
HTML Code (Código HTML)
- Inserir conteúdos personalizados
Dentro do elemento HTML Code você pode usar variáveis disponíveis na plataforma — por exemplo, o nome da loja configurado — para que o texto seja preenchido automaticamente, sem precisar digitar a informação manualmente.
Resultado esperado: Os conteúdos começarão a aparecer organizados dentro da estrutura criada.
5. Adicione imagens, vídeos e banners
Na seção de mídia, você pode inserir conteúdos visuais.
Principais opções:
Image (Imagem)
- Inserir imagens
- Ajustar alinhamento
- Criar composições visuais
Video (Vídeo)
- Inserir vídeos, normalmente do YouTube
Banner / Slider (Banner / Carrossel)
- Criar banners promocionais
- Criar carrosséis
Map (Mapa)
- Inserir mapas e localizações
Resultado esperado: Os elementos visuais serão exibidos dentro do layout criado.
6. Utilize blocos e vitrines de produtos
Na seção de conteúdos adicionais, você poderá inserir:
Blocos
- Reutilizar conteúdos existentes
- Inserir banners prontos
- Utilizar conteúdos institucionais
Produtos
- Criar vitrines
- Inserir grids
- Criar carrosséis
A exibição de produtos dentro do Page Builder é muito utilizada em Home e páginas promocionais.
Ao inserir um Bloco, você está chamando um conteúdo criado uma única vez e reutilizável em várias páginas. Quando editar o bloco, a alteração reflete em todos os locais onde ele é exibido.
Resultado esperado: Os conteúdos adicionais serão incorporados corretamente à página.
7. Organize o layout utilizando linhas e colunas
Você pode combinar diferentes estruturas para criar layouts mais organizados.
Exemplos:
- Imagem à esquerda + texto à direita
- Texto centralizado + banner abaixo
- Alternar imagem e texto entre diferentes linhas
Resultado esperado: O layout ficará visualmente mais organizado e atrativo.
8. Utilize boas práticas de SEO
Ao criar conteúdos, utilize algumas recomendações:
- Utilize apenas 1 H1 por página
- Organize o restante utilizando H2 e H3
- Utilize parágrafos curtos
- Utilize listas quando possível
- Utilize imagens otimizadas
- Inclua palavras-chave naturalmente
Resultado esperado: O conteúdo ficará mais organizado para usuários e mecanismos de busca.
9. Salve templates para reutilização
Caso queira reutilizar layouts criados anteriormente:
- Clique em Salvar Template
- Defina um nome
- Salve
Para utilizar um template salvo:
- Clique em Aplicar Template
- Escolha um template salvo
- Aplique
Resultado esperado: O layout poderá ser reutilizado em outros produtos, categorias ou páginas.
10. Salve as alterações
Após finalizar a criação do conteúdo:
Clique em Salvar.
Depois, visualize a página, produto ou categoria na loja virtual.
Resultado esperado: O conteúdo criado será exibido na loja virtual.
Validação e Testes
Após concluir a configuração, execute os testes abaixo para confirmar o funcionamento correto.
Teste 1 — Visualização do conteúdo
Ação: Abra o produto, categoria ou página editada na loja virtual.
Resultado esperado: Todo conteúdo criado deverá aparecer corretamente.
Teste 2 — Verificação do layout
Ação: Navegue pela página verificando alinhamentos, imagens, banners e colunas.
Resultado esperado: O layout deverá estar organizado e responsivo.
Teste 3 — Verificação dos elementos inseridos
Ação: Clique em botões, vídeos, banners e links adicionados.
Resultado esperado: Todos os elementos deverão funcionar corretamente.
Se não funcionar, verifique:
- Se as alterações foram salvas
- Se o cache da loja foi atualizado
- Se os elementos foram adicionados dentro de Rows e Columns corretamente
- Se imagens e vídeos foram carregados corretamente
Pronto! Dessa forma realizamos a utilização do Page Builder em sua loja virtual Magento 2.
Observações Importantes
- O Page Builder funciona em produtos, categorias, páginas e Home.
- Sempre comece criando uma Row antes de adicionar conteúdos.
- Templates ajudam a padronizar layouts e economizar tempo.
- Utilize corretamente H1, H2 e H3 para melhorar SEO.
- Imagens muito pesadas podem impactar o carregamento das páginas.
- É possível combinar imagens, textos, vídeos, produtos e banners em um único layout.
Referências e Relacionados
- Como atualizar o cache da loja: alterações visuais feitas no Page Builder podem exigir atualização do cache para aparecer corretamente no frontend.
- Cadastro de produtos: utilize o Page Builder no campo de descrição para criar fichas de produto mais completas e atrativas.
- Como criar categorias e subcategorias: permite aplicar descrições avançadas com o Page Builder nas páginas de categoria.
- Como criar páginas institucionais: complementa a utilização do editor visual para páginas de conteúdo.
Caso tenha ficado alguma dúvida entre em contato com nosso time de suporte através do chat online dentro da sua loja virtual ou através do e-mail web@tryideas.com.br