Ajouter et gérer des pages

Une page est un document qui représente la base de la mise en page de l'application. Elle comporte trois éléments principaux qui peuvent contenir l’en-tête, le pied de page et le corps.

Une expérience Web contient au moins une page, mais peut en comporter plusieurs. Lorsque vous concevez votre mise en page, déterminez la meilleure manière de présenter votre contenu à votre public. Pour un contenu axé sur la carte, utilisez une page d’application plein écran. Pour un contenu mixte, tel que des cartes, plusieurs images et des blocs de texte devant éventuellement défiler verticalement, utilisez une page déroulante. Si vous prévoyez d’inclure un menu dans votre application pour que les utilisateurs accèdent à plusieurs pages, vous pouvez ajouter des dossiers pour regrouper les pages de l’application dans un sous-menu et ajouter des liens vers d’autres sites Web. Vous pouvez également ajouter des fenêtres et les configurer de sorte qu’elles s’ouvrent lors du chargement de l’application ou de la page.

When you add widgets and block and screen group templates to a page, they’re listed in the Body node of the Page panel’s Outline section. Le contour pouvant faire l’objet de recherches indique la hiérarchie des blocs, des groupes d’écrans et des widgets de la page sélectionnée, avec notamment les nœuds d’en-tête et de pied de page, si vous les avez activés. Pour ajouter des pages à une application, cliquez sur le bouton Add page (Ajouter une page) et sélectionnez le modèle de page adapté à votre contenu et le flux attendu de votre application. Voici quelques exemples :

• Vous souhaitez créer une application centrée sur les cartes sur une page plein écran avec un en-tête.
• Vous souhaitez créer une application de plusieurs pages avec une application plein écran sur la page d’accueil et une page déroulante dont le contenu se trouve sur une autre page à laquelle les utilisateurs peuvent accéder à partir d’un menu ou d’un bouton.

Conseil :

Utilisez le menu de navigation rapide en bas de la fenêtre du générateur pour sélectionner une page ou une fenêtre de votre expérience et accéder à ses paramètres. Ce menu permet également d’afficher un aperçu de la hiérarchie des pages et des types de fenêtres.

Applications de plusieurs pages

Le panneau Page (Page) contient les options suivantes, qui permettent de gérer les pages de votre application:

• Add page (Ajouter une page) : choisissez une application plein écran ou une page déroulante comme type de page. Chaque type de page inclut plusieurs modèles. Certains d’entre eux sont centrés sur les cartes alors que d’autres sont axés sur un contenu mixte, tel que du texte, des images et des cartes. Vous pouvez également choisir un modèle vierge pour concevoir vos propres mises en page.
• Add link (Ajouter un lien) : ajoutez un lien vers un autre site Web pour que les utilisateurs finaux puissent accéder à une page Web connexe à partir du menu de l’application.
• Add folder (Ajouter un dossier) : ajoutez un dossier pour que les pages et les liens apparaissent dans un Widget de menu comme menu déroulant.
• Autres options : dans le cas d’applications de plusieurs pages, sélectionnez une page comme page d’accueil et masquez, si vous le souhaitez, des pages dans les widgets de menu que vous ajoutez à l’application. (Tous les menus de l’application comportent les mêmes pages, mais vous pouvez leur appliquer des styles différents.) Vous pouvez renommer, dupliquer et supprimer des pages, et les organiser de manière hiérarchique en faisant glisser une page vers une autre. Lorsque vous faites glisser la page, une ligne apparaît pour indiquer son emplacement entre les autres pages. Pour imbriquer la page sous une autre page, faites-la glisser sur la page de destination jusqu’à ce qu’elle soit encadrée. Vous pouvez également définir l’icône pour une page, un lien ou un dossier.

Paramètres

Les pages incluent les paramètres de configuration suivants :

• Icon (Icône) : modifiez l’icône pour distinguer les pages dans le panneau Pages (Pages). Vous pouvez sélectionner des icônes dans les bibliothèques General (Général) et Arrows (Flèches) ou ajouter votre propre icône à partir d’un fichier. Click the Delete button to remove an unused icon from the My icons gallery.

  Remarque :

  Vous pouvez télécharger les formats d’image suivants : PNG, GIF, JPG, JPEG et BMP. Pour préserver une performance optimale, une limite de taille à 10 Mo est appliquée.

• Label (Étiquette) : modifiez le nom de la page. L’étiquette de cette page est également utilisée dans l’URL de l’expérience. When you add a page, its label follows a continued numbering rule. For example, duplicating Page 1 produces Page 2, or Page 3 if Page 2 already exists.

  Remarque :

  Si vous changez le nom d’une page après la publication, les URL précédemment utilisées fonctionnent toujours.

• Open with window (Ouvrir avec fenêtre) : vous pouvez également opter pour l’affichage d’une fenêtre devant la page lors de l’ouverture de celle-ci. (Seules les fenêtres fixes peuvent s’ouvrir avec une page.)
• Content width (Largeur du contenu) (page déroulante uniquement)
  • Custom (Personnalisé) : définissez une largeur maximale pour la page.
  • Auto (Auto) : utilisez toute la largeur de la page.
