Astuce Storyline 360 :
personnaliser l'arrière-plan de vos modules publiés

Vous utilisez Storyline 360 pour créer vos modules e-learning ? Lorsque le module est publié et consulté dans un navigateur, la fenêtre est rarement aux mêmes proportions que les écrans du module. Résultat : des bandes apparaissent autour du contenu, avec un arrière-plan HTML noir ou blanc par défaut. C'est fonctionnel, mais c'est une occasion manquée de prolonger votre univers graphique.

Pourquoi modifier l'arrière-plan ?

En ajoutant une couleur ou une image de fond, vous pouvez :

• Renforcer l'identité visuelle du module, en reprenant les couleurs, les motifs ou les textures de votre charte
• Rendre l'expérience plus immersive : le décor ne s'arrête plus aux bords de l'écran du module
• Soigner la première impression de vos apprenant·es, dès l'ouverture du module

Comment faire, en quelques lignes de code

La manipulation se fait après la publication du module, directement dans les fichiers générés par Storyline :

1. Ouvrez le fichier story.html situé à la racine du dossier de publication, avec Notepad++ ou un éditeur de code similaire.
2. Repérez les lignes de style ci-dessous.
3. Remplacez-les par le code qui intègre votre fond personnalisé, puis enregistrez le fichier.

html, body { height: 100%; padding: 0; margin: 0 }
#app { height: 100%; width: 100%; }

html, body { height: 100%; padding: 0; margin: 0 }
#app { height: 100%; width: 100%; }
#frame {
  background-image: url(fondimage.jpg);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

Important : personnaliser l'image

Le fichier fondimage.jpg du code ci-dessus est un exemple. Pour que votre fond s'affiche, il faut :

• Remplacer « fondimage.jpg » par le nom et l'extension exacts de votre fichier (par exemple monfond.png ou background.webp)
• Placer votre image dans le même dossier que le fichier story.html, à la racine du dossier de publication

Nos conseils avant de vous lancer

• Gardez une copie du fichier story.html d'origine avant de le modifier
• Choisissez une image légère et suffisamment grande pour les écrans larges : elle doit rester discrète et ne pas concurrencer le contenu du module
• Refaites la modification après chaque nouvelle publication : Storyline régénère le fichier à chaque export
• Testez le rendu sur plusieurs navigateurs et tailles d'écran, et dans votre LMS si le module y est déposé

Tester les limites de l'outil

Chez Les Façonautes, nous utilisons Storyline 360 pour développer des expériences e-learning engageantes et sur mesure. Et pour cela, nous n'hésitons pas à explorer les limites de l'outil, jusque dans les fichiers de publication. Un grand merci à Louis Renaudineau, de Linuit, pour sa précieuse aide technique sur cette astuce.

Et vous, avez-vous d'autres astuces pour optimiser vos modules e-learning ? Partagez-les avec nous : l'équipage adore apprendre de nouvelles manœuvres.

Vos questions