Árvore de páginas

Versões comparadas

Chave

  • Esta linha foi adicionada.
  • Esta linha foi removida.
  • A formatação mudou.
Aviso
titleAtenção!

A solução TOTVS Fluig No-Code será descontinuada em 30/10/2024 e não estará mais disponível para acesso a partir dessa data.

Mais informações podem ser obtidas em Descontinuação TOTVS Fluig No-Code.

Dica
titleDica!

Encontre os recursos existentes nos aplicativos TOTVS Fluig No-Code na nova solução que já está disponível: o TOTVS Collab.

Assim, você pode continuar usufruindo de todos os benefícios da gestão de projetos e tarefas, além de promover a colaboração no seu time!


Índice

Índice

true
Índice
outline
style
exclude.*ndicenone


Falando

...

de páginas...Image Added

O desenhador de páginas permite ao usuário configurar os elementos que devem ser apresentados na página, no que se refere à ordenação e às propriedades de cada elemento.

É possível adicionar à página os seguintes componentes web: Banner, Rodapé, Seção, Conteúdo externo, Parágrafo, Galeria de imagens, Menu e Conteúdo do texto.

Nota

 Cada alteração na página é gravada automaticamente a cada 15 segundos. Essas alterações ficam em rascunho até que o usuário acione a opção "Publicar", no canto superior direito da página, para tornar a página acessível publicamente por meio da URL definida.

Image Removed

Componentes web

Image RemovedComponentes web: Para adicionar um componente, basta acionar esse botão para expandir os componentes, clicar no componente desejado e arrastá-lo até o ponto da página em que ele deve ser apresentado.

Quando o componente está adicionado na página, ao passar o mouse sobre ele, são apresentadas as seguintes opções:

Image RemovedMover componente para baixo

Image RemovedMover componente para cima

Image RemovedConfigurar componente (as opções de configuração variam de acordo com o tipo de componente)

Image RemovedRemover componente da página

Dica
titleDica!

Se você criou a página a partir de um template, você também consegue utilizar a opção Configurar componenteImage Removed para acessar a configuração de cada um dos componentes, e com isso personalizar a página da forma que desejar.

A seguir serão apresentados os componentes que podem ser incluídos nas páginas, bem como suas configurações.

Parágrafo

Veja a imagem.Image Removed Veja a imagem

Esse componente possibilita incluir na sua página um título e um parágrafo de texto, com a opção de mostrar uma imagem e botões. Referente a esse componente são apresentadas as seguintes configurações:

Geral: configura as propriedades gerais do parágrafo.

Painel
  • Título: título do parágrafo.
  • Descrição: descrição que deve ser apresentada abaixo do título.
  • Cor do texto: configura a cor do texto do parágrafo.
  • Habilitar container?: configuração de largura do componente. Se estiver desabilitado o container, 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.
  • Mostrar imagem?: indica se deve ser apresentada a imagem referente ao parágrafo.
  • Alinhar imagem à direita?: indica se a imagem será alinhada à direita. Por padrão, ela é alinhada à esquerda.
  • Imagem: imagem que deve ser apresentada no parágrafo. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.

Itens: insere, remove ou configura os itens que devem ser apresentados no parágrafo. 

Painel

Adicionar item: essa opção permite adicionar ícones ao parágrafo, e esses itens direcionam para outros endereços web. Cada item tem a seguinte configuração:

  • Título: configura o título do link.
  • URL: endereço web que será aberto ao acionar o item.
  • Cor do texto: configura a cor do texto do item.
  • Cor do fundo: configura a cor que deve ser apresentada para o item.
  • Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.

Seção

Veja a imagem.Image Removed Veja a imagem

Esse componente possibilita a divisão da página em porções de conteúdo, chamadas de seção. Cada seção é composta por uma imagem, que pode ter um título e uma descrição. Referente a esse componente são apresentadas as seguintes configurações:

Seção: configura as propriedades gerais do componente.

