Falando de
...
páginas...
Image Modified
...
O editor possibilita a construção das páginas de forma simples e rápida, com o recurso de arrastar e soltar para incluir os componentes que devem ser apresentados. Além disso, apresenta configurações para ordenação e personalização de cada componente.
...
| Painel |
|---|
| borderColor | #ebf8ff |
|---|
| bgColor | #ebf8ff |
|---|
|
| 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/nota.png" width="24" height="24">
</div>
<div class="lms-callout-body">
<p class="lms-callout-text"><b>NOTA:</b><br>Não esqueça de gravar as alterações efetuadas na página - para isso utilize o botão <b>Salvar</b>. A página fica em rascunho até que se acione a opção <b>Publicar</b>, no canto superior direito da tela, para torná-la acessível publicamente por meio da URL definida.</p>
</div>
</div>
</div> |
|
Visualizar os componentes
...
01. Para visualizar os componentes disponíveis, acione o botão Componentes web, localizado no canto esquerdo, abaixo do título da página.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
O menu de Componentes web será expandido, permitindo visualizar os componentes disponíveis. É possível localizar um componente específico a partir da busca localizada na parte superior. Confira nos itens abaixo as configurações de cada componente. |
Adicionar componente à página
...
Assista ao vídeo
01. Para adicionar um componente, acione o botão Componentes web para expandir os componentes.
...
03. Clique no componente e arraste-o até o ponto da página em que ele deve ser apresentado.
Ações sobre os componentes
...
Quando o componente está adicionado na página, ao passar o mouse sobre ele, são apresentadas as seguintes opções:
...
| 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>DICA!</b><br>Se você criou a página a partir de um <a href = "http://tdn.totvs.com/x/_dGQHQ" style="color: #41d262">template</a>, você também consegue utilizar a opção <b>Configurar componente</b> <img src="http://tdn.totvs.com/download/attachments/476745461/flaticon-settings.png" width="20" height="20"> para acessar a configuração de cada um dos componentes, e com isso personalizar a página da forma que desejar.</p>
</div>
</div>
</div> |
|
Configurações na edição da página
...
Na edição de uma página, também é possível abrir suas configurações para definição de novas configurações.
...
03. Para salvar as definições de mediador que foram editadas na página, clique no editor de páginas novamente. Logo após acionar Salvar, ao lado direito do editor.
Visualizar rascunho da página
...
Para visualizar a página em modo de rascunho, siga os passos abaixo:
...