Composants Jahia > Teasers > Teasers avec icône

Le composant Teaser avec icôicône vous permet de crécréer une liste de liens rapides, chacun accompagnéaccompagné d’d’une icôicône reconnaissable. Ce type de teaser est particulièparticulièrement adaptéadapté pour orienter l’l’utilisateur vers des pages pratiques, des rubriques spéspécifiques ou des actions fréfréquentes. Il facilite la navigation grâgrâce àà un affichage visuel simplifiésimplifié et structuréstructuré.

Bonnes pratiques

Le titre des page teasers doit êêtre suffisamment explicite pour que les personnes sachent àà quoi s’s’attendre en cliquant dessus. Il est idéidéal d'avoir un nombre de caractècaractères proche entre les titres des page teasers d'un mêmême groupe. L’L’important est de rester rérégulier et succinct. Le nombre de caractècaractères pour le titre est limitélimité àà 60 caractècaractères maximum, espaces compris.

Les page teasers permettent, si souhaité, d’ajouter un texte permettant d’indiquer à l’usager quel contenu il pourra trouver au clic. Comme pour le titre, si on ajoute un texte explicatif a un page teaser, il est important de proposer un texte explicatif à tous les page teasers réunis dans un même ensemble. Le nombre de caractères de cette description est limité à 250 caractères maximum, espaces compris

Cas d'utilisation

Ce composant est notamment utiliséutilisé sur les landing pages pour diriger vers leurs sous-pages. Les pages teasers sont répartisregroupés dans unele section.composant. Chaque sectioncomposant peut avoir un titre de composant et un texte d’d’accompagnement optionnels permettant d’d’annoncer les pages teasers. Ce texte peut avoir un lien àà gauche redirigeant vers une page traitant du thèthème génégénéral regroupant les page teasers. UneUn sectioncomposant comprendpeut contenit autant de page teasers que nénécessaire. Suivant le rérésultat désirédésiré, il est donc possible de crécréer plusieurs types d'agencement de sections.

Types d’d’agencement de sections

Afin de crécréer les diffédifférents types de section, la largeur d'un composant est schématiséschématisée en %. Ce pourcentage de largeur ne comprend pas les espacements autour des page teasers.

• Type A : 1 page teaser x 100% de la largeur disponible
• Type B : 2 page teasers x 50% de la largeur disponible
• Type C : 3 page teasers x 33% de la largeur disponible
• Type D : 4 page teasers x 25% de la largeur disponible
• Type E : 5 page teasers x 20% de la largeur disponible, il s’s’agit du maximum disponible pour une ligne sur desktop

Variantes du composant

Il existe plusieurs variantes de ce composant :

• Lorsqu’Lorsqu’il y a 1 àà 3 teasers sur la largeur (Type A, B et C), utiliser la variante Page teaser (grand titre avec texte explicatif)
• Lorsqu'il y a 4 àà 5 teasers (Types D et E), utiliser les variantes Petits page teaser ( avec texte explicatif)
• Pour tous les types de rérépartition des teasers sur une ligne, utiliser la variante TrèTrès petits page teasers selon si un texte explicatif est nénécessaire ou non. Cette variante est utiliséutilisée notamment dans la page qui dédécrit une formation (bachelor ou master) quand il est souhaitésouhaité de valoriser des liens dans le corps de la page, mais que ceux-ci ne nénécessite pas de texte explicatif particulier.

IcôIcônes supplésupplémentaires dans le composant Jahia "Teaser avec icôicône" ?

Si vous utilisez le composant Jahia "Teasers avec icôicône", il se peut parfois que vous ne trouviez pas d'icôicône adaptéadaptée au concept que vous voulez illustrer parmi celles qui sont àà disposition dans l'interface de ce composant dans Jahia. 

Ces icôicônes proviennent toutes de la collection Flex Duo par Streamline. Nous avons souscrit une licence qui nous permet d'utiliser un certain nombre de ces icôicônes dans nos composants web institutionnels. Si vous trouvez dans cette collection des icôicônes non encore disponibles dans notre composant et que vous souhaitez utiliser dans le cadre de votre site web ou rubrique web Jahia àà travers le composant "Teaser avec icôicône", vous pouvez nous en faire la demande au moyen d'un formulaire. 

Nous éévaluerons si ces demandes d'ajout sont intéintégrables dans notre charte graphique, et si oui nous ajouterons ces icôicônes dans le composant. Les demandes d'ajout sont examinéexaminées par l'ééquipe web 3x par an, une réréponse vous sera donnédonnée dans tous les cas. 

Voici comment référéférencer les icôicônes souhaitésouhaitées dans ce formulaire : 

VidéVidéo extraite de la formation de mise àà niveau Jahia

 

[ Documentation Jahia: retour au sommaire ]