Le composant Focus est un composant de mise en avant pour vos pages SharePoint : une annonce, un lien clé, une invitation à un événement. Vous choisissez une mise en page, définissez un arrière-plan (couleur, image ou vidéo), puis composez par-dessus jusqu'à quatre éléments de contenu.

Cet article décrit les cas d'usage du composant WebPart, sa prise en main, son paramétrage complet et les bonnes pratiques à suivre pour obtenir un rendu lisible sur tous les écrans.

📋 Sommaire

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

1. Présentation du composant

Focus vous permet de mettre en avant une information et d'orienter vos utilisateurs vers la bonne destination, dans un cadre au design soigné. Le composant WebPart se compose d'un arrière-plan, d'un Calque qui préserve la lisibilité du texte posé dessus, et de quatre éléments de contenu : un Tag, un Texte d'accroche, une Description et un appel à l'action.

Cas d'usage

• Mettre en avant une actualité majeure de votre organisation.
• Diffuser une annonce importante sur votre page d'accueil.
• Inviter vos collaborateurs à un événement.
• Créer une bannière de navigation vers une application ou un site clé.
• Enrichir le design d'une page grâce à une image ou une vidéo d'arrière-plan.

Deux endroits pour configurer votre Focus

C'est le point le plus important à retenir avant de commencer, car les réglages sont répartis entre deux surfaces :

• Le panneau de configuration porte la structure et les règles : mise en page, hauteur, arrière-plan, calque, apparence du cadre, éléments affichés, destination de l'appel à l'action et planification de l'affichage.
• La page elle-même porte le contenu et sa mise en forme. Vous cliquez sur un élément directement dans le composant pour saisir son texte et ouvrir une barre d'outils flottante : police, taille, couleur, styles, et apparence de la pastille ou du bouton.

💡 Si vous cherchez la couleur de votre titre ou la taille de votre texte dans le panneau de configuration, vous ne les y trouverez pas : ces réglages se font sur la page. Voir la partie 5.

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 - Focus, dans la catégorie « Texte, média et contenu ».
4. Le composant est ajouté à l'emplacement souhaité, avec ses valeurs par défaut.

Un Focus fraîchement inséré affiche une image fournie par défaut, un calque gris entièrement opaque et les quatre éléments de contenu avec leur texte indicatif. Vous pouvez donc le voir et le manipuler immédiatement, avant même d'avoir choisi une image.

3. Choisir votre mise en page

La mise en page est le choix structurant du composant : elle détermine la relation entre le média et le contenu. Elle se règle dans l'onglet Design, sous Style. Trois options sont disponibles, chacune illustrée par une icône.

Basique

Le média occupe tout le composant et le contenu est placé dans un encart posé par-dessus. C'est la mise en page par défaut, et la plus polyvalente : elle laisse respirer l'image tout en gardant un bloc de texte nettement délimité.

Un réglage supplémentaire lui est propre : Ajuster le calque au contenu, activé par défaut. Le calque épouse alors le bloc de contenu. Désactivez-le pour que le calque couvre toute la surface du composant.

Plein

Le média occupe tout le composant, le calque couvre l'ensemble de la surface et le contenu s'affiche en une colonne. À privilégier pour une bannière pleine largeur au message court, où le texte doit rester lisible sur la totalité de l'image.

Séparé

Le média occupe un côté du composant, le contenu l'autre, selon un ratio que vous définissez. À privilégier quand l'image et le texte ont autant d'importance l'un que l'autre, ou quand votre message demande plus de place que ce qu'un encart posé sur une image permet.

Quatre réglages complémentaires apparaissent lorsque vous sélectionnez Séparé, dans l'onglet Design :

Le Ratio de séparation ne s'applique que tant que l'image et le contenu sont côte à côte. Lorsque le composant devient trop étroit et que les deux zones s'empilent, le ratio reste sans effet. La marge, l'arrondi et l'inversion s'appliquent dans les deux cas.

