# Section cours en ligne

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 cartes de cours personnalisables sont un excellent moyen de rendre votre site web plus interactif et informatif.

<figure><img src="/files/ec81e549627ba149eaeae23d2075bda72fa1b4cb" alt=""><figcaption></figcaption></figure>

Ces cartes permettent aux visiteurs de trouver rapidement les programmes qui les intéressent et d'accéder facilement aux pages de cours en un seul bouton. Dans cet article, nous verrons comment configurer une section de cartes de cours personnalisables afin d'améliorer la convivialité de votre site web et d'aider les utilisateurs à atteindre plus rapidement leurs objectifs pédagogiques.

Au lieu d'utiliser des cartes mémoire 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 seront affichées.

## Comment ajouter la section « Cartes de cours »

Pour ajouter la section « Cartes de cours », cliquez sur le « + » en mode édition de votre site web.

Puis trouvez la section « Cartes de cours » dans le menu qui s'ouvre et cliquez dessus pour ajouter la section à votre site web :

<figure><img src="/files/c8f098ecc8c2fe7757e42b29559b805dddfb4e9f" alt=""><figcaption></figcaption></figure>

La section sera ajoutée à votre site web, et le menu de configuration du contenu s'ouvrira pour vous :

<figure><img src="/files/e0ce7ff5eaadac3db49166820c8abd660d3deb12" alt=""><figcaption></figcaption></figure>

### Section de contenu

La configuration du contenu de la section Cartes de cours consiste à sélectionner un ou plusieurs cours déjà créés dans le projet à afficher sur le site web et à personnaliser les éléments de la carte.&#x20;

{% hint style="info" %}
La création de cours sur la plateforme Salebot est décrite dans la section « [Cours en ligne »](broken://pages/bc3e57fecd04c1146c8704d1e9b6211a7358a8a2).
{% endhint %}

#### Choisir un cours

Choisissez les cours que vous souhaitez mettre en avant sur votre site web :

<figure><img src="/files/6095c96933425f4a818d9613efefe1a7bc176055" alt=""><figcaption></figcaption></figure>

Pour ce faire, cochez la case portant le nom du cours requis.

Les cours sélectionnés seront alors immédiatement affichés sur la page de votre site web avec la couverture définie dans les paramètres du cours.

#### Personnalisation

Après avoir sélectionné les cours nécessaires, passez à la personnalisation des éléments de la carte :

<figure><img src="/files/800f3b749dd301e5b169901f035e9a3446057dd0" alt=""><figcaption></figcaption></figure>

* Ombre

<figure><img src="/files/a8389c18a726b8f38b351b0b7091222e29250514" alt=""><figcaption></figcaption></figure>

Pour les cartes de cours dans la section, vous pouvez ajuster l'intensité de l'ombre :

a) sans ombre :

<figure><img src="/files/fe3b09098d079cbe6c559a52659b5619efecca3b" alt=""><figcaption></figcaption></figure>

b) ombre légère :

<figure><img src="/files/5e20c7379e1b2517a22ea5f1820b5ec800d6ba1d" alt=""><figcaption></figcaption></figure>

c) ombre marquée :

<figure><img src="/files/67c60717f465b755e8944f2c32055cedcf081020" alt=""><figcaption></figcaption></figure>

#### Paramètres de couleur des éléments de la carte

Personnalisez l'apparence de la carte en ajustant les couleurs de différents éléments. Vous pouvez également ajouter des effets interactifs au survol.

