ATENÇÃO – As dimensões utilizadas nos templates disponibilizados são modelos. Tais propriedades podem ser alteradas nos arquivos e devem seguir as especificações determinadas pelo portal onde o banner será veiculado.
- Animações em GWD, Adobe Edge, e demais ferramentas de animação não são compatíveis.
1. Faça o download do template no link abaixo:
***Apenas modificar arquivos que estão sendo referenciados no tutorial, não alterar outras pastas e arquivos ou excluir elementos do template.***
Painel fechado
Se as especificações do portal tiver dimensões diferentes do template, altere conforme os itens abaixo.
3.1. No arquivo index.html da raiz do diretório principal insira o código HTML no local indicado.
3.2. No arquivo style.css do diretório “styles” altere as dimensões da div #banner. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.
3.3. No arquivo script.js do diretório “scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.
Painel aberto
4.1. No arquivo index.html do diretório “panels/default” insira o código HTML no local indicado. Altere as informações de altura e largura do painel.
4.2. No arquivo style.css do diretório “panels/default/styles” altere as dimensões da div #container. Mantenha 2pxs a menos na altura e largura para que a borda complete a dimensão total. Insira o estilo da sua animação.
4.3. No arquivo script.js do diretório “panels/default/scripts” insira a função que inicia a animação no local indicado, isso é necessário para que não ocorra problemas com exibição do banner em branco.
Formato com Vídeo
5.1 Para montar um formato com vídeo, é necessário ter efetuado o download do template e ter feito os passos acima.
5.2 No arquivo index.html do diretório “panels/default” existe um codigo HTML pronto que efetua a chamada do vídeo.
5.3 Para que o vídeo funcione os arquivos deverão estar dentro do diretório “panels/default/videos” em dois formatos MP4 e WEBM, para alterar o vídeo que é exibido no banner basta substituir os arquivos, como no exemplo abaixo:
5.4 Depois de efetuar a inserção do vídeo vá ao diretorio “panels/default/styles/” e altere o arquivo “style.css” de acordo com o tamanho e posicionamento desejado.
