> ## Knowledge Base Index
> Fetch the complete knowledge base index at: https://documentation.celestory.io/sitemap.xml
> Use this file to discover available pages before exploring further.
> Pure-Markdown content can be obtained by appending a '.md' suffix to the content URLs listed in the sitemap (without the trailing slash).

# 🗂️ Réglages de modules (design)

${youtube}[🗃️Réglages Modules](jLekCF2dDEo)

Chaque projet est décomposé en Modules, tel des Chapitres.

Chaque module partage le même **Nom et** **Modèle**, les mêmes **préréglages de Design** ainsi que les mêmes **Personnages**.

Pour changer ces éléments, allez dans Réglage du module, option disponible en dessous de chaque groupe de graphe d'un module sur la barre latérale gauche.

![](https://storage.crisp.chat/users/helpdesk/website/43b8a5292026d000/1d7692d6-2a96-4996-8551-0e3a49_u98w9g.png)

Voici de détails des onglets de la fenêtre des Réglages du module :

## Général

Dans ce menu, vous pouvez renommer et dupliquer votre module.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_1d4y678.png)

*Note : Pour supprimer un sous-graphe, vous devez d'abord sélectionner un sous-graphe puis cliquer sur la croix à droite de son nom dans le menu latéral (supprimer un graphe de départ n'est possible qu'en supprimant un module).*

![](https://storage.crisp.chat/users/helpdesk/website/b140520fd2611800/ed009397-2d52-4ade-9a9c-482d34_1tqij1s.png)

## Personnages

C'est dans ce menu que vous pouvez modifier ou créer vos personnages.
Pour ajouter un personnage, cliquez sur le bouton **Ajouter personnage**.

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_z2bs4n.png)

*Note : Il existe une bibliothèque de personnages prêts à être utilisés disponible dans l'exemple [🕺 Personnages animés] (https://creator.celestory.io/project/JhOjVBxRv)*

N'hésitez pas à renommer les personnages de façon à les retenir facilement car vous devrez les nommer dans la zone de texte des blocs **🟩 Dialogue** pour les faire apparaître.

Plusieurs options :

*Nom :* Nommez votre personnage.

*Apparition :* Changer le côté duquel apparaît votre personnage (à faire correspondre avec l'orientation de l'image de votre personnage) ou si il apparaît en fondu.

*Image :* Sélectionnez le ficher image de votre personnage dans les fichiers du projet.

*Apparence des dialogues :* Personnalisez la bordure de votre personnage pour le faire ressortir dans vos dialogues.

*Style du texte :* Personnalisez la police de votre personnage.

*Supprimer :* Supprime votre personnage (pas le fichier Image associé).

## Style de l'app

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_oajpx1.png)

**Cadre**

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_476ij5.png)

Vous pouvez cadrer votre jeu pour que celui-ci puisse s’adapter à tout type de support et résolution.

*Largeur maximale*

Cette fonction vous permet de sélectionner la largeur du cadre de votre feed. Différentes mesures vous sont proposées, comme la taille en pixel ou le pourcentage de remplissage de l'écran.

*Note : Vous pouvez choisir plusieurs unités de mesure : pixels (px), pourcentage de l'écran (%), ou d'autres unités lié au CSS.*

*Couleur de fond*

Cette fonction vous permet de choisir la couleur qui s'affiche quand le cadre dépasse du feed.

![](https://storage.crisp.chat/users/helpdesk/website/6cb2cba616287c00/2c3e4e26-44fa-4939-919c-3599e6_1kjgo14.png)

*Image de fond*

Cette fonction vous permet d'importer une image de fond qui viendra remplir *ce qui dépasse* du cadre de votre feed. Elle n'est donc pas à confondre avec le fond. 

*Url*

Le champ Url permet de mettre un lien direct vers une image plutôt que d'utiliser un fichier de projet.

**Fond**

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_1mp89se.png)

Vous avez la possibilité de modifier le fond de votre jeu : soit en utilisant une image, soit en sélectionnant une couleur de votre choix.

*Couleur*

Un colorpicker est à votre disposition pour choisir la couleur qui vous convient.

Vous pouvez aussi sélectionner l’image de votre choix pour qu'elle apparaisse en fond. 

Pour adapter le rendu, plusieurs fonctions sont à votre disposition dans le menu *Afficher les options avancées* (disponible une fois une image sélectionnée) :

