Lista de Documentos
Nesta Página
Tue Oct 01 2024

Themes e White Label: Personalize seu ambiente

Configurações do Tema

Na página de configuração do 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 combinar com o estilo da sua empresa. Ajuste a interface para refletir a identidade visual do seu negócio e garantir uma experiência consistente em toda a plataforma. As configurações do tema estão divididas em 3 seções: Branding, Cores Gerais e Cores dos Modelos.

  • Branding: Personalize elementos visuais do ambiente, como fundo do cabeçalho, logos e thumbnails. Assim, você cria uma identidade de marca consistente em toda a plataforma.
  • Cores Gerais: Defina todas as cores do app para os modos Claro e Escuro, permitindo dois temas completos para cada ambiente.
  • Cores dos Modelos: Personalize as cores dos atributos de modelagem, útil para diferenciar visualmente os modelos do restante do app.
  • Cores dos Datasets: Personalize as cores dos atributos dos datasets, facilitando distinguir visualmente os datasets dentro do seu modelo.
  • Cores dos Gráficos: Defina o esquema de cores para gráficos, ideal para diferenciar visualmente suas visualizações.

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