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

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:

Banner Principal (Desktop): 2000x550 pixels
Banner Principal (Mobile): 900x550 pixels

Banner Sub3: 569x150 pixels

Banner do Meio: 1400x500 pixels

Banner Mosaico: 800x800 e 800x390 pixels

Banner Rodapé: 1400x300 pixels

Abaixo irei mostrar como você irá identificar cada banner


Banner Principal:

É o maior banner que você irá visualizar assim que abrir a home do seu site, as medidas padrões dele são de 2000x550 pixels.

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:

Este banner você irá encontrar após a categoria Confira as Novidades e antes do Banner Mosaico. O tamanho padrão para esta imagem é de 1400x500 pixels.


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é:

O último banner padrão da sua loja que fica ao fim da página. Esta imagem tem o tamanho padrão de 1400x300 pixels.


Como editar?

Em seu painel Mageshop, acesse: Conteúdo > Gerenciar Banners

Assim que acessar, você verá todos os banners cadastrados em sua loja ali, inclusive as versões 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

Banner title: Caso queira identificá-lo com um título específico

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

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.

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á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.

Páginas

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.

Outras Informações

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.

Outras Informações

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.

Outras Informações

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.

Outras Informações

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

Outras Informações

Magento 2 - Adicionando Marca d'água nos Produtos

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:

Em seu menu, escolha a opção Conteúdo > Visual > Configurações.

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.