# Séparateur intelligent

Le bloc **Séparateur intelligent** trace une ligne entre deux blocs, horizontale ou verticale selon la mise en page qui l’entoure. Cette page décrit son orientation, sa couleur, son épaisseur et le style des séparateurs du site.

## Ajouter un séparateur

1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Séparateur intelligent**, ou cherchez `trait` ou `ligne`. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc.
2. Placez-le entre les deux blocs à séparer.

Le séparateur porte dès son insertion le style **Séparateur** : un trait d’un pixel. Sa teinte, légère, suit la couleur du texte en mode clair comme en mode sombre.

## L’orientation du trait

Le séparateur n’a pas de réglage d’orientation : elle découle de la mise en page qui l’entoure.

| Placé dans | Trait obtenu |
| --- | --- |
| Un conteneur où les blocs s’empilent | Un trait horizontal sur toute la largeur, d’un pixel de haut. |
| Un conteneur **Flex** horizontal | Un trait vertical d’un pixel de large, sur la hauteur de la rangée, tant que **Aligner les éléments** du conteneur n’est pas réglé. |

Pour un trait plus épais ou plus court, réglez sa hauteur ou sa largeur dans le panneau **Taille et espacement**.

## Onglet Styles

Le séparateur se règle dans les états **Par défaut** et **Actif**. Il n’a pas d’onglet **Réglages**.

| Panneau | Usage |
| --- | --- |
| **Couleurs** | La couleur de fond et son opacité, qui font la couleur du trait. Le séparateur n’a pas de couleur de texte. Voir [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/). |
| **Taille et espacement** | L’épaisseur, la longueur et les marges du trait, voir [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/). |
| **Bordures**, **Effets** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-effets/) |

La partie **Séparateurs** du catalogue de design donne une allure à tous les séparateurs du site : **Fin**, **Épais**, **Pointillé**, **Estompé** ou **Coloré** ([Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)).

## Onglet Animations

L’onglet **Animations** fait apparaître le trait, par exemple à son arrivée à l’écran. [Animer un bloc](https://lovelyrender.com/fr/documentation/animations/) décrit les effets.

## Sur téléphone

Le panneau **Taille et espacement** se règle écran par écran. Un trait vertical entre deux colonnes devient horizontal quand la rangée passe en orientation **Verticale** sur téléphone.

## Accessibilité

Le séparateur est un trait décoratif : les lecteurs d’écran ne l’annoncent pas. Pour marquer le début d’une nouvelle partie, posez un [Titre](https://lovelyrender.com/fr/documentation/bloc-titre/), visible ou invisible.

## Limites

- Le séparateur ne contient rien : ni texte ni icône au milieu du trait.
- Il n’a pas d’état **Survol**.
- Un trait collé depuis une page web devient un séparateur avec le style du site : l’épaisseur et la couleur de l’autre site ne suivent pas.

## Voir aussi

- [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/)
- [Espacer vos blocs](https://lovelyrender.com/fr/documentation/espacer-vos-blocs/)
- [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)