Créer des thèmes dans Studio
Point de départ : Le tableau de bord Flow Learning.
- Accédez à Apprentissage et développement > Studio.
- Sélectionnez votre leçon spécifique.
Créer un thème
- Une fois dans l'éditeur de leçon, sélectionnez Thème.
- Le panneau Thème s'ouvre. Si vous n'avez pas encore créé de thème, Studio applique un thème par défaut, tel que Clean Blue.
Remarque : Nous vous recommandons de partir d'un thème Studio par défaut.
Pour créer un nouveau thème, modifiez un élément d'un thème par défaut, ce qui vous permettra ensuite de l'enregistrer en tant que nouveau thème :
- Choisissez l'une des couleurs de votre marque. Studio utilise des codes hexadécimaux.
- Modifiez l'une des options de couleur existantes.
- Sélectionnez Sauvegarder en tant que noveau en bas du panneau Thème.
Par exemple, lorsque vous remplacez la deuxième couleur d'accentuation par #c7305e, le thème devient un nouveau brouillon car une modification a été apportée à un thème existant.
- Sélectionnez Sauvegarder en tant que noveau.
- Saisissez un nom pour votre thème, puis sélectionnez Sauvegarder.
Cette action crée un duplicata du thème Clean Blue avec la modification de couleur appliquée. Vous pouvez maintenant modifier les autres éléments.
Remarque : Enregistrez vos modifications à chaque fois que vous en effectuez une.
Définir vos couleurs
- La deuxième couleur d'accentuation modifie tous les boutons, icônes et les contours de sélection affichés lors de l'édition de la leçon.
- La première couleur d'accentuation modifie tous les composants, qui prennent une teinte de cette couleur, ainsi que les soulignements sous les titres.
Définir les couleurs de vos polices
Choisissez la couleur souhaitée pour votre police En-tête, qui couvre tous les titres et sous-titres, ainsi que pour votre police Paragraphe.
Remarque : Si vous choisissez une couleur dont le contraste est insuffisant par rapport à la Couleur d'arrière-plan de la page, à l'Image d'arrière-plan de la page OU à vos composants, Studio vous le signale. Assurez-vous que votre texte respecte le niveau de contraste minimal requis.
Définir l'arrière-plan de la page
La Couleur d'arrière-plan de la page doit offrir un contraste suffisant avec la couleur de votre texte.
- Accédez à Arrière-plan de la page.
- Copiez et collez le code hexadécimal de la couleur choisie.
Vous pouvez également télécharger une image d'arrière-plan de page. Celle-ci s'applique à toutes les pages ; nous vous recommandons donc une image d'arrière-plan qui ne soit pas trop distrayante ou chargée, afin que votre contenu reste visible et lisible.
- Sélectionnez l'icône de téléchargement.
- Localisez et sélectionnez votre image.
- Sélectionnez Ouvrir. L'image est appliquée à votre leçon.
Superposition des titres et du contenu
Sous Arrière-plan de la page, vous pouvez définir la couleur Superposition des titres pour modifier la couleur d'arrière-plan des pages d'introduction et des séparateurs de sections uniquement.
- Saisissez votre code hexadécimal et appuyez sur Entrée. La couleur est mise à jour au format RGBA, par exemple
RGBA 255, 255, 255, 1. - Pour conserver votre image d'arrière-plan visible sur ces pages, définissez le dernier chiffre entre parenthèses sur 0. Cela règle l'opacité de la couleur à zéro, par exemple
RGBA 255, 255, 255, 0.
Vous pouvez également définir la couleur Superposition du contenu pour qu'elle corresponde à la Couleur d'arrière-plan de la page de la même manière, avec l'opacité réglée à 100 %.
Définir vos polices
Studio propose deux options de police : une pour les En-têtes (tous les titres et sous-titres) et une pour le corps du texte (votre contenu principal). Studio inclut des polices intégrées parmi lesquelles choisir, telles que Montserrat. Vous pouvez également sélectionner la graisse de la police, par exemple normale, grasse OU italique.
Télécharger une police personnalisée
Si la police de votre marque ne figure pas dans la liste, vous pouvez la télécharger :
- Sélectionnez le menu déroulant des polices, puis sélectionnez Police personnalisée.
- Téléchargez le fichier de police Normal. Cette étape est obligatoire.
- Sélectionnez Charger la police.
Il n'est pas nécessaire de télécharger les versions grasse ou italique, car Studio les génère automatiquement.
Remarque : Nous vous déconseillons de télécharger une police pour laquelle vous ne disposez pas d'une licence commerciale. Les pages de leçon et de cours n'envoient aucune requête aux serveurs de Google pour charger les polices. Si votre organisation a besoin d'une confirmation de ce point dans le cadre d'une évaluation de la protection des données, contactez votre Customer Success Manager.
Télécharger votre logo
- Sélectionnez Thème > Logo > Télécharger le logo.
Remarque : Dans Studio, les logos sont téléchargés leçon par leçon. Ils ne sont pas associés au thème.
Une fois téléchargé, votre logo peut s'afficher de trois façons :
- Fond blanc : ajoute un fond blanc à votre logo. Cette option fonctionne uniquement si vous téléchargez votre logo au format PNG avec un fond transparent.
- Arrondi : ajoute des bords arrondis à votre logo dans l'aperçu.
- Aucun : aucun fond n'est appliqué à votre logo dans l'aperçu.
Remarque : Si vous définissez le style visuel sur Aucun, votre logo peut se superposer à votre contenu selon votre mise en page, ce qui peut rendre l'un ou l'autre difficile à lire. Nous vous recommandons d'attribuer une couleur d'arrière-plan à votre logo, ou d'utiliser l'option Fond blanc.
Vous pouvez également ajouter votre logo en tant qu'image sur la page d'accueil de votre leçon pour présenter votre cours et renforcer votre image de marque.
Appliquer un thème et définir un thème par défaut
Votre thème est maintenant terminé. Lorsque vous créez une leçon, vous pouvez sélectionner ce thème pour l'appliquer.
Pour appliquer le thème automatiquement à toutes les leçons que vous créez, définissez-le comme thème par défaut :
- Accédez à votre tableau de bord Studio et sélectionnez Paramètres.
- Dans la fenêtre contextuelle, sélectionnez Image de marque.
- Sous Thème par défaut, sélectionnez le menu déroulant et choisissez votre nouveau thème.
