Le composant Séparateur trace une ligne horizontale sur vos pages SharePoint pour structurer leur contenu et nommer vos sections. La ligne reprend la couleur principale de votre site, ou se remplit d'une couleur ou d'une image de votre choix, et peut porter un texte.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage et les bonnes pratiques à suivre.

📋 Sommaire

1. Présentation du composant
2. Ajouter le composant à votre page
3. Paramétrer le composant
4. Saisir et mettre en forme le texte sur la page
5. Bonnes pratiques
6. Ce qui change par rapport à la version précédente

1. Présentation du composant

Le Séparateur se compose de deux éléments : une Ligne, dont vous réglez l'épaisseur, la longueur, l'alignement et le remplissage, et un Texte facultatif, qui coupe la ligne, se place au-dessus d'elle ou s'inscrit à l'intérieur.

Cas d'usage

• Séparer visuellement deux blocs de contenu d'une page.
• Nommer une section de page avec un titre intégré à la ligne.
• Rappeler la charte graphique de votre intranet avec une ligne aux couleurs du site, ou remplie d'une image.

2. Ajouter le composant à votre page

1. Ouvrez le mode édition de la page SharePoint en cliquant sur Modifier en haut à droite.
2. À l'emplacement souhaité, cliquez sur le bouton « + » pour ouvrir le catalogue de composants.
3. Recherchez ou déroulez le catalogue pour sélectionner Jint - Séparateur, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un Séparateur fraîchement inséré affiche une ligne fine, pleine largeur, de la couleur principale de votre site, coupée en son centre par un texte indicatif « Séparateur ». Ce texte n'est visible qu'en mode édition : tant que vous n'avez rien saisi, vos visiteurs voient la ligne seule.

3. Paramétrer le composant

Le panneau de configuration se compose de trois onglets : Design, Contenu et Visibilité.

3.1 Onglet Design

Ligne

• Longueur : réglez-la au curseur, ou saisissez un pourcentage dans le champ « % », puis quittez le champ pour l'appliquer. La ligne occupe ce pourcentage de la largeur du composant.
• Alignement : il n'apparaît que lorsque la longueur est inférieure à 100 %. Une ligne pleine largeur est toujours centrée.
• Remplissage Couleur : la ligne prend par défaut la couleur principale du thème de votre site. Choisissez-en une autre dans la palette, ou saisissez un code personnalisé.
• Remplissage Image : la ligne se remplit d'une image, une image fournie par défaut tant que vous n'en avez pas choisi. Cliquez sur Choisir une image pour sélectionner un fichier dans SharePoint, puis sur Point focal pour placer la cible sur la zone de l'image à garder visible. Sous l'image, la rubrique Accessibilité propose Marquer comme décoratif, activé par défaut : l'image est alors ignorée par les lecteurs d'écran. Désactivez-le pour saisir un Texte de remplacement qui décrit l'image. Un texte de remplacement laissé vide fait de nouveau traiter l'image comme décorative. Si vous changez d'image, ces deux réglages gardent leur valeur.

⚠ La longueur ne descend jamais sous la largeur du mot le plus long de votre texte. Si votre réglage est plus court, la ligne s'affiche à cette longueur minimale. Sans texte, ou si le texte est masqué, la longueur minimale est de 2 %.

💡 Pour une image, privilégiez un visuel au format JPG, PNG ou WebP, d'au moins 1920 × 1080 px et de moins de 1 Mo. Si l'image est supprimée ou déplacée, ou si un visiteur n'a pas le droit de la voir, la ligne affiche un fond blanc à la place. Dans le panneau, le message « Image introuvable : elle a peut-être été supprimée ou déplacée. Choisissez-en une autre. » vous invite à en choisir une autre.

3.2 Onglet Contenu

Texte

• Entre : le texte coupe la ligne. Ligne centrée, il la partage en deux segments égaux. Alignée à gauche, la ligne forme un seul segment que le texte ferme à droite. Alignée à droite, le texte ouvre la ligne, suivi d'un seul segment.
• Au-dessus : le texte se place au-dessus de la ligne, qui court sous lui sans interruption.
• À l'intérieur : le texte s'inscrit dans la ligne, sur son fond de couleur ou d'image.

Désactivez Afficher le texte pour n'afficher que la ligne.

⚠ Choisir À l'intérieur fait passer la ligne en Épais : l'option Fin est désactivée tant que le texte reste à l'intérieur. Survolez-la pour lire « Indisponible tant que le texte est dans la ligne ». Sous Position du texte, le panneau vous le rappelle par le message « La ligne passe en Épais. »

