L’onglet Design du panneau de droite contrôle l’apparence visuelle de chaque élément. Les propriétés disponibles dépendent du type d’élément, mais la plupart des éléments partagent des options de style communes.

Skip the Design tab entirely.

Tell the AI Editor to “give the paywall a dark, premium feel” and it restyles every element at once — fills, corners, type, and spacing.

Explore the AI Editor›

Visibilité

Le bouton Visibility détermine si l’élément est affiché à l’écran.

• Show (par défaut) : L’élément est toujours visible.
• Conditional : L’élément est visible uniquement lorsque certaines conditions sont remplies. Consultez Visibilité conditionnelle pour plus d’informations.
• Hide : L’élément est toujours masqué. Utilisez cette option pour retirer temporairement un élément du flow sans le supprimer.

Remplissage

La section Fill définit l’arrière-plan d’un élément. Pour remplir tout l’écran, définissez plutôt l’arrière-plan de l’écran.

Un remplissage se compose d’une ou plusieurs couches. Chaque couche est de l’un des types suivants :

• Couleur unie : Utilisez le sélecteur de couleur ou saisissez une valeur hexadécimale. Ajustez l’opacité pour rendre l’arrière-plan semi-transparent.
• Dégradé : Deux arrêts de couleur ou plus. Faites glisser les arrêts pour ajuster la transition, et définissez l’angle avec le curseur Direction. Pour modifier un arrêt, éditez sa ligne sous Stops. Pour en ajouter un, cliquez sur la barre de dégradé ou sur à côté de Stops. Le curseur dans la ligne du calque modifie l’opacité de tous les arrêts à la fois.
• Image ou Vidéo : Une image ou vidéo en arrière-plan.

Pour gérer les couches :

• Pour ajouter une couche, cliquez sur à côté de Fill.
• Pour changer le type d’une couche, cliquez sur son échantillon et sélectionnez un type.
• Pour modifier l’ordre des couches, faites glisser leurs lignes.
• Pour supprimer une couche, cliquez sur dans sa ligne.

La couche supérieure recouvre celles du dessous, donc une couche semi-transparente au-dessus d’une image la teinte. Les champs de saisie et les sélecteurs de date/heure n’affichent que la couche inférieure.

Pour réutiliser une couche dans d’autres éléments ou lui donner une version sombre, enregistrez-la en tant que style de couleur. Pour réutiliser une image avec sa teinte, créez un style multi-couches.

Bordure

Les bordures sont désactivées par défaut. Cliquez sur à côté de Border dans le panneau de droite pour en ajouter une. Pour supprimer une bordure, cliquez sur à côté de l’en-tête Border.

Lorsqu’une bordure est présente, configurez :

• Color : Utilisez le sélecteur de couleur ou saisissez une valeur hexadécimale. Pour appliquer un style de couleur à la place, sélectionnez-le dans l’onglet Styles. Une bordure ignore les calques image et vidéo d’un style.
• Width : L’épaisseur de la bordure en pixels.

Coins

La section Corners contrôle le rayon de bordure (coins arrondis).

• Curseur de rayon : Définit le même rayon pour les quatre coins
• Bascule par coin : Activez cette option pour définir un rayon différent pour chaque coin individuellement

Effets

Cliquez sur le bouton plus à côté de Effects pour ajouter un ou plusieurs effets visuels :

• Drop shadow : Une ombre derrière l’élément
• Inner shadow : Une ombre à l’intérieur des contours de l’élément
• Layer blur : Floute l’élément et ses enfants

Vous pouvez cumuler plusieurs effets sur un même élément. Activez ou désactivez leur visibilité pour désactiver temporairement un effet.

Animation

Cliquez sur le bouton à côté de Animation pour ajouter un effet animé. Actuellement, Pulse est la seule animation disponible — l’élément grossit et rétrécit de façon rythmique pour attirer l’attention.

Configurez l’animation Pulse avec les paramètres suivants :

Paramètre	Description
Scale amount (%)	De combien l’élément grossit par rapport à sa taille d’origine
Duration (ms)	Durée d’un cycle d’animation
Delay between loops (ms)	Pause entre les répétitions
Shadow color	Couleur de l’effet d’ombre pulsante
Shadow size (px)	Taille de l’ombre pulsante

Prévisualiser l’animation

Par défaut, le builder affiche des écrans statiques — les animations restent immobiles jusqu’à ce que vous les activiez. Deux façons de procéder :

