pop-up

Affichez une fenêtre au-dessus de l'écran en cours pour donner des informations contextuelles. Vous pouvez régler la taille, le niveau de flou et la couleur de la 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 :

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

pop-up-1.gif

 

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 !

Cet article vous a-t-il été utile ?
Utilisateurs qui ont trouvé cela utile : 0 sur 0

Créez votre contenu interactif dès aujourd'hui

Simple d'utilisation ∗ Gratuit ∗ Pas d'installation

COMMENCEZ MAINTENANT !