Composants
Les composants sont les éléments réutilisables du système de conception du site be.brussels.
Chaque composant a une fonction. Par exemple, afficher des informations ou permettre une interaction.
Composants personnalisables
Composant | Description | |
Accordéon | Élément interactif qui permet de présenter du contenu de manière extensible, en affichant ou masquant des sections d'informations. | |
Block | Composant permettant d'afficher trois types d'informations :
| (exemple : dernières actualités) (exemple : contact administration) |
Button (bouton) | Élément interactif cliquable, conçu pour déclencher une action ou diriger vers une autre partie du site (aussi appelé « call-to-action, CTA). | |
Call to action (CTA) | Composant permettant d’inviter l’utilisateur à réaliser une action |
|
Carte (internal links) | Composant qui regroupe des informations d’une page (image, date, titre, introduction) dans un conteneur. Dépendamment du type de page sélectionné pour créer la carte, les informations affichées varieront. | |
Contact information | Composant affichant les détails d’une institution publiques comme le nom, l'adresse, les heures d'ouverture, le numéro de téléphone, et les liens vers les réseaux sociaux, etc.
*Une explication complète de l'utilisation des informations de contact se trouve en bas de page. |
|
Contact person | Composant utilisé pour afficher les coordonnées d’une personne. (cfr. Section Pages) | |
Contenu réutilisable (reusable content) | Contenu qui peut être (ré-)utilisé à plusieurs endroits différents sur le site (eg. Information spécifique à une administration : logo, numéro, e-mail) | |
Divider (diviseur) | Élément de mise en page qui permet de diviser le contenu d'une page. | |
Document | Fichier au format PDF intégré et affiché sous forme de lien cliquable sur une page. En cliquant dessus, une fenêtre s’ouvre permettant à l’utilisateur de télécharger le document. | |
Exhibitor (list) | Composant utilisé pour afficher les informations d’un exposant (logo, nom, description, site internet). Uniquement disponible sur une Campaign Page. | |
Grid Container | Composant permettant d’agencer d’autres composants en colonne. Ce composant n’est pas activé par défaut. |
|
Photo gallery (galerie de photos) | Élément d'interface utilisé pour afficher une ou plusieurs images et permettre de la/les visualiser en plus plus grand. | |
Heading (titre) | Élément de texte structuré utilisé pour définir une hiérarchie dans le contenu. Ils sont formatés avec différentes tailles et styles pour indiquer leur niveau d'importance dans la structure de page. Ils vont de H2 à H6. | |
Image | Un composant qui affiche une image. | |
Interactive map | Carte interactive avec des marqueurs prédéfinis ou réalisés à la volée. |
|
Notice | Partie de texte mise en évidence dans un article ou une page pour attirer l'attention du lecteur et souligner des informations importantes. | |
Key figure | Donnée chiffrée mise en évidence | |
Lien | Élément de texte interactif amenant à un autre endroit de la même page (lien d’ancrage) ou à une autre page interne ou externe, lorsqu'il clique dessus. Attention : veillez à sélectionner “Ouvrir dans une nouvelle fenêtre” pour toutes les pages externes où documents à télécharger. |
|
Lien d’ancrage | Lien qui renvoie à un point spécifique de la même page. Plus d’explications ici | |
Lien externe | Lien vers un autre site web. | |
Quote (citation) | Déclaration d'une personne qui est affichée pour attirer l'attention de l'utilisateur, pour enrichir le contenu et pour souligner l'opinion ou le point de vue de l'auteur. | |
Rich text | Composant permettant d'ajouter et de formater du texte (de mettre en gras ou en italique, d'ajouter des liens hypertexte, des listes, et d'autres fonctionnalités de formatage). | |
Simulator | Composant qui permet d’afficher une série de questions pour permettre de déterminer si on est éligible à une situation prédéfinie. Ce composant doit être créé pour chaque demande avant de pouvoir l’ajouter à une page. |
|
Table | Composant permettant de personnaliser et d'afficher un tableau de données. | |
Timeline | Ligne du temps interactive avec ou sans image |
|
Video (vidéo) | Lien vers une vidéo sur un site distant (Vimeo, YouTube).
|
Contact information : how to
Vue globale des champs CMS
Related administrations : Le logo tel que défini dans la page admin (cliquable) + Une description qui reprend l’intro de la page admin
Related administrations contact : Les différents contact avec un bouton pour montrer « plus d’infos »
Side bar : reusable item : Le logo et les informations de contact de l’administration