Composants Jahia > Teasers > Teasers avec icône

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

Bonnes pratiques

Le titre des page teasers doit êtreêtre suffisamment explicite pour que les personnes sachent àà quoi s’s’attendre en cliquant dessus. Il est idéalidéal d'avoir un nombre de caractèrescaractères proche entre les titres des page teasers d'un mêmemême groupe. L’L’important est de rester régulierrégulier et succinct. Le nombre de caractèrescaractères pour le titre est limitélimité àà 60 caractèrescaractè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èmethème généralgénéral regroupant les page teasers. UneUn sectioncomposant comprendpeut contenit autant de page teasers que nécessaire.nécessaire. Suivant le résultatrésultat désiré,désiré, il est donc possible de créercréer plusieurs types d'agencement de sections.

Types d’d’agencement de sections

Afin de créercréer les différentsdifférents types de section, la largeur d'un composant est schématiséesché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épartitionrépartition des teasers sur une ligne, utiliser la variante TrèsTrès petits page teasers selon si un texte explicatif est nécessairenécessaire ou non. Cette variante est utiliséeutilisée notamment dans la page qui décritdé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écessitenécessite pas de texte explicatif particulier.

Icônes

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

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

Ces icônesicô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ônesicônes dans nos composants web institutionnels. Si vous trouvez dans cette collection des icônesicô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ône"icône", vous pouvez nous en faire la demande au moyen d'un formulaire. 

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

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

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

 

[ Documentation Jahia: retour au sommaire ]