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 o comunicador.
Audiencia: funcionarios con rol superadministrador o comunicador. El rol administrador no tiene acceso a este módulo, aunque sí llegue a casi todos los demás.
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.
- Comunicador.
Cómo configurar la apariencia
La sección “Apariencia” tiene dos flujos independientes: configurar el “Tema” (colores) y editar la “Página de inicio” (el home público). Cada uno se guarda por separado. Estos son los pasos generales; el detalle de cada campo está en las secciones de referencia más abajo.
1. Abrir la sección Apariencia
En la barra lateral izquierda, haz clic en “Apariencia”. Se despliegan dos sub-pestañas: “Tema” (paleta de colores y tipografía) y “Página de inicio” (estructura del home público).
2. Configurar los colores del tema
Entra a la sub-pestaña “Tema”. Los colores están organizados en nueve secciones: “Colores”, “Textos”, “Botones”, “Home”, “Ficha de trámite”, “Cards”, “Tabs”, “Tabs tipo card” e “Iconos”. En el campo del color que quieras cambiar, ingresa el código de color en formato hexadecimal (ej. #061E47FF).
3. Guardar el tema
Haz clic en “Guardar cambios” en la esquina superior derecha de la vista de “Tema”. Si sales sin guardar, se pierden los cambios de color.
4. Abrir el editor de la página de inicio
Entra a la sub-pestaña “Página de inicio” y haz clic en el ícono de lápiz (Editar) que aparece flotante en la esquina superior derecha del preview. Se abre el panel lateral derecho con todas las zonas editables: “Header”, la Primera a la Sexta sección, y “Footer”. Cada zona es un acordeón que se expande y contrae para trabajar una a la vez.
5. Editar una zona del home
Expande el acordeón de la zona que quieras modificar y edita sus campos (activar o desactivar la sección con su interruptor, cambiar título, texto, colores, imágenes o URLs, según la zona).
⚠️ Las zonas no se confirman una por una. Lo único que guarda es el botón “Guardar” al pie del panel, y guarda todo junto. Si sales del panel sin pulsarlo, se pierde lo editado en todas las zonas.
6. Guardar la página de inicio
Cuando termines de editar todas las zonas, haz clic en “Guardar” al pie del panel lateral para persistir los cambios.
7. Verificar el resultado como ciudadano
Después de guardar, abre una ventana de incógnito del navegador e ingresa como ciudadano para confirmar cómo se ve el diseño final: revisa el contraste de colores, que los textos no se corten y que los enlaces lleven al destino correcto.
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. |
Tabs tipo card
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. El flujo para abrir el editor, editar cada zona y guardar está en la sección Cómo configurar la apariencia (pasos 4 a 6). A continuación, el detalle de los campos de cada zona.
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, tachado, enlace, quitar enlace, H1, H2, párrafo, listas ordenadas y no ordenadas, bloque de código, separador, salto de línea, quitar formato, deshacer y rehacer. No tiene subrayado ni alineación. |
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. “Aplicar” es exclusivo de esta zona y no confirma lo editado: recalcula la lista de trámites que se muestra en el home. Lo que guarda sigue siendo “Guardar” al pie del panel. |
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
Carrusel de imágenes con enlace. Cada imagen lleva su URL y un interruptor para abrirla en la misma pestaña o en una nueva.
ℹ️ El home no tiene sección de preguntas frecuentes. La página de preguntas frecuentes del ciudadano existe, pero su contenido no se edita desde este panel.
| 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.
Preguntas frecuentes y casos recurrentes
Esta sección reúne las consultas más habituales sobre la apariencia de la plataforma, basadas en casos reales de soporte. Complementa la sección “Errores comunes y cómo evitarlos” de más arriba.
Preguntas frecuentes
“Cambié los colores y ahora los íconos (o algún elemento) no se ven o se pierden con el fondo.”
Pasa cuando el color elegido para un elemento queda muy parecido al color del fondo sobre el que se muestra. Igual que con el texto del encabezado, revisa el contraste: si el fondo es oscuro, usa íconos y elementos claros; si el fondo es claro, úsalos oscuros. Después de guardar, abre una ventana de incógnito e ingresa como ciudadano para confirmar que todo se distingue bien.
“Necesito cambiar una palabra o un texto que aparece en la plataforma (por ejemplo un nombre que quedó desactualizado, o algo que aparece en inglés).”
Depende de dónde esté el texto. Si es un texto que tú controlas —los títulos, descripciones y textos de las secciones de la página de inicio—, edítalo directamente en el campo correspondiente y guarda los cambios. Si es una etiqueta base de la plataforma o de un formulario (por ejemplo, el nombre de un campo, un término que no coincide con tu región o un texto que aparece en inglés sin traducir), no se edita desde esta sección: repórtalo a soporte indicando en qué pantalla aparece y cuál es el texto correcto.
“Quiero eliminar o cambiar un texto del pie de página, pero no encuentro cómo.”
El pie de página te permite editar el email de contacto, el logo y los colores. Algunos textos del pie de página son fijos y no aparecen entre los campos editables de esta sección, así que no se pueden cambiar desde acá. Para modificarlos o quitarlos, repórtalo a soporte indicando qué texto es y en qué pantalla aparece.
“Estoy cargando el logo o una imagen en el encabezado o el pie de página y se queda cargando sin terminar.”
Suele resolverse volviendo a intentar con una imagen más liviana (por ejemplo, un PNG optimizado en lugar de un archivo muy pesado) y con una conexión estable. Si la carga sigue sin completarse, repórtalo a soporte indicando qué imagen intentabas cargar y en qué zona (encabezado o pie de página).
“Cambié un botón o un enlace de la página de inicio (o del pie de página) y quiero que lleve a otra dirección.”
La dirección de destino se define en el campo de dirección (URL) del botón, dentro de la sección correspondiente. Edítala y pulsa “Guardar” al pie del panel: no busques un botón de confirmación dentro de la zona, no lo hay. Recuerda revisar si el enlace debe abrirse en la misma pestaña (interno) o en una nueva (externo) usando el interruptor “URL externa”.
“Un botón de la página de inicio lleva a un sitio que no esperaba.”
Primero verifica que la dirección cargada en el botón sea la correcta. Si la dirección es correcta pero el botón te lleva igual a otro lado, y ese lugar es un servicio de un tercero (un banco, un sistema de autenticación del gobierno, un organismo externo), ese destino lo controla ese tercero y no la plataforma. En entornos de prueba es habitual que algunos servicios externos redirijan a una página distinta porque no tienen un acceso de demostración disponible. No es una falla de la plataforma.
“El texto de la primera sección de la página de inicio se corta o se esconde al cambiar el zoom o en pantallas más chicas.”
Como buena práctica, mantén los textos de la página de inicio concisos y, después de guardar, revísalos como ciudadano en distintos tamaños de pantalla y niveles de zoom. Si aun con textos breves ves que se cortan o se esconden a determinados niveles de zoom, repórtalo a soporte indicando en qué pantalla y con qué nivel de zoom ocurre.
Casos recurrentes
Estos son los reclamos que más se repiten en el historial de soporte de esta sección.
| Qué pasa | Qué hacer |
|---|---|
| Aparece una palabra o un nombre desactualizado (por ejemplo, la sigla de un organismo que cambió de nombre). | Si el texto está en una sección de la página de inicio o en el pie de página que controlas, edítalo ahí y guarda. Si es una etiqueta base de la plataforma o de un formulario, repórtalo a soporte con la pantalla donde aparece y el texto correcto. |
| Aparece texto en inglés (etiquetas sin traducir). | Suele ser una etiqueta base de la plataforma, que no se traduce desde esta sección. Repórtalo a soporte indicando en qué pantalla aparece. |
| Un texto usa un término que no corresponde a tu región (una palabra local distinta a la que usan tus ciudadanos). | Si es un texto que editas tú (página de inicio), cámbialo ahí. Si es una etiqueta base de un formulario, repórtalo a soporte con el término correcto para tu región. |
| El logo o una imagen del encabezado o del pie de página no termina de cargar. | Vuelve a intentar con una imagen más liviana y una conexión estable. Si persiste, repórtalo a soporte indicando qué imagen y en qué zona. |
| Un botón o enlace de la página de inicio o del pie de página lleva a una dirección equivocada. | Corrige la dirección (URL) en el campo del botón de esa sección y guarda. Si la dirección es correcta pero lleva a un servicio externo que redirige a otro lado, ese comportamiento lo controla el tercero, no la plataforma. |
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.