Painel
  • Imagem de fundo: imagem que deve ser apresentada como fundo na seção. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Título: título da seção.
  • Tamanho do título: tamanho da fonte para o título da seção.
  • Subtítulo: descrição que deve ser apresentada abaixo do título.
  • Tamanho do subtítulo: tamanho da fonte para o texto seção.
  • Cor do texto: configura a cor do texto da seção.
  • Altura: altura da página que será dedicada a essa seção.
  • Alinhamento: indica o alinhamento do título e do subtítulo. Pode ser alinhado à esquerda, centralizado ou à direita.
  • Parallax: indica se o efeito parallax deve ser empregado para paralisar a imagem enquanto a página está sendo percorrida.
  • Máscara: indica se o efeito máscara deve ser empregado, para passar maior destaque ao texto da seção.
  • Habilitar container?: configuração de largura do componente. Se estiver desabilitado o container, 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.

Banner

Veja a imagem.Image Removed Veja a imagem

Os banners são componentes incluídos para dar destaque a algum conteúdo de imagem ou vídeo, que são alternados manual ou automaticamente. Referente a esse componente são apresentadas as seguintes configurações:

Banner: configura as propriedades gerais do componente.

Painel
  • Setas: indica se as setas devem ser apresentadas nas laterais dos banners.
  • Bullets: indica se as bullets devem ser apresentadas na parte inferior dos banners.
  • Máscara: indica se o efeito máscara deve ser empregado, para passar maior destaque ao texto do banner.
  • Altura: configura a altura dos banners. Caso as imagens sejam maiores do que a altura reservada para os banners, elas são automaticamente redimensionadas para se adequarem à altura definida. Caso a imagem seja muito pequena, ela pode ficar distorcida.

Composição de banner: adiciona, remove ou configura os banners que devem ser apresentados.

Painel

 Se for incluído mais de um banner, a visualização deles é alternada automaticamente a cada 5 segundos. Para cada banner é necessário configurar:

  • Conteúdo: indica se o conteúdo do banner 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 mais de 5 segundos de duração e tenha mais banners a apresentar, a visualização do vídeo será interrompida, para dar lugar ao próximo banner.
  • Título: título do banner.
  • Subtítulo: descrição que deve ser apresentada abaixo do título.
  • Cor do texto: configura a cor do texto de cada banner.
  • Alinhamento: indica o alinhamento do título e do subtítulo. Pode ser alinhado à esquerda, centralizado ou à direita.
  • Adicionar item: essa opção permite adicionar botões ao banner, 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.

Galeria de imagens

Veja a imagem.Image Removed Veja a imagem

Esse componente cria uma galeria de imagens, que pode ter um título e uma descrição, além da possibilidade de configurar uma máscara de cor sobre cada imagem. Referente a esse componente são apresentadas as seguintes configurações:

Geral: configura as propriedades gerais da galeria.

Painel
  • Título: título da galeria.
  • Subtítulo: descrição que deve ser apresentada abaixo do título.
  • Espaços: indica se devem ser apresentados espaços ao redor das imagens.
  • Máscara: indica se o efeito máscara deve ser empregado nas imagens.
  • Colunas: quantas colunas de imagens devem ser apresentadas.

Imagens: insere, remove ou configura as imagens que devem ser apresentadas na galeria. 

Painel

Clique no botão Image Removed para adicionar novas imagens. Cada imagem tem a seguinte configuração:

  • Legenda: descrição que deve ser apresentada ao abrir a visualização da imagem na galeria.

Menu

Veja a imagem.Image Removed Veja a imagem

Esse componente cria um menu com opções, para que o conteúdo da sua página fique mais organizado e acessível. Referente a esse componente são apresentadas as seguintes configurações:

Geral: configura as propriedades gerais do componente.

Painel
  • Logotipo: imagem que deve ser apresentada no logotipo do menu. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Link do logotipo: endereço a ser acessado ao clicar na logo.
  • Cor do texto: configura a cor do texto do menu.
  • Realce do texto: configura a cor que deve ser apresentada no texto ao passar o mouse sobre o item de menu.
  • Cor do fundo: configura a cor que deve ser apresentada no fundo do menu.
  • Realce do fundo: configura a cor de fundo que deve ser apresentada ao passar o mouse sobre o menu.
  • Alinhar a direita?: indica se os itens de menu devem ser alinhados à direita. Por padrão, eles são alinhados à esquerda.
  • Habilitar container?: Configuração de largura do componente. Se estiver desabilitado o container, 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.
  • Tamanho do texto: tamanho da fonte dos itens de menu.

