Introduction

L’aspect de la plateforme est composé d’un ensemble d’éléments d’interface que vous pouvez, en tant que Superadmin, personnaliser pour optimiser l’expérience apprenant et l’expérience utilisateur générale pour le desktop et le mobile. Ces éléments peuvent être définis de manière globale ou pour les clients individuels de votre Extended Enterprise. Ces éléments incluent l’entête et le pied de page, des fichiers CSS personnalisés, les boutons qui s’affichent sur la page de connexion et encore d'autres.

Cet article explique comment configurer l’image de marque et l’aspect de la plateforme desktop. Référez-vous à cet article pour la configuration mobile. 

Accéder aux Paramètres d’Aspect 

Pour accéder à la gestion de l’aspect dans la plateforme, accédez au Menu Admin depuis l’icône engrenage dans le coin supérieur droit de la plateforme puis cliquez sur Configurez l’Image de Marque et Configuration de l’Aspect dans la section Paramètres. La page affiche l’onglet desktop par défaut. Parcourez chaque section de la page de configuration pour personnaliser le thème comme souhaité. 

Personnaliser l’En-tête

Dans la section En-tête, vous pouvez personnaliser la plateforme avec votre titre, message d’en-tête, logo et favicon. Veuillez noter que les champs texte dans cette section peuvent être créés en plusieurs langues en utilisant l’outil de sélection multilangues accessible depuis l’icône globe dans le coin supérieur droit de la section. Référez-vous à cet article pour en savoir plus sur l’utilisation de cet outil.

Commencez par la première section Titre de la Page. Utilisez le champ texte correspondant pour entrer le nom de votre plateforme. Celui-ci apparaîtra dans l’onglet du navigateur et dans la barre supérieure de la page d’accueil de votre plateforme. Veuillez noter que la limite de caractères pour ce champ est de 1000, au-delà de cette limite le nom est tronqué par des points de suspension.

Puis, choisissez si vous souhaitez un message d’en-tête dans la section correspondante. Quand cette option est activée, vous pouvez entrer un message dans le champ qui suit. Cela peut être le slogan ou la vision de votre entreprise etc. Ce texte peut être modifié à souhait en utilisant la barre d’outils au-dessous de la zone de texte. Le message d’en-tête apparaît sous votre logo sur la plateforme et sur la page de connexion. Veuillez noter que le nombre de caractères est limité à 340 pour ce texte, au-delà de cette limite, il sera tronqué par des points de suspension. 

Dans la section Logo, cliquez sur le bouton Choisir Fichier pour sélectionner une image pour votre logo. Afin de garantir de bonnes performances en matière de chargement des pages et d’éviter les problèmes liés à certaines fonctionnalités comme les rapports, nous suggérons d’utiliser une taille maximale pour le logo de 380x72px et de s’assurer que la hauteur de l’image n’est pas inférieure à 36px. Le poids maximum du fichier est de 2Mo et les formats autorisés sont JPG, PNG, JPEG et GIF. Votre nouveau logo apparaîtra dans le coin supérieur gauche de la plateforme. Vous pouvez également télécharger un favicon personnalisé. Il s’agit de l’icône qui s’affiche dans l’onglet du navigateur et la barre supérieur. Cliquez sur Télécharger votre Favicon et sélectionnez une image png en 16×16 depuis votre ordinateur. Veuillez noter que vous pouvez avoir quelques difficultés à afficher votre favicon en utilisant Safari à cause des limitations de Safari sur le chargement des favicon dynamiques.  

Vous pouvez utiliser l’icône globe dans le coin supérieur droit de cette section pour créer le Message d’en-tête dans plusieurs langues en utilisant l’outil multilanguesde la plateforme mais le Titre de la Page ne peut être ajouté que dans une seule langue.

Personnaliser la Page de Connexion

Dans la section Arrière-plan de la Page de Connexion, choisissez le type d’arrière-plan que vous souhaitez. Si vous choisissez d’avoir une couleur pour arrière-plan, sélectionnez la couleur en utilisant l’outil qui s'affiche ou en entrant le code HEX correspondant.

