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:

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:

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 cadastradas por padrão em sua loja. Cada um possui seu nome para conseguir 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 passadas acima, somente clicando em cima mesmo da linha do banner no admin. Usarei o exemplo do Banner Slider 2 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 título que você verá na listagem de banners no Gerenciamento, serve apenas para conseguir 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, 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 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

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é

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:

Banner Principal - 2000 x 550 píxeis

Banner Sub3 - 569 x 150 píxeis

Banner Mosaico - Grande 800 x 800 píxeis e pequenos 800 x 390 píxeis cada um

Banner Rodapé - 1400 x 300 píxeis

 

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 

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 

  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

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

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.