• Animation : ajoutez une animation pour les widgets dans le corps de la page. (Animation is applied to widgets in the top level of the outline.)
• Corps
  • Fill (Remplissage) : choisissez une couleur pour la page.
• Header (En-tête) : affichez l’en-tête sur la page sélectionnée. Les paramètres d'en-tête suivants sont appliqués à toutes les pages pour lesquelles un en-tête est activé :
  • Height (Hauteur) : modifiez la hauteur de l’en-tête en pixels.
  • Fill (Remplissage) : modifiez la couleur de l’en-tête.
  • Stays at the top of the page when scrolling (Reste en début de page quand) (page déroulante uniquement) : l’en-tête reste au début de la page quand les utilisateurs la font défiler.
• Footer (Pied de page) : affichez le pied de page sur la page sélectionnée. Les paramètres de pied de page suivants sont appliqués à toutes les pages pour lesquelles un pied de page est activé :
  • Height (Hauteur) : modifiez la hauteur du pied de page en pixels.
  • Fill (Remplissage) : modifiez la couleur du pied de page.
• Layout (Mise en page) (page déroulante uniquement)
  • Gap (Écart) : définissez l’écart (gouttières) en pixels entre les lignes de la page.
  • Padding (Remplissage) : définissez le remplissage en pixels sur les quatre côtés de la page.

Modèles

Les modèles possèdent des mises en page et thèmes prédéfinis que vous pouvez modifier en déverrouillant la mise en page. Le bouton Lock layout (Verrouiller la mise en page) permet de démarrer avec un modèle et de le modifier si nécessaire. Le déverrouillage de la mise en page révèle davantage d’options dans les panneaux de configuration et active le panneau Insert widget (Insérer un widget). Lorsque vous démarrez avec un modèle de la bibliothèque Default (Par défaut), vous pouvez cliquer sur le bouton Preview (Aperçu) pour afficher un exemple qui vous permettra de choisir un modèle en fonction de vos besoins. Vous pouvez choisir quasiment les mêmes modèles lorsque vous ajoutez davantage de pages à votre application. (Vous pouvez uniquement sélectionner les modèles à plusieurs pages lors de la création initiale de l’expérience Web.) Choisissez des modèles parmi les catégories suivantes :

• Modèles centrés sur les cartes des processus courants, conçus pour les applications standard plein écran. Pour configurer ces modèles, sélectionnez une carte, ajoutez les widgets appropriés au contrôleur de widgets, configurez les widgets, enregistrez votre expérience et publiez. Voici quelques exemples :
  • Le modèle Foldable (Pliable) est un modèle possédant une interface ouverte et simple axée sur la carte, avec un en-tête et un widget de contrôleur.
  • Le modèle JewelryBox (Boîte à bijoux) est un modèle créé pour afficher les entités dans une liste combinée à une carte.
  • Le modèle Launchpad (Launchpad) est un modèle conçu en mettant l’accent sur la carte, avec un widget de contrôleur ancré en bas de la page.
  • Le modèle Billboard (Billboard) est une visionneuse de carte simple contenant une carte et un widget de contrôleur.

  Remarque :

  The header bar in some of the full-screen app templates is created with a Fixed Panel widget instead of using the Header setting from the page. This allows you to enable and configure the Header setting for other pages if you create a multipage app. The header and footer content, layout, and settings are used by all the pages in the app for which you enable the Header or Footer settings.

• Modèles de page déroulante dans des blocs ou des groupes d’écrans. A Block container is similar to a Row widget. Voici quelques exemples :
  • Le modèle General (Général) est un long modèle déroulant permettant de partager votre contenu.
  • Le modèle Introduction (Introduction) est un modèle possédant une mise en page modulaire, conçu pour mettre en avant vos images et titres.
  • Le modèle Gallery (Bibliothèque) est un modèle conçu avec des images en miniature proéminentes pour mettre en évidence votre contenu.
  • Le modèle Parallax (Parallaxe) est un modèle doté d’une image de bannière en haut de la page et qui se termine par un groupe d’écrans composés de panneaux déroulants.

• Blank templates for full-screen and scrolling pages that you build and design from scratch.
  • Le modèle Blank scrolling page (Page déroulante vierge) est un modèle vierge permettant de créer votre propre conception dans une page Web déroulante. When you add widgets to a scrolling page, they’re added to a block by default. Cliquez sur le bouton Insert block (Insérer un bloc) pour sélectionner des mises en page de bloc courantes, ou cliquez sur Insert screen group (Insérer un groupe d’écrans) pour effectuer votre choix parmi plusieurs modèles d’écran.
  • Le modèle Blank fullscreen app (Application plein écran vierge) est un modèle vierge permettant de créer votre propre conception dans une application plein écran.