...
Referente a esse componente são apresentadas as seguintes configurações:
Banner
...
Configura : configura as propriedades gerais do componente.
| Painel |
|---|
| Habilitar container?: configuração 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
Indica se as setas devem ser apresentadas nas laterais dos banners.
Bullets: indica se as bullets devem ser apresentadas 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
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 : adiciona, remove ou 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 Conteúdo: 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
Título do banner.
Subtítulo : descrição
Descrição que deve ser apresentada abaixo do título.
Cor do texto : configura
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 osa <i>bullets</i>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> |
|
