|
||||
|
Buscar:
|
FAQ: |
|
|
 |
 |
|
Como alterar as imagens da vitrine de uma Loja Virtual?
O Bloco estático da vitrine é composto por 4 imagens que efetuam um movimento de slider (troca automática de banners). Para alterar as imagens, sugerimos que você veja nosso video-tutorial e depois, siga os passos abaixo: - Acesse a administração de sua loja; - Passe o mouse sobre o menu "Construtor de Páginas" e clique no sub-item "Blocos Estáticos"; - Clique no bloco de nome "Vitrine"; - No campo conteúdo, clique no ícone "Inserir/Editar Imagem" ( o ícone possui o desenho de uma árvore ) - Após, clique no ícone "Procurar" ao lado do endereço da imagem; - Clique ao lado esquerdo na pasta "banners" (caso não tenha uma pasta banners ao lado esquerdo, você pode criar uma clicando em criar diretório e colocando o nome "banners". - Na parte superior da tela, clique no botão "Browse Files"; - Localize em seu computador a imagem que deseja subir para uso na vitrine e dê um clique duplo na mesma; - Clique no botão "Upload Files"; - Repita os dois passos anteriores para as 4 imagens que deseja usar na vitrine; - Após, feche essa tela do editor de arquivos da loja; - Você voltará para a janela onde consta o campo endereço da imagems, clique em "Cancelar"; - Você estará de volta na janela " Editar Bloco 'Vitrine' ", no campo "Conteúdo", clique na opção "Mostrar/Esconder Editor"; - Localize no código da página o endereçamento das imagens utilizadas no bloco vitrine, que são por padrão: /media/banners/slider1.jpg /media/banners/slider2.jpg /media/banners/slider3.jpg /media/banners/slider4.jpg - Altere, nestes endereçamentos, o nome das imagens para o nome das suas imagens, as quais você realizou o upload anteriormente (ex.: " /media/banners/minha_imagem1.jpg ", " /media/banners/minha_imagem2.jpg ", " /media/banners/minha_imagem3.jpg " e " /media/banners/minha_imagem4.jpg "); - Após, clique em "Gravar Bloco". Abaixo segue um exemplo do script: segue exemplo do script: <div id="slider"> <div class="slidercontrolwr"> <div class="slidercontrol"><a href="#" class="aprev" title="Anterior" onclick="my_glider.previous();return false;">Previous</a> <a href="#" class="astop" title="Parar" onclick="my_glider.stop();return false">Stop</a> <a href="#" class="aplay" title="Reproduzir" onclick="my_glider.start();return false">Start</a> <a href="#" class="anext" title="Próximo" onclick="my_glider.next();return false">next</a></div> </div> <div class="scroller"> <div class="content"> <div class="section" id="section1"><a href="#" title=""><img src="/media/banners/slider1.jpg" alt="" /></a></div> <div class="section" id="section2"><a href="#" title=""><img src="/media/banners/slider2.jpg" alt="" /></a></div> <div class="section" id="section3"><a href="#" title=""><img src="/media/banners/slider3.jpg" alt="" /></a></div> <div class="section" id="section2"><a href="#" title=""><img src="/media/banners/slider4.jpg" alt="" /></a></div> </div> </div> </div> <script src="{{skin url="js/glider.js"}}" type="text/javascript"></script> <script type="text/javascript" charset="utf-8"> var my_glider = new Glider('slider', {duration:0.5, autoGlide: true, frequency: 4, initialSection: 'section1'}); </script> Pronto, agora basta verificar o resultado em sua loja! |
|