*Position*

Vous pouvez modifier les axes X et Y pour rogner votre image pour quelle s’adapte parfaitement à votre contenu.

*Taille*

Comme lorsque vous changer votre fond d’écran sur votre système d’exploitation, vous pouvez adapter la taille de votre image et obtenir un rendu spécifique. Les rendus possibles sont les suivants : "automatique" (remplissage par défaut), "couvrir" (la taille de l'image est adaptée pour entrer pleinement dans le cadre, quitte à être rétrécie), "contenue" (l'image est élargie jusqu'à couvrir tout le fond), "personnalisée".

*Repeat*

Autre fonction pour adapter et optimiser l’affichage de votre image de fond. Certaines options permettent par exemple d'arrondir l'image ou d'en faire des mosaïques totales ("repeat"), horizontales ("repeat X") ou verticale ("repeat Y").

L'option *Enlever l'image* permet de retirer l'image préalablement sélectionnée.

**Flux**

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_wfac78.png)

Plusieurs fonctions vous permettent d’organiser comme vous le souhaitez le flux d’information de votre app. Attention, il ne s'agit pas du Flux de l'arborescence, mais bien du mur qui vous permet de scroller à travers les affichages du template Chatbot.

En modifiant les fonctions ci-dessous, le flux d’information (personnages, bulles de discussion, textes…) s’affichera de façon différente. 

*Largeur (en %)*

Vous permet d’ajuster la largeur du flux d’information. Par exemple si vous mettez 100%, le flux information s’étendra sur toute la largeur de votre écran.

*Hauteur (en %)*

Vous permet d’ajuster la hauteur du flux d’information. Par exemple si vous mettez 100%, le flux information s’étendra sur toute la hauteur de votre écran. A l’inverse si vous mettez 0%, aucun contenu ne s’affichera.

*Position*

Vous pouvez choisir où s’affiche votre flux d’information: en haut, en bas ou au centre.

*Couleur du fond*

Un colorpicker est accessible pour sélectionner une couleur de fond. Uniquement au niveau du flux d’information.

*Cacher l'effet de fondu*

Cette option permet de cacher l'effet visuel de fondu en haut du flux.

**ATH**

Sélectionnez l'Affichage Tête Haute (les boutons persistants en haut de l'expérience de l'app comme le bouton ⏸) à afficher. En effet, vous pouvez vouloir changer l'ATH à afficher selon les modules.

**Personnages**

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_stqvin.png)

*Cacher les images des personnages*

Cette option cachera l'image des personnages durant les dialogues.

*Style d'affichage des personnages*

Si l'option est activée, les personnages apparaîtront en grand derrière le feed, sinon ils resteront sous forme d’avatar rond (médaillon).

*Arrondir l'image des personnages*

Permet d'afficher le portrait du personnage sous la forme d'un médaillon (option activée) ou d'un cadre (option désactivée).

*Taille de l'image*

Vous pouvez configurer la taille de l'image des personnages (en pixels)

*Afficher la bordure*

L'option permet d'afficher ou non la bordure autour de l'image du personnage. Il est aussi possible de changer l'épaisseur et la couleur de la bordure.

**Bouton d'attente**

*Activer le bouton d'attente*

Décocher cette option va faire défiler automatiquement le flux d'informations.

*Texte*

Permet d'afficher le texte par dessous le bouton. Par défaut il est écrit "..." mais vous pouvez indiquer: "Taper pour continuer" par exemple.

*Style du texte*

La police d'écriture et la couleur du texte à afficher dans le bouton d'attente.

*Image de bordure*

Permet de configurer l'image qui représente le bouton d'attente.

**Délais**

*Durée de transition du bloc Alerte*

Permet de configurer le délai de transition avant de passer à un bloc **⬛ Alerte**

*Durée de transition des boites de dialogues*

Permet de configurer le délai de transition entre les boites de dialogues à l'intérieur des blocs **🟩 Dialogue**

**Autre**

*Désactiver la sélection de texte*

Cette option permet ou non à l'utilisateur de pouvoir copier votre texte et le coller ailleurs.  

## Style des blocs

