Os banners são componentes incluídos para dar destaque a algum conteúdo de imagem ou vídeo, que são alternados manual ou automaticamente.
Referente a esse componente são apresentadas as seguintes configurações:
Banner
Configura as propriedades gerais do componente.
| Painel |
|---|
Expandir conteúdo
Configuração de largura do componente. Se estiver desabilitado o container, o componente será redimensionado conforme a largura da tela, independentemente do dispositivo. Se o container foi habilitado, a largura máxima irá obedecer às medidas apresentadas nesse quadro. Setas
Indica se as setas devem ser apresentadas nas laterais dos banners. Paginação
Indica se devem ser apresentados os ícones de navegação na parte inferior dos banners. Máscara: indica se o efeito máscara deve ser empregado, para passar maior destaque ao texto do banner. Altura: configura a altura dos banners. Caso as imagens sejam maiores do que a altura reservada para os banners, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida. Intervalo de transição
Intervalo de transição automática dos banners, em milissegundos. Por padrão, o tempo é de 5000 milissegundos (5 segundos). |
Composição de banner
Gerencia e configura os banners que devem ser apresentados. Se for incluído mais de um banner, a visualização deles é alternada automaticamente conforme o intervalo de transição.
Para cada banner é necessário configurar:
| Painel |
|---|
Imagem / Vídeo
Indica se o conteúdo do banner será de imagem ou vídeo. Tanto a imagem quanto o vídeo devem ser arquivos da galeria ou do próprio dispositivo. Os formatos aceitos de imagem são: JPG, JPEG, GIF ou PNG, e de vídeo são: MP4 ou OGG. Caso o vídeo tenha duração maior que o intervalo de transição e tenham sido incluídos mais banners a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo banner. Título
Título do banner. Subtítulo
Descrição que deve ser apresentada abaixo do título. Cor do texto
Configura a cor do texto de cada banner. Alinhamento horizontal: indica o alinhamento horizontal do título e do subtítulo. Pode ser alinhado à esquerda, centralizado ou à direita. Alinhamento vertical: indica o alinhamento vertical do título e do subtítulo. Pode ser alinhado acima, centralizado ou abaixo. Adicionar item: essa opção permite adicionar botões ao banner, e esses botões direcionam para outros endereços web. Cada item tem a seguinte configuração: - URL: endereço web que será aberto ao acionar o botão.
- Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.
- Texto: configura o label do botão.
- Cor do texto: configura a cor do label do botão.
- Cor do botão: configura a cor que deve ser apresentada para o botão.
|
| Painel |
|---|
| borderColor | #e8f6f0 |
|---|
| bgColor | #e8f6f0 |
|---|
|
| HTML |
|---|
<style type="text/css">
.lms * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.lms-text-center {
text-align: center;
}
.lms-full-height {
height: 100%;
}
/* Component LMS Callout */
.lms-callout {
border: none;
padding: 0px;
display: -moz-box;
-moz-flex-flow: row wrap;
-moz-justify-content: center;
-moz-align-items: center;
display: -ms-flexbox;
-ms-flex-flow: row wrap;
-ms-justify-content: center;
-ms-align-items: center;
display: -webkit-flex;
display: -webkit-box;
-webkit-flex-flow: row wrap;
-webkit-justify-content: center;
-webkit-align-items: center;
display: flex;
flex-flow: row wrap;
justify-content: center;
align-items: center;
}
.lms-callout .lms-callout-image {
width: 24px;
}
.lms-callout .lms-callout-body {
width: calc(100% - 24px);
padding-left: 20px;
}
.lms-callout .lms-callout-citacao {
border: 0px solid;
border-left-width: 3px;
border-left-color: #f36f21;
margin: 4px;
margin-left: 25px;
padding-left: 8px;
font-size: 13px;
}
.lms-callout .lms-callout-thumb {
width: 24px;
height: 24px;
}
.lms-callout .lms-callout-text {
color: #58595b;
line-height: 1.75;
margin: 0;
}
</style>
<div class="lms">
<div class="lms-callout">
<div class="lms-callout-image">
<img class="lms-callout-thumb" src="http://tdn.totvs.com/download/thumbnails/286221066/dica.png" width="24" height="24">
</div>
<div class="lms-callout-body">
<p class="lms-callout-text"><b>DICAS!</b><br> • Habilite as setas ou a paginação quando houver mais de um slide no banner, para aumentar a navegabilidade do usuário.
<br> • Deixe uma mensagem objetiva para o visitante, desse modo a leitura fica mais agradável atraindo a atenção para clicar.
<br> • Procure imagens que representem bem o que você quer dizer. Você pode optar por inserir um vídeo também. Mas lembre-se: tanto em imagens quanto vídeos, procure utilizar resolução superior à 720p e inferior a 1080p, com boa qualidade e proporções <i>widescreen</i> (16:9). Procure ferramentas de otimização de imagem para evitar que fique pesado carregá-las dentro do slide.
<br> • Personalize a aparência dos seus banners: configure o alinhamento do conteúdo e dos botões, insira uma máscara de cor caso não tenha contraste suficiente, para facilitar a leitura do texto.</p>
</div>
</div>
</div> |
|
