Apprenez à créer une page étudiant qui améliore l'expérience d'apprentissage.
L'interface étudiant est la base de votre cours. Un design propre et convivial maintient les étudiants concentrés et motivés, transformant les visiteurs occasionnels en apprenants engagés.
Les thèmes et paramètres personnalisés vous permettent d'adapter l'apparence de votre page étudiant, créant un design soigné et attrayant en quelques clics. Ce guide vous montrera comment configurer cette page efficacement, la transformant en un hub central qui reflète le style de votre cours tout en garantissant une expérience d'apprentissage fluide.
Qu'est-ce qu'une page étudiant ?
Sur la plateforme Mavibot, la page étudiant est un tableau de bord personnalisé qui sert d'espace de travail principal pour votre cours. Elle regroupe tous les outils dont un apprenant a besoin, lui permettant de :
- Accéder à tout le contenu et aux supports du cours,
- Suivre sa progression à travers les modules et les leçons,
- Terminer les leçons et soumettre les devoirs,
- Interagir avec les instructeurs ou les facilitateurs.
Cet environnement intégré est conçu pour rationaliser le parcours d'apprentissage, en gardant les étudiants concentrés, organisés et motivés.
Pourquoi la page étudiant est-elle importante ?
La page étudiant structure et rationalise le processus d'apprentissage. Elle permet aux étudiants de :
- Localiser rapidement les documents nécessaires et reprendre leurs études exactement là où ils se sont arrêtés.
- Suivre facilement leur progression, en voyant quelles tâches sont terminées et lesquelles sont encore en attente.
- Recevoir les commentaires de l'instructeur, facilitant ainsi un parcours d'apprentissage plus personnalisé et efficace.
Où configurer la page étudiant
Le constructeur de cours est disponible avec le plan d'abonnement « Business ».
Pour commencer, allez dans la section « Cours » dans MaviBot.
Ensuite, sélectionnez le cours pour lequel vous souhaitez configurer la page étudiant, et allez dans ses paramètres.
Vous serez alors redirigé vers la page principale des paramètres du cours, où vous devez ouvrir l'onglet « Page étudiant ».
Maintenant, pour commencer à personnaliser la page étudiant, localisez l'icône d'engrenage pour ouvrir le menu des paramètres.
Lorsque vous cliquez sur l'icône d'engrenage, un menu s'ouvre avec les paramètres du thème par défaut (personnalisé), de votre propre thème (modifiable), ainsi que des paramètres supplémentaires et l'option d'ajouter des boutons personnalisés.
Thème principal
Le thème principal de la page étudiant se compose de thèmes préinstallés et prêts à l'emploi qui vous permettent de personnaliser la page en quelques clics.
Étape 1 : Choisissez une palette de couleurs pour le thème principal
Vous pouvez choisir parmi 7 thèmes clairs et 2 thèmes sombres.
Lorsqu'un thème personnalisé est appliqué, les couleurs de tous les éléments principaux de la page sont mises à jour, y compris :
- Arrière-plans (images de couverture, fond de page, barre de progression, blocs de leçons)
- Boutons
- Remplissage de la barre de progression
- Bordures, contours, etc.
Étape 2 : Choisissez le niveau de rayon de bordure
a) Rayon zéro – tous les coins et éléments de la page apparaîtront carrés.
b) Rayon moyen – les coins et éléments apparaîtront arrondis ou ovales.
c) Rayon maximal – tous les coins et éléments de la page auront des bords entièrement arrondis.
Excellent !
Vous savez maintenant comment configurer rapidement le thème principal de votre page étudiant.
Si vous souhaitez ajouter des boutons supplémentaires, télécharger une image de couverture personnalisée ou appliquer votre propre palette de couleurs unique à la page, nous vous recommandons de continuer vers les sections suivantes de cet article.
Thème personnalisé
Les paramètres de l'onglet « Thème personnalisé » vous permettent d'appliquer vos propres palettes de couleurs uniques et variées aux éléments de la page étudiant.
Veuillez noter
Le thème principal et le thème personnalisé peuvent être utilisés ensemble.
Par exemple, vous pouvez utiliser les paramètres de l'onglet Thème personnalisé pour appliquer des couleurs à seulement quelques éléments, tout en gardant le reste de la page stylisé selon le thème principal sélectionné.
Couleur de fond
Ce paramètre modifie la couleur de fond de toute la page, à l'exclusion des éléments individuels.
Cliquez sur le carré pour ouvrir la palette de couleurs et sélectionner la couleur souhaitée.
En plus d'une large palette de couleurs pour chaque élément, vous pouvez également ajuster l'intensité de la couleur à l'aide de l'échelle de transparence.
Couleur de superposition de fond
Utilisez les paramètres de superposition de fond pour appliquer une couleur unifiée aux conteneurs visuels principaux de la page :
a) La barre de progression ;
b) Les blocs de leçons individuels ;
c) La zone de l'image de couverture du cours.
Couleur d'accentuation
Les paramètres de couleur d'accentuation vous permettent de modifier la palette de couleurs des principaux éléments mis en évidence sur la page étudiant, y compris :
a) les boutons de navigation des leçons ;
b) le remplissage de la barre de progression ;
c) les bordures, les fonds de numéros de leçons et les éléments similaires.
Couleur du texte de fond de page
Ce paramètre vous permet de choisir une palette de couleurs attrayante pour le texte affiché sur le fond de la page.
Couleur du texte de superposition
Ce paramètre vous permet de modifier la couleur du texte pour les éléments principaux de la page étudiant qui apparaissent sur les superpositions de fond.
Couleur du texte d'accentuation
Utilisez ce paramètre pour définir la couleur du texte (police) pour tout élément qui se trouve sur un fond de couleur d'accentuation, y compris les boîtes d'appel et les boutons interactifs.
Paramètres supplémentaires
Dans les paramètres supplémentaires de la page étudiant, vous pouvez télécharger une image à utiliser comme couverture de la page.
Veuillez noter
L'image téléchargée comme couverture de la page étudiant depuis votre appareil ne doit pas dépasser 15 Mo.
Étape 1 : Téléchargement d'une image
Vous pouvez télécharger une image directement depuis votre ordinateur.
Ou télécharger une image via un lien depuis votre stockage de fichiers.
L'avantage de télécharger une image via un lien depuis le stockage de fichiers est que vous pouvez utiliser une image de n'importe quelle taille comme couverture.
Pour plus de détails sur l'utilisation du stockage de fichiers, consultez l'article « Stockage de fichiers ».
Étape 2 : Hauteur de la couverture
Après avoir téléchargé l'image, définissez la hauteur appropriée de la couverture sur la page étudiant.
Étape 3 : Position de l'image
Vous pouvez utiliser les options de positionnement prédéfinies pour aligner l'image au centre, à gauche, à droite ou en bas, ou choisir des paramètres personnalisés.
En déplaçant le contrôle circulaire, vous pouvez positionner l'image exactement comme vous le souhaitez.
Étape 4 : Taille de l'image
Le champ de taille d'image accepte les valeurs contain / cover, ainsi que des valeurs numériques en pixels (px) et pourcentages (%).
1) valeurs contain/cover
2) valeurs numériques
Étape 5 : Répétition de l'image
L'image peut être répétée le long de l'axe Y, c'est-à-dire verticalement ; le long de l'axe X, c'est-à-dire horizontalement ou sans répétition.
Étape 6 : Cases à cocher
Pour améliorer l'expérience de l'étudiant sur sa page personnelle, vous pouvez activer l'affichage de :
- la barre de progression,
- le nombre de leçons terminées, et
- le nombre de devoirs approuvés.
Si vous ne souhaitez pas utiliser ces éléments sur la page, vous pouvez désactiver les cases à cocher.
Boutons
La page étudiant inclut une fonctionnalité pour ajouter des boutons d'appel à l'action personnalisés sous la barre de progression. Vous pouvez lier ces boutons à des sites Web externes, des documents ou d'autres pages importantes.
Pour ajouter un bouton, ouvrez l'onglet correspondant dans les paramètres de la page étudiant.
Ensuite, cliquez sur « Ajouter un bouton ».
Une fenêtre modale s'ouvrira alors pour la configuration du bouton et saisissez un texte de bouton.
Maintenant, spécifiez le lien de destination (URL) pour ce bouton.
Les couleurs du bouton hériteront automatiquement de la palette du thème principal. Cependant, vous pouvez remplacer cela en définissant une couleur personnalisée pour son fond et son texte.
Ensuite, cliquez sur « Enregistrer ».
Le bouton est maintenant enregistré et actif. Vous le verrez affiché sous la barre de progression sur la page étudiant.
Vous pouvez ajouter plusieurs boutons – pour ce faire, allez simplement dans le menu des paramètres et cliquez sur « Ajouter un bouton » sous celui existant.
Bannières
Pour promouvoir des ressources clés, vous pouvez ajouter des bannières cliquables à la page étudiant. Ces bannières peuvent être liées à n'importe quelle URL que vous spécifiez, comme un bot de messagerie, un groupe communautaire, un document important ou un site Web externe.
Passons à la configuration.
Étape 1 : Accéder aux paramètres des bannières
Dans les paramètres de la page du cours, localisez et développez la section « Bannières ».
Pour ce faire, cliquez sur la section dans le menu déroulant des paramètres :
Étape 2 : Téléchargez une image.
Après le téléchargement, l'image apparaîtra dans le champ des paramètres.
Étape 3 : Accédez aux paramètres de l'image.
Pour ce faire, cliquez sur l'icône d'engrenage dans le coin supérieur gauche de l'image téléchargée, et une fenêtre modale de paramètres s'ouvrira :
Étape 4 : Définissez le lien de destination
Entrez l'URL complète vers laquelle les étudiants seront redirigés en cliquant sur la bannière. Cela peut être une page Web, un bot de messagerie ou toute autre ressource en ligne.
Étape 5 : Configurez les dimensions de la bannière
Définissez la taille d'affichage de la bannière en entrant des valeurs pour la largeur et la hauteur.
Important : Entrez uniquement des valeurs numériques dans ces champs (par exemple,
300). N'incluez pas d'unités commepxou%.
Étape 6 : Enregistrez votre configuration
Cliquez sur « Enregistrer » pour appliquer tous les paramètres de la bannière.
Configuration terminée !
Votre bannière cliquable est maintenant active. Elle apparaîtra sur le côté droit de la page étudiant, sous la barre de progression (à condition que la fonctionnalité de bannière soit activée).
Comment ajouter plusieurs bannières
Vous pouvez ajouter plusieurs bannières à une seule page. Pour ce faire, téléchargez une image dans les paramètres et configurez-la comme décrit ci-dessus.
Si vous cliquez sur « Ajouter une image » sous une image déjà téléchargée, la nouvelle bannière apparaîtra sous la bannière précédemment ajoutée sur la page de l'étudiant.
- Sélectionnez l'option de téléchargement d'image sous la bannière ajoutée (le grand bouton de téléchargement en bas) :
- L'image a été téléchargée sous la bannière précédemment ajoutée.
- Sur la page de l'étudiant, la bannière apparaîtra sur la ligne suivante après celle précédemment ajoutée.
Si vous cliquez sur le bouton « + » à droite d'une image déjà téléchargée, la nouvelle bannière apparaîtra sur la même ligne que la bannière précédemment ajoutée sur la page de l'étudiant.
- Cliquez sur le bouton « + » à droite de l'image téléchargée dans les paramètres de la page.
L'image nouvellement téléchargée sera placée à droite.
- Sur la page de l'étudiant, la bannière sera affichée sur la même ligne que celle précédemment téléchargée.
Vous pouvez ajouter des bannières à la fois sur la même ligne et sur les lignes suivantes en même temps.
Tout est prêt !
Vous savez maintenant comment configurer complètement la page de l'étudiant !
Aperçu de la page
Après avoir configuré la page de l'étudiant, n'oubliez pas d'enregistrer votre progression.
Après avoir enregistré les paramètres, cliquez sur le bouton « Aperçu ».
Ensuite, sélectionnez « Aller à la page étudiant ».
Vous serez redirigé vers l'aperçu de la page étudiant.
En mode édition, le panneau d'aperçu vous permet d'inspecter visuellement la mise en page finale. Vous pouvez voir comment tous les éléments—tels que la barre de progression, les bannières, les boutons et les blocs de leçons—sont positionnés et stylisés selon vos configurations.
Veuillez noter
L'aperçu est destiné à une démonstration visuelle uniquement. Les éléments de l'aperçu de la page étudiant ne sont pas cliquables et ne déclenchent aucune navigation ou fonctionnalité réelle.