💡 Une Marge autour de l'image supérieure à 0 fait apparaître la couleur du calque tout autour de l'image. Combinée à un Arrondi de l'image, elle donne un rendu de type « carte » qui détache nettement le visuel.

⚠ Changer de mise en page ne vous fait rien perdre. Le canvas se met à jour immédiatement et tous vos réglages sont conservés, y compris la couleur et l'opacité du calque. Vous pouvez donc essayer les trois avant de trancher.

4. Paramétrer le composant

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

4.1 Onglet Design

Alignement du contenu

L'option Étiré fait occuper toute la hauteur disponible au bloc de contenu. L'alignement s'applique au bloc de contenu dans son ensemble, dans les trois mises en page : les éléments ne s'alignent pas individuellement les uns par rapport aux autres.

Hauteur

Réglez la Hauteur du composant à l'aide du curseur ou du champ de saisie, par pas de 10 px, jusqu'à 800 px maximum. La valeur par défaut est de 250 px. Le plafond de 800 px est une contrainte SharePoint : il s'applique au rendu, pas seulement à la saisie.

⚠ La hauteur que vous définissez est une hauteur minimale, pas une hauteur fixe. Si votre contenu demande plus de place que la valeur saisie, le composant s'agrandit pour l'accueillir, et le champ Hauteur se réécrit alors automatiquement sur la hauteur réellement occupée. Le panneau et la page ne se contredisent ainsi jamais. En revanche, une hauteur supérieure à ce dont le contenu a besoin est conservée telle quelle : c'est bien le moyen de donner de l'ampleur à votre composant.

Arrière-plan

Choisissez d'abord le Type d'arrière-plan : Couleur, Image (par défaut) ou Vidéo.

Le Texte alternatif est facultatif et ne bloque jamais la publication de votre page. Renseignez-le dès que votre image porte une information utile à la compréhension du message.

Tant que vous n'avez sélectionné aucun fichier, une image fournie avec le composant s'affiche, en mode lecture comme en mode édition : vous n'obtenez jamais un cadre vide. Elle est traitée comme décorative. Supprimer votre image revient à cette image par défaut.

Les sélecteurs de fichiers rappellent les formats recommandés :

• Images : JPG, PNG ou WebP, 1920 × 1080 px minimum, moins de 1 Mo.
• Vidéos : MP4 (H.264), 1080p, 10 à 15 secondes en boucle, moins de 5 Mo (15 Mo maximum).

La lecture des vidéos n'est pas paramétrable. La vidéo démarre automatiquement, sans son et en boucle, quelle que soit la mise en page. Elle se met en pause lorsqu'elle sort de l'écran et reprend au retour. Un bouton Pause / Lecture apparaît au survol ou à la tabulation clavier. Un visiteur dont le système demande de réduire les animations voit une image fixe, sans lecture automatique.

⚠ Une vidéo de 5 Mo ou plus déclenche l'avertissement « Cette vidéo pourrait ralentir le chargement de la page. ». Une vidéo de plus de 15 Mo est refusée : « Les vidéos dépassant 15 Mo ne sont pas acceptées. »

Le point focal définit la zone du média à garder visible quel que soit le recadrage. Cliquez sur Éditer le point focal pour ouvrir la fenêtre dédiée : faites glisser la cible sur la zone à préserver, puis cliquez sur Valider. Deux aperçus vous accompagnent pendant le déplacement :

• Bureau : le recadrage aux dimensions que le composant occupe réellement sur votre page, mesurées en direct. Il suit donc un redimensionnement de section ou un changement de hauteur.
• Mobile : le recadrage que le même composant produirait sur une largeur étroite.

Sans Valider, votre réglage est abandonné. Remplacer ou supprimer le média réinitialise le point focal au centre.

Calque

Le Calque est le voile qui s'intercale entre l'arrière-plan et le contenu. C'est lui qui rend votre texte lisible sur un média chargé.

⚠ Le calque est entièrement opaque par défaut. Un Focus fraîchement inséré masque donc complètement son image d'arrière-plan et ressemble à un aplat de couleur. Pour laisser transparaître votre média, baissez vous-même l'Opacité.

