REMARQUE : Une partie du contenu de cet article comprend des détails uniquement disponibles avec la nouvelle page de cours. En tant que Superadmin, vous pouvez activer la nouvelle page de cours pour vous uniquement, la tester et l'activer pour tous les utilisateurs. En savoir plus sur la nouvelle page de cours. 

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 pour le desktop et le mobile. Ces éléments peuvent être définis de manière globale ou pour des clients individuels de l'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 desktop. En savoir plus sur la configuration mobile. 

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

Pour accéder à la gestion de l’identité visuelle 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 Configurer l’image de marque et d'identité visuelle 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 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 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 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 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é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 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 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. 

Si vous avez activé un catalogue public dans l’onglet Catalogues de cours dans le menu Paramètres Aavancé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é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 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 à 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 cet outil de sélecteur de couleurs HTML gratuit.(s'ouvre dans un nouvel onglet) 

Astuce accessibilité : Gardez l'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 desktop de manière plus approfondie. 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 le style 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.

Personnaliser le Lecteur de vours

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. 

Vue de départ du cours

A noter: cette section n'est pas disponible si vous avez activé la nouvelle page de cours. 

Dans cette section, vous pouvez choisir si les utilisateurs arrivent directement sur la page de lecteur de cours lorsqu'ils accèdent à un cours ou sur une pré-page, pour tous les cours. 

La pré-page de cours est une page d'aperçu qui s'affiche avant le lecteur de cours lorsque les apprenants sélectionnent un cours. Lorsque la pré-page est activée, tous les widgets du cours sont affichés sur la pré-page au lieu d''être sur la page de lecteur de cours et le contenu du cours est déplace vers l'onglet Contenu. Cette configuration peut aider les apprenants à se concentrer sur le contenu du cours en laissant toutes les informations supplémentaires sur une page séparée. 

La pré-page de cours est optionnelle pour les cours e-learning mais obligatoire pour les cours ILT (Instructor-Led Training). Cela veut dire que la pré-page de cours s'affiche pour les cours ILT peu importe l'option que vous sélectionnez dans cette section. 

Visibilité par défaut de la Table des matières

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-chapitres.

Image d'arrière-plan

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.

Navigation Lightbox

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.

CSS pour les contenus pédagogiques HTML

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. 

Personnaliser la page du catalogue de cours

A noter: cette section n'est pas disponible si vous avez activé la nouvelle page de cours. 

La section Page du catalogue de cours permet de configurer un en-tête de cours 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 Mise en page de l'en-tête de l'onglet Propriétés du cours et pour chaque plan de formation à partir de l'onglet Détails.

Les options possibles sont : 

• Mise en page couleur unie: pour utiliser une couleur unie, par example pour mettre l'accent sur vos couleurs de marque. Insérez le code HEX dans l'espace Code couleur ou sélectionnez-la depuis la roue chromatique. Veuillez noter que la couleur sélectionnée est toujours ombrée de noir. 
• Mise en page image de couverture : Sélectionner une image pour l'en-tête du cours imprègne un impact fort à la page de cours. En savoir plus sur les images d'en-tête des cours. 
• Mise en page de base : Sélectionnez cette option pour obtenir un en-tête minimal et épuré, sans images ni couleurs.

Bonnes pratiques

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

• Appliquez 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.
• En faire plus avec moins. Si vous n’avez pas de guide de style, commencez par utiliser les couleurs de votre logo.