Si vous choisissez d’avoir une image qui s’affiche en pleine largeur, cliquez sur Télécharger votre image. Les formats pris en charge sont JPG et PNG. La résolution recommandée est 1280x720 px et le poids maximum du fichier est de 10 Mo. Si vous souhaitez supprimer cette image, sélectionnez la corbeille rouge. 

Si vous avez activé un Catalogue Public dans l’onglet Catalogues de Cours dans le menu Paramètres Avancés, veuillez noter que seul l’arrière-plan couleur et l'arrière-plan image seront disponibles. L’arrière-plan vidéo ne sera pas disponible. Si vous avez activé (ou prévoyez de le faire) un catalogue public, envisagez d’utiliser une image plus petite car la zone dédiée à l’image d’arrière-plan est partiellement recouverte par la zone du catalogue.

Si vous choisissez d’ajouter une vidéo d’arrière-plan en pleine largeur, cliquez sur Télécharger Votre Vidéo. Les formats pris en charge sont MP4 et H264. Les caractéristiques suggérées pour le fichier sont : taille de fichier recommandé 1,5-2 Mo; bitrate: 500-800 kbps; résolution minimum: 1280x720 px; taille de fichier maximum: 50Mo.

Vous pouvez également insérer une image de repli qui s’affichera dans le cas où la vidéo n’est pas prise en charge ou ne s’affiche pas correctement. Si vous souhaitez supprimer la vidéo, sélectionnez la corbeille. 

Dans la section Formulaire de connexion, vous pouvez choisir de cacher le formulaire de connexion standard de la plateforme et d’afficher uniquement les boutons SSO pour se connecter  (Gmail, OKTA, LinkedIn, etc.) sur desktop et mobile. Veuillez noter que vous devez avoir configuré et testé la configuration SSO avant d’activer cette option.  

Quand cette option est sélectionnée, le paramètre Empêcher les utilisateurs de changer leur mot de passe dans l'onglet Utilisateurs des Paramètres Avancés de la plateforme est activé par défaut et ne peut pas être désactivé sauf si Afficher uniquement les boutons SSO et cacher le formulaire de connexion est également désactivé. Cette configuration empêche les utilisateurs de changer leur mot de passe dans la plateforme (à la fois sur desktop et mobile), ce qui ferait perdre la synchronisation avec le mot de passe défini dans le fournisseur d'identité.

Personnaliser les Couleurs

Dans la section Couleurs, vous pouvez sélectionner les couleurs de chaque type de texte dans votre plateforme. Entrez les codes HEX dans les zones de texte correspondantes ou sélectionnez les couleurs en utilisant les roues chromatiques. 

Vous pouvez obtenir la bonne couleur HEX de différentes façons, mais si vous n’avez pas de logiciel graphique particulier, vous pouvez simplement utiliser ce site gratuit. 

Styles Personnalisés

Si vous avez des connaissances de base en CSS, vous pouvez personnaliser l’aspect de la plateforme desktop de manière plus poussée. Utilisez les zones CSS de cette section pour personnaliser les éléments de la plateforme desktop : police, taille, style etc. Identifiez les éléments que vous souhaitez modifier ainsi que les caractéristiques principales. Les zones de texte CSS contiennent un éditeur de code intégré qui vous permet de tirer parti des options disponibles dans l’éditeur lui-même.

Voici quelques bonnes pratiques pour votre personnalisation : 

• Enregistrez vos paramètres actuels dans un document ou un fichier pour pouvoir les récupérer facilement à tout moment.
• Testez vos changements sur l’inspecteur de votre navigateur avant de les appliquer à votre environnement réel. 
• Gardez deux onglets ou fenêtres ouverts, un pour faire vos changements et un autre pour visualiser les changements en mode incognito ou dans un autre navigateur. 

De plus, vous pouvez personnaliser l’aspect de toute page desktop et widget via CSS puisque chaque page de la plateforme et chaque widget est identifié par un ID unique dans le HTML du fichier CSS automatiquement attribué par la plateforme. 