La couleur et l'opacité que vous définissez sont conservées d'une mise en page à l'autre. Seul le rôle du calque change à l'écran :

• Basique : un panneau derrière le contenu, ajusté à celui-ci ou couvrant toute la surface selon Ajuster le calque au contenu.
• Plein : un voile sur l'ensemble du composant.
• Séparé : le fond de la colonne de contenu, ainsi que le pourtour révélé autour de l'image lorsque vous avez défini une marge.

Apparence

Chaque réglage associe un interrupteur à un groupe de boutons : il n'existe pas d'option « Aucune », l'interrupteur désactivé jouant ce rôle. Les valeurs se définissent composant par composant, sans héritage du thème de votre site.

4.2 Onglet Contenu

Score d'accessibilité

Un indicateur de lisibilité calculé en direct entre la couleur de votre Texte d'accroche et ce qui se trouve réellement derrière lui, arrière-plan, calque et mise en page combinés.

L'indicateur porte uniquement sur le Texte d'accroche. La Description, le Tag et le libellé du bouton ne sont pas évalués. La section disparaît lorsque le Texte d'accroche est masqué ou vide.

Sur une image ou une vidéo sans calque opaque, le contraste n'est pas mesurable : la section vous l'indique plutôt que d'afficher un score trompeur, avec le message « Sur une image ou vidéo de fond, le contraste ne peut pas être vérifié sans calque. Activez un calque opaque pour évaluer la lisibilité. »

Éléments affichés

Quatre interrupteurs commandent la présence de chaque élément dans votre composant. Tous sont activés par défaut.

Désactiver un élément le retire de la page mais conserve son texte et sa mise en forme : le réactiver le restitue à l'identique. Vous pouvez donc masquer temporairement un élément sans rien perdre.

Appel à l'action

Ces réglages apparaissent lorsque Afficher l'appel à l'action est activé.

En Tout le composant WebPart, aucun bouton n'est affiché et toute la surface du composant devient cliquable. En mode édition, cette surface reste transparente à l'édition : cliquer sur un texte l'édite normalement, sans déclencher le lien.

La Largeur du panneau n'apparaît que si vous avez choisi le mode d'ouverture Panneau.

⚠ Une URL invalide est refusée immédiatement, avec le message « Veuillez saisir une URL valide. »

4.3 Onglet Affichage

L'onglet Affichage vous permet de programmer une fenêtre de visibilité pour votre composant.

Les deux bornes sont indépendantes. Avec un début seul, le composant apparaît à la date choisie et reste affiché. Avec une fin seule, il s'affiche jusqu'à cette date.

Il n'y a pas de sélecteur de fuseau horaire. Les deux bornes sont enregistrées comme des instants absolus : tous vos visiteurs basculent au même moment réel, où qu'ils se trouvent. Le panneau vous affiche les dates dans votre propre fuseau, déduit de vos paramètres SharePoint.

⚠ Une date de fin antérieure ou égale à la date de début affiche l'erreur « La date de fin doit être postérieure à la date de début. ». Vos valeurs sont conservées et la planification est suspendue : le composant reste visible. Une erreur de saisie ne masque jamais silencieusement votre contenu.

En tant qu'éditeur, vous voyez et modifiez toujours votre composant en mode édition, y compris pendant les périodes où il est masqué pour les visiteurs.

5. Saisir et mettre en forme votre contenu sur la page

Tout ce qui touche à l'apparence d'un élément, au-delà de son affichage, se règle directement sur la page et non dans le panneau de configuration. Cliquez sur le Tag, le Texte d'accroche, la Description ou le libellé du bouton : une barre d'outils flottante propre à cet élément s'ouvre.

Ces textes indicatifs vous guident pendant l'édition : ils ne sont jamais enregistrés ni affichés à vos visiteurs.

Deux comportements de mise en forme

• Le Texte d'accroche et la Description sont des textes : la mise en forme s'applique à la sélection, ou à l'ensemble du champ si vous n'avez rien sélectionné.
• Le Tag et le libellé du bouton sont des blocs : la mise en forme s'applique toujours à l'ensemble du libellé, que vous ayez sélectionné du texte ou non.

