Le template Choix (choices) vous permet de proposer plusieurs choix à l’utilisateur, de façon simple.
Vous pouvez définir une image de fond
Les boutons peuvent ê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 également être lu.
Lorsque vous cliquez sur l’option « gérer le contenu » de votre scène de type « choices », 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 « CONTENT » vous permet de rédiger un texte qui s’affichera au centre de 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 « CHOICES »
Vous allez ici définir les différent choix que vous voulez proposer à l’utilisateur.
Chaque choix renvoie à une nouvelle scène.
Vous avez trois possibilités d’affichage pour votre série de boutons. Ils peuvent être composé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 permet de définir un ou plusieurs mots qui s’afficheront sur votre bouton
Le champ « ITEMS_LINK » vous permet de définir une connexion, c’est à dire vers quelle scène renvoie ce bouton.
Le champ « ITEMS_IMAGE » vous permet de définir une image préalablement uploadée dans la Galerie d’images. Celle-ci s’affichera sur votre bouton
Lorsque vous avez défini tous les paramètres de votre premier bouton, répétez l’opération pour les boutons suivants en cliquant sur « ajouter un élément » dans chaque champ.
Pour que vos boutons s’affichent exactement comme vous le souhaitez, il pourra être nécessaire de personnaliser certains réglages dans le champ « CSS personnalisé » de la rubrique « Configurer le projet ».
Vous trouverez à la fin de l’article quelques exemples de codes qui pourront vous aider.
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 Choices
(code à insérer dans le champ « CSS personnalisé » de l’onglet « configurer le projet »)
| CIBLE | DESCRIPTION | EXEMPLE CSS |
|
Le cadre blanc des scènes relevant |
Changer la couleur du cadre |
.tpl_choices .card { |
|
Le cadre blanc de la scène 111 |
Rendre le cadre transparent |
.scene_111 .card { |
|
Les boutons des scènes relevant |
Changer la couleur de fond |
.tpl_choices .items .item { |
|
Les boutons des scènes relevant |
Changer la couleur de fond |
.tpl_choices.has_not_items_text .items .item { |
|
Les boutons des scènes relevant |
Changer la couleur de fond |
.tpl_choices.has_not_items_image .items .item { |
|
Les boutons des scènes relevant |
Changer la couleur de fond |
.tpl_choices.has_not_items_text.has_items_image .items .item { |
