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.
2. Inicie uma Nova Página
No canto superior direito, clique no botão laranja Adicionar Nova Página.
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!
4. Criando Conteúdo com Page Builder
Aqui está o poder do Magento moderno. Na aba Conteúdo, clique em Editar com Page Builder.
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.
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.
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.
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.”
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.
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.
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.
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!
Precisa de um Design Personalizado? Fale Conosco