Une fenêtre vient compléter la mise en page de l’application. Pour ajouter des fenêtres à une expérience Web, accédez au volet Page, cliquez sur l’onglet Window (Fenêtre), cliquez sur le bouton Add window (Ajouter une fenêtre et sélectionnez un modèle. À la différence d’une page, une fenêtre présente uniquement un contenu de corps. Les widgets ajoutés à une fenêtre sont répertoriés dans l’onglet Window (Fenêtre), plus précisément dans la vue Outline (Contour) et dans le menu de navigation rapide (en bas de la fenêtre du générateur). Les fenêtres sont regroupées selon qu’elles sont fixes ou ancrées. Vous pouvez pointer sur une fenêtre du volet et cliquer sur Set as splash (Définir comme présentation) si la fenêtre n’est pas encore connectée pour s’ouvrir avec une page. Pour renommer ou supprimer une fenêtre, cliquez sur le bouton More Options (Autres options) correspondant et sélectionnez Rename (Renommer) ou Delete (Supprimer). Lorsque vous ajoutez une nouvelle fenêtre, son étiquette suit une règle de numérotation continue. Par exemple, dupliquer la Fenêtre 1 génère la Fenêtre 2 ou la Fenêtre 3 si la Fenêtre 2 existe déjà. Pour les fenêtres fixes (autres qu’une fenêtre de présentation), le nom de la fenêtre est également utilisé dans l’URL de l’expérience. Si vous changez le nom d’une fenêtre après la publication, les URL précédemment utilisées fonctionnent toujours.
Utilisez les options ci-après pour gérer les fenêtres de votre application :
- Vous pouvez définir les fenêtres de présentation qui s’ouvrent avec l’expérience Web dans le volet Window (Fenêtre). Pointez sur une fenêtre sous Fixed windows (Fenêtres fixes) (à l’exception de celles connectées pour s’ouvrir avec une page) et cliquez sur le bouton Set as splash (Définir comme présentation). Une expérience Web peut comporter une fenêtre de présentation.
- Pour configurer une fenêtre à ouvrir avec une page, accédez aux paramètres Page et sélectionnez une fenêtre fixe dans le menu Open with window (Ouvrir avec fenêtre). Les fenêtres définies comme fenêtres de présentation ne figurent pas parmi les options. L’icône Opens with page (S’ouvre avec une page) s’affiche en regard d’une fenêtre configurée pour s’ouvrir avec une page, dans le volet Window (Fenêtre). Pointez sur l’icône pour obtenir une info-bulle indiquant le nom de la page connectée. Les fenêtres de page apparaissent une seule fois dans l’expérience Web à moins que l’utilisateur actualise le navigateur.
- Configurez l’option Set link (Définir un lien) pour ouvrir une fenêtre à l’aide d’un paramètre de widget. Dans la fenêtre Set link (Définir un lien) d’un widget, sélectionnez Window (Fenêtre) pour Link (Lien), puis sélectionnez une fenêtre ancrée ou fixe (autre qu’une fenêtre de présentation). Les fenêtres déclenchées par des widgets apparaissent chaque fois qu’un utilisateur clique sur le widget.
Paramètres
Les fenêtres incluent les paramètres de configuration suivants :
- Mode
- Fixed (Fixe) : s’affiche à une position fixe.
- Anchored (Ancré) - Affichage en regard du widget associé.
Remarque :
Vous pouvez changer le mode d’une fenêtre dans ses paramètres. Toutefois, en raison des différents mécanismes d’activation des fenêtres fixes définies comme fenêtres de présentation ou connectées pour s’ouvrir avec une page, vous ne pouvez pas les faire passer en mode ancré (et inversement).
- Position et taille
- Position - Les fenêtres fixes comptent cinq positions d’affichage : au centre, à gauche, en haut, à droite et en bas. (Les fenêtres ancrées apparaissent en regard du widget associé, et leur position est définie automatiquement.)
- Size (Taille) : vous pouvez indiquer la largeur et la hauteur d’une fenêtre ancrée ou fixe dès lors qu’elle est positionnée au centre. Vous pouvez cliquer sur le bouton Aspect ratio (Proportions) pour conserver les proportions entre la largeur et la hauteur. Dans le cas d’une fenêtre fixe positionnée en haut ou en bas, vous pouvez indiquer uniquement la hauteur (la largeur étant définie automatiquement par rapport à la largeur de page). De même, dans le cas d’une fenêtre fixe positionnée à gauche ou à droite, vous pouvez indiquer uniquement la largeur. Vous pouvez également faire glisser le bord dans la zone d’affichage pour redimensionner la fenêtre.
Remarque :
Lorsque la fenêtre utilise une mise en page personnalisée pour les appareils avec des écrans de taille petite ou moyenne, vous pouvez personnaliser la position, la taille et la mise en page de la fenêtre. Les icônes dans les paramètres de position et de taille indiquent la taille d'écran (grande, moyenne ou petite) à laquelle la configuration s'applique.
- Options de fermeture
- Click outside to close Window (Cliquer à l’extérieur pour fermer la fenêtre) : l’utilisateur peut cliquer n’importe où en dehors d’une fenêtre pour la fermer.
- Interaction (mode fixe uniquement)
- Style : sélectionnez une mise en page pour la case à cocher et le bouton.
- Type : sélectionnez un type d’interaction pour la fenêtre.
- Confirmation : l’utilisateur doit cocher cette case pour fermer la fenêtre. Cette contrainte s’applique à toutes les méthodes de fermeture. Ce type d’interaction affiche une fois la fenêtre par défaut, sauf si vous activez l’option Always show this window (Toujours afficher cette fenêtre).
- « Do not show again » option (Option « Ne plus afficher ») : l’utilisateur coche cette case dans la fenêtre pour ne plus qu’elle s’ouvre. Il peut fermer la fenêtre, qu’il coche cette case ou non.
Conseil :
Pour afficher à nouveau la fenêtre après avoir coché la case, sauvegardez à nouveau l’expérience et prévisualisez-la, ou publiez à nouveau l’expérience et affichez l’élément publié.
- Checkbox text (Texte de la case à cocher) : saisissez le texte à afficher en regard de la case à cocher et changez la taille de la police de caractères (en pixels ou en rem).
- Button text (Texte de bouton) : saisissez le texte à afficher sur le bouton (le cas échéant) et changez la taille de la police de caractères (en pixels ou en rem).
- Vous pouvez également ajouter un widget de bouton dans la fenêtre pour la fermer. Pour relier le bouton à une page pour sa fermeture, utilisez l’option Set link (Définir un lien) disponible dans les paramètres de bouton. Si vous devez définir plusieurs pages à ouvrir avec une fenêtre, ou si des boutons situés sur des pages différentes renvoient à une même fenêtre, la définition d’un lien vers une page spécifique n’est pas vraiment pratique dans ces conditions. Vous pouvez alors définir le lien vers la page actuelle pour revenir à la page qui active la fenêtre.
Remarque :
Bien que vous puissiez définir les boutons sur une fenêtre pour la relier à une autre fenêtre de l’application, cette configuration n’est pas recommandée.
- Animation - Ajoutez une animation pour la fenêtre et son widget.
- Mask color (Couleur du masque) - Sélectionnez la couleur du masque qui remplit l’espace autour de la fenêtre. Cette option est disponible uniquement pour les fenêtres fixes.
- Background (Arrière-plan) - Sélectionnez une couleur de remplissage une ou image comme arrière-plan de la fenêtre.
- Border (Bordure) - Sélectionnez la couleur, le style et la largeur de la bordure de la fenêtre. Vous pouvez changer la taille du rayon pour modeler les coins de la fenêtre.
- Box shadow (Ombre de contour) - Ajoutez un effet ombré autour de la fenêtre.
Modèles
Les modèles prédéfinis suivants sont disponibles dans les fenêtres configurables :
- Confirm (Confirmation) est un modèle avec confirmation à la fermeture, prévu pour le contenu à vérifier ou à accepter avant de poursuivre.
- Alert (Alerte) est un modèle qui permet aux utilisateurs finaux d’accepter ou de rejeter un message.
- Simple et Vogue sont deux modèles différents conçus pour afficher ou présenter des informations.
- Novel (Originalité) est un modèle qui présente une mise en page avec un bouton de fermeture en dehors du contenu principal.
- Sidebar (Barre latérale) est un modèle positionné par défaut sur la droite, étudié pour afficher les textes assez longs par défilement vertical.
- Tooltip (Info-bulle) est un modèle pour les fenêtres ancrées qui apportent davantage d’informations sur le widget associé, comme un bouton ou une image.
- Carousel (Vidéorama) est un modèle de fenêtre plus grande pour afficher plusieurs images et du contenu dans une vue cyclique.
- Particulars (Particularités) est un modèle de fenêtre plus grande qui fournit davantage d’informations en utilisant un diagramme, une table, une liste, des images et des boutons, ainsi que des options de partage sur les réseaux sociaux.
Vous avez un commentaire à formuler concernant cette rubrique ?