# Page étudiant Apprenez à créer une page étudiant qui améliore l’expérience d’apprentissage. L’interface étudiant est le point central de votre cours. Un design épuré 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, en créant un design soigné et attrayant en seulement quelques clics. Ce guide vous montrera comment configurer cette page efficacement, pour en faire 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 ?**\ Au sein de la plateforme Salebot, 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 à tous les supports du cours, * Suivre sa progression à travers les modules et les leçons, * Réaliser les leçons et remettre les devoirs, * Interagir avec les instructeurs ou les animateurs. Cet environnement intégré est conçu pour simplifier 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 simplifie le processus d’apprentissage. Elle permet aux étudiants de : * Trouver rapidement les supports nécessaires et reprendre leurs études exactement là où ils s’étaient arrêtés. * Suivre facilement leur progression, en voyant quelles tâches sont terminées et lesquelles sont encore en attente. * Recevoir les retours de l’instructeur, facilitant ainsi un parcours d’apprentissage plus personnalisé et plus efficace. ## Où configurer la page étudiant {% hint style="success" %} Le constructeur de cours est disponible avec l’abonnement « Businnes ». {% endhint %} Pour commencer, allez dans la section « Cours » dans MaviBot.

Ensuite, sélectionnez le cours pour lequel vous souhaitez configurer la page étudiant, puis allez à sa **paramètres.**

Vous serez alors redirigé vers la page principale des paramètres du cours, où vous devez ouvrir le «**Page étudiant** ».

Maintenant, pour commencer à personnaliser la page étudiant, repérez l’icône d’engrenage afin d’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 seulement 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 principaux éléments de la page sont mises à jour, y compris : * Arrière-plans (images de couverture, arrière-plan de la page, barre de progression, blocs de leçon) * Boutons * Remplissage de la barre de progression * Bordures, contours, etc. **Étape 2 : Choisissez le niveau de rayon des bordures** **a) Rayon nul** – tous les coins et éléments de la page auront un aspect carré.

b) Rayon moyen – les coins et les éléments auront un aspect arrondi ou ovale.

c) Rayon maximal – tous les coins et éléments de la page auront des bords entièrement arrondis.

{% hint style="success" %} 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éverser 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. {% endhint %} ## 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.

{% hint style="warning" %} ## 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 conservant le style du reste de la page selon le Thème principal sélectionné. {% endhint %} #### Couleur d’arrière-plan Ce paramètre modifie la couleur d’arrière-plan de l’ensemble de la page, à l’exception 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 d’arrière-plan Utilisez les paramètres de superposition d’arrière-plan pour appliquer une couleur unifiée aux principaux conteneurs visuels de la page : a) La barre de progression ; b) Les blocs de leçon 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, notamment : a) les boutons de navigation des leçons ; b) le remplissage de la barre de progression ; c) les bordures, les arrière-plans des numéros de leçon et les éléments similaires.

#### Couleur du texte de l’arrière-plan de la page Ce paramètre vous permet de choisir une palette de couleurs attrayante pour le texte affiché sur l’arrière-plan de la page.

#### Couleur du texte de superposition Ce paramètre vous permet de modifier la couleur du texte des principaux éléments de la page étudiant qui apparaissent sur les superpositions d’arrière-plan.

#### Couleur du texte d’accentuation Utilisez ce paramètre pour définir la couleur du texte (police) de tout élément situé sur un arrière-plan coloré en accentuation, y compris les encadrés d’appel et les boutons interactifs.

#### Paramètres supplémentaires Dans les paramètres supplémentaires de la page étudiant, vous pouvez téléverser une image à utiliser comme couverture de la page.

{% hint style="warning" %} ## Veuillez noter L’image téléversée comme couverture de la page étudiant depuis votre appareil ne doit pas dépasser 15 Mo. {% endhint %} Étape 1 : Téléverser une image Vous pouvez téléverser une image directement depuis votre ordinateur.

Ou téléversez une image via un lien depuis votre espace de stockage de fichiers.

