Descripción: Esta herramienta permite definir la identidad visual y el estilo gráfico (colores, fuentes, diseño) de todo tu sistema Framework360, garantizando coherencia entre el sitio web y las comunicaciones.
¿Para qué sirve? (Ejemplos prácticos)
Úsalo para:
- Asegurar que todos los elementos gráficos (botones, títulos, enlaces) respeten los colores y la marca empresarial.
- Configurar la tipografía (fuentes y tamaños) para mejorar la legibilidad del sitio y las comunicaciones.
- Definir rápidamente la apariencia del sistema mediante la generación automática de estilos basada en Inteligencia Artificial.
Funcionalidades principales
1. Generación de Estilo mediante AI
Es posible generar automáticamente un conjunto de colores y estilos base haciendo clic en el botón "Genera estilo tramite AI". El sistema te guiará a través de un proceso de creación rápida y te permitirá visualizar una vista previa antes de aplicar el diseño.
2. Configuraciones Generales
- Contenedor: Define el ancho máximo del contenido (en píxeles) para los diferentes tamaños de pantalla (Extra Large, Large, Medium, Small).
- Colores: Permite configurar la paleta de colores predeterminada del sistema (ej. Primario, Secundario, Éxito, Error) mediante una herramienta de selección de color. Estos colores estarán disponibles para su uso en todo el sistema.
3. Tipografía y Estilos
- Títulos (H1-H6): Permite definir una fuente específica, el color, la altura de línea y el tamaño (en píxeles) para cada nivel de título, desde H1 hasta H6.
- Cuerpo de Página: Configura la fuente principal, el tamaño y la altura de línea para el texto estándar, además del color del texto y el color de fondo de la página.
- Logo: Permite establecer un ancho predeterminado (en píxeles) para el logo empresarial.
- Enlaces: Define el color de los hipervínculos y el color que adoptan cuando el usuario pasa el cursor sobre ellos (estado "hover").
4. Gestión del Fondo
Si se opta por usar una imagen de fondo para el cuerpo de la página, es posible configurar opciones avanzadas:
- Imagen de fondo: Carga de un archivo imagen.
- Tamaño: Modo de visualización de la imagen (ej.
cover,contain,auto). - Repetir: Si la imagen debe repetirse (verticalmente, horizontalmente o para llenar el espacio).
- Posición: Dónde debe anclarse la imagen dentro de la página (ej. centro, arriba a la izquierda).
- Fijación: Si la imagen debe desplazarse con la página (
scroll) o permanecer fija (fixed).
5. Fuentes Personalizadas
Es posible cargar tus propias fuentes empresariales (en formato .ttf o .otf). Una vez cargadas, estas fuentes estarán inmediatamente disponibles en el selector para títulos y cuerpo de página.
6. Estilos de Botones
Esta sección avanzada permite personalizar la apariencia de todos los botones predeterminados del sistema (basados en los colores definidos en la sección "Colores"). Se puede usar un editor visual para definir detalladamente el estilo (bordes, sombras, colores de fondo y texto) para cada tipo de botón.
Cómo configurarlo
Todas las configuraciones están organizadas en secciones dentro del módulo de edición. Después de realizar cambios, es necesario hacer clic en el botón estándar de guardar del sistema.
| Sección | Opción de Configuración | Descripción |
|---|---|---|
| Generales | Ancho Contenedor | Ajusta el tamaño máximo del contenido para dispositivos (Extra Large, Large, Medium, Small). |
| Generales | Colores (Primario, Éxito, etc.) | Definición de la paleta cromática principal del sistema. |
| Títulos (H1-H6) | Fuente, Color, Tamaño | Selección del tipo de letra y propiedades visuales para todos los títulos. |
| Cuerpo Página | Fuente, Tamaño, Color | Configuraciones para el texto principal de la página. |
| Cuerpo Página | Fondo e Imagen | Definición del color de fondo y carga/gestión de una imagen como fondo. |
| Logo | Ancho predeterminado | Tamaño estándar del logo en píxeles. |
| Enlaces | Color y Color Hover | Definición del color normal y al pasar cursor sobre hipervínculos. |
| Fuentes Personalizadas | Carga Fuente | Subida archivos .ttf/.otf para uso en el sistema. |
| Botones | Estilo por tipo | Personalización avanzada del aspecto para cada estilo de botón (ej. Botón Primario, Botón Alerta). |
Integraciones automáticas
Coherencia en Emails Transaccionales
Las configuraciones de estilo y color definidas en este módulo se aplican automáticamente para formatear los emails enviados por el sistema (como notificaciones o plantillas comunicativas). Esto asegura que los emails mantengan la misma apariencia gráfica que tu sitio web.