💡 Passer en position Au-dessus ou À l'intérieur centre le texte. Vous pouvez ensuite changer son alignement depuis la barre d'outils, sur la page.

Accessibilité

Quand le texte est À l'intérieur d'une ligne remplie de couleur, la rubrique Accessibilité mesure d'office son contraste avec la couleur de la ligne, dès l'ouverture du panneau, sans clic sur le texte. Elle le nomme Texte du séparateur. Elle affiche le Ratio et une Lisibilité globale : Excellent, Bon ou Insuffisant. Si le contraste est insuffisant, cliquez sur Corriger : chaque couleur du texte trop peu contrastée est remplacée par la couleur la plus proche de votre palette qui atteint un contraste suffisant.

Tant que vous n'avez saisi aucun texte, la rubrique affiche « Saisissez un texte sur la page pour vérifier son contraste. »

Avec un texte Entre ou Au-dessus, ou une ligne remplie d'une image, la rubrique indique « Le contraste ne peut pas se mesurer sur ce texte. ». Quand le texte est masqué, la rubrique Accessibilité disparaît du panneau.

3.3 Onglet Visibilité

Audience

Activez Audience personnalisée pour réserver le composant à des personnes ou aux membres de groupes Microsoft 365. Seuls les visiteurs choisis, ou membres d'au moins un groupe choisi, le voient. Pour les autres, il ne prend aucune place sur la page.

Affichage

Activez Planifier la visibilité pour limiter l'affichage dans le temps, avec un Début de l'affichage, une Fin de l'affichage, ou les deux. Les dates se saisissent à votre heure et s'affichent à chacun selon la sienne.

⚠ Une Fin de l'affichage antérieure ou égale au Début de l'affichage s'affiche en erreur avec le message « La date de fin doit être postérieure à la date de début. » : tant qu'elle n'est pas corrigée, la planification ne limite pas l'affichage.

💡 En mode édition, vous voyez toujours le composant, quelle que soit son audience ou sa planification. Un badge vous le signale : « Audience », ou les dates d'affichage (« Dès le … », « Jusqu'au … » ou « début → fin », sans l'année si elle est en cours).

⚠ Si vous activez Audience personnalisée sans choisir personne, la rubrique vous le signale par le message « Personne ne voit ce composant WebPart : choisissez au moins une personne ou un groupe. ». Si vous activez Planifier la visibilité sans activer de date, l'affichage n'est pas limité.

4. Saisir et mettre en forme le texte sur la page

Le texte du Séparateur se saisit et se met en forme directement sur la page, pas dans le panneau de configuration. Cliquez sur le texte : il devient modifiable et une barre d'outils s'affiche au-dessus de lui.

La barre d'outils règle le Style de texte (H1 à H4 ou Corps), la Police, la Taille de police, la Couleur du texte, le gras, l'italique, le souligné et l'alignement. Cliquez en dehors du texte et de la barre d'outils pour valider.

• Le texte peut tenir sur plusieurs lignes : appuyez sur Entrée pour passer à la ligne. Un mot trop long pour la place disponible est coupé.
• Un texte collé perd sa mise en forme d'origine.
• Le texte s'affiche tel que vous l'avez saisi, sans traduction automatique.
• En position Entre, la barre d'outils ne propose pas l'alignement du texte : c'est l'alignement de la ligne qui le place.

5. Bonnes pratiques

Garder un texte court

Un titre de section en quelques mots reste lisible sur tous les écrans. Un mot long allonge la longueur minimale de la ligne, et un texte long passe sur plusieurs lignes.

Vérifier le contraste du texte à l'intérieur

Avec la position À l'intérieur sur une ligne de couleur, ouvrez l'onglet Contenu et consultez la rubrique Accessibilité, qui mesure le texte d'office. Visez au minimum Bon.

Soigner l'image de remplissage

Une ligne est une bande étroite : placez le Point focal sur la partie de l'image qui doit rester visible, et choisissez un visuel sans détail fin.

Rester cohérent d'une page à l'autre

Utilisez la même épaisseur, le même remplissage et le même style de texte pour tous les séparateurs d'un même site.

6. Ce qui change par rapport à la version précédente

Si vous utilisiez la version précédente du Séparateur (voir l'article Composant Séparateur) :

• Le panneau s'organise en trois onglets, Design, Contenu et Visibilité, avec la ligne dans Design et le texte dans Contenu.
• Le texte n'est plus limité à deux lignes.
• La position À l'intérieur passe automatiquement la ligne en Épais.
• La rubrique Accessibilité mesure le contraste du texte posé dans la ligne et peut le corriger en un clic.
• L'onglet Visibilité permet de réserver le composant à une audience et d'en planifier l'affichage.