Os conteúdos externos são componentes de fora do Pages Beta, por exemplo: vídeos do YouTube, 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 recurso de 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.
...
Referente a esse componente são apresentadas as seguintes configurações:
Conteúdo Externo
...
Configura : configura as propriedades gerais do componente.
| Painel |
|---|
URL : endereço
Endereço web do conteúdo
da a ser adicionado. Algumas URL's podem não ser carregadas por motivos de permissão. Altura : configura
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.
Habilitar container?:
Expandir conteúdo
Configuração de largura do componente. Se estiver desabilitado o container, essa opção estiver habilitada. 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. |
| 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> |
|