• Cliquez sur le bouton Toggle animations au-dessus de la prévisualisation de l’appareil. Il active ou désactive les animations de l’écran — une fois activées, elles tournent en continu jusqu’à ce que vous cliquiez à nouveau. Le bouton n’apparaît que si l’écran actif contient au moins une animation.
• Ouvrez le menu contextuel de l’écran (l’icône à trois points à côté du calque d’écran) et choisissez Play Animation.

Apparence

• Opacity : De 0 % (transparent) à 100 % (opaque)
• Rotation : Saisissez une valeur en degrés pour faire pivoter l’élément

Propriétés de typographie (éléments texte)

Les éléments texte affichent une section Typography avec les contrôles suivants :

Police

Cliquez sur la liste déroulante de police pour ouvrir le sélecteur de polices. Il comporte deux onglets :

• Styles : liste les styles de texte enregistrés dans votre projet. Sélectionnez un style pour appliquer d’un coup tous ses réglages typographiques.
• Fonts : liste toutes les familles de polices disponibles. Recherchez ou faites défiler pour trouver celle qu’il vous faut. Les polices intégrées peuvent s’afficher différemment selon les appareils — pour un rendu cohérent, importez une police personnalisée.

Pour enregistrer les paramètres de typographie actuels en tant que nouveau style de texte, cliquez sur à côté des onglets. L’élément utilise alors le nouveau style.

Taille et graisse

• Weight : Sélectionnez une graisse de police dans le menu déroulant
• Size : Sélectionnez une taille dans le menu déroulant ou saisissez une valeur personnalisée

Couleur

Cliquez sur l’échantillon de couleur, puis saisissez une valeur hexadécimale ou utilisez la palette. Pour appliquer un style de couleur à la place, sélectionnez-le depuis l’onglet Styles. Le texte n’affiche que les couches de couleur unie d’un style.

Alignement

Deux groupes de contrôles d’alignement :

• Horizontal : Gauche , Centre , ou Droite
• Vertical : Haut , Milieu , ou Bas

Décoration

• None : Aucune décoration (par défaut)
• Underline : Ajoute un soulignement au texte
• Strikethrough : Ajoute un texte barré

Troncature

Activez la troncature pour couper le texte qui dépasse le paramètre Max Lines. C’est utile lorsque vous prenez en charge plusieurs langues : si une chaîne traduite est plus longue que l’original, la troncature évite que la mise en page ne soit cassée.

Paramètres spécifiques aux états (éléments interactifs)

Les éléments interactifs prennent en charge plusieurs états visuels. Lorsque vous sélectionnez un tel élément, une section States apparaît dans le panneau de droite. Passez d’un état à l’autre pour configurer des propriétés visuelles différentes pour chacun.

Chaque état peut remplacer n’importe quelle propriété visuelle : remplissage, bordure, couleur de typographie, opacité, etc.

États sélectionnables

Les éléments appartenant à un groupe sélectionnable (options de quiz, produits, onglets, bascules et cases à cocher) proposent deux états par défaut :

• Default : L’apparence normale de l’élément
• Selected : L’apparence lorsque l’utilisateur a sélectionné cette option. Remplacez les propriétés telles que le remplissage, la couleur de bordure et la couleur du texte pour mettre en évidence le choix actif

Pour appliquer un style à un élément sélectionnable lorsqu’il n’est pas interactif, ajoutez manuellement un troisième état. Ouvrez States settings et ajoutez un Disabled state.

L’état Disabled est conditionnel. Sélectionnez-le et cliquez sur Set conditions pour définir quand l’élément devient désactivé à l’exécution, par exemple lorsqu’un champ obligatoire est vide.

États de saisie

Les champs de saisie proposent des états supplémentaires :

• Default : Apparence normale, sans focus
• Active : Le champ est actif et prêt à recevoir une saisie
• Invalid : La valeur saisie échoue à la validation
• Disabled : Le champ n’est pas interactif

Autres éléments avec des états

Certains éléments exposent un style propre à leurs états en dehors du modèle standard Default / Selected / Disabled :

• Étapes de l’indicateur de progression — trois états par étape : Completed, Current et Upcoming.
• Points du carrousel — deux variantes de couleur : Color pour les points inactifs et Active Color pour le point de la diapositive en cours.

Styles réutilisables

Pour garder des propriétés de texte et de couleur cohérentes dans un flow, enregistrez-les en tant que styles réutilisables. Quand vous modifiez un style, tous les éléments et écrans qui l’utilisent sont mis à jour.