No painel ir em: Módulos Avançados - Banners Slider Responsivo.
Aqui iremos ver:
- Configurações Gerais
- Gerenciar Sliders
- Gerenciar Banners
- Dúvidas/Observações
- Gerenciamento de Cache
Tutorial de dúvidas sobre a criação de Banners Aqui.
***Sempre subir a imagem já otimizada para o site, ou seja, não inserir imagem muito grande para não pesar e ou atrapalhar na navegação do cliente
***Para manter a mesma proporção dos outros banners (você pode baixar a imagem de um banner existente e verificar as suas dimensões e insira o novo banner com as mesmas dimensões.)
Atenção: banners desktop e mobile tem dimensões diferentes). Por padrão a dimensão para Desktop é: 1920 x 500 (a altura pode variar - pois depende de como o lojista quer configurar a altura do banner em sua loja) pixels. Para Mobile: é: 770px x 500px (a altura pode variar - pois depende de como o lojista quer configurar a altura do banner em sua loja) pixels. Estas informações podem variar de acordo com cada loja.
Primeiro vamos verificar as Configurações Gerais
1 - Configurações Gerais
Para habilitar/desabilitar o módulo, para incluir ou não a biblioteca Jquery, para ativar/desativar o Lazy Load (consiste em exibir os arquivos mais pesados no final do carregamento, ou apenas quando entram no campo de visão do usuário.) Largura da miniatura (usadas em carrosséis). Para que mostre o banner possa ser exibido no front-end das páginas cms, nas categorias ou páginas de produtos - necessário estar como sim para que exiba nas referidas páginas.
2 - Gerenciar/Incluir Sliders
Sliders servem para indicar onde o banner será inserido, por padrão o slider da home (desktop e mobile já estão criados).
Caso não for precisar criar/editar o slider, ir para o item 3 deste tutorial.
Será exibido os sliders existentes, para criar um novo clique em Adicionar Slider.
Aba Informações
- Informação Geral
Inserir informações como o nome do slider, definir a posição (superior ou inferior), definir a prioridade da ordem de exibição do slider (em caso de vários sliders numa mesma página), em status ( habiltar/desabilitar) o slider.
Efeito do Slider : Iniciar Animação Automaticamente (para que banner mude ou não de imagem automaticamente), Loop Slider (quando o banner estiver no último banner para que ele volte automaticamente para o primeiro banner),Pausar Slider na Navegação ou ao passar o mouse, definir o tipo de animação e a duração da animação e a direção da animação (horizonta/vertical - imagem irá carregar com efeito horizontal ou vertical) Ordem de exibição (aleatória ou definida dentro do banner). Altura suave - caso tiver banners com diferentes alturas ele irá se ajustar ao tamanho
Altura suave - caso tiver banners com diferentes alturas ele irá se ajustar ao tamanho (não ficando aquela diferença nos banners)
Exemplo: Banner 1
Banner 2
Estilo do Slider
Definir a largura máxima do slider, o tema do slider, tipo de slider(básico, carrossel "miniatura - se escolher pode definir a sua largura", slider básico com carrossel). Definir o background do banner e sua opacidade, mostrar setas de navegação (ao passar o mouse, sempre ou nunca), definir o estilo e a cor e a posição das setas e bem como da paginação
Exemplo de tema: Embose
Exemplo de tipo de slider com carrossel + slider
Você pode criar um slider para que exiba um banner em uma determinada página, ou categoria ou em determinado produto:
1 - Aba Exibir nas Páginas
Pode definir qual página vai ser exibido os banners deste slider (será listada as páginas de sua loja criada em cms - páginas)
2 - Aba Exibir em Categorias
Pode definir qual categoria vai ser exibido os banners deste slider (será listada as categorias de sua loja)
3 - Aba Exibir nas Páginas de Produtos
Pode definir qual (is) produto (s) vai ser exibido os banners deste slider (será listado os produtos de sua loja)
Aba Banners deste Slide
Lista os banners associados a este slider, bem como mostra o status do banner
Usar Inserções de Código
Para obter mais flexibilidade sobre onde carregar esse grupo de controles deslizantes, você pode usar uma tag de modelo ou um código XML de layout para adicionar esse grupo de controles deslizantes a uma página CMS ou bloco estático. A seguinte tag de modelo ou código XML pode ser usado para exibir o grupo de controles deslizantes Slider de Exemplo em sua loja virtual.
Em vez de selecionar uma página ou categoria para exibir o grupo de slider Slider de Exemplo, você pode copiar a tag de modelo ou o código XML abaixo e colá-lo no editor de conteúdo de uma página CMS ou bloco estático (para tag de modelo) ou um Layout Arquivo XML ou um campo XML de atualização de layout personalizado de uma página ou categoria do CMS (código XML de layout). Você pode alterar o parâmetro de nome de referência para posicionar o grupo onde deseja que ele seja exibido na página ou categoria do CMS.
Localização do Id do Slider
Template Tag
{{block type="responsivebannerslider/view" name="responsivebannerslider_view1" template="responsivebannerslider/slider.phtml" code="1"}}
XML Code
<reference name="content">
<block type="responsivebannerslider/view" name="responsivebannerslider_view1" template="responsivebannerslider/slider.phtml">
<action method="setCode"><code>1</code></action>
</block>
</reference>
Call Via Frontend Template File
<?php echo $this->getLayout()->createBlock("responsivebannerslider/view")->setCode(1)->setTemplate("responsivebannerslider/slider.phtml")->toHtml() ?>
Caso ainda assim não exibir pode ser que seja necessário criar uma permissão, ir em: Sistema - Permissões - Blocos
Em Block Name inserir: responsivebannerslider/view
Is Allowed - Sim
3 - Gerenciar/Incluir Banners
Será exibido a lista de banners existentes, poderá alterar o seus stats, excluir ou criar novo (clicando em Adicionar Banner)
Selecione o slider a qual este banner será associado (por padrão será exibido: se desktop ou mobile), e insira o título do banner.
Pode inserir imagem ou vídeo
Para inserir imagem pode fazer o upload da imagem, ou inseri-lá através de um link externo -
Caso for imagem de terceiros para que esta seja exibida depende da permissão de compartilhamento desta imagem
Para inserir vídeo - inserir a ID do vídeo do Yotube ou do Vimeo ( não inserir o link inteiro)
Se o banner for ter alguma url de direcionamento, você pode Inserir a url de direcionamento do banner (exemplo preenchimento abaixo),
**Não precisa ser inserido o link inteiro, se for ser link interno, basta inserir como informado acima ( não precisa da parte do domínio da loja - por se tratar de link interno)
definir se ao clicar vai abrir na mesma janela aba ou em nova janela/aba, pode também inserir descrição ao banner (exemplo de demonstração print mais abaixo)
Exemplo descrição no banner
Pode definir intervalos de dias (da data x de até a data x) para exibir o banner - Atenção caso for usar data - sempre verificar se não esta com data já expirada, ou se a data de inicio e término não são a mesma.
Definir a ordem de exibição do banner (preferência de exibição - usar valor mais próximo a zero para que o banner seja exibido como prioridade a outro banner -se houver mais de um banner - verificar também a prioridade do outro banner para que o banner seja exibido na prioridade desejada)
Em status para habilitar/desabilitar o banner.
Após o procedimento clicar em Salvar e fazer o gerenciamento de cache.
****Atenção****
4 - Dúvidas e Observações
Sempre verificar no banner:
- A data de início e término (verificar se a data não expirou, ou se ainda vai ficar vigente ou se a hora de inicio e termino não é a mesma)
- Se o banner esta habilitado
- Se a imagem não esta quebrada, se esta associado ao slider correto e se o referido slider está habilitado, e ao término da inserção do novo banner é necessário fazer o Gerenciamento de Cache.
5 - Gerenciamento de cache
Para que seja refletida qualquer alteração na plataforma, pode ser que seja efetuado o gerenciamento de cache, para fazer o gerenciamento no painel ir em: Sistema > Gerenciar Cache.
Irá clicar em: Marcar todos e em Enviar
