Pop-up (fenêtre)

Une pop-up est une fenêtre qui s'affiche au-dessus de l'écran en cours, elle contient des informations contextuelles. Réglez la taille, le niveau de flou et la couleur de la pop-up depuis le composant Pop-up

Cette pop-up est composée d'états et elle peut inclure n’importe quel type d’objet (texte, image, composants).

Principales utilisations

Voici les principales utilisations de la pop-up :

  • Formulaire d'inscription
  • Message d'accueil
  • Message d'erreur
  • Menu

Insérer une pop-up 

Cliquez sur  Composants et insérez la Pop-up. Double-cliquez sur la zone visible ou cliquez sur EDITER LA POP-UP pour ajouter du contenu.

Choisissez parmi les propriétés suivantes :

propriétées pop-up

  • Editer la fenêtre : votre pop-up est composée d'états. En cliquant sur ce bouton, vous pouvez créer et gérer les différents états (accessible également au double-clic sur le composant). Dans la fenêtre de gauche, cliquez sur + AJOUTER ETAT et choisissez entre des états basés les uns sur les autres (Nouvel état basé sur) ou entre des états indépendants (Nouvel état vierge). Vous n'êtes pas au clair sur la notion d'état ? Lisez Comprendre les états.

Pour ajouter des états, cliquez sur + AJOUTER ETAT dans la fenêtre de gauche.

  • Interaction utilisateur : cette option permet à l’utilisateur de bénéficier des fonctionnalités du composant (ici, de déclencher la pop-up). Par défaut, cette option est toujours cochée. En décochant cette option, l’utilisateur ne pourra plus accéder automatiquement à la pop-up en touchant la zone transparente.
  • Arrière-plan : choisissez une couleur d’arrière plan.
  • Options : pour paramétrer le  flou d'arrière-plan et la taille de son rayon.
  • Etat par défaut : sélectionnez l’état qui sera affiché au chargement de la pop-up. Si vous ne définissez rien et que vous retournez sur cette pop-up, votre pop-up conservera le dernier état affiché

 Note : la pop-up se gère en plein écran : il n’est pas possible de gérer qu’une partie de l’écran.

 

Interagir avec la pop-up

Déclencher une action

Votre pop-up peut déclencher une action. Sélectionnez votre composant et ouvrez la fenêtre  Interactivités. Cliquez sur + AJOUTER ACTION pour accéder à la liste des déclencheurs standards :

  • Simple tap
  • Double tap
  • Touche
  • Relâche
  • Glisse vers le haut/bas/droite/gauche
  • Survol entrant/sortant

Et des déclencheurs spécifiques :

  • Ouverture
  • Fermeture
  • Affichage de l'état

Par défaut, la zone transparente déclenche l’action d’ouverture de la fenêtre : nul besoin d’y associer une interactivité ! De même la pop-up se referme automatiquement lorsque l’utilisateur touche l’écran.

 Astuce : au vu de nos retours en termes d’expérience utilisateur, nous vous conseillons de prévoir une croix en haut à droite qui signale la fermeture de la pop-up.

Synchroniser une pop-up

Vous pouvez synchroniser votre pop-up avec un autre composant (Minuteur, Audio...) et choisir de synchroniser :

  • Etats

Ces paramètres sont accessibles depuis la fenêtre  Propriétés du composant Synchronisation.

Hop, pop, pop, à vous de jouer !

Vous avez encore besoin d'aide ? Contactez-nous Contactez-nous