Les composants sont tous paramétrables, ils ont tous 3 paramètres de base :

• Current Navigation Title : Titre utilisé sur le Front dans la navigation interne de la page quand celle-ci est disponible
• Background color : Défini la couleur de fond du composant sur le Front
• Hide component in the navigation : Bouton permettant de cacher le titre ( Current Navigation Title ) et le lien de la navigation interne de la page

Les composants se trouve dans l'onglet Content de toutes les pages dans le backoffice d'Umbraco.

Toutes les explications des composant ci-dessous prennent comme base le site en Français.

Description

Ce composant permet d’afficher une ou plusieurs personnes et une ou plusieurs entités internes.

Utiliser l’onglet « Relationship » pour ajouter des personnes ou des entités à la page.

Exemple de rendu

Paramètres

• Title : Titre affiché au dessus des informations de contact sur le Front ( sur l'exemple : Changement d'adresse ou de distribution )

Pages l’utilisant

Description

Ce composant permet de créer une zone en forme de grille pour intégrer toutes sortes de contenus sur la page.

Vous pouvez ajouter du texte « riche », des macros, des vidéos, des formulaires et des images.

Exemple de rendu

Paramètres

• Grid : Zone ou l'on peut créer les lignes et les colonnes de la grille.

Dans l'exemple nous avons une ligne composé de deux colonnes (l'une à 2/3, l'autre à 1/3).

Pages l’utilisant

Description

Ce composant permet de générer une zone d’image 3 par ligne.

Les images utilisent le crop dit « Rectangular ».

Exemple de rendu

Paramètres

• 3 Images : Vous trouverez un multi media picker qui vous permettra de sélectionner plusieurs images.
• Optional label : Vous pouvez ajouter un texte central en dessous des images.

Pages l’utilisant

Description

Ce composant permet mettre en avant un document comme un magazine. On trouve un titre, une zone de texte riche et 2 types de boutons.

Une image en format « magazine » permet de montrer un morceau de votre document.

Exemple de rendu

Paramètres

