Paramétrage du template “Contenu”

Le tem­plate Con­tenu (con­tent) est le plus complet.

Vous avez la pos­si­bil­ité d’afficher un bou­ton de nav­i­ga­tion dans le coin supérieur gauche et un autre dans le coin supérieur droit, et de définir vers quelles scènes ils ren­voient, le menu ou la carte par exemple.

Vous pou­vez affich­er un dia­po­ra­ma en entête qui s’affiche en plein écran lorsqu’on clique sur une image.
En plein écran, une légende s’affiche en bas de l’image.

Au cen­tre de l’écran vous pou­vez affich­er un texte et un play­er audio.

En pied de page, vous pou­vez ajouter une barre d’action avec des icones cliquables.

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.

Onglet “DIAPORAMA”

Le champ “IMAGES” vous per­met de sélec­tion­ner dans votre galerie de médias les images que vous souhaitez affich­er dans votre dia­po­ra­ma. Pour ajouter une nou­velle image, cliquez sur l’in­scrip­tion en bleu “Ajouter un élé­ment image” en haut à droite de cet onglet.

Le champ “LEGENDS” vous per­met d’at­tribuer une légende à cha­cune de vos images. Celle-ci appa­raitra en bas de votre image dans un encadré. Pour attribuer une légende à l’im­age suiv­ante, cliquez sur l’in­scrip­tion en bleu “Ajouter un élé­ment “text”” en haut à droite de cet onglet.

Astuce : les couleurs de la police et de fond de l’en­cadré peu­vent être mod­i­fiées grâce au code CSS dans le champ “CSS per­son­nal­isé du projet”.
Voir l’ex­em­ple de code CSS ci-dessous.

Le champ “PREVIOUS_ICON” vous per­met de sélec­tion­ner dans votre galerie de médias l’im­age qu’il fau­dra cli­quer pour pass­er à la diapo précédente.

Le champ “NEXT_ICON” vous per­met de sélec­tion­ner dans votre galerie de médias l’im­age qu’il fau­dra cli­quer pour pass­er à la diapo suivante.

Le champ “CLOSE_ICON” vous per­met de sélec­tion­ner dans votre galerie de médias l’im­age qu’il fau­dra cli­quer pour fer­mer le diaporama.

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­és 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 “MAIN_CONTENT”

C’est ici que vous allez pou­voir écrire le texte qui s’af­fichera au cen­tre de votre template.

Le champ “CONTENT” vous per­met d’écrire votre texte avec des per­son­nal­i­sa­tions dont vous trou­verez les réglages sur la page “Per­son­nalisez le texte dans le con­tenu des scènes”

Onglet “ACTION_BAR”

Cet onglet per­met de paramétr­er la barre d’ac­tions que vous pou­vez affich­er en bas de votre scène de type “Con­tenu”.
Il s’ag­it d’un ban­deau hor­i­zon­tal qui peut com­porter un ou plusieurs boutons.
La couleur de fond de cette barre d’ac­tions peut se paramétr­er dans l’on­glet “GENERAL” de la scène.

Si vous ne ren­seignez aucun élé­ment dans cet onglet, la barre d’ac­tions ne s’af­fichera pas sur votre scène.

Le champ “ITEMS_IMAGE” vous per­met de définir les icônes de vos bou­tons par­mi les images préal­able­ment importées dans la galerie de médias.
Pour ajouter un bou­ton, cliquez sur “Ajouter un élé­ment image”.

Le champ “ITEMS_LINK” vous per­met de définir vers quelles scène vont ren­voy­er cha­cune de vos icônes.
Pour définir les liens de nou­velles icônes, cliquez sur “Ajouter un élé­ment connection”.

Onglet “NAVIGATION”

L’on­glet “Nav­i­ga­tion” vous per­met de paramétr­er les bou­tons que vous pou­vez affich­er dans les angles supérieurs de votre scène.
MAIN_NAV indique le bou­ton de nav­i­ga­tion prin­ci­pal, c’est à dire celui qui s’af­fiche en haut à gauche de l’écran.

SECONDARY_NAV indique le bou­ton de nav­i­ga­tion sec­ondaire, c’est à dire celui qui s’af­fiche en haut à droite de l’écran.

Si vous ne ren­seignez aucune infor­ma­tion dans ces champs, les bou­tons n’ap­pa­raitront pas.

Le champ “MAIN_NAV_ICON” vous per­met de définir l’im­age de votre bou­ton de nav­i­ga­tion prin­ci­pal, que vous avez au préal­able inté­gré dans votre galerie de médias.
Le champ “MAIN_NAV_LINK” vous per­met de définir vers quelle scène ce bou­ton enver­ra l’u­til­isa­teur. Vous avez 3 pos­si­bil­ités pour définir cette connexion :
1- Vous pou­vez ain­si choisir par­mi les con­nex­ions exis­tantes, c’est à dire qui ont déjà été attribuées à cette scène.
2- Vous pou­vez créer une nou­velle con­nex­ion, en choi­sis­sant une scène par­mi toutes celles que vous avez créée dans votre projet.
3- Vous pou­vez créer une con­nex­ion de nav­i­ga­tion, c’est à dire ren­voy­er automa­tique­ment vers la pre­mière scène du pro­jet, ou vers la scène qui a été vis­itée précédem­ment par l’utilisateur.

Vous pou­vez répéter les mêmes réglages pour les champs “SECONDARY_NAV_ICON” et “SECONDARY_NAV_LINK”

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