Wizad de Configuração
A configuração do produto ocorre através do Wizard de configuração, nele ocorre o processo de manutenção de temas de layout, temas de widgtes, recurso de navegadores, padronização do ambiente e copiar páginas. As alterações dos parâmetros é vista no preview, assim permitindo o entendimento a cada personalização.
Observação: Somente usuários com papel de administrador ou usuários com permissão podem acessar e editar a página de configuração. As widgets contidas na página não podem ser removidas, caso forem o uso do produto será comprometido.
Tema de layout controla as cores do topo, menus de páginas e customização dos widgets padrões (Busca, Alerta e Perfil).
Os temas estão agrupados por categorias: Manufatura, Varejo e Serviços. Nossos profissionais de comunicação avaliaram cada segmento e identificaram características, as quais deram origem a temas padrões.
O usuário pode alterar os temas padrões, ou criar temas novos, através do botão "Copiar". Sugerimos fazer a cópia do tema padrão que está mais alinhado com a sua identidade visual.
Através do wizard de configuração é possível migrar todas as páginas do TOTVS Fluig Plataforma (customizadas e padrões) para um tema de layout do Digital Workplace by Digte.
Onde é utilizado o tema de layout?
Para identificar o layout da Digte basta olhar as bordas coloridas envolta do elemento, como no exemplo abaixo:
É possível escolher o layout ao criar uma nova página, criar uma comunidade ou ao trocar o layout de uma página já existente. Por exemplo: Ao escolher a opção "Trocar Layout", você verá diversas opções de layout de página, basta selecionar a opção que deseja e clicar em "Aplicar layout".
Os temas de layout são utilizados na edição das páginas, sendo que páginas diferentes podem ter temas de layout diferentes. Por exemplo: A página "Home" tem um tema de layout diferente da página "Sobre a empresa"
Configurando tema de layout
Dentro de um tema o usuário poderá alterar diversos recursos, como: topo, menu, página, widgets, slots, rodapé. Enquanto o usuário edita é possível visualizar no preview ao lado como as modificações irão ficar.
Código: Código de identificação do tema. Não deve ser preenchido com espaços, com caracteres especiais e letras maiúsculas, digite somente letras minúsculas
Nome: Insira o nome do tema criado
Altura: Defina uma altura para o seu topo
Fixo: O topo fica fixo no inicio da página
Acompanhar rolagem: O topo acompanha a rolagem da tela
Posição do logo: Defina se o logo será a esquerda, direita ou centralizado
Exibir logo:
Sim: O logo aparecerá no topo​
Não: O logo não aparecerá no topo
Cor de fundo: Escolha qual será a cor de fundo do seu topo
Imagem de fundo: Caso opte por colocar uma imagem de fundo no topo, primeiro insira a imagem no seu ECM e depois clique no campo busca para selecionar a imagem desejada. OBS: Se colocar uma imagem ela irá sobrepor a cor de fundo
Repetir imagem: Defina se a imagem de fundo irá se repetir no topo
Menu Horizontal e Vertical:
Habilitar: Defina se o menu será habilitado
Sim: Habilita a exibição do menu​
Não: Desabilita a exibição do menu
1:​ Habilita o submenu em cascata ao passar o mouse em cima de páginas que possuam submenu.
2: Desabilita a exibição do submenu em cascata e habilita uma funcionalidade que permite clicar em cima do botão da página no menu e substituir todo o menu pelos itens que estariam dentro do submenu em cascata.
Posicionamento: Defina se o posicionamento do menu
Esquerda: O menu ficará na esquerda da página
Topo: O menu ficará no topo da página
Altura: Defina a altura do menu em pixels (px). Caso não será preenchido, o valor padrão será 60 pixels (px)
Cor de fundo: Defina a cor de fundo do menu
RGBA: Colocar o código em RGBA
Hexadecimal: Colocar o código em hexa. Este código será convertido em RGBA
Cor de fundo (cursor sobreposto): Defina a cor de fundo ao passar o mouse por cima
Cor do marcador: Defina a cor da linha que fica abaixo do botão da página ativa
RGBA: Colocar o código em RGBA​
Imagem de fundo: Caso opte por colocar uma imagem de fundo no menu, primeiro insira a imagem no seu ECM e depois clique no campo busca para selecionar a imagem desejada. OBS. Se colocar uma imagem ela irá sobrepor a cor de fundo
Repetir imagem: Defina se a imagem de fundo irá se repetir no menu
Não repetir: A imagem não irá se repetir
A direita da Widget : As imagens se repetirão somente a direita das widgets do topo
A baixo da Widget: As imagens se repetirão somente a baixo das widgets do topo
Ambas as direções: As imagens se repetirão a baixo e a direita das widgets do topo
Formatação do texto: Defina a formatação que os textos devem ter no menu
Capitalizar: A primeira letra de cada palavra será maiúscula​
Minúsculas: Todas as letras serão maiúsculas
Maiúsculas: Todas as letras serão minúsculas
Cor do título: Defina a cor do título do menu
Cor do título (cursor sobreposto): Defina a cor do título ao passar o mouse por cima
Tamanho do título: Defina o tamanho dos títulos em pixels (px)
Tamanho do título no submenu (versão 1): Defina o tamanho dos títulos, na versão 1 do menu, em pixels (px) - Somente no menu Horizontal
Alinhamento do título no submenu (versão 1): Defina o alinhamento dos títulos - Somente no menu Horizontal
Esquerda: Os títulos ficarão a esquerda​
Centralizado: Os títulos ficarão centralizados
Direita: Os títulos ficarão a esquerda
Tipo de abertura de submenu (versão 1): Defina qual será a abertura do submenu - Somente no menu Vertical
Accordion: O submenu será aberto para baixo​
Abertura lateral : O submenu será aberto na lateral direita
Cor do ícone: Defina qual será a cor do ícone no menu. OBS: A cor escolhida só será aplicada em ícones padrões do TOTVS Fluig Plataforma
Tamanho do ícone: Defina o tamanho em pixels (px) dos ícones
Cor do ícone (cursor sobreposto): Defina a cor do título ao passar o mouse por cima. OBS. A sobreposição da cor só será aplicada em ícones padrões do TOTVS Fluig Plataforma
Cor de fundo: Defina a cor de fundo da página
Centralizar conteúdo: Defina se o conteúdo da página deve ficar centralizado
Sim: Conteúdo ficam no meio da página​
Não: Os conteúdo preenchem toda a largura da página
Largura do conteúdo centralizado: Defina em pixels (px) qual a largura que os conteúdos centralizados devem ter
Imagem de fundo: Caso opte por colocar uma imagem de fundo no menu, primeiro insira a imagem no seu ECM e depois clique no campo busca para selecionar a imagem desejada. O tamanho recomendado é 1024 x 768 pixels (px) OBS. Se colocar uma imagem ela irá sobrepor a cor de fundo
Customizar: Permite habilitar a customização do campo de busca
Sim: Habilita a customização​
Não: Desabilita a customização
Esconder: Esconde o componente
Curvatura: Defina a curvatura do campo de 0 à 50
0 fica quadrado​
50 fica em sua curvatura máxima, redondo
Cor de fundo: Defina a cor de fundo do componente
Cor do ícone: Defina a cor do ícone (lupa)
Alerta (Sem notificação):
Cor do ícone: Defina a cor do ícone
Alerta (Com notificação):​
Messaging (Sem notificação):
Messaging (Com notificação):​
Fonte: Escolha a fonte para ser aplicada em seus componentes. Só é possível inserir fontes do Google Fonts​
Espaço entre os slots: Defina se haverá espaço entre os slots
Sim: Os slots terão espaço entre si
Não: Os slots não terão espaço entre si
Cor de fundo: Defina a cor de fundo dos slots
Habilitar: Defina se o rodapé padrão do TOTVS Fluig Plataforma deverá aparecer
Sim: Habilita o rodapé​
Não: Desabilita o rodapé
Como usar um layout de página?
Para utilizar um layout do Digital Worplace by Digte, e os temas que foram criados, basta seguir os passos a baixo:
1) Crie uma página através do "Painel de Controle"
2) Escolha um layout de página que esteja com as bordas coloridas, são layouts do próprios do Digital Workplace by Digte
O que é um tema de widget ?
Tema de widget controla as cores do título, fontes, bordas, fundo, ícones, curvaturas, sombra e muitas outras configurações da identidade visual das widgets do produto Digital Workplace by Digte.
Onde é utilizado o tema de widget?
O tema de widget é utilizado durante a configuração dos widgets. Widgets diferentes podem ter temas diferentes, por exemplo: o componente de agendamentos tem um tema de widget diferente do componente de aniversariantes
Dentro de um tema o usuário poderá alterar diversos recursos, como: título, ferramentas, imagens, container e muito mais. Enquanto o usuário edita é possível visualizar no preview ao lado como as modificações irão ficar.
Nome: Insira o nome do tema criado​
Posição do título: Defina em qual posição o título ficará
Esquerda: O título ficará a esquerda​
Direita: O título ficará a direita
Centro: O título ficará no centro
Tamanho: Defina o tamanho do título em pixels (px)​
Cor do título: Defina a cor do título
Cor de fundo: Defina a cor de fundo do título
Formatação do texto: Defina a formatação de texto do título
Nenhuma: Não será aplicada nenhuma configuração​
Fonte: Defina a fonte padrão dos widgets. OBS: Só são aceitas fonte que estão dentro do Google Fonts
Margem superior: Defina o tamanho da margem superior em pixels (px)
Margem direita: Defina o tamanho da margem direita em pixels (px)
Margem inferior: Defina o tamanho da margem inferior em pixels (px)
Margem esquerda: Defina o tamanho da margem esquerda em pixels (px)
Espaço interno (Superior): Defina o tamanho do espaço interno superior em pixels (px)
Espaço interno (Direito): Defina o tamanho do espaço interno direito em pixels (px)
Espaço interno (Inferior): Defina o tamanho do espaço interno inferior em pixels (px)
Espaço interno (Esquerdo): Defina o tamanho do espaço interno esquerdo em pixels (px)
Curvatura esquerda: Defina a curvatura do título da ponta esquerda superior
Curvatura direita: Defina a curvatura do título da ponta direita superior
Curvatura esquerda: Defina a curvatura do título da ponta esquerda inferior
Curvatura a direita: Defina a curvatura do título da ponta direita inferior
Habilitar borda inferior?
Sim : Habilita a borda inferior no título
Não: Desabilita a borda inferior no título
Espessura da borda: Defina a espessura da borda em pixels (px)
Nenhum: Não aparecerá a borda inferior
Tracejado: A borda terá o efeito de traços separados
Pontilhado: A borda terá o efeito de pontos separados
Linha dupla: A borda terá o efeito de duas linhas continuas, uma acima da outra
Degradê: A borda terá o efeito de duas cores em degradê
Degradê inverso: A borda terá o efeito de duas cores em degradê ao inverso
Linha sólida: A borda terá o efeito de uma linha continua
Cor da borda inferior: Defina a cor da borda
Sim: Habilitar as ferramentas de engrenagem, ajuda e minimização
Não: Desabilita as ferramentas de engrenagem, ajuda e minimização
Cor de fundo: Defina a cor de fundo
Cor do ícone: Defina a cor dos ícones
Posição: Defina a posição das ferramentas
Esquerda: As ferramentas ficarão a direita​
Direita: As ferramentas ficarão a esquerda
Margem à direita (px): Defina a margem, em pixels (px), que as ferramentas devem obter
Habilitar recursos de minimização:
Sim: O minimizar será apresentado na widget​
Não: O minimizar não será apresentado na widget
Espaçamento interno​: Defina o tamanho do espaçamento interno em pixels(px)
Curvatura: Defina a curvatura das imagens de 0 à 50
Cor da linha Ímpar: Defina a cor das linhas impares em uma tabela
Cor da linha par: Defina a cor das linhas pares em uma tabela
Cor de parágrafos (P): Defina a cor dos textos em parágrafos
Cor de links: Defina a cor dos links
Tamanho de parágrafos (P): Defina o tamanho, das letras, nos parágrafos em pixels (px)
​Formatação do texto (P): Defina a formatação de texto em parágrafos
Fonte de títulos (H1, H2, H3, H4, H5, H6): Defina a fonte padrão para os títulos. OBS: Só são aceitas fonte que estão dentro do Google Fonts
Tamanho da fonte de títulos (H1, H2, H3, H4, H5, H6): Defina o tamanho dos títulos em pixels (px)
Cor da fonte de título (H1, H2, H3, H4, H5, H6): Defina a cor dos títulos
Formatação de texto de títulos (H1, H2, H3, H4, H5, H6): Defina a formatação dos títulos
Cor do título: Defina a cor do título em botões
Formatação do texto: Defina a formatação do texto
Habilitar borda:
Sim: Habilita borda no botão​
Não: Desabilita borda no botão
Nenhum: Não aparecerá a borda
Cor da borda: Defina a cor da borda
Curvatura do botão: Defina a curvatura das imagens de 0 à 50
Botão de navegação:
Cor: Defina a cor do botão
Botão ver mais:
Cor: Defina a cor de fundo da widget
Sem repetição: A imagem não irá se repetir
Repetir ambos: A imagem irá se repetir em ambas as direções
Acompanhar rolagem:
Acompanhar rolagem:​
Comportamento da imagem de fundo da widget:
Original: A imagem ficará no tamanho original​
Adequar: A imagem irá se adequar ao tamanho da tela
Expandir: A imagem irá se expandir para cobrir todos os espaços da tela
Imagem: Caso opte por colocar uma imagem de fundo no menu, primeiro insira a imagem no seu ECM e depois clique no campo busca para selecionar a imagem desejada. OBS. Se colocar uma imagem ela irá sobrepor a cor de fundo
Posição da imagem: Defina a posição que a imagem ficará
Superior: O foco será na parte superior da imagem​
Direita: O foco será na parte direita da imagem
Inferior: O foco será na parte inferior da imagem
Esquerda: O foco será na parte esquerda da imagem
Centralizado: O foco será no centro da imagem
Espessura (px): Defina a espessura da borda em pixels (px)​
Cor: Defina a cor da borda
Curvatura esquerda: Defina a curvatura da borda em pixels (px)
Curvatura direita: Defina a curvatura da borda em pixels (px)
À direita da widget: Defina o quanto a direita ficará a sombra, o tamanho é contado em pixels
​Abaixo da widget: Defina o quanto abaixo ficará a sombra, o tamanho é contado em pixels
Efeito de desfoque: Defina a quantidade de desfoque em pixels
Tamanho de avanço da sombra: Defina o tamanho que a sombra deve avançar
Cor: Defina a cor da sombra
Ao finalizar todas as modificações, clique em "Atualizar"
Recursos de navegadores
Na aba de "Recurso de navegadores" você poderá mexer com logos, favicon e plano de fundo.
O logo é a imagem utilizada na tela de login e no topo da página
Escolher arquivo: Permite escolher um arquivo direto do seu computador
Altura recomendada: 60 pixels (px)
Largura recomendada: Não possui limite
Formata: A imagem deve ser obrigatoriamente .png
O é a imagem apresentada na aba dos browsers (navegadores) ou na tela de favoritos do browser
Altura recomendada: 32 pixels (px)
Largura recomendada: 32 pixels (px)
Formata: A imagem deve ser obrigatoriamente .ico
Altura recomendada: 1024 pixels (px)
Largura recomendada: 768 pixels (px)
"X": Permite remover a imagem de fundo
Na opção "Padronização do ambiente" você poderá aplicar o tema de layout construído nas etapas anteriores em todas as páginas do TOTVS Fluig Plataforma
Selecione o tema que deseja aplicar em todas as páginas
Ao apertar "Aplicar" o tema será aplicado em todas as páginas da plataforma. OBS: Este processo pode levar alguns minutos, pois aplica o tema de layout em todas as páginas do TOTVS Fluig Plataforma
Retira o tema de layout da Digte e retorna pra o tema padrão do TOTVS Fluig Plataforma
Configurando comunidades
Ao criar uma comunidade, automaticamente, ela será criada com o tema clássico do TOTVS Fluig Plataforma, e para permitir a utilização dos widgets do Digital Workplace by Digte é necessário trocar o layout para o da Digte.
Lembrando que o layout da Digte tem as bordas coloridas, como a imagem abaixo:
Siga o caminho a baixo para trocar o layout de uma comunidade:
"Sua comunidade" > Foto de perfil > Editar página > Foto de perfil > Trocar Layout
Ao escolher a opção de "Trocar layout", basta clicar no layout desejado e clicar em "Aplicar"
Durante o processo de instalação do Digital Workplace by Digte, é criada uma pasta chamada "Comunidades", a qual recomendamos sua utilização para centralizar os conteúdos (documentos, formulários, artigos, vídeos, imagens) de suas comunidades. OBS: Importante ressaltar que cada comunidade deve ter sua própria estrutura de pastas.
O menu do TOTVS Fluig Plataforma com o Digital Workplace by Digte passa a ter novos recursos como:
2) Troca de ordem das páginas;
3) Inclusão de novos ícones, que não fazem parte do arsenal do TOTVS Fluig Plataforma
4) Links com direcionamento para páginas externas, fora da plataforma
Esta personalização ocorre via formulário de configuração, localizado em: Intranet by Digte > Cadastros > Customizações do Menu
Escolha a página que deseja configurar e clique em "Editar".
Sim: Indica que não está ligado a uma página existente no TOTVS Fluig Plataforma e permitirá o acesso a uma URL diretamente ​
Não: Indica que irá substituir as configurações de uma página existente no TOTVS Fluig Plataforma
Código da página: Insira o código gerado no momento de criação da página. Este código, normalmente, está inserido na URL da página, por exemplo "https://portal.digte.com.br/portal/p/digte/digte-academy", o código da página é "digte-academy"​
Abrir um uma nova aba?
Sim: Ao clicar na página ela será aberta em uma nova aba​
Não: Ao clicar na página ela será aberta na mesma aba
Título (Português, Inglês, Espanhol): Configure o título da página que será apresentado no menu. Você configurar para Português, Inglês e Espanhol.
Sequência: Defina em qual sequência a página será apresentada no menu
Ícone: Escolha um ícone para ser apresentado junto com o título no menu. OBS: Esses ícones são somente do arsenal do TOTVS Fluig Plataforma
Link: Insira um link caso deseje que o direcionamento seja para uma página externa do portal
Url da imagem: Ao inserir uma imagem em seu ECM você consegue gerar um link, através deste você adicionar seu próprio ícone
Imagem dos documentos: Insira a imagem no seu ECM, depois clique na lupa e procure o ícone que deseja apresentar no menu
Largura e altura: Defina a largura e altura, que seus ícones terão, em pixels (px)
Ao finalizar clique em "Salvar".
Formulários de páginas, widgets e layout
O Digital Workplace by Digte, por padrão, faz a atualização dos formulários de Páginas, Widgets e Layouts, por esse motivo recomendamos que não alterem manualmente o formulário. Caso isso aconteça, há o risco do seu ambiente obtenha alguns problemas de funcionamento.
A partir da atualização de 21/01/2020, na nova versão do Empower do Digital Workplace by Digte, foi disponibiizado uma central de cadastros. O que antes era necessário ir ao GED para ser feito, agora serão utilizados na nova central. Há dois meios para acessar essa nova central:
1) Clicando na engrenagem da widget:
Ao clicar na enggrenagem da widget, o usuário é direcionado para a página de "Cadastros" e o formulário correspondente da widget pré-selecionada.
2) Clicando na página "Cadastros" no menu:
Ao seguir o caminho: Intranet by Digte > Cadastros você conseguirá acessar a todos os formulários de todas as widgets