Configurer les paramètres d’identité visuelle de votre plateforme

Introduction

L’identité visuelle de votre plateforme est composée d'un ensemble d’éléments d’interface que vous pouvez, en tant que Superadmin, personnaliser pour optimiser l’expérience d'apprentissage et l’expérience utilisateur générale sur postes de travail et appareils mobiles. Ces éléments peuvent être définis de manière globale ou pour des clients individuels de l'application Extended enterprise. Ces éléments incluent l’en-tête et le pied de page, des fichiers CSS personnalisés, les boutons qui s’affichent sur la page de connexion, etc.

Cet article explique comment configurer les éléments qui composent l'identité visuelle et l'apparence de la plateforme pour postes de travail. En savoir plus sur la configuration pour les appareils mobiles.

Accéder aux paramètres d’identité visuelle

Pour accéder à l’espace de gestion de l’identité visuelle de votre plateforme, rendez-vous sur le Menu admin depuis l’icône engrenage dans le coin supérieur droit de la plateforme puis cliquez sur Configurer l’identité de marque et visuelle dans la section Paramètres. La page affiche l’onglet pour postes de travail par défaut. Parcourez chaque section de la page de configuration pour personnaliser le thème comme souhaité.

Remarques sur les images ou fichiers multimédias téléversés

De nombreux paramètres relatifs à l’identité visuelle de la plateforme vous permettent de téléverser des images ou d’autres fichiers multimédias. Il s’agit notamment du logo et du favicon dans l’en-tête, de l’image ou de la vidéo d’arrière-plan de la page de connexion, de l’arrière-plan du lecteur de cours et de l’image de couverture de la page de présentation du cours.

Une fois que vous avez téléchargé un fichier, vous verrez apparaître l'icône d’une corbeille rouge vous permettant de le supprimer si nécessaire. Sachez que cette opération supprime immédiatement l’image, même si vous n’enregistrez pas vos modifications.

Personnaliser les en-têtes

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 multilingues accessible depuis l’icône globe dans le coin supérieur droit de la section. En savoir plus sur l’outil de création de contenus en plusieurs langues.

Commencez par la première section Titre de la page. Utilisez le champ textuel correspondant pour saisir 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, et qu’au-delà, 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 insérer un message dans le champ qui suit. Il peut s’agir du slogan ou de 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, et qu’au-delà, il sera tronqué et remplacé par des points de suspension.

Dans la section Logo, cliquez sur le bouton Téléverser votre logo pour sélectionner une image. 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 380x72 px et de s’assurer que la hauteur de l’image n’est pas inférieure à 36 px. Le poids maximum du fichier est de 2 Mo 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éverser un favicon personnalisé. Il s’agit de l’icône qui s’affiche dans l’onglet du navigateur et la barre supérieure. Cliquez sur Téléverser votre favicon et sélectionnez une image PNG ou JPG 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 ce navigateur quant au chargement des favicon dynamiques.

À noter : vous pouvez utiliser l’icône du 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 multilingue de 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éverser 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.

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

Si vous choisissez d’ajouter une vidéo d’arrière-plan en pleine largeur, cliquez sur Téléverser 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 minimale : 1280x720 px ; taille de fichier maximale : 50 Mo.

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 l’icône de la corbeille.

