|
 |
Favoritos |
Gestão de Painéis
Conteúdos > Gestão de Painéis
O Gestor de Painéis é um módulo do Optimanager que permite criar animações responsivas em HTML5. Estas animações são compostas por fotografias, a que chamamos telas, que rodam continuamente no site.
Em resumo, o painel é um elemento animado constituído por várias telas (fotografias), separadas por efeitos gráficos de transição, num ciclo contínuo e repetitivo. Trata-se de um elemento de elevada visibilidade que lhe permite dinamizar o seu site e promover produtos, serviços, campanhas.
Para criar um painel deve seguir os seguintes passos:
- Escolher e criar o tipo de painel pretendido (HTML5 ou BXSlider)
- Adicionar telas / fotografias ao painel
- Configurar cada tela individualmente
- Ativar o painel no Design
O site pode ter até três painéis diferentes. Dois dos painéis estão localizados na home e um nas páginas interiores. Aos painéis da home chamamos de Painel Principal ao que aparece primeiro por baixo do menu horizontal (Posição 4 na Estrutura do Site) e painel do corpo que aparece mais abaixo no topo do corpo do site (Posição 7 na Estrutura do Site).
1 - Criação do Painel
Existem dois tipos de painel sendo o mais usado como painel principal da home e páginas interiores o BXSlider. No entanto a escolha é sua, os dois são responsivos e permitem o mesmo número de telas mas existem caraterísticas diferentes em cada um deles que passamos a explicar em detalhe através dos campos disponíveis na sua configuração. De salientar que o painel BXSlider permite colocar telas com fotografia e vídeos MP4 enquanto que o HTML5 apenas permite telas com fotografia.
Painel HTML5
Conteúdos > Gestão de Paineis > Paineis HTML5
| Nome | Define o nome pelo qual vai reconhecer o painel internamente (para uso internos apenas) |
| Largura |
Largura do painel em pixeis. Deixe este campo em branco caso pretenda que o painel seja responsivo e ocupe 100% da largura da janela. Se colocar um tamanho o painel terá largura fixa e irá assumir sempre esse tamanho independentemente da largura da janela. |
| Altura | Altura do painel em pixeis. Deixe este campo em branco caso pretenda que o painel seja responsivo e ocupe sempre 100% da altura da fotografia em função da largura no campo em cima. Se colocar um valor neste campo a fotografia será cortada ou esticada em função desse valor. |
| Setas de Controlo |
Este campo pode assumir três opções relativas às setas laterais que permitem alternar manualmente entre telas.
|
| Icons de Controlo | Este campo permite ativar pequenos circulos por baixo do painel que representam cada uma das telas para selecionar diretamente cada tela. |
| Duração | Tempo em segundos em que uma tela fica parada antes de passar para a próxima tela |
| Transição | Efeito de transição. A transição é a animação que aparece quando uma tela dá lugar a outra. Pode escolher o efeito visual que mais gosta ou selecionar a opção random para o sistema ir alternando os efeitos de forma automática. |
| Tempo | Campo onde define a velocidade de transição. Ou seja se pretende uma animação mais curta ou mais longa. Para referência considere os valores 1 muito rápido e 50 muito lento. |
| Nº de Colunas | Número de colunas em que é dividida a imagem da tela quando é aplicada a animação da transição entre telas. |
| Nº de Linhas | Número de linhas em que é dividida a imagem da tela quando é aplicada a animação da transição entre telas. |
| Estado | Selecione para ativar o painel e o tornar visível. |
Painel BXSlider
Conteúdos > Gestão de Paineis > Paineis BXSlider
| Nome | Define o nome pelo qual vai reconhecer o painel internamente (para uso internos apenas) |
| Transição |
Campo onde seleciona a forma como o painel alterna entre telas
|
| Efeito de Transição | A transição é a animação que aparece quando uma tela dá lugar a outra. Pode escolher o efeito visual que mais gosta. |
| Multi-Slide | Indique se pretende ter várias telas simultaneamente visíveis. Se Inativo apenas irá aparecer uma tela de cada vez. |
| Comprimento do Slide | Medida em pixeis correspondente a cada uma das telas visíveis. Corresponde à largura da tela. |
| Mínimo de Slides | Número mínimo de telas visíveis simultaneamente |
| Máximo de Slides | Número máximo de telas visíveis simultaneamente |
| Margem do Slide | Distância em pixeis entre as telas visíveis |
| Setas de Controlo |
Este campo pode assumir três opções relativas às setas laterais que permitem alternar manualmente entre telas.
|
| Icons de Controlo | Este campo permite ativar pequenos círculos por baixo do painel que representam cada uma das telas para selecionar diretamente cada tela. |
| Duração | Tempo em segundos em que uma tela fica parada antes de passar para a próxima tela |
| Deslocamento | Selecione como pretende que o deslocamento entre telas aconteça, na horizontal, vertical ou fade. |
| Tempo | Campo onde define a velocidade de transição. Ou seja se pretende uma animação mais curta ou mais longa. Para referência considere os valores 1 muito rápido e 2000 muito lento. |
| Estado | Selecione para ativar o painel e o tornar visível. |
2 - Adicionar Telas do Painel / Fotografias
Conteúdos > Gestão de Painéis > Fotografias
Para adicionar telas aos painéis deve entrar na opção Fotografias onde encontra um espaço para gestão de painéis e de telas conforma mostramos na imagem em baixo:
No campo superior esquerdo existe um menu chamado Painéis onde encontra todos os painéis que criou e onde deve selecionar o painel que pretende gerir. Do lado direito encontra botões para criar painéis HTML5 e BXSlider, por baixo existe um botão para editar o painel selecionado no menu. Tem ainda um botão chamado Design - Ativar Painéis que iremos falar mais tarde pois está associado ao último passo.
Após selecionar o painel no menu Painéis deve clicar no botão Escolher Ficheiro no campo Fotografia para importar a fotografia que pretende usar como tela no painel. Deve clicar no botão verde para confirmar a importação. Depois de importada, a fotografia aparece automaticamente na zona inferior onde aparecem as duas fotografias do exemplo em cima. Pode importar as fotografias que desejar no entanto, quanto mais fotografias mais pesada ficará a animação do painel, o que pode condicionar o bom desempenho da página. Importe fotografias com moderação.
Para painéis que ocupem 100% da largura da janela recomendamos que use fotografias com pelo menos 1920 pixeis de largura. Para obter o melhor desempenho possível as fotografias devem ser compactadas, usando por exemplo o programa FastStone, e ocupar menos de 300Kb cada uma.
Por baixo de cada fotografia aparecem 5 botões cuja função explicamos em baixo:
1 - Setas que permitem alterar a ordem pela qual aparecem as telas
2 - Botão para editar a tela e adicionar um link ou texto
3 - Remover a tela
4 - Preview da fotografia da tela
Ainda neste bloco é identificado em cima o nome do ficheiro e a ordem da tela no painel.
3 - Configurar cada tela individualmente
Para configurar cada uma das tela deve clicar no botão 2 (ver fotografia em cima). Em baixo apresentamos os campos que pode personalizar em cada tipo de painel:
Telas do Painel BXSlider:
| Link e Target | Cada tela pode ter um link, pode por exemplo apontar uma tela para um produto, lista de produtos, ou qualquer página do seu site. É possível ainda especificar se o link abre nas mesma janela ou numa nova janela através do campo Target. |
| Largura e Altura | Estes campos são opcionais e permitem indicar o tamanho exato da fotografia na tela. Esta informação tem que ver apenas com otimização SEO e melhorar o CLS do site. |
| Texto | Permite aplicar uma barra sobre o rodapé da tela com o texto que colocar neste campo. |
As telas do painel BXSlider podem conter vídeos em formato MP4, para isso basta que em vez de fotografias importe ficheiros MP4. Os seguintes campos disponíveis para cada tela permite formatar a apresentação do vídeo.
| Margens | As margens Superior, Esquerda e Direita permitem aplicar um espaço em torno do vídeo caso seja necessário. |
| Formatar Letra | É possível colocar texto sobre o vídeo. Esse texto é introduzido no campo Texto referido em cima. Nos campos Tipo de Letra, Tamanho, Cor da Letra, Efeito e Alinhamento formata o texto para o tornar apelativo e legível durante a reprodução do vídeo. |
| Altura Vídeo | Por vezes é necessário especificar a altura do vídeo para forçar a sua integração no painel. Este campo permite-lhe especificar a altura do vídeo em pixeis. |
Telas do Painel HTML 5
| Link e Target | Cada tela pode ter um link, pode por exemplo apontar uma tela para um produto, lista de produtos, ou qualquer página do seu site. É possível ainda especificar se o link abre nas mesma janela ou numa nova janela através do campo Target. |
| Texto | Permite aplicar uma barra sobre o rodapé da tela com o texto que colocar neste campo. |
4 - Ativar o Painel no Design
Nesta altura já tem o painel criado e as respetivas telas configuradas, faltando apenas identificar no Design a referência do painel que pretende ativar. No canto superior direito encontra o botão Design > Ativar Paineis que aponta diretamente para o opção Design onde define o painel principal da Home e o painel principal das páginas interiores. Se preferir pode aceder a esta opção em Design > Editar Design > Grupo Superior > Painéis onde encontra dois campos para configurar os painéis que pretende ativar no seu site. Se deixar em branco o sistema ignora o painel, ou seja, se não desejar, por exemplo, ter painel nas páginas interiores, basta deixar o segundo campo em branco.
Para ativar o painel segundário da home presente no corpo do site deve entrar em: Design > Editar Design > Corpo Principal > Painel do Corpo na Home