L’avantage de téléverser une image via un lien depuis l’espace de stockage de fichiers est que vous pouvez utiliser comme couverture une image de n’importe quelle taille. {% hint style="info" %} Pour plus de détails sur l’utilisation du stockage de fichiers, consultez l’article «[Stockage de fichiers](/doc/fr/chatbot/cloud.md)". {% endhint %} Étape 2 : Hauteur de la couverture Après avoir téléversé l’image, définissez la hauteur appropriée de la couverture sur la page étudiant.

Étape 3 : Position de l’image

Vous pouvez utiliser la **options de positionnement prédéfinies** pour aligner l’image sur le c**entre, à gauche, à droite ou en bas**ou choisissez **des paramètres personnalisés.**

En déplaçant le cercle de contrôle, vous pouvez positionner l’image exactement comme vous le souhaitez. Étape 4 : Taille de l’image

Le **le champ de taille de l’image** accepte des valeurs de c**ontain / 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 des étudiants sur leur 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é permettant d’ajouter des boutons d’appel à l’action personnalisés sous la barre de progression. Vous pouvez lier ces boutons à des sites externes, des documents ou d’autres pages importantes.

Pour ajouter un bouton, ouvrez l’onglet correspondant dans les **paramètres de la page étudiant.**

Puis cliquez sur «**Ajouter un bouton »**. Une fenêtre modale s’ouvrira alors pour la configuration du bouton, et vous devrez saisir le texte du bouton.

Spécifiez maintenant 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 arrière-plan et son texte.

Puis, 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 cela, allez simplement dans le menu des paramètres et cliquez sur « Ajouter un bouton » sous celui déjà existant.

## Bannières

Pour mettre en avant des ressources clés, vous pouvez ajouter des bannières cliquables à la page étudiant. Ces bannières peuvent renvoyer vers 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, repérez et développez la **« Bannières »** section.

Pour ce faire, cliquez sur la section dans le menu déroulant des paramètres :

Étape 2 : Téléverser une image.

Après le téléversement, l’image apparaîtra dans le champ des paramètres. Étape 3 : Accéder 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éversée, et une fenêtre modale de paramètres s’ouvrira :

**Étape 4 : Définir le lien de destination**\ Saisissez l’URL complète vers laquelle les étudiants seront redirigés lorsqu’ils cliqueront sur la bannière. Il peut s’agir d’une page web, d’un bot de messagerie ou de toute autre ressource en ligne. **Étape 5 : Configurer les dimensions de la bannière**\ Définissez la taille d’affichage de la bannière en saisissant les valeurs de largeur et de hauteur. > **Important :** Saisissez uniquement des valeurs numériques dans ces champs (par exemple, `300`). N’incluez pas d’unités comme `px` ou `%`. **Étape 6 : Enregistrer votre configuration**\ Cliquez **« 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éversez 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éversée, la nouvelle bannière apparaîtra sous la bannière précédemment ajoutée sur la page de l’étudiant. 1. Sélectionnez l’option de téléversement d’image sous la bannière ajoutée (le grand bouton de téléversement en bas) :

2. L’image a été téléversée sous la bannière précédemment ajoutée.

3. Sur la page de l’étudiant, la bannière apparaîtra à 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éversé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. 1. Cliquez sur le bouton « + » à droite de l’image téléversée dans les paramètres de la page.

La nouvelle image téléversée sera placée à droite.

2. Sur la page de l’étudiant, la bannière sera affichée sur la même ligne que la bannière précédemment téléversée.

Vous pouvez ajouter des bannières à la fois sur la même ligne et sur les lignes suivantes en même temps.

{% hint style="success" %} C’est bon !\ Vous savez maintenant comment configurer entièrement la page de l’étudiant ! {% endhint %} ## 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 de vérifier 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çon — sont positionnés et mis en forme selon vos configurations. {% hint style="warning" %} ## Veuillez noter L’aperçu est **uniquement une démonstration visuelle**. Les éléments de l’aperçu de la page étudiant sont **non cliquables** et ne déclenchent aucune navigation ni fonctionnalité réelle. {% endhint %} --- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.mavibot.ai/doc/fr/lms/builder/student_page.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.