* **Couleur du texte :** Modifie la couleur principale du texte sur la carte (à l'exception des boutons).
* **Arrière-plan de la carte :** Définit la couleur de fond de la carte.
* **Couleur de la bordure :** Définit la couleur du contour ou du cadre de la carte.
* **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 de fond du bouton.

**Effets interactifs au survol (section facultative) :**

Activez les effets au survol pour modifier dynamiquement la couleur de ces éléments lorsqu'un utilisateur déplace le curseur sur la carte.

Vous savez maintenant comment afficher les cours disponibles sur votre site MaviBot à l'aide de la section « Cartes de cours ».

{% hint style="info" %}
Pour les paramètres d'arrière-plan et d'affichage, voir l'article [« Paramètres globaux de section »](/doc/fr/websites/sites/blocks/settings.md).
{% endhint %}

## Comment ajouter le bloc « Leçons »

Pour ajouter un bloc affichant 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 » :

<figure><img src="/files/6c29904ead4e99e8a7533589d87e39b51e740fa3" alt=""><figcaption></figcaption></figure>

Cliquez sur « Cartes de cours », puis un menu s'ouvrira pour configurer le contenu du bloc :

<figure><img src="/files/27199ccd3a6e6fd24e9601af4f6c3e02cd636bfd" alt=""><figcaption></figcaption></figure>

Il vous suffit de sélectionner le cours requis, déjà créé dans Salebot, dans le menu déroulant, puis de cliquer sur « Enregistrer ».

Ensuite, allez dans les paramètres pour personnaliser le contenu du bloc :

<figure><img src="/files/a68bb6a8c2874cb95ab9f6eebf63a40e1250827f" alt=""><figcaption></figcaption></figure>

### Personnalisation

Lorsque vous cliquez sur le bouton « Paramètres » et que vous survolez la section, les paramètres de personnalisation du contenu et du bloc lui-même s'ouvrent :

<figure><img src="/files/2100b12ddad5c0e13afbc62995f22c5605336863" alt=""><figcaption></figcaption></figure>

**Quels paramètres sont disponibles ?**

1. Style de la liste des leçons

<figure><img src="/files/82db08f08fa1ad28f2564f96f7128b8a1b89f6bf" alt=""><figcaption></figcaption></figure>

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 :

<figure><img src="/files/60667ad5f5e9d59f6757c2b5653a955c6cbbc321" alt=""><figcaption><p>Style classique</p></figcaption></figure>

2. Style de numérotation

<figure><img src="/files/f5451033671616c5d01f7cbb67b4531f95bd24d1" alt=""><figcaption></figcaption></figure>

Le style de numérotation est disponible pour un nouveau style d'affichage des leçons du cours. La numérotation change dans la carte de leçon elle-même :

<figure><img src="/files/0aba89ee58948d7603c317ea8dade6fd60729fcb" alt=""><figcaption></figcaption></figure>

3. Icônes de leçon

<figure><img src="/files/b70b1fcc776e865969e0a9604d5bfd0c16a54a97" alt=""><figcaption></figcaption></figure>

**Ils sont affichés 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. Allez dans les paramètres de la leçon :

Pour ce faire, passez en mode paramètres du cours et trouvez l'onglet Leçons :

<figure><img src="/files/bfd36bf15a210a88b8481c9a243ed722eea0c796" alt=""><figcaption></figcaption></figure>

Ensuite, cliquez sur « Modifier », après quoi la page de la leçon s'ouvrira en mode édition.

Étape 2. Ouvrez les paramètres de la page de leçon.

<figure><img src="/files/0bf470a5d5c2a22bb485e74035f458c246ceea38" alt=""><figcaption></figcaption></figure>

Allez dans la section « Général » dans les paramètres de la page de leçon :

<figure><img src="/files/40ebcb02fc3175ee6df25e97beb9824779d2b712" alt=""><figcaption></figcaption></figure>

É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 des informations de base :

<figure><img src="/files/49b3e6e5cb94f76542742a83c986a0e14238a829" alt=""><figcaption></figcaption></figure>

Téléversez une image pour l’aperçu de la leçon :

<figure><img src="/files/9e1e7a69e04cbb7559ec36df0ad85ce199b9bc26" alt=""><figcaption></figcaption></figure>

Enregistrez les paramètres.

{% hint style="success" %}
C'est fait ! Désormais, les aperçus des leçons seront affichés sous forme d'icônes dans la section Leçons du site web.
{% endhint %}

<figure><img src="/files/a466ac9c5fb30e16a832e2a94b8fb03b2d552504" alt=""><figcaption></figcaption></figure>

3. Motif d’arrière-plan

<figure><img src="/files/53d93ff46dae62d977eb139320c2853010ed669e" alt=""><figcaption></figcaption></figure>

Cela ajoute du volume et de l'unicité à vos cartes de leçon :

<figure><img src="/files/1d7f99c60df47d10d4aa9f9d674d7853e81f8d15" alt=""><figcaption></figcaption></figure>

4. Arrondi des éléments

La valeur est définie en pixels et arrondit les coins des cartes de leçon.

5. Style de carte de leçon

<figure><img src="/files/649aee4db55113d99fc2e7e07f389f937d77f206" alt=""><figcaption></figcaption></figure>

Cela permet d'organiser les cartes de leçon sur une seule ligne ou en ligne avec ou sans césure.

6. Couleur de fond et du texte

<figure><img src="/files/a0146dd42ac635fc7a70b5775c4690295b7426ff" alt=""><figcaption></figcaption></figure>

Une vaste palette de couleurs est disponible pour définir la couleur de fond de la carte et la couleur de la police sur la carte de leçon :

<figure><img src="/files/90bb474e9a78681d064f461b8d5c19fdb647acd4" alt=""><figcaption></figcaption></figure>

Vous savez maintenant comment ajouter des listes de leçons à votre site web et personnaliser le contenu de la section.

{% hint style="info" %}
Pour les paramètres d'arrière-plan et d'affichage, voir l'article [« Paramètres globaux de section »](/doc/fr/websites/sites/blocks/settings.md).
{% 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/websites/sites/blocks/course.md?ask=<question>
```

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.