Histórico da Página

...

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Expandir conteúdo
Configuração de largura do componente. Se essa opção estiver habilitada. o componente será redimensionado conforme a largura da tela.

Setas
Indica se as setas devem ser apresentadas nas laterais do banner.

Paginação
Indica se devem ser apresentados os ícones de navegação na parte inferior do banner.

Máscara
Indica se o efeito máscara deve ser empregado, para passar maior destaque ao texto do banner.

Animação de transição
Indica se haverá animação ao alternar entre os slides, para dar uma sensação de movimento ao conteúdo do componente.

Intervalo de transição
Intervalo de transição automática dos slides, em milissegundos. Por padrão, o tempo é de 5000 milissegundos (5 segundos).

Altura
Configura a altura do banner. Caso as imagens sejam maiores do que a altura reservada para o banner, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida.

Espaçamento externo
Configura o espaçamento que deve ser apresentado ao redor do componente banner. O ícone Image Removed indica que pode ser definida uma medida específica para cada lado e o ícone Image Removedindica que será definida uma medida igual para todos os lados.

BannerImage Removed

Gerencia e configura os slides que devem ser apresentados. Se for incluído mais de um slide, a visualização deles é alternada automaticamente conforme o intervalo de transição.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Para gerenciar os slides do banner, são apresentadas as seguintes opções:

Image Removed Incluir slide

Image Removed Remover slide
Essa opção é apresentada ao passar o mouse sobre o quadro do slide.

O ícone Image Removed no quadro referente ao slide indica que há uma imagem associada, e o ícone Image Removedindica que o slide tem um vídeo associado. Para facilitar a identificação de cada quadro, é apresentada ainda uma miniatura da imagem. Para alterar o conteúdo, basta clicar na área desse quadro, e com isso será aberta a janela para configuração do slide.

Configuração do slide
Para cada slide é necessário configurar:

Imagem / Vídeo
Indica se o conteúdo do slide 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 slides a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo slide.

Título
Título do slide.

Subtítulo
Descrição que deve ser apresentada abaixo do título.

Cor do texto
Configura a cor do texto do slide.

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.

Espaçamento interno
Configura o espaçamento que deve ser apresentado no interior de cada slide, alterando a posição que o texto irá obedecer. O ícone Image Removed indica que pode ser definida uma medida específica para cada lado e o ícone Image Removedindica que será definida uma medida igual para todos os lados.

Adicionar item
Essa opção permite adicionar botões ao slide, 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"

>DICAS

><b>DICA!</

b> • Habilite

b><br>Habilite as setas ou a paginação quando houver mais de um slide no banner, para aumentar a navegabilidade do usuário.

• Deixe uma mensagem objetiva para o visitante, desse modo a leitura fica mais agradável atraindo a atenção para clicar. • Procure

</p>
		</div>
	</div>
</div>

Máscara
Indica se o efeito máscara deve ser empregado, para passar maior contraste e facilitar a leitura do texto.

Animação de transição
Indica se haverá animação ao alternar entre os slides, para dar uma sensação de movimento ao conteúdo do componente.

Intervalo de transição
Intervalo de transição automática dos slides, em milissegundos. Por padrão, o tempo é de 5000 milissegundos (5 segundos).

Altura
Configura a altura do banner. Caso as imagens sejam maiores do que a altura reservada para o banner, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida.

Espaçamento externo
Configura o espaçamento que deve ser apresentado ao redor do componente banner. O ícone Image Added indica que pode ser definida uma medida específica para cada lado e o ícone Image Addedindica que será definida uma medida igual para todos os lados.

BannerImage Added

...

Gerencia e configura os slides que devem ser apresentados. Se for incluído mais de um slide, a visualização deles é alternada automaticamente conforme o intervalo de transição.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Para gerenciar os slides do banner, são apresentadas as seguintes opções:

Image Added Incluir slide

Image Added Remover slide
Essa opção é apresentada ao passar o mouse sobre o quadro do slide.

O ícone Image Added no quadro referente ao slide indica que há uma imagem associada, e o ícone Image Addedindica que o slide tem um vídeo associado. Para facilitar a identificação de cada quadro, é apresentada ainda uma miniatura da imagem. Para alterar o conteúdo, basta clicar na área desse quadro, e com isso será aberta a janela para configuração do slide.

Configuração do slide
Para cada slide é necessário configurar:

Imagem / Vídeo
Indica se o conteúdo do slide 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 slides a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo slide.

Painel

borderColor	#e8f6f0
bgColor	#e8f6f0

HTML

<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>DICA!</b><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.

• Personalize a aparência de seus slides: 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>

Título
Título do slide.

Subtítulo
Descrição que deve ser apresentada abaixo do título.

Painel

borderColor	#e8f6f0
bgColor	#e8f6f0

HTML

<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>DICA!</b><br>Deixe uma mensagem objetiva para o visitante, desse modo a leitura fica mais agradável atraindo a atenção para clicar.</p>
		</div>
	</div>
</div>

Cor do texto
Configura a cor do texto do slide.

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.

Espaçamento interno
Configura o espaçamento que deve ser apresentado no interior de cada slide, alterando a posição que o texto irá obedecer. O ícone Image Added indica que pode ser definida uma medida específica para cada lado e o ícone Image Addedindica que será definida uma medida igual para todos os lados.

Adicionar item
Essa opção permite adicionar botões ao slide, 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.

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 9

Nova versão 10

Chave

BannerImage Removed

BannerImage Added