Itens: insere, remove ou configura os itens que devem ser apresentados no menu. É possível inserir até 10 itens de menu.

Painel

Clique no botão Image Removed para adicionar novos itens. Cada item tem a seguinte configuração:

  • Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.
  • URL: endereço web que será aberto ao acionar o item.
  • Título: configura o label do item.

...

Veja a imagem.Image Removed Veja a imagem

Diferentemente do parágrafo, esse componente possibilita incluir diversos textos, que são apresentados lado a lado horizontalmente, com o limite de 4 conteúdos por linha. Cada conteúdo de texto pode mostrar uma imagem e botões. Referente a esse componente são apresentadas as seguintes configurações:

Conteúdo de texto: configura as propriedades gerais do componente.

Painel
  • Habilitar container?: Configuração de largura do componente. Se estiver desabilitado o container, 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.
  • Alinhamento: indica o alinhamento de todos os textos. Pode ser alinhado à esquerda, centralizado ou à direita.
  • Conteúdo: indica se o conteúdo do texto será com ou sem imagem. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Imagem de fundo como ícone: indica se deve ser habilitado o recurso para ajustar a imagem em formato de ícone, para evitar que ela tenha cortes ou distorções.
  • Título: título da galeria.
  • Texto: conteúdo de texto que deve ser apresentado abaixo do título.
  • Adicionar item: essa opção permite adicionar botões ao conteúdo de texto, 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.

...

As páginas são os elementos que formam os portais. O editor possibilita a construção de páginas de forma simples e rápida, com o recurso de arrastar e soltar para incluir os componentes que serão exibidos. Além disso, apresenta configurações para ordenação e personalização de cada componente. 

As páginas criadas no TOTVS Pages são responsivas, ou seja, se adaptam para oferecer a melhor visualização de acordo com o dispositivo de acesso.

Image Added


Criar página no portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, clique em Criar página.

02. Insira as informações solicitadas para a página que fará parte do portal.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Nome da página interna
Nome que será atribuído à página do portal.

Estado
titleExemplo:

Sobre nós, Início, Fale conosco.

Endereço da página
URL da página, ou seja, é a URL que será utilizada para acessar essa página específica do portal. Ao preencher o nome da página, esse campo já é automaticamente preenchido, mas pode ser alterado se desejado. Depois de criar a página, mesmo que o nome dela seja alterado, a URL permanecerá a que foi definida no momento da sua criação.

Painel
borderColor#fdf7e8
bgColor#fdf7e8
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/importante.png" width="24" height="24">
		</div>
		<div class="lms-callout-body">
			<p class="lms-callout-text"><b>IMPORTANTE!</b><br>A URL da página deve ser única por empresa, ou seja, não é possível ter páginas com a mesma URL em portais diferentes na mesma empresa.</p>
		</div>
	</div>
</div>

03. Clique em Concluir.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

A página criada será listada logo abaixo da página inicial do portal. Para editá-la e configurar seus componentes, siga os passos descritos em Editar página do portal.


Buscar página do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, insira o nome da página desejada no campo de busca localizado na parte superior.

02. Visualize as páginas que correspondem aos termos inseridos.


Filtrar páginas do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, clique na setaImage Addedlocalizada acima da página inicial.

02. Selecione a situação das páginas desejada para filtrá-las.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

As opções disponíveis são:

  • Todas: é a opção selecionada por padrão. São exibidas todas as páginas existentes no portal.
  • Em rascunho: são exibidas apenas as páginas do portal que estão em modo rascunho, ou seja, que estão sendo editadas.
  • Publicadas: são exibidas apenas as páginas do portal que já foram publicadas e estão disponíveis para acesso externo.


Visualizar página do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página que deseja visualizar.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Visualizar.

04. Veja a página do portal na nova guia que foi aberta.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Uma mensagem indicando que a visualização está no modo rascunho é exibida.