• Title : Titre affiché a gauche ( sur l'exemple : Rapport annuel 2018 )
• Description : Texte avec un grand choix de formatage, se trouve juste en dessous du Title
• Image : Image se trouvant sur la droite en format magazine.
• Blue Button : Sélectionne un lien et un titre pour le bouton bleu ( sur l'exemple : Lire le rapport annuel 2018 )
• Arrow Link : Un autre lien et titre possible mais avec un design différent ( sur l'exemple : Toutes les publications et brochures )

Pages l’utilisant

Description

Ce composant permet mettre en avant un lien comme une page institut. On trouve un titre, une zone de texte simple et un bouton.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans le composant ( sur l'exemple : Intéressé ? )
• Interested block text : Texte simple en dessous du Title ( sur l'exemple : Découvrez )
• Buttons for interested : Boutons simple qui permettent de mettre n'importe quel lien, il est possible d'en mettre plusieurs ( sur l'exemple : Food Ecosystem institute et économie d'entreprise )

Pages l’utilisant

Description

Ce composant permet de lister automatiquement les enfants de la page courante ou de sélectionner une liste de liens. Plusieurs paramètres permettent de personnaliser le composant.

Vous avez aussi la possibilité d’ajouter un titre et du texte simple.

Les éléments de la liste récupèrent le titre court des pages et leur teaser.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans le composant ( sur l'exemple : Une formation supérieur orientée vers la pratique )
• Description : Texte simple en dessous du Title ( sur l'exemple : Grâce à une formation pointue et ciblée ... )
• List of content : Liste de lien a lister s'affiche en format BigLinks, si vous ne mettez aucun lien le composant récupère automatiquement toutes les enfants, petits-enfants, etc... de la page
• First level Only : Défini la récupération automatique seulement sur les enfants de la page
• Bottom text : Text optionnel se trouvant en dessous des BigLinks

Pages l’utilisant

Description

Ce composant permet d’afficher une citation. Choisissez la citation et l’auteur.

Exemple de rendu

Paramètres

• Quotation : Citation de l'auteur ( sur l'exemple : Pour les étudiants de la HEG-FR ... )
• Quotation author : L'auteur de la citation ( sur l'exemple : Christine Demen Meier ... )

Pages l’utilisant

Description

Ce composant permet d’afficher plusieurs news relatives à la page.

Utiliser l’onglet « Relationship » pour rajouter des news à la page.

Exemple de rendu

Paramètres

• Number of items to display : Vous pouvez spécifier le nombre de news que vous affichez dans le composant, 0 correspond à l'affichage de toutes les news
• Title : Titre affiché en premier dans le composant ( sur l'exemple : Actualités récentes )

Pages l’utilisant

Description

Ce composant permet d’afficher une brochure et un ou plusieurs PDF.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans le composant ( sur l'exemple : Toutes les infos dans nos brochures )

Pages l’utilisant

Description

Ce composant permet d’afficher plusieurs évènements.

Utiliser l’onglet « Relationship » pour ajouter des évènements à la page.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans le composant ( sur l'exemple : Toutes les infos dans nos brochures )
• Show all events : Bouton si il est sélectionné, récupère tous les événements présents dans le site, sinon prend ceux ce trouvant dans les parmètres de la page
• Number of items showed : Vous pouvez spécifier le nombre d'events que vous affichez dans le composant, 0 correspond à l'affichage de tous les events

Pages l’utilisant

Description

Ce composant permet d’afficher plusieurs news et témoignages. Il est plus complet que le composant « news list » et s’affiche sur plusieurs lignes.

Ce composant récupère automatiquement les news et témoignages qui ont une « Publication date » (onglet « News » d’un témoignage ou d’une news). Ils sont classés par « Publication date ».

En activant le paramètre « Sticky News » (onglet « News » d’un témoignage ou d’une news), une image apparait en plus et la news est mise en avant sans prendre en compte la date de publication.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans le composant ( sur l'exemple : Actualités )
• Number of items showed : Vous pouvez spécifier le nombre de news et de témoignages que vous affichez dans le composant, 0 correspond à l'affichage de toutes news et de tous témoignages

Pages l’utilisant

Description

Ce composant permet d’afficher du texte et une image de chaque côté (interchangeable).

Vous avez la possibilité d’insérer des liens en dessous du texte.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans la zone "texte" du composant ( sur l'exemple : Étudier ou se former en cours d’emploi à la HEG-FR )
• Description : Texte simple en dessous du Title ( sur l'exemple : Nous offrons aux étudiantes et étudiants une formation ... )
• Links : Défini un ou plusieurs liens au design simple ( sur l'exemple : Bachelor en économie d'entreprise )
• Image : Permet de sélectionner l'image ( sur l'exemple : sur la gauche )
• Show image on the right : Inverse la position de l'image et du texte ( par rapport a l'exemple : si sélectionné l'image se trouvera sur la droite )

Pages l’utilisant

Description

Ce composant permet d’afficher du texte et une vidéo sur la droite.

Vous avez la possibilité d’insérer des liens en dessous du texte.

Exemple de rendu

Paramètres

• Title : Titre affiché en premier dans la zone "texte" du composant ( sur l'exemple : Tout sur la HEG-FR en 1’23’’ )
• Description : Texte simple en dessous du Title ( sur l'exemple : Compétence et créativité sont au cœur ... )
• Links : Défini un ou plusieurs liens au design simple
• Image : Permet de sélectionner l'image qui s'affiche si la vidéo n'est pas disponible
• Video : Permet de mettre le lien de la vidéo (valide pour youtube ou switchTube )

Pages l’utilisant

Description

Ce composant permet d’afficher les informations pour s’enregistrer à une formation. Ce composant ne peut être utilisé que dans les pages formations.

Il reprend automatiquement les informations mentionnées dans la formation.

Exemple de rendu

Paramètres

• Register deadline : Texte simple d'information sur la date d'inscription en dernier sur le composant ( sur l'exemple : 30 avril 2020 (pour porteurs ... )
• Registration page : Choix du lien pour le bouton du composant ( sur l'exemple : Je m'inscris ! )

Pages l’utilisant

Description

Ce composant permet de mettre une grille sur la gauche pour insérer ce que vous désirez et sur la droite, les informations remplies sur la page évènement.

Exemple de rendu

Paramètres

• Grid : Zone ou l'on peut créer les lignes et les colonnes de la grille, s'affiche au 2/3 de la page ( sur l'exemple : Présentation  Pour se comprendre ... )

• Event date and time : Date et heure du début de l'évènement, s'affiche en dessous du « Quand ? » ( sur l'exemple : lundi, 11 novembre 2019 17:00 )
• Event end date and time : Date et heure de fin de l'évènement, s'affiche en dessous du « Quand ? » ( sur l'exemple : - 20:00, comme la date de début est de fin est la même seul l'heure de fin est affiché )
• Room : Information sur la localisation de l'évènement, s'affiche en dessous du « Où ? » ( sur l'exemple : HEG-FR Chemin du Musée 4 1700 Fribourg Switzerland )

Pages l’utilisant

Description

Ce composant permet de mettre une grille sur la gauche pour insérer ce que vous désirez et sur la droite, les informations remplies sur la page formation.

Exemple de rendu

Paramètres

• Grid : Zone ou l'on peut créer les lignes et les colonnes de la grille, s'affiche au 2/3 de la page ( sur l'exemple : Organisation des études  Le plan de cours de notre ... )

• Exact title of degree : Nom du diplôme ou/et du titre officiel reçu par l'étudiant à la fin de son cursus, s'affiche en dessous du « Titre délivré » ( sur l'exemple : Bachelor of Science HES-SO en économie d'entreprise )
• ETCS Credits : Nombre de crédits ECTS (European Credit Transfer and Accumulation System) gagné par l'étudiant à la fin de son cursus, s'affiche en dessous du « Crédits ECTS » ( sur l'exemple : 180 )
• Duration of program : Texte simple sur la durée le temps d'étude pour l'étudiant, s'affiche en dessous du « Durée d'études » ( sur l'exemple : 3 ans à plein temps (PT) ou 4 ans en emploi (EE) )
• Starting date : Texte simple sur la semaine et le jour du début de la formation, s'affiche en dessous du « Début de la formation » ( sur l'exemple : Semaine 38 (​14 septembre 2020) )
• Course dates : Texte sur la durée des cours de la formation, s'affiche en dessous du « Date des cours »
• Place of study : Texte simple sur le lieu d'étude de la formation, s'affiche en dessous du « Lieu d'étude » ( sur l'exemple : HEG-FR, Fribourg )
• Study language : Texte simple les langues ou le nombre de langues disponible pour la formation, s'affiche en dessous du « Langue d'études » ( sur l'exemple : Unilingue, bilingue, trilingue )
• Fee/Cost : Texte simple le coûts de la formation, s'affiche en dessous du « Coûts » ( sur l'exemple : L'écolage forfaitaire semestriel se monte à CHF 500.- (frais d'infrastructures non inclus) )
• More info : Texte complémentaire en cas de besoin, s'affiche en dessous du « Plus d'informations »
• Registration Level : valeur définissent quel texte va être sélectionner pour l'inscription ( ce système évite de perdre le texte chaque année ), s'affiche en dessous du « Inscription » ( sur l'exemple : Le délai d'inscription est fixé au 30 avril de chaque année ... )
  • Open Registation : Zone de texte quand les inscriptions sont ouvertes
  • Late Registration : Zone de texte quand les inscriptions sont fermées, mais qu'il est encore possible de déposé ca candidature sous certaines conditions
  • Close Registation : Zone de texte quand les inscriptions sont fermées

Pages l’utilisant