Le template Accueil (splash) permet de définir une page très simple pour commencer un projet.
On peut placer une image de fond (backgroundImage), mettre une autre image en avant (front), et afficher un message d’accueil (content).
Un média sonore peut également être lu (audio).
Un clic sur l’image ou sur le texte fera passer à l’écran suivant (connection).
Lorsque vous cliquez sur l’option « gérer le contenu » de votre scène de type « splash », vous pouvez paramétrer ses différents contenus.
Onglet « Général »
Le champ « Background » vous permet de choisir une image de fond pour votre scène, parmi les médias uploadés dans la Galerie de médias.
Si vous ne définissez pas d’image, le fond sera blanc.
Astuce : Une couleur de fond peut également être définie dans le CSS personnalisé du projet.
Le champ « FRONT » vous permet de choisir une image de premier plan, parmi les médias uploadés dans la Galerie de médias.
Une petite image permettra d’afficher également un texte en dessous, grâce au champ « CONTENT ».
Une plus grande image pourra prendre toute la hauteur de la scène, et vous permettra de proposer une scène d’accueil plus graphique.
Le comportement de ces images en fonction des tailles et de la disposition des écrans peut se paramétrer grâce au « CSS personnalisé ».
Vous trouverez quelques exemples de code en bas de l’article.
Le champ « CONTENT » vous permet de rédiger un texte qui s’affichera au centre de l’écran.
Le champ « NEXT » vous permet de définir une connection pour votre scène, et de choisir vers quelle autre scène elle enverra l’utilisateur lorsque celui cliquera sur l’écran.
Onglet « AUDIO_CONTENT »
C’est ici que vous allez configurer la lecture d’un fichier audio. Si vous ne renseignez rien dans cet onglet, aucun bouton de lecture audio n’apparaitra sur la scène.
Le champ « AUDIO » vous permet de choisir un fichier audio parmi ceux que vous avez préalablement uploadées dans la Galerie de médias.
Le champ « PLAY_ICON » vous permet de choisir une icone pour lancer la lecture de votre fichier, parmi les images que vous avez préalablement uploadées dans la Galerie de médias.
Le champ « PAUSE_ICON » vous permet de choisir une icone pour stopper la lecture de votre fichier, parmi les images que vous avez préalablement uploadées dans la Galerie de médias.
Onglet « SPECIAL »
Vous pouvez ici attribuer des datas personnalisées (CUSTOM_DATA) à votre scène.
pour en savoir plus sur les CUSTOM_DATA lisez l’article personnaliser mon projet grâce au CSS
Quelques exemples de code pour personnaliser son template splash
| CIBLE | DESCRIPTION | EXEMPLE CSS |
| Tous les templates splash | Appliquer une couleur rouge et une taille 24 aux textes de toutes les scènes “splash” |
.tpl_splash { color : red; font-size : 24px; } |
| Tous les titres des templates splash |
Appliquer une couleur rouge et une taille 24 aux titres de toutes les scènes “splash” |
.tpl_splash .heading { color : red; font-size : 24px; } |
| L’image front de la scène 117 | Mettre l’image front de la scène 117 en hauteur 100% |
.scene_117 .front { height: 100%; } |
| Les images front de toutes les scène du template “splash” qui n’ont pas de texte. |
Mettre les images front des templates splash en hauteur 100 % quand il n’y a pas de texte |
.tpl_splash.has_not_content.has_front .front { height : 100%; } |
