Magento 1 - 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
- 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
- Páginas
- Blocos Estáticos
- Software editor de imagem
- Magemenu e BarraTopo
- Como editar as cores do site - Magento 1
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:
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!
Páginas
Criando uma página - Magento 1
Passo a Passo em vídeo:
Passo a Passo Escrito:
Informações da página
Acesse: CMS > PÁGINAS
Clique em CRIAR PÁGINA
Logo após, abrirá esta página.
Os campos que você terá que preencher são:
Título da página: Insira aqui, o nome que você dará para a sua página
URL: É o endereço da sua página, portanto, é imprescindível que neste campo você NÃO UTILIZE ESPAÇOS E ACENTOS, (SE FOR SEPARAR SEPARE POR HÍFEN)
STATUS: HABILITADO
Conteúdo
Nesta página, você irá escrever ou colar o conteúdo que a sua página abordará. Você pode utilizar o botão SHOW/HIDE EDITOR para formatar um texto, colorir, mudar de fontes, tamanhos, inserir imagens entre outros.
As demais informações não serão necessárias agora
Exibindo na sua loja virtual
Para a sua página ser vista na aba você terá que configurar os links na página:
CMS > BLOCOS ESTÁTICOS > MENU RODAPÉ LINKS EDITÁVEIS
Observe cada linha (em vermelho no print) essas são as páginas que já estão criadas na sua loja virtual
Você apenas fará mais uma página, copiando a de cima e colocando somente os dois nomes que faltam, para exemplificar veja no print abaixo como deve ser feito:
Selecione a linha de cima, copie e cole em baixo da outra e será criado duas linhas iguais (como mostra no print acima)
Nesses dois campos coloque, o nome da página que você criou
Então, você trocará o nome que estava escrito o nome da outra página pela a qual você criou
Na primeira parte é o nome da URL que você criou na aba Informações da página
Na segunda parte é o nome que você inseriu em Título da Página, também na parte da aba Informações da página
Assim, sua página será encontrada.
Após isso, SALVE e ATUALIZE O CACHE (clique aqui caso não saiba atualizar 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.
Como editar pagina Sobre nós (institucional) - Magento 1
Em seu painel Magento Mageshop, acesse: CMS > Páginas
Institucional > Conteúdo > Show / Hide Editor
- Botão Show /Hide Editor: Ele permite você adicionar conteúdos sem html, podendo usar os recursos, Negrito, Italic, Underline, escolhendo o tamanho da fonte...
Salve
Dica: Após esse processo, atualize o cache do Magento e recarregue seu navegador.
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.
Blocos Estáticos
Blocos Estaticos - Magento 1
No blocos estáticos, nele contém conteúdos editáveis como Banners, Paginas, WhatsApp ícone chat e Menu Rodapé Links Editáveis
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.
Atenção: Nunca use o botão Show / Hide Editor em blocos estáticos, ele altera toda linguagem em HTML original
Qualquer dúvida, estaremos no chat de suporte de segunda a sexta ( 8:00 a 12:00 horas) (13:30 a 18:00 horas ) ou por email web@tryideas.com.br
Software editor de imagem
Compressor de imagens Caesium
Link para download para Windows : https://www.fosshub.com/Caesium-Image-Compressor.html
Instale em seu desktop e execute.
Clique na pasta e localize o arquivo que gostaria de comprimir
Clique sobre o arquivo que subiu para o Caesuim
Escolha porcentagem da qualidade que deseja manter, e os pixel para comprimir
Clique em apply e escolha o local para salvar o arquivo novo, e click em comprimidor
Redimensionar imagens em massa com Fotosizer
Faça o download do software Fotosizer
Esse software serve para você redimensionar altura e largura da sua imagem facilmente, e em massa.
Faça o download no link: https://www.fotosizer.com/Download
Realize a instalação do programa em seu computador e após isso execute o mesmo. Você verá a tela abaixo, clique em continuar para acessar a versão gratuita, ou se tiver uma versão paga do mesmo pode inserir o código de ativação.
Clique em adicionar imagens
Neste passo a passo, utilizarei duas imagem para exemplo. Selecione as suas e clique em Abrir.
Para adicionar mais de uma ao mesmo tempo para edição, segure o botão Ctrl e selecione as imagens com o botão direito.
No Fotosizer, selecione a imagem que deseja editar.
Ajustar o tamanho
Nesta opção, orientaremos considerando que a sua imagem é muito grande, e que precisa ser redimensionada para um tamanho menor sem perder a proporção:
Utilize a opção AJUSTAR
Use a opção PERSONALIZADO para definir o tamanho final da sua imagem, insira no lado maior a dimensão que deseja.
(Para fotos de produtos na loja virtual recomendamos que o lado maior seja de 1200px). Você vera que ao preencher o lado maior, e der um Tab ou mudar de campo, a outra dimensão irá mudar sozinha pela proporção.
Certifique-se de que as opções abaixo estão assinaladas
- Não Ampliar se for menor:
- Manter proporção:
Procedimento para salvar
Para salvar, abra a aba Destino
Na opção Pasta de destino, escolha a pasta de destino para as novas imagens que serão geradas.
Formatação de saída, você pode manter o mesmo, ou se procura maior performance recomendamos usar JPEG.
Nome do Arquivo: Criar cópias, assim todos os arquivos gerados terão um novo nome com copy ao fim, para não confundir com os originais.
Clique em INICIAR para que o procedimento aconteça, aguarde finalizar e abra a pasta de destino para avaliar as novas imagens.
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
Magemenu e BarraTopo
Como funciona o MageMenu e o BarraTopo - Magento 1 (Open Mage)
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 editar as cores do site - Magento 1
Explicação em vídeo:
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.