Na tela inicial são apresentadas todas as possibilidades de gerenciamento das páginas. As páginas presentes nessa tela são centralizados centralizadas por empresa e ficam disponíveis em um único ponto do aplicativo.
São separadas entre três listas:
- Últimos editados
- Em edição
- Publicados
Abaixo estão listadas as ações disponíveis no Pages:
Adicionar página
01. Na Central de Pagestela inicial, acionar Nova página.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Será aberta uma janela com opções de templates, e o usuário deve optar por configurar sua página a partir de um template ou de uma página em branco. |
02. Selecionar a opção desejada e acionar Continuar.
03. Preencher as informações da janela Configurações da página.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
As informações solicitadas são: Nome da página
Título que será apresentado na página e na aba do browser. Código da página
Endereço URL para acessar a página em questão. Ao escrever o título, esse campo já é automaticamente preenchido, mas pode ser alterado conforme desejado. | 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> • Forneça uma URL que seja facilmente interpretável pelo usuário, utilizando palavras chaves. Por exemplo: guia-da-marca.<br> • Complemente as URLs com títulos para incentivar o usuário a clicar neles.<br> • Utilize palavras curtas, porém superiores a três caracteres. Evite utilizar caracteres especiais (com exceção de hífen para separar as palavras). </p>
</div>
</div>
</div> |
|
Ícone
Ícone que será apresentado na aba do browser, quando a página for visualizada ou estiver sendo editada. Deve ser uma imagem com o formato ICO, com tamanho de 48x48 px. Caso não seja definido um ícone, será apresentado por padrão o logo do Pages. | 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>Muitos usuários navegam com várias guias abertas, então sua página precisa se diferenciar! Utilize um logo personalizado para o seu site.</p>
</div>
</div>
</div> |
|
|
04. Acionar Concluir.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Após a inclusão da página, você precisa editá-la utilizando o Construtor de Pages e então publicá-la, para que ela possa ser acessada. Caso você tenha criado a página a partir de um template, os componentes referentes a esse template já serão disponibilizados no momento da edição. |
Editar página
01. Na Central de Pages tela inicial, localizar a página a ser alterada.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Será aberta uma nova guia para alteração da página. As instruções para edição da página estão localizadas no help Construtor de Pages. | 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>Você pode usar um atalho para o Construtor de Pages, basta clicar em qualquer área do quadro referente à página.</p>
</div>
</div>
</div> |
|
|
Publicar página
01. Na Central de Pages tela inicial, localizar a página a ser publicada.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Editar.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Com isso, será aberta uma nova guia com o Construtor de Pages. | 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>Você pode usar um atalho para o Construtor de Pages, basta clicar em qualquer área do quadro referente à página.</p>
</div>
</div>
</div> |
|
|
03. Na guia aberta, acionar a opção Publicar, localizada no canto superior direito da tela.
04. Na janela de confirmação, acionar Publicar.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Após a publicação da página, ela estará disponível para ser acessada publicamente, ou seja, com o link informado, sem a necessidade de autenticação. Para saber como obter o link de acesso, consulte o item Compartilhar. |
Visualizar página
Essa opção é disponibilizada apenas para páginas já publicadas.
01. Na Central de Pages tela inicial, localizar a página a ser visualizada.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Visualizar.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Será aberta uma nova guia para visualização da página. Ela só poderá ser visualizada se já tiver sido publicada. |
Configurar página
01. Na Central de Pages tela inicial, localizar a página a ser configurada.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Configurar.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Será aberta a janela de Configuração da página, com as mesmas informações solicitadas na ação de Adicionar página. Contudo, uma vez gerado o link da página pública na inclusão da página, esse link não pode mais ser alterado. |
Compartilhar página
Essa opção é disponibilizada apenas para páginas já publicadas.
Veja a imagem
01. Na Central de Pages tela inicial, localizar a página a ser compartilhada.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Compartilhar URL.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
Ao acionar essa opção, será aberta uma janela para apresentar a URL configurada para a página pública. |
03. Acionar a opção Copiar link para copiar a URL para a área de transferência.
| 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>Lembrando que as páginas criadas no aplicativo Pages são <b>responsivas</b>, ou seja, se adaptam para trazer a melhor visualização independentemente do dispositivo de acesso.</p>
</div>
</div>
</div> |
|
Remover página
01. Na Central de Pages tela inicial, localizar a página a ser removida.
02. Acionar o ícone referente à página, localizado no canto superior direito do quadro, logo depois acionar a opção Excluir.
03. Na janela de confirmação de exclusão, selecionar Excluir.
| Painel |
|---|
| borderColor | #f2f2f2 |
|---|
| bgColor | #f2f2f2 |
|---|
|
A página será removida. Com isso, não poderá mais ser acessada por nenhum usuário. |
