Cómo Configurar los Temas y la Identidad Visual del Portal

Resumen

Aprende a personalizar la apariencia del portal del LMS usando temas predefinidos o personalizados. Este artículo explica cómo configurar colores, subir imágenes y configurar una identidad visual personalizada que se ajuste a la identidad visual de tu organización.

Introducción

Esta función del LMS permite a los administradores personalizar la apariencia del portal seleccionando entre una variedad de temas. Todo el proceso es rápido, toma solo un minuto dentro del LMS, y no requiere ninguna experiencia en diseño o desarrollo. Con patrones ya elaborados y una selección de temas, los administradores pueden cambiar fácilmente la interfaz para adaptarla a su manual de marca, mejorando la experiencia general.

Requisitos

✅ El usuario debe tener permisos de Admin para modificar los ajustes de la interfaz. ✅ Las funciones de personalización deben estar habilitadas a nivel del sistema. ✅ Los temas y plantillas disponibles ya deben estar configurados en el LMS.

Pasos a Seguir

Paso 1: Acceder a los Ajustes de Interfaz

1. Inicia sesión en el LMS con una cuenta de administrador que tenga Full Access.
2. Ve a la sección Portal Settings > Website branding > Portal Theme.

Paso 2: Seleccionar un Tema

1. Elige uno de los temas preinstalados disponibles bajo "Portal theme", como "Default", "Kaleidoscope", "Impulse", "Dynamics" o "Custom".
2. Una vez seleccionado un tema, los cambios se aplicarán de inmediato, y podrás ver cómo afectan la apariencia del portal en tiempo real. Se mostrará una vista previa de los colores elegidos (Primary, Secondary y Footer), incluyendo el diseño actualizado y el esquema de color para áreas clave como las páginas "Home" y "Sign In" (puedes alternar entre ellas haciendo clic en los botones de Home page y Sign in en la ventana de vista previa), visible de inmediato en la interfaz del LMS. La vista previa de la Home page es desplazable, lo que te permite explorar y revisar cómo se aplican los ajustes en toda la página, ofreciendo una vista completa del nuevo diseño.
3. Cambiar los códigos de color: El color personalizable puede establecerse en formato HEX o cambiarse a otros códigos, como RGB o HSL, usando el menú desplegable.
4. Font Color: El color del texto se ajusta automáticamente para lograr un contraste óptimo con el fondo.

Nota: El color negro para el título/subtítulo en la sección Featured categories es estático y no cambia según el color primario del portal en el tema Default.

1. Los colores seleccionados se aplicarán a algunos bloques de la página de inicio, botones y enlaces.
2. Después de revisar los cambios, si todo te parece bien, guarda los ajustes.

Paso 3: Configuración de un Tema Personalizado

1. Si deseas crear tu propio tema exclusivo, selecciona la opción "Custom" en la lista de temas.

1. Se abrirá una interfaz que te permite elegir colores y otros elementos visuales. En la pantalla, puedes ver varias opciones de personalización que permiten al usuario seleccionar los colores primary, secondary y footer, el Portal corner radius, agregar una imagen al fondo en las ventanas de "Featured Category", "Sign In" y en el "App Banner" en lugar de un color sólido, y usar un color personalizado para el texto en "Featured Category", la ventana "Sign In" y el "App Banner".

Nota importante: Para los usuarios árabes, el sistema permite agregar imágenes en formato árabe para el Feature Category, la ventana Sign In y el App Banner. Si se ha subido una imagen de fondo y desactivas el interruptor "Add Arabic version", la imagen de fondo para la versión en árabe se eliminará. Solo se puede establecer un tono oscuro de color para el footer. Si el administrador selecciona un tono claro, verá inmediatamente un error y ese color no podrá guardarse.

Otras Personalizaciones

En la sección Featured Categories, dentro de Settings > Portal settings > General > Featured categories, un usuario puede cambiar el título y el subtítulo en todos los idiomas del portal.

Una vez que hayas configurado el tema a tu satisfacción, revisa la vista previa para asegurarte de que todo se vea como esperas. La vista previa en el lado derecho de la interfaz te permitirá ver cómo los cambios afectan la apariencia del portal en tiempo real. Si todo está como esperabas, haz clic en "Save changes" para aplicar los ajustes de tu tema personalizado en todo el portal.

Resultado Esperado

Después de guardar, el tema seleccionado y las personalizaciones se aplican de inmediato en todo el portal del LMS. Los administradores y usuarios verán la identidad visual actualizada en todas las páginas principales, incluyendo Home, Sign In, Learning Library y Email Templates.

Solución de Problemas