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

Paramétrage du template “Choix”

By 20 septembre 2019janvier 7th, 2020No Comments

Le tem­plate Choix (choic­es) vous per­met de pro­pos­er plusieurs choix à l’utilisateur, de façon simple.
Vous pou­vez définir une image de fond
Les bou­tons peu­vent être des textes avec un fond de couleur, ou des images.
A vous de définir vers quelles scènes ils renvoient.
Un média sonore peut égale­ment être lu.

Play­er audio
Texte
Image de fond
Bou­tons de choix

Lorsque vous cliquez sur l’op­tion “gér­er le con­tenu” de votre scène de type “choic­es”, 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 “CONTENT” vous per­met de rédi­ger un texte qui s’af­fichera au cen­tre de 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 “CHOICES”

Vous allez ici définir les dif­férent choix que vous voulez pro­pos­er à l’utilisateur.
Chaque choix ren­voie à une nou­velle scène.

Vous avez trois pos­si­bil­ités d’af­fichage pour votre série de bou­tons. Ils peu­vent être com­posés d’un texte avec une couleur de fond, d’une image avec une couleur de fond, ou d’une image ET d’un texte avec une couleur de fond.

Le champ “ITEMS_TEXT” vous per­met de définir un ou plusieurs mots qui s’af­ficheront sur votre bouton

Le champ “ITEMS_LINK” vous per­met de définir une con­nex­ion, c’est à dire vers quelle scène ren­voie ce bouton.

Le champ “ITEMS_IMAGE” vous per­met de définir une image préal­able­ment upload­ée dans la Galerie d’im­ages. Celle-ci s’af­fichera sur votre bouton

Lorsque vous avez défi­ni tous les paramètres de votre pre­mier bou­ton, répétez l’opéra­tion pour les bou­tons suiv­ants en cli­quant sur “ajouter un élé­ment” dans chaque champ.

Pour que vos bou­tons s’af­fichent exacte­ment comme vous le souhaitez, il pour­ra être néces­saire de per­son­nalis­er cer­tains réglages dans le champ “CSS per­son­nal­isé” de la rubrique “Con­fig­ur­er le projet”.

Vous trou­verez à la fin de l’ar­ti­cle quelques exem­ples de codes qui pour­ront vous aider.

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 Choices

(code à insér­er dans le champ “CSS per­son­nal­isé” de l’on­glet “con­fig­ur­er le projet”)

CIBLE DESCRIPTION EXEMPLE CSS

Le cadre blanc des scènes relevant
du tem­plate “choic­es”

Chang­er la couleur du cadre

.tpl_choices .card {
back­ground-col­or : rgba(117, 190, 218, 1.0);
}

Le cadre blanc de la scène 111
rel­e­vant du tem­plate “choic­es”

Ren­dre le cadre transparent

.scene_111 .card {
back­ground-col­or : transparent;
}

Les bou­tons des scènes relevant
du tem­plate “choic­es”

Chang­er la couleur de fond
des bou­tons, et chang­er la
couleur du texte

.tpl_choices .items .item {
back­ground-col­or : red;
col­or : yellow;
}

Les bou­tons des scènes relevant
du tem­plate “choic­es” qui n’ont
pas de texte.

Chang­er la couleur de fond
des bou­tons quand il n’y a
pas de texte

.tpl_choices.has_not_items_text .items .item {
back­ground-col­or : green;
col­or : yellow;
}

Les bou­tons des scènes relevant
du tem­plate “choic­es” qui n’ont
pas d’image.

Chang­er la couleur de fond
des bou­tons et chang­er la
couleur du texte quand il
n’y a pas d’image. 

.tpl_choices.has_not_items_image .items .item {
back­ground-col­or : blue;
col­or : yellow;
}

Les bou­tons des scènes relevant
du tem­plate “choic­es” qui n’ont
pas de texte et qui ont des
images.

Chang­er la couleur de fond
des bou­tons quand il
n’y a pas de texte et
qu’il y a des images

.tpl_choices.has_not_items_text.has_items_image .items .item {
back­ground-col­or : pink;
}

Tags:

Close Menu