É possível editar a página clicando na opção Editar página exibida no final da mensagem.


Editar página do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página que deseja editar.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Editar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao clicar nesta opção, a página é exibida em uma nova aba em modo de edição, onde é possível efetuar as alterações desejadas adicionando, configurando ou excluindo componentes. Essas ações são descritas em Componentes.


Duplicar página do portal

...

Essa opção pode ser utilizada para criar uma cópia de uma página já existente, contendo os mesmos componentes e as mesmas configurações. É uma forma rápida de criar páginas muito semelhantes com poucas alterações entre si.

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página da qual deseja fazer uma cópia.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Duplicar.

04. Insira as informações solicitadas para a página que será a cópia.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Nome da página
Nome que será atribuído à página que está sendo copiada de outra.

Estado
titleExemplo:

Sobre nós, Início, Fale conosco.

Endereço da página
URL da página, ou seja, é a URL que será utilizada para acessar essa página específica do portal. Ao preencher o nome da página, esse campo já é automaticamente preenchido, mas pode ser alterado se desejado. Depois de criar a página, mesmo que o nome dela seja alterado, a URL permanecerá a que foi definida no momento da sua criação.

05. Clique em Duplicar.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao clicar nesta opção, uma página é criada contendo todas as configurações da página original. Ela será listada logo abaixo da página inicial do portal. Para editá-la e configurar seus componentes, siga os passos descritos em Editar página do portal.


Configurar página do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página que deseja configurar.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Configurar.

04. Altere o nome da página.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

As demais informações exibidas não podem ser alteradas.

05. Clique em Concluir.


Tornar página do portal como inicial

...

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página que deseja tornar como a página inicial do portal.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Tornar página inicial.

04. Na mensagem exibida, clique em Confirmar para tornar a página como a inicial do portal.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao confirmar, a página se torna a página inicial do portal, substituindo a que era inicial anteriormente.


Excluir página do portal

...

01. Depois de acessar o item PáginasImage Addeddo portal, localize a página que deseja excluir.

02. Clique em AçõesImage Addedlocalizado no canto inferior direito do quadro da página.

03. Clique em Excluir.

04. Na mensagem exibida, clique em Excluir para confirmar a exclusão da página do portal.

Painel
borderColor#f2f2f2
bgColor#f2f2f2

Ao confirmar, a página é excluída do portal

Veja a imagem.Image Removed Veja a imagem

O rodapé é uma pequena área na parte inferior, que tem uma grande importância, tanto em termos de design como para fornecer informações complementares. Normalmente inclui informações como: direitos autorais, links para redes sociais, slogan, etc.  Referente a esse componente são apresentadas as seguintes configurações:

Geral: configura as propriedades gerais do componente.

Painel
  • Logotipo: imagem de logo que deve ser apresentada no rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Mensagem de Copyright: texto apresentado abaixo da logo e dos ícones.
  • Cor do texto: configura a cor da mensagem de Copyright.
  • Cor de fundo: configura a cor de fundo do rodapé.

Itens: configura os itens que devem ser apresentados no rodapé. 

Painel

Adicionar item: essa opção permite adicionar ícones ao rodapé, e esses ícones direcionam para outros endereços web. Cada item tem a seguinte configuração:

  • Imagem: imagem que deve ser apresentada no link do rodapé. A imagem deve ser um arquivo da galeria ou do próprio dispositivo.
  • Título: configura o título do link.
  • URL: endereço web que será aberto ao acionar o item.
  • Abrir em uma nova aba?: indica se o endereço deve ser aberto em uma nova aba ou na atual.

...

Veja a imagem.Image Removed Veja a imagem

Esse componente foi elaborado, essencialmente, para fazer um link 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 as propriedades gerais do componente.

Painel
  • URL: endereço web do conteúdo da ser adicionado. 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.
  • Habilitar container?: Configuração de largura do componente. Se estiver desabilitado o container, 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.
Informações
titleFique atento!

Esta documentação é válida a partir da atualização 1.6.5 - Liquid. Se você utiliza uma atualização anterior, ela pode conter informações diferentes das quais você vê na sua plataforma.