Resumen
Una guía completa para personalizar la identidad visual de tu portal de KnowledgeCity, incluyendo los logos del sitio web, los colores, la configuración del banner slider, y la identidad visual de la app móvil.
Introducción
Los ajustes de Portal Branding te permiten adaptar la apariencia de tu learning portal tanto en la web como en las plataformas móviles. Aquí subes logos, defines colores de marca, configuras el banner slider de la página de inicio, y defines la apariencia visual de tu app móvil. Una identidad de marca consistente garantiza que tus alumnos reconozcan tu entorno de capacitación, a la vez que se crea una experiencia profesional y coherente. Para una descripción general completa de todas las pestañas de Portal Settings, consulta Understanding and Navigating Your Portal Settings in KnowledgeCity LMS.
Pasos a Seguir
Acceder a los Portal Branding Settings
Sigue los pasos a continuación para acceder a la configuración de identidad visual:
- Inicia sesión en tu KnowledgeCity LMS con una cuenta de administrador que tenga Full Access.
- Ubica el menú desplegable Settings en el panel superior de la interfaz del LMS y selecciona Portal Settings.
- La página Portal Settings contiene dos pestañas relacionadas con la identidad visual:
- Website branding: Para la apariencia del portal web
- App branding: Para la apariencia de la aplicación móvil
Website Branding
La pestaña Website branding controla cómo aparece tu learning portal a los usuarios en escritorio.
Configurar los Logos del Portal
Se pueden subir tres tipos de logos para establecer la identidad visual de tu portal:
| Tipo de Logo | Formatos Admitidos | Propósito |
|---|---|---|
| Header logo | jpg, png, svg | Se muestra en el encabezado/barra de navegación del portal |
| Favicon | ico, jpg, png | Pequeño icono que aparece en las pestañas del navegador |
| Loader logo | png, svg | Se muestra mientras se carga el contenido del portal |
Para subir o cambiar un logo:
- Haz clic en el botón Change Logo junto al tipo de logo deseado.
- Selecciona un archivo de imagen desde tu computadora siguiendo los formatos admitidos.
- El nuevo logo aparece inmediatamente en el panel de vista previa en vivo a la derecha.
Configurar el Portal Theme y los Colores
La sección Portal Theme controla el esquema de color aplicado en todo tu sitio web.
Portal Theme Elige entre las opciones de tema disponibles: Default, Kaleidoscope, Impulse, Dynamics, o Custom para comenzar con una paleta de colores predefinida.
Nota: Cuando seleccionas Custom como tema de tu portal, se habilitan opciones de configuración adicionales más allá de los ajustes de color estándar. Puedes ajustar el Portal corner radius para controlar la redondez de los botones y elementos de la interfaz. Para las secciones Featured categories y App banner, puedes configurar de forma independiente los tipos de fondo (color sólido o imagen personalizada) junto con colores de texto personalizados. Estas opciones específicas de cada sección te dan más control personalizado sobre la apariencia visual de tu portal.
Primary Color
- El color primario se aplica a los bloques de la página de inicio, botones y enlaces.
- El color de fondo principal se establece automáticamente en una opacidad del 10% del color primario seleccionado.
- Haz clic en el selector de color para elegir un valor hexadecimal.
Secondary Color
- Activa Add secondary color para habilitar un color de marca secundario.
- El color secundario se aplica a bloques adicionales de la página de inicio, botones y enlaces.
- El fondo principal usa una opacidad del 10% del color secundario seleccionado.
- Haz clic para elegir un valor hexadecimal o desactiva el interruptor para deshabilitar el uso del color secundario.
Footer Color
- Establece el color de fondo del footer de tu portal.
Recomendación: Usa solo colores oscuros para cumplir con los requisitos de contraste WCAG AA con elementos de texto claro.
Junto a los selectores de color hay disponible una vista previa de los botones Home page y Sign In, que muestra cómo se verán los colores seleccionados en los elementos interactivos del learning portal.
Configurar el Banner Slider
El banner slider aparece en la página de inicio de tu portal y puede mostrar contenido promocional o anuncios.
Activar el Slider Activa Show slider on index page para mostrar el banner slider en tu página de inicio.
Agregar y Gestionar Slides Cada slide se puede configurar con las siguientes opciones:
Menú Desplegable de Slide Type Selecciona el tipo de contenido para tu slide:
- Image with text: Muestra una imagen con un título y subtítulo superpuestos
- Image: Muestra solo una imagen
- Video: Muestra contenido de video (las opciones de configuración pueden variar)
Contenido de Texto (para el tipo Image with text)
- Title: Ingresa el encabezado principal (máximo 50 caracteres)
- Subtitle: Ingresa el texto de apoyo (máximo 160 caracteres)
- Translate: Haz clic para abrir un formulario donde puedes establecer títulos y subtítulos para los idiomas disponibles del portal
Destination Page Link Ingresa una URL a la que se redirigirá a los usuarios al hacer clic en el slide. Déjalo vacío si no se necesita un enlace.
Carga de Imágenes
| Plataforma | Especificaciones | Alternativa (Fallback) |
|---|---|---|
| Desktop | Recomendado: 3264×1200px, Mínimo: 1632×600px. Formatos: svg, png, jpg | Banner principal mostrado en escritorio y tablets |
| Mobile | Recomendado: 1500×1260px, Mínimo: 750×630px. Formatos: svg, png, jpg | Si no se sube, se usa la imagen de escritorio como alternativa |
Métodos de Carga:
- Arrastra y suelta una imagen en el área de carga
- Haz clic en Upload image para explorar tus archivos
- Para reemplazar una imagen existente, haz clic en la vista previa de la imagen actual
Add Tint Activa Add tint para aplicar una superposición semitransparente sobre la imagen, mejorando la legibilidad del texto.
Gestionar Varios Slides
- Haz clic en Add slide para crear slides adicionales
- Usa las pestañas de slides para navegar entre los distintos slides
- Haz clic en Remove slide para eliminar el slide actual
App Branding
La pestaña App branding controla cómo aparece tu organización en la aplicación móvil de KnowledgeCity.
Configurar el App Logo
App Logo
- Formatos admitidos: jpg, png, svg.
- Haz clic en Upload Logo para seleccionar una imagen desde tu computadora.
- El logo subido aparece en la maqueta de vista previa en vivo a la derecha.
Configurar los Colores de la App
Tres ajustes de color definen la apariencia de tu app móvil:
| Color | Propósito |
|---|---|
| Primary | Color de marca principal para los elementos clave de la interfaz |
| Secondary | Color de marca de apoyo para los acentos |
| Navigation bar | Color de fondo para la barra de navegación de la app |
Para establecer los colores:
- Haz clic en el selector de color junto a cada campo de color.
- Elige un color usando el selector o ingresa un valor hexadecimal directamente.
- Los cambios se reflejan de inmediato en la maqueta de la app móvil.
Vista Previa en Vivo
El lado derecho de la pestaña App branding muestra una maqueta realista de un dispositivo móvil que muestra:
- El logo de tu app en su posición.
- Los colores primary, secondary y de la navigation bar aplicados a la interfaz.
- Actualizaciones en tiempo real a medida que haces cambios.
Guardar tus Cambios
Después de configurar los ajustes de identidad visual deseados en cualquiera de las dos pestañas, desplázate hasta la parte inferior de la página y haz clic en Save changes para aplicar todas las modificaciones. Los cambios no surtirán efecto hasta que se haga clic en el botón Save.
Conclusión
Has configurado con éxito los ajustes de identidad visual de tu portal de KnowledgeCity LMS. Los logos del sitio web, los colores del tema, el banner slider y la apariencia de la app móvil ahora reflejan la identidad única de tu organización. Una identidad de marca consistente en las plataformas web y móvil crea un entorno de aprendizaje profesional y confiable que conecta con tus usuarios.