Prise en charge native du Responsive Design
Le Responsive Design, ou Design Réactif ou Adaptatif, consiste à utiliser des techniques de codage HTML et CSS pour que l’affichage d’un contenu s’adapte automatiquement en fonction de la taille, du format et de l’orientation de l’écran sur lequel il est consulté.
Avec l’usage croissant des tablettes et des smartphones dans la formation en ligne, le Responsive Design est aujourd’hui indispensable pour conjuguer efficacité des équipes de production et expérience utilisateur fluide.
Le CMS Knowledge Place fournit une prise en charge native du Responsive Design, sans aucune action requise de votre part.
À l’affichage, tous les Blocs placés sur vos Pages sont redimentionnés et redisposés automatiquement en fonction de la résolution, de la taille et de l’orientation de l’écran.
Personnalisation des styles Responsive
Pour les utilisateurs les plus exigeants, vous pouvez personnaliser l’apparence de vos Pages en fonction du type d’équipement utilisé.
Vous pouvez personnaliser certains paramètres d’affichage d’un Bloc en fonction du type d’équipement sur lequel il va s’afficher.
Depuis le fenêtre des Paramètres du Bloc, dans l’onglet Style, cliquez sur le volet correspondant aux options que vous souhaitez modifier.
- Dans cet exemple, survolez le paramètre Image Rectangle arrondi pour afficher les icônes
- Cliquez sur l’icône Device (téléphone)
- Choisissez le type de device en cliquant sur l’onglet Tablette et/ou Téléphone
- Faites les modifications souhaitées en fonction de chaque type d’équipement : Bureau, Tablette et Smartphone
Dans l’exemple ci-dessous le style de l’image est différent en fonction du type d’équipement : bureau, tablette, smartphone.
Personnalisation du contenu Responsive
Depuis le fenêtre des Paramètres du Bloc, dans l’onglet Contenu, cliquez sur le volet correspondant aux options que vous souhaitez modifier.
- Dans cet exemple, survolez le paramètre Titre du volet Texte pour afficher les icônes
- Cliquez sur l’icône Device (téléphone)
- Choisissez le type de device en cliquant sur l’onglet Tablette et/ou Téléphone
- Faites les modifications souhaitées en fonction de chaque type d’équipement : Bureau, Tablette et Smartphone
Dans l’exemple ci-dessous le titre du Module est différent en fonction du type d’équipement : bureau, tablette, smartphone.
Afficher ou masquer un Bloc selon le type d’équipement
Avec le CMS Knowledge Place, vous pouvez modifier la composition de chaque Page en fonction du type d’équipement sur lequel elle va s’afficher, en choisissant de masquer certains Blocs.
Pour chaque Bloc que vous souhaitez masquer selon le type d’équipement, depuis les paramètres du Bloc :
- Cliquez sur l’onglet Avancé
- Cliquez sur le volet Visibilité
- Cochez les cases correspondant aux types d’équipement pour lesquels le Bloc doit être masqué : Téléphone, Tablette et/ou Bureau
Personnalisation des équipements utilisés en aperçu
Le CMS Knowledge Place permet de personnaliser les équipements utilisés en aperçu et de les définir par défaut, comme par exemple la flotte de commerciaux tous équipés du même smartphone.
Pour cela, accédez aux différentes fonctions de l’Éditeur Visuel :
- Cliquez sur l’icône violet affiché en bas de votre écran. De nouveaux éléments cliquables sont affichés en bas de l’écran
- Cliquez sur l’icône Tablette et/ou Téléphone pour afficher l’aperçu correspondant
- Sélectionnez le type d’équipement. Depuis le nouvel aperçu, dans cet exemple Tablette, cliquez sur la liste déroulante de choix
- Sélectionnez le modèle, vous pouvez si besoin déterminer la taille en saisissant les valeurs dans les champs ou à l’aide de l’icône
- Cliquez sur le bouton Make Default Tablet View pour définir le modèle par défaut
- Pour supprimer le modèle par défaut cliquez sur le bouton Reset Default Tablet View
