Magento 2 - Design, banners e páginas
Neste livro de documentação, abordaremos como você pode gerenciar o design da loja com páginas, blocos estáticos, alteração de banners, entre outros.
Banners
Banners - Magento 2
Nesta documentação, irei mostrar como você poderá realizar a alteração das imagens dos banners de sua loja.
Os banners padrão da loja são:
Abaixo irei mostrar como você irá identificar cada banner
Banner Principal:
Para mobile, o tamanho padrão que recomendamos é 900x550 pixels.
Banner Sub3:
Este bloco é composto por 3 banners menores, que ficam logo abaixo do banner principal e antes da categoria especial Linha 1 (confira as novidades). O tamanho padrão para estas 3 imagens é de 569x150 pixels.
Banner do Meio:
Banner Mosaico:
Também é um bloco composto por 3 imagens, mas neste caso são 2 tamanhos diferentes. A imagem da coluna esquerda possui o tamanho padrão de 800x800 pixels, já as duas imagens da coluna direita são de 800x390 pixels cada uma.
Banner Rodapé:
Como editar?
Em seu painel Mageshop, acesse: Conteúdo > Gerenciar Banners
Assim que acessar, você verá todos os banners cadastrados em sua loja.
Aviso: Nessa página editaremos apenas o Banner Principal Desktop e Mobile.
Basta você clicar no botão Editar para realizar a alteração das imagens.
Nesta tela, você verá os seguintes campos:
Nome: Como você quer que o banner seja identificado
Situação: Opção utilizada para ele aparecer na sua loja ou não
Tipo: Pode deixar como "imagem"
Carregar imagem: Poderá escolher o arquivo de imagem que você gostaria de colocar como Banner
URL: Neste campo você pode colocar uma URL na qual o banner irá direcionar o cliente assim que ele clicar.
Open new tab after click: Aqui você pode decidir se o cliente é encaminhado para a URL que você inseriu acima, a partir de uma nova guia ou não.
Assim que realizar as alterações que necessita, clique em Salvar Banner para manter as modificações
Outros banners
Para estar editando os banners: Banner do Meio, Banner Mosaico, Banner Rodapé você deve seguir o caminho a baixo
Conteúdo > Blocos > filtrar por "Banner"> selecionar o banner
Editar bloco
Habilite o Bloco: Sim/Não
Título do Bloco: Nome para o seu banner
Identificador: Nome identificador do Banner
Visão de Loja: Loja em que o banner será exibido (Caso tenha mais de uma loja no mesmo admin)
Page Builder
Para alterar as imagens, basta acessar o Page Builder, passar o mouse por cima da imagem que deseja editar, clicar em Upload New Image ou Selecionar na Galeria e selecionar a imagem que deseja em seu diretório de arquivos.
Lembrando que cada banner tem sua medida.
Com o Page Builder você consegue criar formatações diferentes de banners, criando designs diferentes utilizando as ferramentas presentes no canto esquerdo.
Dica: Compacte as imagens para ter maior desempenho da loja virtual, e melhores notas nos testes de velocidade do Google. Recomendamos o Caesium para compactar as imagens, clique aqui para baixá-lo.
Após editar os banners, clique no canto superior direito nas duas setas --> <-- para fechar o Page Builder, e salve.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Páginas
Página Sobre Nós
Acesse: Conteúdo > Elementos > Páginas
Selecione a página Sobre Nós e clique em Editar.
Abrindo a aba de Conteúdo, você pode estar utilizando o editor Page Builder para alterar a sua página, modificando o que será exibido nela. Clique no botão Edit with Page Builder para abrir o editor.
Dentro do editor, ao lado esquerdo teremos diversas abas, nelas terão tudo o que a gente precisa para personalizar a nossa página, aconselhamos que explore bem este editor.
Neste exemplo vou estar realizando a criação de uma página simples para exibir alguns textos informativos, para isso, ao lado esquerdo do nosso editor dentro da aba de Layout, vamos estar como o botão esquerdo do mouse, arrastando a opção Row para a parte em branca do editor, até que apareça uma linha vermelha nele assim como mostra a imagem abaixo, e então soltaremos.
Se conseguiu, seu editor estará com um bloco no meio, e ao passar o mouse por cima, será exibido o que é este bloco, neste caso, é o bloco Row.
Dentro de cada Row, podemos adicionar o elemento que queremos, sejam ele um texto, titulo, imagem, vídeo e outros. Aqui como exemplo vamos estar adicionando um título, para isso, ao lado esquerdo do editor vamos abrir a aba de Elements, e vamos arrastar a opção Heading até novamente aparecer a linha vermelha.
Temos um vídeo explicando a respeito do Pagebuilder (construtor de páginas) em detalhes neste link:
Após editar o conteúdo da página com o Pagebuilder, você encontrará o menu de edição do SEO logo abaixo
Chave URL: Aqui você poderá cadastrar uma URL customizada para a página caso desejar, ou pode deixá-la em branco para que seja preenchida com base no nome da página que você definiu no campo Título da Página.
Meta Título: Este geralmente você preenche o Título da Página também neste campo.
Meta Palavras-Chave: Aqui você pode cadastrar termos que possuem relação com a página em questão, para que o mecanismo de pesquisa (Google, Bing, Yahoo) consiga indexar sua página em uma busca de um usuário através destes termos. Para cadastrar termos aqui, separe-os com vírgula. Exemplo (página de apresentação de camisetas): Camisetas, Camiseta, Blusas, Blusa
Meta Descrição: Aqui você pode preencher um texto breve sobre a página, com no máximo 150 caracteres para ficar com uma boa indexação.
Meta Robots: Não é necessário editar este recurso.
Após editar a página, clique em clique em SALVAR para que a página seja salva.
Lembre-se de salvar e atualizar o Cache. Dúvidas de como atualizar o cache? clique Aqui.
Qualquer dúvida, entre em contato com o suporte em web@tryideas.com.br ou através do chat de suporte no horário de atendimento.
Como criar uma Página - Magento 2
Passo a passo escrito:
Em seu Painel Administrativo, vá em Conteúdo > Páginas > Adicionar Nova Página
Ao carregar a página, no campo Titulo, vamos estar preenchendo com o título que queremos adicionar a nossa Página
Abrindo a aba de Conteúdo, você pode estar utilizando o editor Page Builder para alterar a sua página, modificando o que será exibido nela. Clique no botão Edit with Page Builder para abrir o editor.
Dentro do editor, ao lado esquerdo teremos diversas abas, nelas terão tudo o que a gente precisa para personalizar a nossa página, aconselhamos que explore bem este editor.
Neste exemplo vou estar realizando a criação de uma página simples para exibir alguns textos informativos, para isso, ao lado esquerdo do nosso editor dentro da aba de Layout, vamos estar como o botão esquerdo do mouse, arrastando a opção Row para a parte em branca do editor, até que apareça uma linha vermelha nele assim como mostra a imagem abaixo, e então soltaremos.
Se conseguiu, seu editor estará com um bloco no meio, e ao passar o mouse por cima, será exibido o que é este bloco, neste caso, é o bloco Row.
Dentro de cada Row, podemos adicionar o elemento que queremos, sejam ele um texto, titulo, imagem, vídeo e outros. Aqui como exemplo vamos estar adicionando um título, para isso, ao lado esquerdo do editor vamos abrir a aba de Elements, e vamos arrastar a opção Heading até novamente aparecer a linha vermelha.
Temos um vídeo explicando a respeito do Pagebuilder (construtor de páginas) em detalhes neste link:
Após editar o conteúdo da página com o Pagebuilder, você encontrará o menu de edição do SEO logo abaixo
Chave URL: Aqui você poderá cadastrar uma URL customizada para a página caso desejar, ou pode deixá-la em branco para que seja preenchida com base no nome da página que você definiu no campo Título da Página.
Meta Título: Este geralmente você preenche o Título da Página também neste campo.
Meta Palavras-Chave: Aqui você pode cadastrar termos que possuem relação com a página em questão, para que o mecanismo de pesquisa (Google, Bing, Yahoo) consiga indexar sua página em uma busca de um usuário através destes termos. Para cadastrar termos aqui, separe-os com vírgula. Exemplo (página de apresentação de camisetas): Camisetas, Camiseta, Blusas, Blusa
Meta Descrição: Aqui você pode preencher um texto breve sobre a página, com no máximo 150 caracteres para ficar com uma boa indexação.
Meta Robots: Não é necessário editar este recurso.
Após editar a página, clique em clique em SALVAR para que a página seja salva.
Lembre-se de salvar e atualizar o Cache. Dúvidas de como atualizar o cache? clique Aqui.
Qualquer dúvida, entre em contato com o suporte em web@tryideas.com.br ou através do chat de suporte no horário de atendimento.
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:
|
| 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:
|
| Heading (Título) |
Utilizado para títulos e subtítulos. Você pode:
|
| Button (Botão) |
Cria botões clicáveis para ações. Você pode:
|
| Divider (Divisor) |
Adiciona uma linha de separação entre conteúdos. Você pode:
|
| HTML Code |
Permite inserir código HTML personalizado. Você pode:
|
Media
| Campo | Explicação |
|---|---|
| Image (Imagem) |
Permite adicionar imagens ao layout. Você pode:
|
| Video |
Permite inserir vídeos (geralmente do YouTube). Você pode:
|
| Banner / Slider |
Permite criar banners ou carrosséis. Você pode:
|
| Map (Mapa) |
Permite inserir um mapa (geralmente Google Maps). Você pode:
|
Add Content
| Campo | Explicação |
|---|---|
| Bloquear |
Permite inserir um bloco estático já criado no Magento dentro do Page Builder. Você pode:
|
| Produtos |
Permite exibir produtos dentro da página. Você pode:
💡 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
- Adicione uma Row.
- Insira um Título (Heading).
- Adicione um Texto (Text) com a descrição.
4. Criar layout com imagem + texto
- Adicione uma nova Row.
- Insira Columns (2 colunas).
- 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
- Clique em Salvar Template.
- Defina um nome.
- Salve.
Aplicar Template
- Clique em Aplicar Template.
- Escolha um modelo salvo.
- Visualize e aplique.
Ideal para padronizar descrições de produtos.
Como Criar Descrição de Categoria
Passo a passo
- Acesse:
Catálogo > Categorias - Escolha a categoria.
- Vá até o campo Descrição.
- 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
- Acesse:
Conteúdo > Páginas - Clique em Adicionar Nova Página.
- Preencha:
- Título
- URL
- SEO
- Utilize o Page Builder no conteúdo.
Uso do Page Builder na Home
O Page Builder também pode ser utilizado para:
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?
Outras Informações
Como cadastrar o seu CNPJ - Magento 2
Em seu painel magento mageshop, acesse: Sistema > Variáveis Personalizadas > CNPJ
Ao abrir, insira o seu CNPJ completo nos campos, Valor da variável HTML e Valor de variável em texto simples.
Clique em Salvar e atualize o cache.
Se ainda assim tiver dúvidas sobre o funcionamento desse recurso, entre em contato com o nosso time de suporte no chat, ou através do e-mail web@tryideas.com.br.
Cadastrar Endereço e Telefones da Loja
Acesse Lojas > Configuração > Configuração
Geral > Informações da Loja
Adicione as informações de sua loja nos campos.
Salve e atualize o Cache
Qualquer dúvida, entre em contato com o suporte em web@tryideas.com.br ou através do chat de suporte no horário de atendimento.
Como cadastrar o perfil do Instagram - Magento 2
No Painel Administrativo de sua loja virtual, acesse:
Sistema > Variáveis personalizadas
Você verá a opção Instagram na listagem, clique nele.
Ao abrir, insira o link completo do seu perfil do instagram nos campos Valor da Variável HTML e e Valor de Variável em Texto Simples
Em seguida, clique em SALVAR e depois, atualize o cache do Magento
Tem dúvida sobre como atualizar o cache? Clique aqui
Qualquer dúvida, entre em contato com o suporte em web@tryideas.com.br ou através do chat de suporte no horário de atendimento.
Como cadastrar o perfil do Facebook - Magento 2
Entre no Painel Administrativo e acesse:
Sistemas > Variáveis Personalizadas
Ali, você terá acesso a página do Facebook
Ao abrir, insira o link completo do seu perfil do facebook nos campos " Valor da Variável HTML" e "Valor de variável em texto simples".
Após isso, SALVE e ATUALIZE o CACHE
.Dúvidas de como atualizar o cache? Clique aqui
Magento 2 - Adicionando Marca d'água nos Produtos
Adicionar a sua logo marca como marca d'água em seus produtos é algo muito benéfico para a sua segurança. Além dos direitos autorais, a logo marca diminui muito o uso indevido de imagens próprias, onde consegue garantir a qualidade das suas imagens e te proteger contra concorrentes desleais.
Por isso, criamos essa documentação para facilitar o seu processo de entendimento e poder aplicar essa prática em sua loja online.
Passo a passo de como realizar a configuração:
Nas configurações de Design, escolha a opção com o Nome do Tema MageShop e clique em Editar.
Depois desça a barra de rolagem até a opção Marcas D'água da Imagem de Produto e clique sobre ela para abrir as opções.
Explicarei brevemente sobre cada opção selecionável.
Imagem > Você vai estar escolhendo qual a imagem a ser usada como Marca d'água em sua loja.
Lembrando que o tamanho máximo do arquivo é de 2MB e são permitidos arquivos JPG, Gif e PNG. Recomendamos o uso JPG.
Opacidade da Imagem > Escolhe qual é a transparência da imagem. Quanto maior o número, mais visível será a logomarca.
Tamanho da Imagem > Definir qual o tamanho que será exibido na imagem, podendo varias os tamanhos sem precisar editar a sua imagem enviada anteriormente.
Posição da Imagem > Define o posicionamento da logomarca, podendo variar entre: Centralizar, Lado a Lado, Superior/Esquerda, Superior/Direita, Inferior/Esquerda e Inferior/Direita.
Após realizar suas edições, lembre de Salvar configuração no canto superior direito da tela para manter todas as configurações realizadas. E para completar, atualize o Cache da sua loja para todos os dados serem os mais atualizados possíveis.
Qualquer dúvida, sinta-se à vontade de entrar em contato conosco através do número (45) 98817-0144 ou clique aqui.