L'icône

Le Tag comme le bouton disposent d'un réglage d'icône unique : aucune, à gauche, à droite, ou icône seule. Ce réglage est indépendant du style choisi. Le mode icône seule conserve le texte de votre libellé, il cesse simplement de l'afficher.

Le comportement du texte trop long

• Le Texte d'accroche et la Description passent à la ligne autant que nécessaire.
• Le Tag et le libellé du bouton sont tronqués par des points de suspension et alignés à gauche. Un libellé long n'élargit donc jamais la pastille et ne fait pas déborder le bouton : prévoyez des libellés courts.

Par défaut, le texte reprend la police configurée sur votre site, sauf si vous définissez une police sur l'élément.

6. Bonnes pratiques

Garantir la lisibilité de votre texte

Le Calque et le Score d'accessibilité fonctionnent ensemble. Sur une image ou une vidéo d'arrière-plan, remontez l'opacité du calque jusqu'à ce que le Score d'accessibilité affiche Bon ou Excellent. Si vous descendez trop bas, l'indicateur vous prévient qu'il ne peut plus mesurer le contraste.

Souvenez-vous que le score ne juge que le Texte d'accroche. Vérifiez visuellement la lisibilité de votre Description, de votre Tag et de votre bouton, en particulier si vous leur avez donné des couleurs personnalisées.

Soigner le poids de vos médias

Respectez les recommandations affichées dans les sélecteurs : moins de 1 Mo pour une image, moins de 5 Mo pour une vidéo. Un média lourd retarde l'affichage du Focus.

Régler le point focal systématiquement

Dès que vous sélectionnez une image ou une vidéo, ouvrez Éditer le point focal. Le composant est recadré différemment selon sa largeur et sa hauteur : sans réglage, la zone importante de votre visuel (un visage, un logo, un produit) risque de sortir du cadre. Les aperçus Bureau et Mobile vous montrent le résultat avant de valider.

Vérifier le rendu sur mobile

Lorsque le composant devient trop étroit, la mise en page Séparé s'empile en une seule colonne, image au-dessus du contenu, l'image étant limitée à 150 px de haut. Le seuil se mesure sur la largeur du composant lui-même et non sur celle de l'écran : un Focus placé dans une colonne étroite peut donc s'empiler sur un écran de bureau. Le texte passe alors à la ligne au lieu d'être tronqué, et l'arrière-plan conserve son point focal.

Il n'existe pas d'éditeur mobile : la configuration de votre Focus se fait depuis un poste de travail.

Dimensionner votre composant

Commencez par saisir votre contenu, puis ajustez la Hauteur. Si votre contenu dépasse la valeur saisie, le composant s'agrandit et le champ se met à jour tout seul : inutile de chercher à forcer une valeur plus basse.

En mode édition seulement

Une image ou une vidéo que vous avez sélectionnée et qui ne se charge pas vous est signalée en mode édition, sans casser la mise en page. Vos visiteurs ne voient rien de ce signalement.

7. Ce qui change par rapport à la version précédente de Focus

Les nouveautés : 

• Intégration de vidéo dans l'arrière-plan.

• Programmation de la durée d'affichage du Focus.

• Affichage responsive sur mobile.

• Interface de configuration plus simple et intuitive.

Si vous connaissez la version précédente du composant, trois réflexes sont à ajuster :

• Il n'y a pas de titre de conteneur. Le titre de votre composant, c'est le Texte d'accroche, qui est un élément de contenu à part entière et se saisit directement sur la page.
• Il n'y a pas de réglage de marge intérieure. Le composant occupe toujours toute la largeur disponible et chaque mise en page applique ses propres espacements.
• La mise en forme du texte ne se trouve plus dans le panneau de configuration. Police, taille, couleur et styles s'éditent sur la page, via la barre d'outils flottante. Voir la partie 5.

Vous ne trouvez pas la réponse à votre question ? Contactez le support Jint.