![](https://storage.crisp.chat/users/helpdesk/website/d46a92e92b2b3800/image_eqtabg.png)

**Alerte**

*Prendre toute la largeur du flux*

Etant activée, cette option permet à la bulle d'alerte de ne plus plus être limitée à un contour des caractères du texte du bloc. Leur largeur sera toujours maximale.

Vous pouvez également changer le *Style* et l'_Image de Bordure_ du bloc.

**Choix**

Dans le où vous utilisez des blocs “choix” dans votre app, vous pouvez personnaliser la façon dont il s’affiche. Pour cela, plusieurs fonctions sont disponible :

*Style du texte*

Vous pouvez choisir de faire apparaître votre texte au centre, à droite ou à gauche.
* *Police* : Choisissez une typographie que vous convient.
* *Couleur* : Un colorpicker est disponible pour changer la couleur de votre texte.
* *Taille du texte* : Vous pouvez changer la taille du texte.

*Image de bordure*

Un large choix d’images de bordure (bulles de discussion) est disponible dans cette fonction. Sélectionnez en un et lancez votre app pour voir le résultat. Vous pouvez aussi créer le votre dans Menu principal/Style (à partir de fichier image que vous importerez) qui s'ajoutera directement à la liste.

*Prendre toute la largeur du flux*

Cette option vous permet de privilégier le placement des choix à l'horizontal plutôt que vertical (ils occupent le maximum d'espace disponible).

*Son de choix*

Vous pouvez choisir un son qui se jouera quand l'utilisateur valide son choix.

*Couleur de la barre du timer*

Pour changer la couleur du timer quand le temps pour répondre est limité.

*Conteneur des choix*

Ici vous pouvez configurer le comportement du placement visuel des choix, c'est à dire :
* La *direction* : verticale ou horizontale
* L' *alignement* : aligné à gauche, au centre ou à droite
* L' *alignement du texte* : aligné à gauche, au centre ou à droite

*Marges*

Vous pouvez ajuster les marges du conteneur des choix pour que les différents éléments s’affichent de façon harmonieuse.

*Afficher les choix réalisés*

Cocher cette fonction permet d'afficher le choix effectué sur le Flux d'information: on pourra donc le retrouver en remontant ce mur.

*Couleur du timer*

Vous pouvez modifier la couleur du timer apparaissant lors d'un choix chronométré.

*Style du texte désactivé & Image de bordure désactivé*

S'adresse uniquement au Choix que vous allez désactiver via le bloc 🟪 **Modifier choix**

**Dialogues**

Vous pouvez personnaliser le style de vos bulles de discussions pour les mêmes paramètres que les blocs Alerte et Dialogues : vous pouvez changer le *Style* des messages (taille, police, couleur) d ou changer leur *Image de Bordure*.

*Note : Vous pouvez également décider de changer le Style et l'Image de Bordure par personnage. Pour cela, allez dans l'onglet Personnage de la même fenêtre de Réglages de module.*

**Narrateur**

Ce menu vous permet de modifier le design textuel du bloc 🟩 **Narrateur** qui a la spécificité d'être animé.

Vous pouvez configurer l'animation lettre par lettre, le texte s'affichera alors comme si il était en train d'être écrit.

**Image**

Vous permet de modifier le style du texte que vous souhaitez afficher sur une image, via le bloc 🟩 **Image**

**Champs de saisi**

Vous permet de modifier le style des textes et boutons des blocs 🟩 **Saisi**

**Swipe**

Ce menu vous permet de configurer l'affichage des cartes Swipe si vous en utilisez (blocs 🟪 **Swipe**).
Vous pouvez choisir d'afficher un ATH qui s'affiche en même temps que les cartes dans *Menu du haut*.

*Style des choix* vous permet de changer la typographie des choix.

Dans *En tête*, vous pouvez configurer l'affichage de l'en tête des cartes de la même manière que *Pied de page* vous permet de configurer leur pied de page.

*Fond* vous permet de changer la taille et la couleur du fond qui s'affiche derrière les cartes.

Enfin, *Carte* vous permet de configurer la taille de vos cartes ainsi que l'image du dos (en fichier de projet ou lien direct).

**Notification**

Ce menu vous permet de changer l'affichage des blocs 🟩 **Notification**.

**Fond**

Il est possible de modifier le style textuel du message s'affichant en bas à droite lors d'un changement de fond (qui a lieu lorsque vous utilisez un bloc 🟧 **Fond**) : vous pouvez modifier la police, sa taille et la couleur du texte.