Votre CSS personnalisé peut être altéré par les nouvelles versions. Dans ce cas, toute rétrocompatibilité avec votre code n’est pas garantie.

Le 26 janvier 2021, de nouvelles zones de la plateforme desktop deviennent accessibles y compris les pages intégrées et les pages widget. Si vous avez personnalisé l’aspect de pages nouvellement accessibles via CSS, vous pourriez être amené à faire une mise à jour afin de l’adapter au nouveau format. Pour cette raison, à partir du 20 janvier 2021, les Superadmins pourront tester directement sur la plateforme si votre CSS actuel est compatible avec celui publié le 26 janvier 2021. En savoir plus. 

Personnaliser le Lecteur de Cours

Dans la section Lecteur de Cours, vous pouvez personnaliser les paramètres généraux du lecteur de cours. Veuillez noter que tout paramètre configuré ici sera appliqué comme paramètre par défaut pour tous les cours mais vous pouvez spécifier des paramètres locaux de lecteur de cours pour chaque cours en allant dans les Paramètres Avancés du cours ou en modifiant le contenu pédagogique.

Dans la première section, choisissez si vous souhaitez activer de manière globale la pré-page du cours (page d’aperçu) pour tous les cours. La page d’aperçu peut être activée pour tous les types de cours : E-Learning, ILT Présentiel et Webinar. Si elle est optionnelle pour les cours E-Learning, elle est obligatoire pour les cours ILT présentiels et pour les cours Webinar. Cela veut dire que la page d’aperçu s’affichera pour les cours ILT présentiels et Webinar quelle que soit l’option que vous choisissez dans cette section. 

Puis, choisissez si vous souhaitez que le panneau de Table des Matières s’affiche par défaut quand un utilisateur entre sur la page de lecteur de cours.

L’affichage de la table des matières peut être gérée directement par l’apprenant en utilisant le bouton du panneau sur la page du lecteur de cours, qui permet de choisir parmi les options suivantes:

• Visibilité complète. La table des matières complète est visualisée à droite du lecteur
• Visibilité réduite. La table des matières est visualisée en-dessous du lecteur
• Visibilité compacte. La table des matières ne montre que les icônes des contenus pédagogiques du cours, à droite du lecteur. Ce type de visibilité n'est pas disponible quand les contenus pédagogiques sont organisés en dossiers, ou s'ils incluent du contenu multi-chapitre.

Dans la section Image d’Arrière-Plan, vous pouvez télécharger une image qui s’affichera en tant qu’arrière-plan du lecteur de cours. Après avoir téléchargé l’image, choisissez si vous souhaitez l’étirer pour l’adapter à la taille de la page ou si vous souhaitez conserver son aspect et la centrer sur la page du lecteur de cours.

Puis utilisez le toggle pour décider d’afficher ou de cacher les boutons de navigation pour tout contenu pédagogique lu en modalité Lightbox. Vous pouvez également définir cette option de manière locale pour des cours spécifiques dans les Paramètres Avancés du cours.

Enfin, vous pouvez ajouter du CSS personnalisé pour le contenu pédagogique de Pages HTML. Dans cette section, vous pouvez copier-coller vos classes CSS. Elles seront automatiquement appliquées à tout votre contenu pédagogique de pages HTML. 

Bonnes Pratiques et Astuces

Si vous n’êtes pas graphiste, suivez ces suggestions simples : 

• Suivez l’aspect de votre site web officiel. Essayez de suivre autant que possible, la même structure et les mêmes couleurs.
• Faites en sorte que ce soit lisible. Vérifiez le contraste entre texte/arrière-plan ou logo/arrière-plan. Si vous modifiez la taille de la police, n’oubliez pas qu’elle doit être lisible sur l’appareil de votre utilisateur.
• Le moins peut être le plus. Si vous n’avez pas de guide de style, essayez de repartir des couleurs de votre logo.
• Prévisualisez le thème avant de le mettre en ligne. Vérifiez vos résultats finaux et pensez à interroger d’autres personnes dans votre entreprise sur leur expérience d’apprentissage en fonction de vos changements.