Banners
- Edição de Banners (módulo) - Magento 1
- Banners página inicial (Blocos Estáticos) - Magento 1
- Banner Principal - Magento 1
- Banners promocionais - Magento 1
- Banner mosaico - Magento 1
- Banner de rodapé - Magento 1
- Como fazer um Banner no Canva
Edição de Banners (módulo) - Magento 1
Passo a passo em vídeo:
Passo a passo Escrito:
Versões mais recentes do nosso Magento 1 contam com um novo módulo de edição de banners, onde é mais fácil realizar o gerenciamento deste conteúdo. Abaixo irei mostrar um passo a passo de como você poderá editar os banners com este novo módulo.
Antes de começarmos, irei repassar as medidas de cada banner:
São aceitos os formatos JPEG, JPG, PNG e GIF.
Caso queira manter uma imagem com uma qualidade melhor, recomendamos o formato PNG, porém caso procure uma performance melhor, com uma imagem mais leve e que facilite o carregamento, utilize imagens no formato JPG.
Primeiramente no seu painel administrativo do Magento 1, procure pelo menu Banners e em seguida acesse a opção Manage Banners:
Como mostrado no GIF acima, estas são todas as opções de banners cadastradas por padrão em sua loja. Cada um possui seu nome para conseguir localizar corretamente em sua loja e editar.
Banner Slider Desktop
Banner Slider Mobile
Banners Sub3
Visão Desktop
Visão Mobile
logo abaixo do Principal e acima do Confira as Novidades
Banner Mosaico
Visão Desktop
Visão Mobile
Banner Rodapé
Visão Desktop
Visão Mobile
Como editar as Imagens
Ao abrir o bloco você terá os campos como mostrados na imagem acima, para editar as informações.
Link: Aqui você pode colocar um Link de Redirecionamento para quando o cliente que visita a sua loja clicar no banner, ele visite uma página em específico. Basta copiar o link da página que deseja direcionar o cliente e colar aqui.
Target: Aqui você define se o link que o cliente clicar na função anterior, irá abrir em uma Nova Guia no Navegador ou se irá abrir na mesma aba que ele já está navegando.
Ordem: Este campo é utilizado para configurações de banners que possuem mais imagens em exibição, como o Sub3 e o Slider Principal. Ordenando aqui a partir de 0, você consegue determinar qual é a imagem que irá exibir primeiro.
Status: Aqui você define se a imagem que está editando no momento estará ativa ou não.
Imagem: Este campo é destinado então de fato para a inserção da imagem que você quer alterar na exibição da loja. Ao clicar em Escolher Arquivo, abrirá o esquema de pastas de seu computador para conseguir escolher o arquivo desejado para realizar o Upload.
O campo Imagem possui algumas regras que precisam ser seguidas ao enviar imagens. Elas não podem conter acentuação e nem caracteres especiais como @#! ou /, se você realizar o upload das imagens com este caractere, ficará desta forma:
Quando acontecer isso de exibir o link da imagem ao invés da Thumbnail (ícone da imagem), renomeie o arquivo removendo os caracteres especiais e acentuação, caso contrário o erro irá persistir e não irá exibir a imagem na loja.
Como cadastrar mais banners
Cadastre as informações de Nome do Banner e escolha o tipo do qual você quer mais uma imagem para exibir com a opção Tipo do Banner
Após isso, basta seguir com os passos de cadastro que foram passados nos itens anteriores desta documentação
Depois que terminar de salvar, clique em Salvar ou Salvar e Continuar no topo a direita para aplicar as alterações e em seguida atualize o Cache da loja.
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.
Banners página inicial (Blocos Estáticos) - Magento 1
Vídeo explicativo:
Abaixo segue o passo a passo por escrito para quem preferir:
Em seu painel Mageshop, acesse: CMS > Blocos Estáticos
Os blocos que possuem banners são:
Você pode estar pesquisando na coluna de título a palavra Banner para encontrar os blocos estáticos que possuem a configuração de um Banner na loja, assim como mostra a imagem a seguir.
Tamanhos padrão para cada banner:
Dica 1: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que está salvo no bloco de notas.
Dica 2: 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.
Banner Principal - Magento 1
Tamanho
Em seu painel Magento mageshop, acesse: CMS > Blocos Estáticos > Banner Principal
Vamos encontrar então o Bloco Estático de nome "Banner Principal", podemos usar o campo da coluna de Titulo para pesquisar este bloco.
Dica: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Deixe um espaço no campo para adicionar a imagem em formato html
Click no botão Insert Image
Procurar Arquivos > Marcando a Imagem > Abrir > Enviar Arquivos
Selecione o arquivo que deseja exibir no banner, abra esse arquivo em seguida clique em Enviar Arquivo. Vamos enviar esse arquivo para dentro da biblioteca do Magento
Marcando a Imagem > Inserir Arquivos
Cada linha em HTML, representa um banner no carrossel na home page da loja, segue em ordem, linha 1,2 e 3
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
- <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
existe varias maneira para colar imagem em código
Vou mostrar dois exemplos de como pode adicionar as imagens
1. Copiar somente o caminho da imagem que está entre {{ }}
2. Copiar o código inteiro da imagem.
Cole entre <li><a href="#"> código HTML da imagem </a></li>
Refaça esse mesmo processo com outros dois banners principal
Adicionar links
Como expliquei acima, cada linha e representado um banner na loja, são 3 banners principal precisamos de 3 links para inserir em cada um deles.
Copie o link inteiro com https da categoria que gostaria de direciona após o cliente clicar em cima
Vamos colar o link, substituindo pelo # que fica entre " aspas duplas" em seu painel admin
<li><a href="cole seu link aqui">
<li><a href="#">
<li><a href="#">
Salve e atualize o cache
Banners promocionais - Magento 1
Dicas:
Dica 1: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Dica 2: 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.
Para Editar o banner Sub3
CMS > Blocos Estáticos > Banners Sub3
Deixe um espaço no texto que é aonde vamos adicionar a imagem e depois copiar
Click no Botão Insert Image > Procurar Arquivo
Precisamos enviar essas imagem para dentro da biblioteca do Magento, podemos selecionar uma de cada vez ou segundando SHIFT e marcando a imagem podendo enviar em massa, o recomendado e fazer upload uma de cada vez para que não ocorra problemas, como falha de carregamento ou o ficar lento.
Após abrir o arquivo, precisamos enviar para a biblioteca
Com os arquivos enviado, marque o arquivo e clique no botão Inserir Arquivo
Em vez de aparecer uma imagem no campo que deixamos espaço, vai mostrar um código html como <img src="{{ media url="caminho da imagem"}}" alt /> esse código é nossa imagem em formato html
Nosso código foi adicionado onde deixamos espaço, mas ainda não adicionamos o banner, precisamos copiar essa imagem em formato html e colar na linha do banner no campo localizado logo acima
Marque o código inteiro, copie ou recorte, cole substituindo o código em vermelho mostrado na imagem abaixo
Cada linha <li> é um banner mostrando na loja
<ul class="promos">
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-01.jpg"}}" alt="" /></a></li> Banner 1 Esquerda
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-02.jpg"}}" alt="" /></a></li> Banner 2 Central
<li><a href="#"> <img src="{{media url="wysiwyg/banners/promo-03.jpg"}}" alt="" /></a></li> Banner 3 Direita
</ul>
Após substituir o código da imagem, apague o que adicionamos no espaço
Adicionar links
Como expliquei acima, cada linha representa um banner na loja, como são 3 banners sub3 precisamos de 3 links para inserir
Precisamos copiar o link, substituindo pelo # que fica entre " aspas duplas" em seu painel admin
<li><a href=" no lugar do # aqui vai ser colado seu link">
<li><a href="#">
<li><a href="#">
Salve para gravar as alterações realizadas 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.
Banner mosaico - Magento 1
Tamanhos banner mosaico
Grande (esquerda): 800x800px
Pequeno 1 (direita): 800x390px
Pequeno 2 (direita): 800x390px
Para editar o Banner Mosaico
Em seu painel magento mageshop, acesse: CMS > Blocos Estáticos > Banner Mosaico
Dica: Copie o html do bloco estático e salve em um bloco de notas antes de realizar alterações, assim, se fizer algo que não gostou ou que gerou um erro no design, pode sempre voltar para a versão original do html que estará salvo no bloco de notas.
Deixe um espaço no campo de conteúdo para adicionar a imagem em formato html
Clique no Botão Insert Image...
Vamos adicionar os arquivos dentro da biblioteca Magento
Procurar Arquivos > Marcando a Imagem > Abrir
Abrindo o arquivo tem que enviar para a biblioteca de arquivos, clique em Enviar Arquivos
Clique na Imagem > Inserir arquivo
Clicando em cima da imagem, aperte em Inserir Arquivo. vai aparecer em código da imagem HTML, onde deixamos espaço
Salve 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.
Banner de rodapé - Magento 1
Para editar o banner rodapé:
Em seu painel Magento mageshop, acesse: CMS > Blocos Estáticos > Banner Rodapé
Tamanho banner rodapé 1400 x 300px
No campo de conteúdo, deixe um espaço para adicionar a imagem em formato html
Click no botão Insert Image
Procurar Arquivos > Marque o Arquivo > Abrir
Selecionando o arquivo, click em Enviar Arquivo para que esse arquivo fique armazenado na biblioteca do magento
Arquivo enviado. Selecione e click em Inserir Arquivo
A imagem será exibida em formato html ex: <img scr="{{ media url"sua imagem"}}" alt=""/>
copie o a imagem no formato html, cole substituindo o código marcado em vermelho como na imagem abaixo
Salve 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.
Como fazer um Banner no Canva
Nessa documentação vamos explicar como você pode estar criando imagens para a sua loja online utilizando a ferramenta de edição chamado Canva.
O Canva é uma ferramenta incrível, que tem a possibilidade de utilizar totalmente grátis e ainda conseguir alcançar resultados incríveis. Nós da mageshop criamos lojas de exemplo na plataforma Magento 1.9 e em todas utilizamos a ferramenta de forma gratuita para chegar nos resultados.
Criando sua conta
Para iniciarmos, você precisa entrar no site oficial e realizar a criação da sua conta.
Primeiros passos
Depois de entrar em sua conta, você já está apto para poder iniciar a criação dos seus criativos. Nessa página você pode escolher alguns formatos para iniciar, escolhendo algum assunto em específico, ou criar o seu design no formato que desejar.
Caso queira criar banners para a sua loja, pode estar pegando as medidas dos banners nessa documentação.
Editar Templates prontos
No Canva uma ótima solução para você que não tem muito tempo ou até mesmo não tem muita criatividade para criar. Você pode estar escolhendo uma imagem pronta e depois estar alterando os textos e imagens, do jeito que quiser.
Use da sua criatividade e deixe a sua loja online com a cara da sua marca.
Você pode estar utilizando na aba "Design" e realizar uma busca com o tema que você quer.
Explore a ferramenta, procure vídeos explicativos e pratique!
Ou caso não tenha tempo, criatividade ou mesmo não quer criar seus banners, é interessante entrar em contato com empresas ou prestadores de serviço que realizam esse trabalho para você.
Qualquer dúvida sobre a nossa plataforma, sinta-se à vontade de entrar em contato conosco através do número (45) 98817-0144 ou clique aqui.