Skip to main content
Paramétrage du template “Accueil”
Niveau 1Niveau 2

Paramétrage du template “Accueil”

By 19 septembre 2019No Comments

Le tem­plate Accueil (splash) per­met de définir une page très sim­ple pour com­mencer un projet.
On peut plac­er une image de fond (back­groundIm­age), met­tre une autre image en avant (front), et affich­er un mes­sage d’ac­cueil (con­tent).
Un média sonore peut égale­ment être lu (audio).
Un clic sur l’im­age ou sur le texte fera pass­er à l’écran suiv­ant (con­nec­tion).

Play­er audio
Image de fond
Image de pre­mier plan
Texte

Lorsque vous cliquez sur l’op­tion “gér­er le con­tenu” de votre scène de type “splash”, vous pou­vez paramétr­er ses dif­férents contenus.

Onglet “Général”

Le champ “Back­ground” vous per­met de choisir une image de fond pour votre scène, par­mi les médias upload­és dans la Galerie de médias.
Si vous ne définis­sez pas d’im­age, le fond sera blanc.
Astuce : Une couleur de fond peut égale­ment être définie dans le CSS per­son­nal­isé du projet.

Le champ “FRONT” vous per­met de choisir une image de pre­mier plan, par­mi les médias upload­és dans la Galerie de médias.
Une petite image per­me­t­tra d’af­fich­er égale­ment un texte en dessous, grâce au champ “CONTENT”.
Une plus grande image pour­ra pren­dre toute la hau­teur de la scène, et vous per­me­t­tra de pro­pos­er une scène d’ac­cueil plus graphique.

Le com­porte­ment de ces images en fonc­tion des tailles et de la dis­po­si­tion des écrans peut se paramétr­er grâce au “CSS personnalisé”.
Vous trou­verez quelques exem­ples de code en bas de l’article.

Le champ “CONTENT” vous per­met de rédi­ger un texte qui s’af­fichera au cen­tre de l’écran.

Le champ “NEXT” vous per­met de définir une con­nec­tion pour votre scène, et de choisir vers quelle autre scène elle enver­ra l’u­til­isa­teur lorsque celui cli­quera sur l’écran.

Onglet “AUDIO_CONTENT”

C’est ici que vous allez con­fig­ur­er la lec­ture d’un fichi­er audio. Si vous ne ren­seignez rien dans cet onglet, aucun bou­ton de lec­ture audio n’ap­pa­raitra sur la scène.

Le champ “AUDIO” vous per­met de choisir un fichi­er audio par­mi ceux que vous avez préal­able­ment upload­ées dans la Galerie de médias.

Le champ “PLAY_ICON” vous per­met de choisir une icone pour lancer la lec­ture de votre fichi­er, par­mi les images que vous avez préal­able­ment upload­ées dans la Galerie de médias.

Le champ “PAUSE_ICON” vous per­met de choisir une icone pour stop­per la lec­ture de votre fichi­er, par­mi les images que vous avez préal­able­ment upload­ées dans la Galerie de médias.

Onglet “SPECIAL”

Vous pou­vez ici attribuer des datas per­son­nal­isées (CUSTOM_DATA)  à votre scène.
pour en savoir plus sur les CUSTOM_DATA lisez l’ar­ti­cle per­son­nalis­er mon pro­jet grâce au CSS

Quelques exemples de code pour personnaliser son template splash

CIBLE DESCRIPTION EXEMPLE CSS
Tous les tem­plates splash Appli­quer une couleur rouge
et une taille 24 aux textes de
toutes les scènes “splash”		 .tpl_splash {
 col­or : red;
 font-size : 24px;
}
Tous les titres des templates
splash		 Appli­quer une couleur rouge
et une taille 24 aux titres de
toutes les scènes “splash”		 .tpl_splash .head­ing {
 col­or : red;
 font-size : 24px;
}
L’image front de la scène 117 Met­tre l’image front de la scène
117 en hau­teur 100%		 .scene_117 .front {
height: 100%;
}
Les images front de toutes
les scène du template
“splash” qui n’ont pas de
texte.		 Met­tre les images front des
tem­plates splash en hau­teur 100 %
quand il n’y a pas de texte		 .tpl_splash.has_not_content.has_front .front {
height : 100%;
}

Tags:

Close Menu