Compositions

Texte d’introduction de page. Cette zone, limitée à 800 px de large et affichée en police plus grande que le corps de texte, permet de poser le contexte et d’orienter rapidement la lecture avant le contenu principal. Un bouton optionnel peut rediriger l’utilisateur vers une ancre sur la page, une autre page ou une adresse email.

Composant people teasers

Le composant « People Teasers » permet d’afficher une liste de personnes afin de présenter une équipe de manière structurée et visuelle.

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Titre en H2 pour un image + texte

Un ou plusieurs paragraphes permettent de poser le contexte ou de développer les informations utiles à la compréhension du sujet. L’image positionnée sur le côté crée une lecture structurée entre texte et visuel.

Même si plusieurs paragraphes sont possibles, il est recommandé de rester concis afin de préserver l’impact visuel du composant.

© Chris Greenhow
© Chris Greenhow

Un composant avec du texte centré

Cette zone centrée, limitée à 800 px de large, assure une lecture confortable sur tous les écrans et maintient une longueur de ligne cohérente. Elle constitue l’espace de référence pour développer un contenu détaillé tout en conservant une hiérarchie claire.

Ce bloc peut accueillir du texte, des liens, des listes ou d’autres éléments éditoriaux simples. Un bouton optionnel peut être ajouté en fin de section pour orienter l’utilisateur vers l’étape suivante.

Accordéons pour les contenus long qu’on veut cacher

Texte de démonstration pour un composant accordéon. Chaque entrée comprend un titre cliquable qui révèle ou masque les informations complémentaires. Ce principe permet d’alléger la page et d’aider le lecteur à cibler rapidement ce qui l’intéresse.

Ce format est adapté lorsque plusieurs réponses ou développements doivent coexister sans être tous visibles simultanément. Les panneaux peuvent contenir du texte, des liens ou des listes.

Texte de démonstration pour un composant accordéon. Chaque entrée comprend un titre cliquable qui révèle ou masque les informations complémentaires. Ce principe permet d’alléger la page et d’aider le lecteur à cibler rapidement ce qui l’intéresse. Ce format est adapté lorsque plusieurs réponses ou développements doivent coexister sans être tous visibles simultanément. Les panneaux peuvent contenir du texte, des liens ou des listes.

Titre en H2 pour composant contenu

Texte de démonstration pour un composant accordéon. Chaque entrée comprend un titre cliquable qui révèle ou masque les informations complémentaires. Ce principe permet d’alléger la page et d’aider le lecteur à cibler rapidement ce qui l’intéresse.

Ce format est adapté lorsque plusieurs réponses ou développements doivent coexister sans être tous visibles simultanément. Les panneaux peuvent contenir du texte, des liens ou des listes.

Composant people teasers

Le composant « People Teasers » permet d’afficher une liste de personnes afin de présenter une équipe de manière structurée et visuelle.

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Person placeholder

Prénom Nom

Fonctions

Description

Titre en H2 pour teaser avec texte

Un texte d’introduction optionnel et une grille de teasers sur 4 colonnes. Le nombre de teasers par ligne est ajustable via la valeur « Minimum column width ». Nombre de teasers illimité. Responsive.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Titre H3 et lien

Texte descriptif du teaser. Le titre H3 ci-dessus est un lien vers la page de destination.

Un composant avec une vidéo YouTube

Texte d’accompagnement optionnel placé sous la vidéo YouTube. Permet de contextualiser ou de résumer le contenu audiovisuel.

Actualités

  • Bonjour tout le monde !

    Bienvenue sur Sites WP TEST UNIL. Vous lisez votre premier article. Modifiez-le ou supprimez-le, puis commencez à publier !