Lista de Documentos
Nesta Página
Tue Oct 01 2024

Themes e White Label: Personalize seu ambiente

Configurações de tema

Na página de configuração de tema, você pode personalizar a aparência do seu ambiente. Altere imagens de fundo, faça upload de logos e ajuste elementos de branding como cores e tipografia para refletir seu estilo. Adapte a interface para mostrar a identidade da sua organização, garantindo uma experiência consistente para todos na plataforma. As configurações de tema são divididas em três seções principais: Branding, Cores Gerais e Cores dos Modelos.

  • Branding: Personalize elementos visuais como fundo do cabeçalho, logos e thumbnails. Assim, sua marca fica consistente em toda a plataforma.
  • Cores Gerais: Defina as cores da aplicação para os modos Claro e Escuro, criando dois temas para cada ambiente.
  • Cores dos Modelos: Edite as cores dos atributos de modelagem. Útil para distinguir os modelos do resto da aplicação.
  • Cores dos Datasets: Personalize as cores dos atributos dos datasets. Útil para diferenciar visualmente datasets do restante da aplicação.
  • Cores dos Gráficos: Defina as cores dos charts. Útil para deixar o visual dos gráficos diferente do resto da aplicação.

Marque seu ambiente

Aqui você pode personalizar elementos visuais chave do seu ambiente, incluindo fundos de cabeçalho, logos e miniaturas. Isso permite criar uma identidade de marca consistente em toda a plataforma. Seja atualizando o logo da empresa ou definindo um fundo personalizado, essas ferramentas ajudam a refinar o visual do seu aplicativo.

Personalize seu tema com branding personalizado

info

Sempre visualize e teste suas seleções de imagem para garantir que elas correspondam ao seu tema geral e proporcionem uma experiência de usuário perfeita.

Cores gerais do aplicativo

Personalize as cores do aplicativo para os modos Claro e Escuro, proporcionando efetivamente duas configurações de tema completas para cada ambiente. Tenha certeza de testar suas alterações cuidadosamente para garantir um bom contraste entre texto e fundos, para otimizar a legibilidade e a experiência do usuário. Com essa flexibilidade, você pode adaptar totalmente o visual da sua plataforma para combinar com a identidade da sua marca em diferentes modos.

Personalize seu tema

Cores do Modelo de Processo

Personalize as cores dos objetos de modelagem e do canvas para os modos Claro e Escuro, criando temas completos para cada ambiente. Sempre teste suas alterações para garantir contraste ideal entre textos e fundos e melhor experiência do usuário. Com essa flexibilidade, você adapta totalmente o visual da sua plataforma à identidade da sua marca em todos os modos.

Personalize o seu tema

Cores dos Datasets

Personalize as cores dos objetos Dataset e do canvas para os modos Claro e Escuro. Útil ao adicionar vários datasets aos seus modelos, facilitando a distinção entre eles. As cores do dataset se aplicam a atributos com data associada, facilitando a identificação de atributos com links ativos. As cores acima são as padrões para atributos sem data. Você também pode adaptar os nomes das cores conforme sua terminologia.

Personalize o seu tema

Cores dos Gráficos

Personalize as cores dos objetos de Chart para os modos Claro e Escuro. Por exemplo, isso é usado nas configurações das Gauge charts para indicar zonas de bom, atenção e alerta. Você também pode mudar os nomes das cores para combinar com sua terminologia.

Personalize o seu tema

Cores dos Datasets

Atributos com data associada adotam automaticamente a cor do dataset definida no modeler. Isso facilita visualizar atributos com links de data ativos. As cores acima são as padrões para atributos sem data associada.

Ajudantes Visuais

image Se você fizer mudanças no tema, o fundo da cor indicará que mudanças foram feitas naquele atributo específico.

image Para mudar uma cor, clique em um círculo colorido para o tema escolhido (Claro ou Escuro). Um seletor de cores aparece, permitindo que você escolha um tom ou insira um valor HEX / RGB / HSL. Se você não tiver certeza dos valores de cor, use o “PipetIcon” para selecionar uma cor de qualquer lugar na tela. As atualizações ocorrem imediatamente.

Exemplo de um tema

Explore diferentes maneiras de transformar o tema do seu aplicativo. Aqui, o tema original foi personalizado para apresentar variações em azul e verde.

Do Original

image

Para Azul

As mudanças feitas foram a cor do Texto, cor do Corpo, cor do Painel (claro), imagem do Logo, Texto do Logo, e Fundo do Cabeçalho.

image

Para Verde Matrix

”Escolha. O problema é a escolha” – Neo (The Matrix Reloaded)

image

Cores do Modelo de Processo

Ajuste as cores dos atributos de modelagem para diferenciar do restante do aplicativo. Isso garante uma aparência distinta para seus modelos.

image