Banners

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:

Banner Principal Desktop - 2000 x 550 pixels

Banner Principal Mobile - 800 x 550 pixels

Banner Sub3 - 569 x 150 pixels

Banner Mosaico - Grande 800 x 800 pixels e pequenos 800 x 390 pixels cada um

Banner Rodapé - 1400 x 300 pixels

Primeiramente no seu painel administrativo do Magento 1, procure pelo menu Banners e em seguida acesse a opção Manage Banners:

Ao acessar este menu, você irá se deparar com algumas opções de banner já criados na sua loja:

banners-modulo.gif

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

Nome do Banner no Admin

 

Banner Slider Mobile

Nome do Banner no Admin

Banners Sub3

Visão Desktop

Visão Mobile

logo abaixo do Principal e acima do Confira as Novidades

Nome do Banner no Admin

 

Banner Mosaico

Visão Desktop

Visão Mobile

mosaicomobile2.gif

Nome do Banner no Admin

Banner Rodapé

Visão Desktop

Visão Mobile

Nome do Banner no Admin

Como editar as Imagens

Selecione o banner que deseja editar, com base nas informações que foram passadas acima, somente clicando em cima mesmo da linha do banner no admin. Vou usar o exemplo do Banner Slider 1 Desktop.

Ao abrir o bloco você terá os campos como mostrados na imagem acima, para editar as informações.

Titulo do Banner: Este campo é o titulo que você verá na listagens de banners no Gerenciamento, serve apenas para que consiga localizar mais facilmente.

Tipo do Banner: Este campo, você verá qual é a configuração de exibição do banner, se ele será um Principal, um Mosaico e etc. É útil você saber pois caso queira cadastrar mais banners posteriormente, precisa saber a qual grupo de configuração atrelar a ele.

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

Ao acessar o menu Banners > Manage Banners, você terá a opção Add Slide. Clique nela para criar um novo slide de 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:

Banner Principal

Banner Sub3

Banner Mosaico

Banner Rodapé

Tamanhos padrão para cada banner:

Banner Principal - 2000 x 550 pixels

Banner Sub3 - 569 x 150 pixels

Banner Mosaico - Grande 800 x 800 pixels e pequenos 800 x 390 pixels cada um

Banner Rodapé - 1400 x 300 pixels

 

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

Banner Principal - 2000 x 550 pixels

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 

  1. <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li> 
  2. <li><a href="#"><img src="{{media url="wysiwyg/banners/principal-3.jpg"}}" alt="" /></a></li>
  3. <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>

banner-principal.gif

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.

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="#">

principal.gif

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.

 

 

Banners promocionais - Magento 1

Dicas:

Tamanho para banner Sub3 

Banner Sub3 - 569 x 150 pixels

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>

bannersub3.gif

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="#">

links.gif

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 

bannemosaico.gif

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

 

banner-rodap´´e.gif

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 iLoveIMGTiny 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!