Personalizando os mini banners
Agora, todos templates gratuitos da iSET foram padronizados em relação aos mini banners na página principal. Nesta lição, vamos aprender como modificar esse tipo de banner e personalizá-los.
Imagem do banner
Vamos começar pela edição da imagem dos banners? Bom, o tamanho ideal da imagem é 720 x 800 px no banner do topo e 1240 x 540 px no banner do rodapé. Tenha certeza que a imagem que você deseja subir esteja nestas dimensões.
Depois disso, vá em “Ferramentas >> Gerenciador de
arquivos” para que possamos subir a imagem desejada no sistema de sua loja virtual.
Uma nova página irá abrir, crie uma nova pasta para as suas imagens.
Dentro da pasta, clique no primeiro ícone na barra superior para fazer o upload da sua imagem.
Após isso, volte para o Gerenciador de Arquivos, clique com o botão direito do mouse sobre a imagem, clique em “Mostrar URL” e então copie esta URL.
Como personalizar banner do topo
Entre no painel de controle da sua loja virtual e clique em: "
Layout>> Banners
".
Clique no lápis amarelo na opção "
Mini banner topo
" para começar a alterar.
Mude o
nome do banner
se desejar. Selecione a
opção "HTML >> Código-Fonte".
Caso deseje personalizar ou fazer qualquer alteração no seu banner de topo
, também há duas opções! A primeira é pedir ajuda ao nosso suporte,
como dito anteriormente.
A segunda opção também é para aqueles que conhecem mais sobre código HTML.
Atenção!
Cuidado ao fazer a edição do Código-Fonte! Caso tenha qualquer dúvida, não hesite em entrar em contato com o nosso time de suporte.
Para trocar as imagens do banner, vá até as
linhas 35, 37 e 39
do código e troque o link das imagens padronizadas para o link das imagens que desejar.
Linha 35:
<div class="col-4"><a href="
" title=""><img alt="banner" src="https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao.png
" /></a></div>
Cole a URL da sua imagem entre “
src=
” e “
/></a></div>
” no lugar da URL padrão: “https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao.png″
Linha 37:
<div class="col-4"><a href="
" title=""><img alt="banner" src="
https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao_-_co_pia.png
" /></a></div>
Cole a URL da sua imagem entre “
src=
” e “
/></a></div>
” no lugar da URL padrão: “https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao_-_co_pia.png″
Linha 39:
<div class="col-4"><a href="
" title=""><img alt="banner" src="
https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao_-_co_pia_2.png
" /></a></div>
Cole a URL da sua imagem entre “
src=
” e “
/></a></div>
” no lugar da URL padrão: “https://cdn.iset.io/assets/54235/arquivos/banner/mini_banner_padrao_-_co_pia_2.png″
Depois disso, faça as demais configurações do banner.
“Programado para”: se uma programação foi definida, o banner será ativado na data informada. Todos os banners programados são marcados como desativados até que a data informada tenha chegado e então serão marcados automaticamente como ativos;
“Expira em”: se não desejar que o banner expire automaticamente em uma data específica, deixe o campo em branco;
“Categorias”: você pode selecionar em qual categoria o banner deverá ser exibido;
“Posicionamento do Banner”: define o posicionamento na tela do banner;
“Tags/Keywords”: se quiser, é possível criar tags para os seus banners. Porém, a principal função das tags é selecionar onde o banner irá aparecer na loja virtual.
Em seguida, salve as alterações no botão verde "
Atualizar
" e aplique o cache, clicando na nuvem laranja, e com isso, a alteração do banner será feita.
Outro modo interessante de mudar a imagem do banner é abrindo a
opção "HTML".
Clique duas vezes sobre a imagem com o botão esquerdo do mouse.
Na aba que abrir, clique em "
Localizar no servidor".
Selecione a imagem desejada e clique no botão "
OK
". Em seguida, salve as alterações no botão verde "
Atualizar
".
Caso queira fazer o redirecionamento do banner, clique com o botão direito do mouse sobre o banner. Selecione a opção "
Editar link
".
Edite o "
Protocolo"
, caso necessário, e coloque o novo link desejado. Clique em "
OK
" e salve as alterações no botão verde "
Atualizar
".
Como personalizar banner do rodapé
Entre no painel de controle da sua loja virtual e clique em: "
Layout >> Banners
".
Clique no lápis amarelo na opção "
Mini banner rodapé
" para começar a alterar.
Mude o
nome do banner
se desejar. Selecione a
opção "HTML >> Código-Fonte".
Caso deseje personalizar ou fazer qualquer alteração no seu banner de rodapé
, há duas opções! A primeira é a mais simples: pedir ajuda ao nosso suporte
!
A segunda opção é para aqueles que conhecem mais sobre código HTML.
Antes de começarmos é importante lembrar que toda a edição de banners é via código HTML
. Você não deverá ter dificuldade em realizar as edições se seguir todos os passos deste tutorial. Entretanto, caso haja dúvidas, não hesite em entrar em contato com nosso setor de suporte.
Para trocar as imagens do banner, vá até as linhas 4 e 6 do código e troque o link das imagens padronizadas para o link das imagens que desejar.
Linha 04:
<div class="col-6"><a href="
" title=""><img alt="banner" src="
https://cdn.iset.io/assets/54235/arquivos/banner/banner_rodape_padrao.png
" /></a></div>
Cole a URL da sua imagem entre “
src=
” e “
/></a></div>
” no lugar da URL padrão: “https://cdn.iset.io/assets/54235/arquivos/banner/banner_rodape_padrao.png″
Linha 06:
<div class="col-6"><a href="
" title=""><img alt="banner" src="
https://cdn.iset.io/assets/54235/arquivos/banner/banner_rodape_padrao_-_co_pia.png
" /></a></div>
Cole a URL da sua imagem entre “
src=
” e “
/></a></div>
” no lugar da URL padrão: “https://cdn.iset.io/assets/54235/arquivos/banner/banner_rodape_padrao_-_co_pia.png″
Depois disso, faça as demais configurações do banner.
“Programado para”: se uma programação foi definida, o banner será ativado na data informada. Todos os banners programados são marcados como desativados até que a data informada tenha chegado e então serão marcados automaticamente como ativos;
“Expira em”: se não desejar que o banner expire automaticamente em uma data específica, deixe o campo em branco;
“Categorias”: você pode selecionar em qual categoria o banner deverá ser exibido;
“Posicionamento do Banner”: define o posicionamento na tela do banner;
“Tags/Keywords”: se quiser, é possível criar tags para os seus banners. Porém, a principal função das tags é selecionar onde o banner irá aparecer na loja virtual.
Em seguida, salve as alterações no botão verde "
Atualizar
" e aplique o cache, clicando na nuvem laranja, e com isso, a alteração do banner será feita.
Outro modo interessante de mudar a imagem do banner é abrindo a
opção "HTML".
Clique duas vezes sobre a imagem com o botão esquerdo do mouse.
Na aba que abrir, clique em "
Localizar no servidor".
Selecione a imagem desejada e clique no botão "
OK
". Em seguida, salve as alterações no botão verde "
Atualizar
".
Caso queira fazer o redirecionamento do banner, clique com o botão direito do mouse sobre o banner. Selecione a opção "
Editar link
".
Edite o "
Protocolo"
, caso necessário, e coloque o novo link desejado. Clique em "
OK
" e salve as alterações no botão verde "
Atualizar
".
