Histórico da Página

Os conteúdos externos são componentes de fora do Pages, por exemplo: vídeos incorporados do YouTube, mapas, artigos, páginas de outro site, etc. Eles multiplicam os recursos do seu site.

Esse componente também pode ser usado para fazer uma integração com o aplicativo Forms, para possibilitar o uso de formulários na sua página. Isso permite que sejam incluídos formulários de contato, de avaliação ou sugestões, por exemplo.

Deck of Cards

id	Conteudo

Card

id	1
label	Exemplo de forms

Image Modified

Card

id	2
label	Exemplo de mapa

Image Modified

No Editor de páginas, ao passar o cursor sobre esse componente e acionar Image Modifiedsão apresentadas as seguintes configurações:

Conteúdo Externo

Configura as propriedades gerais do componente.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Conteúdo Externo

Configura as propriedades gerais do componente.

Painel

borderColor	#f2f2f2
bgColor	#f2f2f2

Código da âncora
Código gerado automaticamente ao incluir o componente na página, mas pode ser alterado para facilitar a identificação.

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>Com a âncora, você consegue direcionar o usuário para o ponto exato da página em que seu componente está inserido. Isso pode ser feito, por exemplo, com um item do componente <a href = "http://tdn.totvs.com/x/sY9qH" style="color: #41d262">Menu</a>, fazendo-o abrir essa âncora da página.</p>
		</div>
	</div>
</div>

URL
Endereço web do conteúdo a ser adicionado, que pode ser um formulário público, um mapa ou outro conteúdo. Contudo, atente-se que algumas URL's podem não ser carregadas por motivos de permissão.

Altura
Configura a altura da área reservada ao conteúdo externo. Caso o conteúdo seja maior do que a altura configurada nesse campo, o conteúdo deve ser automaticamente redimensionado para se adequar à altura definida.

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

Image Added

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>  • Quando for integrado ao <b>Forms</b>, é preciso atentar-se ao tamanho mínimo de altura, pois caso a altura não seja a adequada será inserido um <i>scroll</i> na página.<br>
  • Evite colocar URLs com muitos parâmetros que comprometam o comportamento padrão de uma URL. Por exemplo: para indicar a URL de um ponto no Google Maps, você pode utilizar um encurtador de URLs para simplificá-lo.<br>
  • Verifique se a URL que você deseja inserir possibilita o uso em outro contexto.<br>
  • Sempre que possível, procure inserir o conteúdo externo por último: o peso da página externa pode atrapalhar a montagem de sua página e afetar a experiência do usuário.</p>
		</div>
	</div>
</div>

Atalhos

Árvore de páginas

Versões comparadas

Versão antiga 13

Nova versão 14

Chave

Conteúdo Externo

Conteúdo Externo