Saber criar páginas no Magento 2 é fundamental para manter sua loja atualizada com promoções, informações institucionais e landing pages. Com a chegada do Page Builder, esse processo se tornou visual e intuitivo, dispensando a necessidade de programação complexa.

Neste tutorial, vamos explorar como usar o editor visual, o editor clássico e até como usar Inteligência Artificial para gerar códigos HTML personalizados.

1. Acesse o Menu de Páginas

No painel administrativo do Magento 2, o caminho é simples:

  • Clique em Conteúdo no menu lateral.
  • Em "Elementos", selecione Páginas.

Você verá a listagem de todas as páginas CMS ativas na sua loja.

Menu de páginas CMS no Magento 2

2. Inicie uma Nova Página

No canto superior direito, clique no botão laranja Adicionar Nova Página.

Botão adicionar nova página Magento 2

3. Configurações Básicas

Antes de desenhar o layout, precisamos definir a identidade da página:

  • Título da Página: O nome que aparece na aba do navegador (Ex: Sobre Nós).
  • Status: Defina como "Ativado" para publicar.
Dica de URL: O campo "Chave da URL" define o endereço (ex: minhaloja.com/sobre-nos). Se deixar em branco, o Magento cria automaticamente baseado no título. Evite acentos e espaços!
Configurações de título e status da página

4. Criando Conteúdo com Page Builder

Aqui está o poder do Magento moderno. Na aba Conteúdo, clique em Editar com Page Builder.

Abrindo o Page Builder Magento 2

O sistema funciona no modelo "Arrastar e Soltar" (Drag & Drop). No menu lateral, você tem:

  • Layout: Linhas (Rows) e Colunas.
  • Elementos: Texto, Botões, Imagens, Vídeos.
  • Mídia: Sliders e Mapas.

Basta arrastar uma Row para a tela e, dentro dela, jogar os elementos que deseja.

Interface visual do Page Builder

5. Opção: Editor de Texto Clássico

Para páginas simples (como "Política de Privacidade"), você pode usar o editor de texto padrão, que funciona como o Word. Ele permite negrito, itálico, listas e links básicos.

Editor de texto clássico WYSIWYG

6. Inserindo HTML com Ajuda da IA

Quer algo personalizado mas não sabe programar? Você pode usar o bloco HTML Code do Page Builder junto com uma IA (como ChatGPT).

1. Arraste o bloco HTML Code para sua página.

Bloco de código HTML no Page Builder

2. Vá até a IA e peça o que precisa. Exemplo:

“Crie um código HTML com um título centralizado, um parágrafo com fundo cinza e um botão verde que leva para o WhatsApp.”

Usando IA para gerar HTML

3. A IA vai gerar um código parecido com este:

<div style="text-align: center;"> <h2>Fale Conosco</h2> <p style="background-color: #f0f0f0; padding: 15px; border-radius: 8px;"> Nossa equipe está pronta para te atender! </p> <a href="https://wa.me/559999999" style="background-color: green; color: white; padding: 10px 20px; text-decoration: none; border-radius: 5px;"> Chamar no WhatsApp </a> </div>

4. Cole esse código no bloco HTML do Magento e salve.

Colando HTML no Magento 2

7. Otimização de SEO

Não adianta criar páginas no Magento 2 se ninguém as encontrar. Na aba Otimização para Motores de Pesquisa, preencha:

  • Meta Título: O título azul que aparece no Google.
  • Meta Descrição: O resumo persuasivo abaixo do título.
Configuração de SEO da página

8. Layout e Design

Na aba Design, defina a estrutura. A opção mais comum é "1 column" (largura total), ideal para Landing Pages e Homepages.

Escolhendo layout da página

9. Salvar e Publicar

Clique em Salvar no topo da página. Limpe o cache se necessário.

Agora, acesse a URL que você criou (ex: sualoja.com.br/nova-pagina) e verifique se tudo está perfeito!

Página publicada no Magento 2

Quer aprofundar seus conhecimentos? Consulte a Documentação Oficial do Page Builder.

Precisa de um Design Personalizado? Fale Conosco