> For the complete documentation index, see [llms.txt](https://interfacing.gitbook.io/interfacing-help-files/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://interfacing.gitbook.io/interfacing-help-files/interfacing-help-files-fr/administration-and-configuration/gerer-et-personnaliser-la-page-daccueil/modifier-la-page-daccueil/utiliser-les-widgets-personnalises.md).

# Utiliser les widgets personnalisés

Ajoutez et configurez des widgets de contenu pour afficher les informations principales sur la page d’accueil.

Les widgets personnalisés mettent en avant du contenu important, comme des annonces, liens utiles et visuels. Ils s’adaptent à la structure et aux priorités de votre organisation. Ils aident les utilisateurs à rester informés et à accéder aux ressources pertinentes.

**Widgets disponibles :**

* Bannière
* Cartes
* Tuiles
* Bloc HTML
* Site web

{% hint style="info" %}
Lorsque vous configurez des widgets dans l’**Éditeur**, la mise en page se met à jour en temps réel.
{% endhint %}

***

## Bannière

Le widget **Bannière** affiche un carrousel d’images. Chaque image peut renvoyer vers une page interne ou externe. Utilisez-le pour promouvoir des annonces, campagnes ou informations urgentes.

### <i class="fa-gear">:gear:</i> Paramètres principaux

* **Nombre de diapositives :** choisissez entre **1 et 5** diapositives. La valeur par défaut est 1.

Une section extensible correspondante apparaît dans le panneau pour chaque diapositive ajoutée.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-rectangle-vertical-history">:rectangle-vertical-history:</i> Paramètres de la diapositive

* **Image** (obligatoire) : importez une image à afficher dans la diapositive.
  * **Options d’importation :**
    * Cliquez sur **Importer** pour sélectionner un fichier sur votre appareil.
    * Faites glisser un fichier dans la zone d’importation.
  * Formats pris en charge : `.svg`, `.png`, `.jpg`, `.gif`
  * Taille maximale : **3 Mo**
* **URL** (obligatoire) : saisissez le lien de destination.
  * Un clic sur la diapositive ouvre le lien à l’emplacement sélectionné.

***

## Cartes

Le widget **Cartes** organise le contenu en blocs visuels avec images, texte et boutons d’action. Il permet de regrouper des ressources ou mises à jour associées.

### <i class="fa-gear">:gear:</i> Paramètres principaux

* **Nombre de cartes :** choisissez entre **1 et 4** cartes. La valeur par défaut est 4.
* **Titre principal** (facultatif) : saisissez un titre pour le widget.

Une section extensible correspondante apparaît dans le panneau pour chaque carte ajoutée.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-cards-blank">:cards-blank:</i> Paramètres de la carte

* **Image** (facultatif) : importez une image à afficher dans la carte. Les formats et limites sont identiques au widget **Bannière**.
* **Titre** (obligatoire) : saisissez le titre de la carte.
* **Description** (facultatif) : ajoutez un texte complémentaire.
* **Ouvrir le lien dans :** sélectionnez **Nouvel onglet** ou **Onglet actuel**.
* **URL** (obligatoire) : saisissez le lien de destination.
* **Libellé du bouton** (facultatif) : saisissez le texte du bouton d’action.
  * Un clic sur le bouton ouvre le lien à l’emplacement sélectionné.

***

## Tuiles

Le widget **Tuiles** affiche des blocs colorés avec peu de texte pour une navigation rapide. Il met en valeur les actions, destinations ou ressources principales.

### <i class="fa-gear">:gear:</i> Paramètres principaux

* **Nombre de tuiles :** choisissez entre **1 et 5** tuiles. La valeur par défaut est 5.
* **Titre principal** (facultatif) : saisissez un titre pour le widget.

Une section extensible correspondante apparaît dans le panneau pour chaque tuile ajoutée.

<p align="center">━━━━━━━━━━━━━━━━━━━━━━━━━━━</p>

### <i class="fa-square">:square:</i> Paramètres de la tuile

* **Titre** (obligatoire) : saisissez le titre de la tuile.
* **Description** (facultatif) : ajoutez un texte complémentaire.
* **Couleur de la tuile :** sélectionnez une couleur dans la palette ou saisissez un code hexadécimal.
* **Ouvrir le lien dans :** sélectionnez **Nouvel onglet** ou **Onglet actuel**.
* **URL** (obligatoire) : saisissez le lien de destination.
  * Un clic sur une tuile ouvre le lien à l’emplacement sélectionné.

***

## Bloc HTML

Le widget **Bloc HTML** intègre du contenu HTML personnalisé dans la mise en page. Utilisez-le pour du texte mis en forme, des médias ou du contenu de marque.

### <i class="fa-gear">:gear:</i> Paramètres

* **Titre principal** (facultatif) : saisissez un titre pour le widget.
* **Insérer du HTML** (obligatoire) : saisissez ou collez le code HTML.

{% hint style="info" %}
Le contenu s’affiche en direct dans l’aperçu de la mise en page. Chaque bloc occupe 50 % de la largeur.
{% endhint %}

{% hint style="warning" %}

#### Disponibilité des fonctionnalités

**Pris en charge :**

* Images externes et fichiers vidéo
* CSS en ligne et CSS personnalisé avec des balises `<style>`

**Non pris en charge :**

* JavaScript ou balises `<script>`
* CSS ou polices externes
  {% endhint %}

***

## Site web

Le widget **Site web** intègre une page web externe complète avec un fichier HTML importé localement. Il convient au contenu autonome, aux outils ou aux microsites.

### <i class="fa-gear">:gear:</i> Paramètres

* **Importer un fichier HTML** (obligatoire) : cliquez sur **Importer** pour sélectionner un fichier HTML sur votre appareil.

{% hint style="info" %}
Le site web intégré s’affiche en direct dans le canevas de mise en page.
{% endhint %}

***


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

```
GET https://interfacing.gitbook.io/interfacing-help-files/interfacing-help-files-fr/administration-and-configuration/gerer-et-personnaliser-la-page-daccueil/modifier-la-page-daccueil/utiliser-les-widgets-personnalises.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.