---
description: >-
  Cet élément permet de changer la couleur de fond de la page pour les éléments
  insérés après.
---

# Séparation

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FPFwCxhjigsOBOMl2uhUf%2FCapture%20d%E2%80%99e%CC%81cran%202024-09-19%20a%CC%80%2011.06.54.png?alt=media&#x26;token=5b21e810-3a16-4785-9ece-0a805ee6a341" alt=""><figcaption></figcaption></figure>

## Disponible sur...

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/satellites-non-red?style=for-the-badge\&logo=typo3)![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3)

## Présentation

{% hint style="info" %}
Pour les sites ![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3) cet élément permet de changer la couleur de fond de la page pour les éléments insérés après. \
Pour les sites ![](https://img.shields.io/badge/intranet-oui-green?style=for-the-badge\&logo=typo3) cet élément ne rajoute qu'une ligne grise de séparation
{% endhint %}

### Ajout d'un nouveau composant Séparation

1. Sur la page en mode ![](https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FSD1CZ72IMzn7bulXsE7C%2Fmode-rediger.png?alt=media\&token=f16ba40e-ee9d-4538-be59-993d8c842dae), trouvez la section où vous souhaitez ajouter un composant Séparation.
2. Cliquez sur le bouton "+ Contenu" pour ouvrir le sélecteur d'éléments.&#x20;
3. Sélectionnez  **Séparation** dans l'onglet **Mise en page**.

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FEWPpRJdpv8qvMbLA2rLv%2FCapture%20d%E2%80%99e%CC%81cran%202024-09-19%20a%CC%80%2011.10.59.png?alt=media&#x26;token=3cc1b110-10dc-4eae-a4fe-22fbf7e9e1b4" alt=""><figcaption></figcaption></figure>

### Configuration du composant

1. Une fois que vous avez ajouté le composant, vous verrez une boîte de dialogue de configuration.
2. Dans l'onglet **Apparence**, choisissez une **couleur d'arrière-plan**
3. Enregistrez vos modifications

<figure><img src="https://1366607073-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FD5RHprt4vRSlEM8jcIL2%2Fuploads%2FzIx8GVgBvlQxRVYlVJsj%2FCapture%20d%E2%80%99e%CC%81cran%202024-09-19%20a%CC%80%2011.15.07.png?alt=media&#x26;token=2e12962b-ab5c-400f-969c-2ba8857cc124" alt=""><figcaption></figcaption></figure>

{% hint style="danger" %}
Si vous choisissez une couleur d'arrière-plan celle-ci restera active pour tous les autres composants ajoutés ensuite jusqu’à ce qu'un nouveau séparateur avec une couleur d'arrière-plan = none ne soit trouvé.&#x20;
{% endhint %}

## Exemples

Vous pouvez trouver des **exemples** d'utilisation du composant **séparation** sur la page :&#x20;

![](https://img.shields.io/badge/internet-oui-green?style=for-the-badge\&logo=typo3)

{% embed url="https://template.univ-gustave-eiffel.fr/test-contenus/mise-en-page-1/separateur" %}
