Temas / White labeling

Tue Oct 01 2024

Configuración del tema

En la página de configuración del tema, puedes personalizar la apariencia de tu entorno. Cambia las imágenes de fondo, sube logos y ajusta elementos de branding como colores y tipografía para que coincidan con tu estilo único. Adapta la interfaz de usuario para reflejar la identidad de tu empresa, asegurando una experiencia consistente para los usuarios en toda tu plataforma. La configuración del tema se divide en 3 secciones principales: Branding, Colores Generales y Colores de Modelo.

  • Branding: Aquí puedes personalizar elementos visuales clave de tu entorno, incluidos fondos de cabecera, logos y miniaturas. Esto te permite crear una identidad de marca consistente en la plataforma.
  • Colores Generales: Personaliza todos los colores de la aplicación para los modos Claro y Oscuro, dándote efectivamente dos configuraciones de tema completas para cada entorno.
  • Colores de Modelo: Aquí puedes personalizar los colores de los atributos de modelado. Esto es útil cuando quieres tener un color diferente para los modelos que el resto de la aplicación.

Define tu entorno

Aquí puedes personalizar elementos visuales clave de tu entorno, incluidos fondos de cabecera, logos y miniaturas. Esto te permite crear una identidad de marca consistente en la plataforma. Ya sea actualizando el logo de tu empresa o estableciendo un fondo personalizado, estas herramientas te ayudan a refinar la apariencia de tu aplicación.

Personaliza tu tema con branding personalizado

info

Previsualiza y prueba siempre tus selecciones de imágenes para asegurar que coincidan con el tema general y ofrezcan una experiencia de usuario fluida.

Colores generales de la app

Personaliza los colores de la aplicación para ambos modos, Claro y Oscuro, dándote efectivamente dos configuraciones completas de tema para cada entorno. Asegúrate de probar cuidadosamente tus cambios para garantizar un buen contraste entre texto y fondos para una óptima legibilidad y experiencia de usuario. Con esta flexibilidad, puedes adaptar completamente la apariencia de tu plataforma para coincidir con la identidad de tu marca en diferentes modos.

Personaliza tu tema

Colores del Modelo de Proceso

Personaliza los colores del objeto de modelado y del lienzo para ambos modos, Claro y Oscuro, dándote efectivamente dos configuraciones completas de tema para cada entorno. Asegúrate de probar cuidadosamente tus cambios para garantizar un buen contraste entre texto y fondos para una óptima legibilidad y experiencia de usuario. Con esta flexibilidad, puedes adaptar completamente la apariencia de tu plataforma para coincidir con la identidad de tu marca en diferentes modos.

Personaliza tu tema

Colores del Conjunto de Datos

Los atributos que tienen data adjunta adoptarán automáticamente el color del conjunto de datos especificado en el modelador. Esto ayuda a distinguir visualmente los atributos con enlaces de data activos. Los colores mencionados anteriormente son los colores predeterminados para atributos sin data adjunta.

Ayudas visuales

image Si realizaste cambios en el tema, el fondo del color indicará que se han realizado cambios en ese atributo específico.

image Para cambiar un color, haz clic en un círculo de color para el tema elegido (Claro u Oscuro). Aparecerá un selector de color que te permite elegir un tono o introducir un valor HEX / RGB / HSL. Si no estás seguro de los valores de color, usa el “PipetIcon” para seleccionar un color de cualquier parte de la pantalla. Las actualizaciones ocurren de inmediato.

Ejemplo de un tema

Explora diferentes formas de transformar el tema de tu aplicación. Aquí, el tema original ha sido personalizado para mostrar variaciones azules y verdes.

Desde Original

image

A Azul

Los cambios realizados fueron Color de Texto, Color del Cuerpo, Color del Panel (claro), Imagen del Logo, Texto del Logo y BG de Cabecera.

image

A Verde Matrix

”La elección. El problema es la elección” – Neo (The Matrix Reloaded)

image

Colores del Modelo de Proceso

Ajusta los colores de los atributos de modelado para que difieran del resto de la aplicación. Esto asegura una apariencia distintiva para tus modelos.

image