Dans la section Formulaire de connexionstandard de la plateforme et d’afficher uniquement les boutons SSO pour se connecter (Gmail, OKTA, LinkedIn, etc.) sur poste de travail et mobile. Veuillez noter que vous devez avoir configuré et testé l’intégration 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 sur la plateforme (à la fois sur poste de travail et sur 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 à l'aide des 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 sélecteur de couleurs HTML gratuit (s’ouvre dans un nouvel onglet).

Astuce accessibilité : Gardez la notion d’accessibilité à l'esprit lorsque vous configurez l'interface de votre plateforme et profitez des couleurs accessibles incluses dans le thème de couleurs par défaut de Docebo Learn.

Styles personnalisés

Si vous avez des connaissances de base en CSS, vous pouvez personnaliser le style de la plateforme pour postes de travail de manière plus approfondie. Utilisez les champs CSS de cette section pour personnaliser les éléments de la plateforme : 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.

De plus, vous pouvez personnaliser le style de toute page et widget pour poste de travail via CSS, puisque chaque page de la plateforme et chaque widget sont identifiés par un ID unique dans le HTML du fichier CSS automatiquement attribué par la plateforme.

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

Personnaliser le lecteur de cours

La section Lecteur de cours, vous permet de personnaliser le Lecteur de cours. Les paramètres configurés dans cette section sont appliqués en tant que paramètres par défaut pour tous les cours. Cependant, il est possible de définir des paramètres spécifiques de lecteur de cours pour les cours individuels.

Mode focus

Cet espace permet de gérer la configuration par défaut du mode focus du lecteur pour tous les cours et plans de formation.

Lorsque le mode focus est activé, le lecteur de cours s’ouvre par défaut en plein écran :

• Les widgets du cours sont regroupés par espace et au second plan par rapport au lecteur, mais les apprenants peuvent toujours y accéder en cliquant sur le nom du groupe de widgets en bas de la page.
• Lorsque les apprenants ferment le lecteur, ils sont toujours redirigés vers la page où ils ont lancé le cours, qu’il s'agisse d’une page incluant le widget Cours et plans de formation ou la page Mes cours et mes plans de formation.
• Lorsque le cours ne contient qu’un seul contenu pédagogique, les paramètres de visibilité du programme et de navigation en mode théâtre sont ignorés afin de maximiser l’espace pour le contenu. Cela signifie que le programme n’est pas affiché, et que les boutons de navigation pour le contenu pédagogique diffusé en mode théâtre sont masqués.
• La lecture automatique du cours est automatiquement activée.
• Si le cours contient plusieurs contenus pédagogiques, les boutons Leçon suivante et Leçon précédente apparaissent sur le côté droit de l’en-tête, ce qui facilite la navigation entre les leçons et améliore l’expérience de formation. Lorsque vous passez la souris sur ces boutons, une infobulle affiche le titre de la leçon suivante.
• Pour les cours d'un plan de formation, la navigation est dynamique, offrant aux utilisateurs un moyen simple et intuitif de se déplacer entre le contenu du cours et les autres cours du plan. Une fois que les apprenants ont terminé la dernière leçon d'un cours, le bouton Leçon suivante devient Cours suivant, ce qui facilite la navigation dans le plan de formation.
• Le mode focus est disponible pour les formations dirigées par des formateurs (ILT), afin d’aider les apprenants à focaliser leur attention sur le contenu le plus important : l’événement de la session suivante. S’ils ne sont inscrits à aucune session, ils peuvent parcourir et s’inscrire aux sessions disponibles sans quitter la page.
• Pour les Superadmins, les Power Users et les formateurs, le bouton Gérer dans l’en-tête de la page du cours est réduit à un bouton en forme d’engrenage sans texte.
• Les apprenants peuvent s’informer des certificats et certifications délivrés pour le contenu qu’ils consultent grâce au bouton Réalisations en haut de la page du contenu.

Cette configuration est optimale pour profiter d’une expérience de formation immersive et minimiser les distractions.

Le comportement par défaut peut être modifié pour chaque cours (onglet Propriétés > Lecteur) et pour chaque plan de formation (onglet Propriétés > Lecteur). Afin de garantir une navigation cohérente, le mode focus choisi au niveau du plan de formation est appliqué par défaut à tous les cours du plan, remplaçant ainsi toute configuration au niveau du cours.

Visibilité du programme

Ensuite, personnalisez la visibilité par défaut du programme pour tous les cours en choisissant de le masquer ou de l’afficher lorsqu’un utilisateur accède au cours.

L’affichage du programme peut également être géré directement par l’apprenant en utilisant le bouton du panneau sur la page du lecteur de cours (les boutons Afficher le programme du cours et Fermer le programme du cours situés en haut de cet espace).

Lorsque le mode focus est activé, le programme est masqué par défaut, mais les apprenants peuvent toujours choisir de l’afficher manuellement.

Navigation en mode théâtre

Activez ou désactivez l’affichage des boutons de navigation pour tout contenu pédagogique lu en mode théâtre pour l’ensemble des cours e-learning.

Lorsque le mode focus est activé, la configuration de la navigation en mode théâtre est automatiquement désactivée.

Image d’arrière-plan du lecteur

Dans la section Image d’arrière-plan, vous pouvez téléverser une image qui s’affichera en tant qu’arrière-plan du lecteur de cours.

Après avoir téléversé 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.

Apparence du lecteur de cours

Utilisez cet espace pour définir l’apparence par défaut du lecteur pour tous les cours : mode sombre ou mode clair. Le paramètre peut être ignoré pour des cours spécifiques grâce aux propriétés des cours. Ce paramètre régule la couleur du texte, l’en-tête du cours et l’espace du programme du cours pour tous les apprenants.

Si vous avez configuré des règles CSS personnalisées pour le lecteur dans la section CSS pour les contenus pédagogiques HTML, ces règles prévalent sur ce paramètre.

Le lecteur de cours s’affiche en mode sombre par défaut.

À noter : lors de la configuration des paramètres d’identité visuelle de clients d’entreprises étendues, si vous désactivez les paramètres personnalisés pour l’Apparence du lecteur de cours, ce dernier passera par défaut en mode sombre, indépendamment des paramètres de la plateforme racine.

CSS pour les contenus pédagogiques HTML

Enfin, vous pouvez ajouter du CSS personnalisé pour le contenu pédagogique de type page HTML.

Dans cette section, vous pouvez copier et coller vos classes CSS. Elles seront automatiquement appliquées à l’ensemble de votre contenu pédagogique de type page HTML.

Personnaliser la page de présentation du cours

Disposition de l’en-tête

La section Page de présentation du cours vous permet de configurer un en-tête par défaut pour toutes les pages de cours et de plan de formation dans les catalogues. Il est possible d’écraser cette configuration par défaut pour chaque cours à partir de la section Disposition de l’en-tête de l’onglet propriétés du cours, et pour chaque plan de formation, depuis l’onglet Détails.

Les options disponibles sont :

• Disposition avec couleur unie : pour utiliser une couleur unie, par exemple pour mettre l’accent sur celles de votre marque. Insérez le code HEX dans le champ Code couleur ou sélectionnez la couleur depuis la roue chromatique. Veuillez noter que la couleur sélectionnée est toujours ombrée de noir.
• Disposition de l’image de couverture : la sélection d’une image pour l’en-tête du cours a un fort impact sur la page de ce dernier. En savoir plus sur les images d'en-tête des cours.
• Disposition de base : sélectionnez cette option pour obtenir un en-tête minimal et épuré, sans images ni couleurs.

Vue de départ de l'e-learning

Dans cette section, vous pouvez choisir si les utilisateurs arrivent directement sur la page du lecteur lorsqu’ils accèdent à un cours ou sur une page de présentation, pour tous les cours e-learning. La configuration de cette option peut être modifiée pour chaque cours grâce aux Propriétés du cours, sur l’onglet Lecteur de la section Vue de départ.

La page de présentation s’affiche avant le lecteur de cours, et comprend les détails sur le cours et sur l’inscription, ce qui permet aux apprenants de se concentrer uniquement sur le contenu du cours une fois qu’ils accèdent au lecteur, puisque ce dernier sera le centre d’intérêt principal de la page.

Selon la configuration du cours et le statut d’inscription de l’apprenant, la page d’aperçu inclut différents types d’informations à ces sujets, afin d’offrir une idée claire de ce à quoi s’attendre.

Les widgets du cours sont toujours affichés sous le lecteur de cours et pas sur la page de présentation, que celle-ci soit activée ou non.

Meilleures pratiques

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

• Respectez le style de votre site web officiel. Essayez de suivre autant que possible, la même structure et les mêmes couleurs.
• Soignez la lisibilité du contenu. 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.
• Faites en plus avec moins. Si vous n’avez pas de guide de style, commencez par utiliser les couleurs de votre logo.