Dans le monde de l'apprentissage en ligne, la facilité de navigation joue un rôle clé pour attirer et fidéliser les utilisateurs. Les fiches de cours personnalisables sont un excellent moyen de rendre votre site web plus interactif et informatif.
Ces fiches permettent aux visiteurs de trouver rapidement les programmes qui les intéressent et de naviguer facilement vers les pages de cours en un seul clic. Dans cet article, nous allons voir comment configurer une section de fiches de cours personnalisables pour améliorer l'ergonomie de votre site web et aider les utilisateurs à atteindre leurs objectifs pédagogiques plus rapidement.
Au lieu d'utiliser des flashcards en ligne, vous pouvez ajouter des listes de leçons à la page du site web : il suffit de sélectionner le cours requis dans la section et toutes les leçons s'afficheront.
Comment ajouter la section « Fiches de cours »
Pour ajouter la section « Fiches de cours », cliquez sur le « + » en mode édition de votre site web.
Ensuite, trouvez la section « Fiches de cours » dans le menu qui s'ouvre et cliquez dessus pour ajouter la section à votre site web :
La section sera ajoutée à votre site web et le menu de paramétrage du contenu s'ouvrira pour vous :
Section Contenu
La configuration du contenu de la section Fiches de cours consiste à sélectionner un ou plusieurs cours déjà créés dans le projet pour les afficher sur le site web et à personnaliser les éléments de la fiche.
La création de cours sur la plateforme Mavibot est décrite dans la section « Cours en ligne ».
Choix d'un cours
Choisissez les cours que vous souhaitez mettre en avant sur votre site web :
Pour ce faire, cochez la case correspondant au nom du cours souhaité.
Les cours sélectionnés seront immédiatement affichés sur la page de votre site web avec la couverture que vous avez définie dans les paramètres du cours.
Personnalisation
Après avoir sélectionné les cours nécessaires, procédez à la personnalisation des éléments de la fiche :
- Ombre
Pour les fiches de cours de la section, vous pouvez ajuster l'intensité de l'ombre :
a) sans ombre :
b) ombre légère :
c) ombre forte :
Paramètres de couleur des éléments de la fiche
Personnalisez l'apparence de la fiche en ajustant les couleurs de divers éléments. Vous pouvez également ajouter des effets de survol interactifs.
- Couleur du texte : Modifie la couleur du texte principal sur la fiche (à l'exclusion des boutons).
- Arrière-plan de la fiche : Définit la couleur d'arrière-plan de la fiche.
- Couleur de la bordure : Définit la couleur du contour ou du cadre de la fiche.
- Texte du bouton : Définit la couleur du texte à l'intérieur du bouton (état statique).
- Arrière-plan du bouton : Définit la couleur d'arrière-plan du bouton.
Effets de survol interactifs (section optionnelle) :
Activez les effets de survol pour modifier dynamiquement la couleur de ces éléments lorsque l'utilisateur déplace le curseur sur la fiche.
Vous savez maintenant comment afficher les cours disponibles sur votre site MaviBot à l'aide de la section « Fiches de cours ».
Pour les paramètres d'arrière-plan et d'affichage, consultez l'article « Paramètres globaux de la section ».
Comment ajouter le bloc « Leçons »
Pour ajouter un bloc afin d'afficher la liste des leçons du cours, passez en mode édition du site web, survolez l'espace de travail, puis cliquez sur « + » :
Un menu s'ouvre à droite avec les sections disponibles du site, où vous devez trouver le bloc « Leçons » :
Cliquez sur « Fiches de cours », puis un menu s'ouvrira pour configurer le contenu du bloc :
Il vous suffit de sélectionner le cours requis, déjà créé dans Mavibot, dans le menu déroulant et de cliquer sur « Enregistrer ».
Ensuite, allez dans les paramètres pour personnaliser le contenu du bloc :
Personnalisation
Lorsque vous cliquez sur le bouton « Paramètres » et survolez la section, les paramètres de personnalisation du contenu et du bloc lui-même s'ouvrent :
Quels sont les paramètres disponibles ?
- Style de la liste des leçons
Par défaut, le style de la liste des leçons est affiché dans un nouveau format. Si nécessaire, vous pouvez définir une version plus concise du format classique :
- Style de numérotation
Le style de numérotation est disponible pour un nouveau style d'affichage des leçons du cours. La numérotation change dans la fiche de leçon elle-même :
- Icônes des leçons
Elles s'affichent si vous avez ajouté un aperçu à l'intérieur de la leçon elle-même dans les paramètres du cours.
Comment ajouter des icônes
Étape 1. Accédez aux paramètres de la leçon :
Pour ce faire, passez en mode paramètres du cours et trouvez l'onglet Leçons :
Ensuite, cliquez sur « Modifier », après quoi la page de la leçon s'ouvrira pour modification.
Étape 2. Ouvrez les paramètres de la page de la leçon.
Accédez à la section « Général » dans les paramètres de la page de la leçon :
Étape 3. Téléchargez l'aperçu de la leçon
Développez la liste des paramètres d'image dans les paramètres d'informations de base :
Téléchargez une image pour l'aperçu de la leçon :
Enregistrez les paramètres.
Terminé ! Les aperçus des leçons seront désormais affichés sous forme d'icônes dans la section Leçons du site web.
- Motif d'arrière-plan
Il ajoute du volume et de l'unicité à vos fiches de leçon :
- Arrondi des éléments
La valeur est définie en pixels et arrondit les coins des fiches de leçon.
- Style de la fiche de leçon
Il permet de disposer les fiches de leçon sur une seule ligne ou sur une ligne avec ou sans césure.
- Couleur d'arrière-plan et du texte
Une vaste palette de couleurs est disponible pour définir la couleur d'arrière-plan de la fiche et la couleur de la police sur la fiche de leçon :
Vous savez maintenant comment ajouter des listes de leçons à votre site web et personnaliser le contenu de la section.
Pour les paramètres d'arrière-plan et d'affichage, consultez l'article « Paramètres globaux de la section ».