Introduction
Les pages Widget Personnalisées sont des pages entièrement personnalisables utilisées pour créer une mise en page soit à partir de rien (en partant d’une page blanche) soit en utilisant un modèle prédéfini qui est prêt-à-l’emploi mais reste personnalisable.
Chaque page que vous créez est automatiquement disponible à la fois pour le desktop et pour le mobile. Vous pouvez créer jusqu’à 1 000 pages et 200 menus en incluant les pages intégrées et le menu par défaut.
Créer des Pages Widget Personnalisées
Pour créer une page widget, à la fois pour le desktop et pour l’app mobile, accédez au Menu Admin puis cliquez sur Gestion des Pages dans la section Paramètres. Cliquez sur le bouton plus en haut à droite de la page. Dans le panneau Nouvelle Page Personnalisée, sélectionnez l’option Page Widget Personnalisée et appuyez sur Suivant. Dans l’onglet Détails, entrez le nom de la page et éventuellement le code de la page et sa description. Appuyez sur Suivant pour passer à la page de configuration.
Dans l’onglet Modèle, vous pouvez soit sélectionner un modèle à partir d’une liste pour utiliser une mise en page prédéfinie soit sélectionner l’option Vide pour concevoir la page en partant d’un document vide. Puis, cliquez sur Créer et Modifier pour accéder à la page de configuration.
Utilisez la barre inférieure pour définir le statut de votre page. Par défaut, les nouvelles pages sont publiées. Si vous les dépubliez, les utilisateurs ne pourront plus les voir dans les menus de la plateforme et de l’application mobile même si ces menus leur sont accessibles. La page sera cachée dans le menu de l’utilisateur jusqu’à ce qu’elle soit Publiée de nouveau. La barre inférieure de publication est toujours visible lorsque que vous avancez à travers les différents onglets de l’espace Gestion des Pages.
Dans l’onglet Paramètres, ouvrez le menu Paramètres Généraux pour voir et modifier tous les détails que vous avez configurés dans le panneau de droite au moment de la création de la page. Sélectionnez une icône qui identifiera votre page en cliquant sur l’icône existante et en sélectionnant une autre icône dans le panneau de droite. Vous pouvez éventuellement rechercher le nom d’une icône mais notez que la recherche fonctionne uniquement en anglais. L’icône sera affichée avant le nom de la page dans le menu. Choisissez votre icône dans le panneau de droite et appuyez sur Confirmer.
Dans la section Boutons Pages Supplémentaires, indiquez si vous souhaitez afficher le bouton Partager Contenu et le bouton Demandez à l’Expert en haut à droite de la page. Quand ces boutons sont affichés, les utilisateurs ont la possibilité de télécharger des contributions et/ou de poser des questions à un expert directement depuis cette page en utilisant les boutons correspondants. Merci de noter que ces options ne sont disponibles que lorsque le module Discover, Coach & Share est actif dans votre plateforme.
Si votre page inclut un Widget Catalogue, il est possible d’activer l’option Partagez cette Vue afin que les utilisateurs puissent copier le lien de la page dans leur presse-papier et partager les résultats de leur recherche dans le catalogue avec d’autres utilisateurs. En savoir plus sur le partage de deeplinks vers des pages filtrées et sur la configuration du widget Catalogues.
A noter : L’option d’afficher le bouton Partagez cette Vue, disponible dans la section Boutons Pages Supplémentaires n’est valable que pour les pages desktop et n’est pas supportée par les pages mobiles. Sur l’app mobile, le bouton permettant de partager une vue n’est pas disponible. Cependant, une page partagée via ce lien peut également être vue dans l’app mobile.
Une fois que vous avez terminé, cliquez sur Enregistrer les Modifications et passez à l’onglet Composer pour visualiser la mise en page.
Les pages sont toujours créées dans l’onglet Composer et ensuite automatiquement disponibles pour le mobile dans l’onglet Mise en Page Mobile mais uniquement si au moins un des des widgets qui composent la page est également disponible pour le mobile.
Définir la Mise en Page
L’onglet Composer montre la mise en page de la page widget. Il reflète le modèle que vous avez sélectionné ou est vide si vous avez sélectionné Vide au moment de la création de la page.
Chaque page est composée d’une ou plusieurs lignes horizontales. Une ligne est une zone de la page divisée en colonnes allant de un à trois. Les colonnes sont les contenants des widgets. Quand vous choisissez des modèles prédéfinis, les lignes sont automatiquement configurées avec les widgets nécessaires au modèle choisi mais vous avez la possibilité de les modifier ou d’ajouter des lignes supplémentaires.
Appuyez sur le bouton plus pour ajouter une nouvelle ligne à la page. Sélectionnez la mise en page de la ligne dans le panneau de droite et cliquez sur Créer. Vous pouvez modifier la mise en page de la ligne à tout moment en cliquant sur l’icône menu au bout de la ligne et en sélectionnant l’option Changer Disposition Ligne. Sélectionnez l'option de mise en page qui vous convient le mieux dans le panneau coulissant, puis appuyez sur le bouton Modifier la mise en page pour confirmation.
Si vous diminuez la taille (par exemple vous passez de 1/3 - disposition en ligne sur trois colonnes à 1/2 - disposition en ligne sur 2 colonnes), les widgets dans la colonne supprimée sont déplacés vers la colonne restante située la plus à droite. Pour déplacer des lignes sur la page, passez votre souris sur l’entête de la ligne jusqu’à l'apparition d’une croix. Cliquez et faites glisser la ligne pour la placer là où vous le souhaitez.
Largeur des Widgets
Le schéma suivant représente la largeur des colonnes, exprimée en pixels, sur une fenêtre zoomée à 100%, dans un navigateur. Pour les écrans plus petits (moins de 1400 pixels de large), la taille des colonnes sera réduite en conséquence.
Utilisez le schéma suivant pour vous aider à créer des images ou images d'arrière-plan avec les bonnes proportions.
Bonne pratique : essayez de toujours doubler la largeur (2x) pour n'importe quel widget image ou image d'arrière-plan. Par exemple, la largeur standard pour un widget image 1/3 est de 444px, donc la largeur de l'image devrait être paramétrée à 888px. Cela évite que l'image soit floue sur les écrans Retina.
Nombre de Widgets par Page
Le nombre maximum de widgets autorisé pour une page (à la fois pour le desktop et pour le mobile) dépend du type de widget que vous souhaitez insérer dans la page. Certains widgets, appelés widgets dynamiques, ont un impact important sur le chargement de la page car leur contenu est mis à jour en permanence. Un nombre important de widgets dynamiques sur une même page peut avoir un impact sur la performance de chargement de la page. D’autres widgets, appelés widgets statiques, ont un impact faible sur le chargement de la page car leur contenu ne change jamais. Il est donc possible d’ajouter plus de widgets de ce type sur une même page.
Voici une liste de widgets catégorisés entre widgets dynamiques et statiques :
| Nom du Widget | Dynamique | Statique |
|
Aperçu de l'Activité |
x | |
| Flux des Activités | x | |
| Catalogues | x | |
| Chaînes | x | |
| Cours et Plans de Formation | x | |
| Fenêtre de Contenu Personnalisé | x | |
| Vidéo Intégrée | x | |
| Gamification | x | |
| HTML/WYSIWYG | x | |
| Iframe | x | |
| Image | x | |
| Mon Calendrier | x | |
| Mes KPI | x | |
| Mon Profil | x | |
| Mes Transactions | x | |
| Questions & Réponses | x | |
| Codes d'Abonnement | x | |
| Liste des Taches | x |
Le nombre maximum de widgets autorisé par page est de 20 au total mais le nombre de widgets dynamiques ne peut pas dépasser 10. Par exemple, une page peut inclure 10 widgets dynamiques et 10 widgets statiques ou 5 widgets dynamiques et 15 widgets statiques ou encore 20 widgets statiques.
Pour la version mobile, les widgets dynamiques ne sont autorisés que pour les 10 premiers widgets de la page. À partir du 11ème widget, le type de widget doit être statique. À noter, pour la version mobile le widget HTML/WYSIWYG est considéré comme un widget dynamique.
Quand le nombre maximum de widgets dynamiques est atteint pour une page, le panneau de droite ne listera plus que les widgets statiques au moment de la création d’un nouveau widget.
Dupliquer une Ligne
La mise en page d’une ligne peut être dupliquée pour accélérer la configuration de la page widget. Pour dupliquer la mise en page d’une ligne, cliquez sur l’icône menu au bout de la ligne et sélectionnez l’option Dupliquez Aspect Ligne. La nouvelle ligne apparaît en dessous de la ligne sélectionnée avec la même mise en page mais sans widgets.
Supprimer une Ligne
Pour supprimer une ligne, cliquez sur l’icône menu au bout de la ligne et sélectionnez Supprimer Ligne. Cliquez sur Confirmez & Supprimez dans la boîte de dialogue pour terminer l’opération. Attention : tous les widgets contenus dans la ligne seront aussi supprimés. Il faut au minimum une ligne dans la page. Vous ne pouvez pas supprimer une ligne si celle-ci est la dernière présente sur la page.
Ajouter des Widgets aux Lignes
Pour ajouter un widget dans une ligne, cliquez sur le bouton plus et sélectionnez le widget depuis le panneau de droite Ajouter un Nouveau Widget. Configurez le widget et cliquez sur Ajouter Widget pour l’insérer dans la colonne sélectionnée. Les widgets peuvent avoir des aspects différents selon la taille de la zone où ils sont placés.
Quand un widget est sélectionné depuis la liste, sa prévisualisation s’affiche dans le panneau de droite afin que vous puissiez avoir une idée de ce à quoi il ressemblera dans la page. Notez que certains widgets, disponibles pour le desktop, ne sont pas disponibles pour le mobile. L’icône mobile dans l'espace widget vous aidera à comprendre quels widgets sont disponibles pour le mobile.
Pour changer les paramètres d’un widget, cliquez sur l’icône menu en haut à droite de la zone widget et sélectionnez Modifier. Les paramètres du widget peuvent différer en fonction du widget. Veuillez vous référer à la liste complète des widgets pour plus d’informations.
Déplacer les Widgets and Définir la Taille des Widgets
Pour déplacer les widgets dans la page, passez votre souris sur la zone widget jusqu’à l’apparition de l’icône en croix. Faites glisser dans une autre colonne de la même ligne ou dans une autre ligne de la même page. Attention : les widgets avec un défilement infini doivent être placés en bas de la page sans aucun autre widget en dessous car tout ce qui est placé en dessous d’un widget à défilement infini peut être invisible. Cliquez sur Enregistrer les Modifications une fois terminé.
Utiliser le Composer de la Mise en Page Mobile
Lorsque vous concevez la mise en page de votre page desktop depuis le Composer, la mise en page de la page mobile correspondante est automatiquement conçue dans l’onglet Composer Mobile si au moins un des widgets que vous avez ajoutés dans le composer est également disponible pour le mobile. Certains widgets disponibles pour le desktop ne sont pas disponibles pour le mobile, les pages mobiles ne pourront donc pas supporter les widgets destinés à l’utilisation desktop exclusivement.
Les widgets actuellement disponibles pour le mobile sont :
- Aperçu de l'Activité
- Flux des Activités
- Catalogues
- Chaînes
- Fenêtre de Contenu Personnalisé (lors du rendu du widget sur l’app mobile Go.Learn, la largeur est adaptée à la largeur de l’écran et la hauteur est appliquée remplissant la fenêtre avec l’image en la recadrant si nécessaire)
- Vidéo intégrée
- Gamification
- Vidéo Intégrée
- HTML/WYSIWYG (nous suggérons d’utiliser l’éditeur WYSIWYG pour les pages mobiles, nous ne pouvons pas garantir le rendu du widget quand l’éditeur HTML est utilisé)
- Image
- Mon Calendrier
- Cours et Plans de Formation
- Mon Profil
- Questions & Réponses
- Liste des Tâches
Les widgets disponibles pour le mobile peuvent être identifiés grâce à l’icône mobile située dans la zone widget du composer. Une fois que votre page desktop est prête, passez à l'espace Mise en Page Mobile pour visualiser le rendu de la page sur un écran mobile. Les pages mobiles ont une seule colonne et les widgets sont classées selon l'ordre qu'ils ont dans la mise en page, en partant de la première colonne à gauche, de haut en bas puis en passant aux autres colonnes.
L’ordre des widgets dans les pages mobiles ne peut pas être modifié mais vous pouvez cacher les widgets dont vous n’avez pas besoin en cliquant sur l’icône œil. Cliquez une nouvelle fois sur l’icône œil pour les rendre visibles à nouveau.
Utiliser les modèles pour les Pages Widgets
Quand vous sélectionnez un des modèles disponibles pour concevoir une page widget, le Composer et la Mise en Page Mobile chargera le set de widgets correspondant.
- Dashboard d’Apprentissage Informel. Ce modèle inclut les widgets Flux d’Activités, Cours et Plans de Formation et Mon Calendrier.
- Dashboard d’Apprentissage Formel. Ce modèle inclut les widgets Catalogues, Mon Profil, Cours et Plans de Formation et Mon Calendrier
- Flux d’Apprentissage Formel. Ce modèle inclut le widget relatif aux Chaînes
- Tableau de Bord des Cours Offerts. Ce modèle inclut les widgets Mon Calendrier, Profil Utilisateur, Cours et Plans de Formation, et Catalogues.
Les widgets dans les modèles sont configurés avec des paramètres par défaut (titre, options, timeframe). Vous pouvez consulter les options dans l'espace widget du modèle.
Cependant, les modèles ne sont pas figés. Vous pouvez modifier les paramètres des widgets, ainsi que leur taille et leur position dans la page. Vous pouvez également ajouter des widgets supplémentaires dans la page ou supprimer des widgets existants. (voir les détails dans les sections correspondantes de cet article).
Configurer les Widgets via CSS
Avec des connaissances de base en CSS, vous pouvez personnaliser les widgets qui composent vos pages desktop selon vos besoins. Chaque widget, disponible dans les pages widget est identifié par un ID unique dans le HTML du fichier CSS, automatiquement affecté par la plateforme au moment de la création du widget avec le format suivant :
#doc-widget-{widget_id}
La valeur {widget_id} est un shortcode numérique. De la même manière, vous pouvez personnaliser les pages desktop de votre plateforme via CSS. Plus d’informations sur la personnalisation de la mise en page via CSS.
Aperçu de la Page
La fonction de prévisualisation de la page vous permet de voir à quoi ressemblera votre page pour les utilisateurs. Accédez à la prévisualisation de la page en cliquant sur l’onglet Aperçu Desktop après avoir configuré votre page dans le Composer. Pour un rendu plus réaliste, les widgets dans l’onglet Aperçu sont remplis avec des données fictives.
La prévisualisation de la page est disponible pour les pages desktop uniquement. Quand vous configurez des pages mobiles, celles-ci sont mises à jour en temps réel quand vous cliquez sur Enregistrer les Modifications dans la barre de publication. Nous suggérons de tester les pages mobiles avant de les déployer en créant un menu de test affecté à un utilisateur.
Conseils & Astuces
Vous pouvez créer des liens vers d’autres pages, avec leurs URL spécifiques, dans les boutons widgets. Si la page vers laquelle vous souhaitez rediriger l'utilisateur n’est pas présente dans le menu affiché, vous avez la possibilité de créer le lien vers cette page, si vous le placez dans un menu différent, avec les mêmes paramètres de visibilité que le menu de l’utilisateur (ou une visibilité totale). Placez-le ensuite en bas de la liste afin qu’il ne se charge pas avant d’autres menus.