Contexto: Centro de control visual de la plataforma. Permite personalizar la identidad gráfica (paleta de colores, tipografía, botones, tarjetas) y la estructura de la página de inicio que ve el ciudadano (zona “Header”, hasta 6 secciones temáticas, zona “Footer”). Lo configuran funcionarios con rol superadministrador, administrador o comunicador.
Audiencia: funcionarios con rol superadministrador, administrador o comunicador.
Cuándo aplicar: al armar la imagen institucional de la instancia, al rebrandear, o al actualizar la home pública.
Apariencia
ℹ️ La sidebar “Apariencia” despliega dos sub-pestañas: “Tema” y “Página de inicio”. Esta página cubre ambas.
Introducción
La sección de apariencia es el centro de control visual de la plataforma. Permite personalizar la identidad gráfica (branding) y estructurar la información que el ciudadano ve al ingresar al portal público.
Su objetivo principal es garantizar que la plataforma sea funcional, intuitiva y estéticamente coherente con la identidad de la organización. Acá puedes definir desde la paleta de colores hasta la disposición de las secciones, accesos directos y banners informativos del home.
¿Para qué sirve?
| Objetivo | Qué resuelve |
|---|---|
| Identidad visual | Ajustar colores de botones, textos, alertas, tarjetas y fondos para coincidir con la imagen institucional. |
| Comunicación efectiva | Organizar la home en hasta 6 secciones temáticas (texto, imágenes, listas de trámites, filtros, FAQ) para guiar al ciudadano. |
| Navegación | Configurar las zonas “Header” (encabezado) y “Footer” (pie de página) para facilitar el acceso a servicios y contactos. |
Roles involucrados
Los siguientes roles tienen acceso a la sección apariencia:
- Superadministrador.
- Administrador.
- Comunicador.
Cómo acceder
Ve a la barra lateral izquierda y haz clic en “Apariencia”. Se despliegan dos sub-pestañas:
- Tema — paleta de colores y tipografía.
- Página de inicio — estructura del home público.
Sub-pestaña: Tema
Encabezado de la vista: breadcrumb “Inicio / Apariencia / Tema” + botón “Guardar cambios” en la esquina superior derecha. Cada campo recibe un código de color en formato hexadecimal con alpha (ej. #061E47FF).
La pestaña organiza los colores en nueve secciones temáticas, cada una afectando una zona específica de la plataforma.
Colores (paleta base)
Define los colores semánticos de la plataforma. Estos colores se reutilizan en todos los componentes (botones, alertas, etc.).
| Campo | Qué afecta |
|---|---|
| Primary | Color principal de la plataforma (default azul oscuro). |
| Secondary | Color secundario complementario. |
| Accent | Color de acento para elementos destacados. |
| Error | Color de mensajes de error y validaciones fallidas (default rojo). |
| Info | Color de mensajes informativos. |
| Success | Color de confirmaciones positivas (default verde). |
| Warning | Color de advertencias (default naranja). |
Textos
| Campo | Qué afecta |
|---|---|
| Titulos | Color de los títulos de página (H1). |
| Subtitulos | Color de los subtítulos (H2/H3). |
| Text body | Color del cuerpo de texto regular. |
Botones
| Campo | Qué afecta |
|---|---|
| Botón principal | Color de fondo del botón primario (acción principal). |
| Botón secundario | Color de fondo del botón secundario. |
| Chips | Color de fondo de las píldoras / etiquetas de selección. |
Home
Colores específicos del home público.
| Campo | Qué afecta |
|---|---|
| Titulos cards | Color de los títulos dentro de las tarjetas del home. |
| Tabs | Color de las pestañas dentro del home. |
| Listas | Color de los listados de trámites. |
Ficha de trámite
Colores específicos de la ficha pública del trámite.
| Campo | Qué afecta |
|---|---|
| Iconos | Color de los íconos dentro de la ficha. |
| Bordes de cards | Color del borde de las tarjetas. |
| Sección de documentos | Color de fondo del área de documentos solicitados/de salida. |
Cards
Colores generales de las tarjetas reutilizadas en toda la plataforma.
| Campo | Qué afecta |
|---|---|
| Background titulos | Color de fondo del encabezado de la tarjeta. |
| Barra superior de ventana emergente | Color de la barra superior de las ventanas emergentes. |
Tabs
Pestañas genéricas (no las del home).
| Campo | Qué afecta |
|---|---|
| Borde | Color del borde de la pestaña activa. |
| Texto | Color del texto de las pestañas. |
Pestañas tipo tarjeta
Sección de pestañas con estilo de tarjeta.
| Campo | Qué afecta |
|---|---|
| Background | Color de fondo de la pestaña activa. |
| Tabs active | Color de fondo de la pestaña en estado activo. |
| Tab disabled | Color de la pestaña deshabilitada. |
Iconos
| Campo | Qué afecta |
|---|---|
| Iconos | Color general de los íconos de la plataforma. |
Guardar
Para confirmar los cambios, haz clic en “Guardar cambios” en la esquina superior derecha de la vista.
Sub-pestaña: Página de inicio
Es el home público que ve el ciudadano al entrar a la plataforma. La vista presenta un preview interactivo del home + un panel lateral derecho con las secciones editables.
Cómo editar
- Haz clic en el ícono de lápiz (Editar) que aparece flotante en la esquina superior derecha de la vista preview.
- Se abre el panel lateral con todas las secciones editables (“Header” / Primera a Sexta sección / “Footer”). Cada sección es un acordeón expandible.
- Modifica los campos de la sección que necesites.
- Confirma con “Aplicar” dentro de cada sección y luego “Guardar” al pie del panel para persistir los cambios.
💡 Vista del editor: el panel lateral derecho cubre el lado derecho de la pantalla. Cada acordeón se contrae y expande para que trabajes una sección a la vez sin perder de vista el resto.
Zonas editables del home
El home se divide en zonas fijas: Header, seis secciones numeradas (todas opcionales) y Footer. Cada zona tiene su propio set de campos.
Header (encabezado)
Siempre activo (no se puede desactivar). Define la franja superior con el logo de la organización.
| Campo | Tipo | Qué define |
|---|---|---|
| Estilo de fondo | Lista desplegable | “Color lineal” o “Color en gradiente”. |
| Color de fondo | Campo de color (hex) | Color sólido de la zona “Header” (si se eligió Color lineal) o el primer color del gradiente. |
| Logo | Imagen + botón de carga | Logo institucional. |
| Color de texto | Campo de color (hex) | Color del texto sobre la zona “Header”. |
Primera sección
Es lo primero que ve el ciudadano debajo de la zona “Header”. Suele tener una imagen de fondo grande y un mensaje de bienvenida.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva la sección. |
| Estilo de fondo | Lista desplegable | Tres opciones: “Color lineal”, “Color en gradiente” o “Imagen”. |
| Color de fondo | Campo de color (hex) | Aplica si el estilo es color lineal o gradiente. |
| Texto | Editor de texto enriquecido | Permite negrita, cursiva, subrayado, link, H1, H2, párrafo, listas ordenadas/no ordenadas, code, separador, alineación, deshacer y rehacer. |
Segunda sección
Sección exclusivamente de texto + botón de llamada a la acción. Sin imagen de fondo.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva la sección. |
| Título | Campo de texto | Título de la sección. |
| Descripción | Editor de texto enriquecido | Texto descriptivo con formato. |
| Llamada a la acción — Texto | Campo de texto | Texto que muestra el botón. |
| Llamada a la acción — URL | Interruptor “URL externa” + campo URL | Define si el botón redirige a una URL externa o interna. |
| Link “Configuración de módulos” + botón “Aplicar” | — | Atajo a otras configuraciones + confirmación de los cambios de la sección. |
Tercera sección
Hace visibles las listas de trámites cargadas en el sistema.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Si la desactivas, las listas existen pero no se muestran en el inicio. |
| Título | Campo de texto | Título visible (ej. “Listas de trámites”). |
Cuarta sección
Muestra trámites organizados mediante filtros basados en los catálogos configurados previamente. Ver Catálogos y Filtros.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva la sección. |
| Título | Campo de texto | Título visible. |
| Filtros | Lista desplegable | Selección del o los filtros pre-configurados (ej. Categorías, Cursos). |
Quinta sección
Sección de accesos directos visuales + preguntas frecuentes.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva la sección. |
| Imagen de fondo | Imagen + botón de carga | Imagen panorámica detrás del título. |
| Título | Campo de texto | Título visible. |
| Imágenes | Botón con ícono de imagen+ | Permite cargar múltiples imágenes (cada una con su URL para redirigir al hacer clic). |
Sexta sección
Sección de contacto / botón de WhatsApp / chatbot.
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva la sección. |
| Título | Campo de texto | Título visible. |
| Descripción | Editor de texto enriquecido | Texto descriptivo con formato. |
| Llamada a la acción — URL | Interruptor “URL externa” + campo URL | URL destino del botón (ej. WhatsApp https://wa.me/...). |
| Texto del botón | Campo de texto | Texto visible del botón. |
| Imagen | Imagen + botón de carga | Imagen complementaria. |
Footer (pie de página)
| Campo | Tipo | Qué define |
|---|---|---|
| Sección activa | Interruptor | Activa o desactiva el footer. |
| Estilo de fondo | Lista desplegable | “Color lineal” o “Color en gradiente”. |
| Color de fondo | Campo de color (hex) | Color del footer. |
| Logo | Imagen + botón de carga | Logo institucional del footer. |
| Color de texto | Campo de color (hex) | Color del texto sobre el footer. |
| Email de contacto | Campo de texto | Mail que aparece como botón de contacto. |
| Color del botón de contacto | Campo de color (hex) | Color de fondo del botón del email. |
Cierre con “Guardar” al pie del panel.
Tips y recomendaciones
Antes de configurar
- Prepara tus recursos: ten a mano el logo en alta calidad (preferiblemente PNG transparente) y los códigos de color hexadecimales de la organización.
- Planifica la estructura del home: decide qué secciones son necesarias. No es obligatorio usar las 6 secciones — a veces “menos es más”.
Durante la configuración
- Contraste es clave: si eliges un fondo de la zona “Header” claro, configura el texto en color oscuro. Si el fondo es oscuro, usa texto claro. Esto garantiza la legibilidad del nombre del usuario y los menús.
- Texto enriquecido: aprovecha las listas (bullets) y negritas en la primera y segunda sección para hacer la lectura más amena.
- URLs de imágenes: en la quinta sección, verifica si los enlaces deben abrirse en la misma pestaña (internos) o en una nueva (externos) para no sacar al ciudadano de la plataforma abruptamente.
Después de configurar
- Verificación: siempre haz clic en “Guardar”. Después abre una ventana de incógnito en tu navegador e ingresa como ciudadano para verificar cómo se ve el diseño final.
- Test del WhatsApp: si configuraste la sexta sección con un link de WhatsApp, verifica desde un dispositivo móvil que el link efectivamente abre la aplicación.
Errores comunes y cómo evitarlos
| Error | Consecuencia | Solución |
|---|---|---|
| No activar la tercera sección. | Los trámites están creados pero el ciudadano no los ve en el inicio. | Asegúrate de que el interruptor Sección activa de la tercera sección esté encendido. |
| Mala elección de colores en la zona Header. | El nombre del usuario o los menús no se leen. | Verifica el contraste: fondo oscuro = texto claro. |
| Olvidar guardar cambios. | Se pierde toda la configuración de colores o textos. | Presiona “Guardar cambios” (Tema) o “Guardar” (Página de inicio) antes de salir. |
| Confusión en filtros (sección 4). | Aparecen trámites mezclados o vacíos. | Asegúrate de que los catálogos usados como filtros estén correctamente asociados a los trámites. Ver Catálogos. |
| Códigos hex incompletos. | El color no se aplica o aparece transparente. | Usa el formato completo con alpha: #RRGGBBAA (ej. #061E47FF). El FF final indica opacidad total. |
Glosario técnico
- Hex / hexadecimal: sistema de codificación de colores en 8 caracteres
#RRGGBBAA(los últimos 2 = alpha / transparencia). - Landing / Home: página de inicio; primera pantalla que ve el ciudadano.
- Gradiente: estilo de fondo que realiza una transición suave entre dos colores elegidos, a diferencia del color lineal que es sólido.
- Texto enriquecido: editor de texto que permite formato avanzado (negritas, cursivas, listas, enlaces) similar a un procesador de textos.
- URL externa: enlace que lleva al ciudadano a un sitio web fuera de la plataforma actual.
- Catálogos: listas predefinidas (como categorías o dependencias) que sirven para agrupar y filtrar los trámites en la pantalla de inicio. Ver Catálogos.
Ver también
Antes de configurar la apariencia:
- Configuración general — define idioma, módulos habilitados y reglas globales primero.
- Catálogos — los catálogos alimentan los filtros que usas en la cuarta sección de la home.
Componentes:
- Filtros — los filtros configurados acá se exponen en la cuarta sección de la home.
Después de configurar:
- Registro de cambios — audita quién cambió la imagen institucional y cuándo (filtros Configuraciones > Diseño de plataforma y Textos de la plataforma).
Relacionados:
- Módulo de usuarios — asignación del rol comunicador, único rol específicamente diseñado para este módulo.