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:
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 que são cadastradas por padrão em sua loja. Cada um possui seu nome para que consiga 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 que consiga 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:
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
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
Opa, tudo ótimo? Neste material irei mostrar como você pode estar criando um Banner utilizando a ferramenta gráfica "Canva".
Através do Canva, você pode estar criando designs incríveis! O que neste caso, acaba tornando a experiência do cliente com a loja, algo mais agradável, e confortável. Dito isto, vamos partir para a criação!
1° Passo - acessar a página oficial do Canva. Lá, você terá a opção de fazer login ou cadastro na plataforma, caso ainda não tenha tenha uma conta.
2° Passo - Após efetuar o login ou o cadastro, vá na opção “Criar um design”, no canto superior direito. A plataforma vai disponibilizar uma lista de opções de formatos de posts, inclusive para banners.
Você pode descer a barra de rolagem e procurar por “banner” ou escrever o termo na barra de pesquisa. Também há a opção de “tamanho personalizado”, em que você pode definir as dimensões do seu banner de acordo com as suas necessidades.
Outro ponto importante é que o Canva disponibiliza uma série de templates de banners pré-prontos. Há banner nos formatos de paisagem e retrato, além de banners para anúncios em dispositivos móveis e anúncios feitos no Mercado Shops, por exemplo.
Para este tutorial sobre como fazer banner no Canva, vamos usar o banner paisagem. Mas fique à vontade para escolher a opção que melhor se adeque ao que você precisa. Os passos seguintes serão, basicamente, os mesmos para qualquer tipo de banner.
3° Passo - Depois de selecionar o modelo de sua preferência, uma nova página aparecerá com um banner em branco, pronto para que você o personalize como quiser.
Nessa etapa, a plataforma permite que, com apenas alguns cliques, você adicione, edite e exclua imagens, textos e diversos outros elementos. As possibilidades são infinitas!
4° Passo - depois de todas as edições, chegou o momento de analisar como o seu banner ficou. Para isso, vale a pena responder às seguintes perguntas: O banner está entregando a mensagem que você deseja? As cores usadas estão despertando o interesse dos clientes? As letras estão legíveis? Isso é importante porque cada elemento do design pode fazer a diferença na hora de o cliente tomar a ação que você deseja. Outra dica valiosa é considerar a persona do negócio, que é o perfil do seu cliente ideal. Mas vamos falar mais sobre isso adiante… Continue o passo a passo sobre como criar banner no Canva!
5° - Por último, mas não menos importante, você deve baixar ou compartilhar o banner produzido. Sobre isso, há algumas informações importantes…
Caso a sua opção seja a de baixar a imagem, a plataforma vai te dar algumas opções de formato (JPG, PNG, PDF, GIF, etc). Além disso, há três opções de configuração para o download: fundo transparente, comprimir arquivos (qualidade mais baixa) e salvar configurações do download.
(Bônus).
Dicas para fazer um banner incrível no Canva
Agora que você já sabe como fazer banner no Canva, que tal conferir algumas dicas para deixá-lo realmente incrível?
Toda atenção é pouco na hora de criar um banner porque ele é responsável por gerar mais resultados para a sua empresa. Seja para apresentar promoções, produtos em destaque, cupons de desconto ou qualquer outra iniciativa.
Veja as dicas a seguir:
1. Conheça a persona do seu negócio
As ações de uma loja virtual (ou qualquer outro negócio) precisam estar direcionadas para o público-consumidor. Quando falamos em marketing digital, o termo “persona” é o que mais se adequa a essa questão.
A persona nada mais é do que o perfil do seu cliente ideal. Isto é, seus gostos, comportamentos, necessidades, localização, etc. Sabendo quem é a sua audiência, será mais fácil criar banners e demais peças gráficas que atendam ao que você precisa.
2. Coloque apenas informações relevantes
Um erro grave que diversos empreendedores cometem é o de “poluir” o banner com muitas informações. Isso só atrapalha as pessoas a, de fato, entenderem a mensagem principal da imagem.
Por isso, coloque em seu banner apenas as informações relevantes. Faça isso de maneira clara e objetiva, sem deixar quaisquer margens para dúvidas. A ideia é a pessoa bater o olho no seu banner e, automaticamente, compreender o que está sendo dito, seja via texto ou imagem.
3. Cuidado com o tamanho dos arquivos
Segundo o Google, um conteúdo deve carregar na tela do usuário em menos de 3 segundos. Isso significa que o seu banner deve ser leve para não atrapalhar o carregamento da página.
Se você usar muitos elementos gráficos, por exemplo, é normal que o arquivo fique um pouco mais pesado. A solução para isso é comprimir a imagem, diminuindo seu tamanho.
Existem algumas ferramentas excelentes para isso, como iLoveIMG, Tiny PNG e
Compressor.io, por exemplo. Use-as para não comprometer o carregamento da sua página, combinado?
Mas não só isso…
Quando falamos em vendas online, sabemos o quanto boas imagens podem fazer a diferença para a conversão das vendas.
Por isso, vale a pena ter em mente que você não precisa só saber como fazer banner no Canva, mas deve aproveitar os inúmeros recursos que a plataforma oferece…
Acredite, o Canva é um grande aliado dos empreendedores não é à toa!