Add and manage pages

A page is a document that is the foundation for the app’s layout. It has three main elements that can contain content: the header, footer, and body.

A web experience contains at least one page and can have multiple pages. When designing your layout, decide how best to present your content to your audience. For content focused on the map, use a full-screen app page. For mixed content—such as maps, multiple images, and blocks of text that may require scrolling vertically—use a scrolling page. If you plan to include a menu in your app for users to access multiple pages, you can add folders to group app pages into a submenu and add links to other websites. You can also add and configure windows to open when the app or page loads.

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. The searchable outline shows the hierarchy of blocks, screen groups, and widgets for the selected page, including header and footer nodes if you’ve enabled them. In the outline, click an item and click the More button for a menu of operations such as rename and duplicate. Click Expand all or Collapse all to show or hide the hierarchy under that item.

To add pages to an app, click the Add page button and select the page template that suits your content and the expected flow of your app. Examples include the following:

• You want to create a mapcentric app on one full-screen page with a header.
• You want to create a multipage app with a full-screen app on the home page and a scrolling page with supporting content on another page that users can access from a menu or button.

You can use the quick navigation menu at the bottom of the builder window to select a page or window in your experience and access its settings. This menu provides a preview of the page hierarchy and window types.

When you select a widget in your app, a breadcrumb navigational aid also appears at the bottom of the builder window. The breadcrumbs show you whether the selected widget is contained in other widgets or page elements.

Multipage apps

The Page panel contains the following options for managing the pages in your app:

• Add page—Choose from two page types: full-screen app or scrolling page. Each page type includes several templates. Some templates are mapcentric and others are focused on mixed content, such as text, images, and maps. You can also choose a blank template to design your own layouts.
• Add link—Add a link to another website so users can access a related web page from the app’s menu.
• Add folder—Add a folder for pages and links to appear in a Menu widget as a drop-down menu.
• Other options—For multipage apps, select a page as the home page and optionally hide pages from the menu widgets that you add to the app. (All menus in the app will include the same pages, but you can style the menus differently.) You can rename, duplicate, and delete pages and organize them hierarchically by dragging a page onto another. As you drag the page, a line appears that shows where it will be positioned between other pages. To nest it under another page, drag the page onto the destination page until you see a box around it. You can also set the icon for a page, link, or folder.

Settings

Pages include the following configuration settings:

• Icon—Change the icon to distinguish between pages in the Pages panel. You can choose icons from the General and Arrows galleries, or add your own icon from a file. Click the Delete button to remove an unused icon from the My icons gallery.

  Note:

  You can upload the following image formats: PNG, GIF, JPG, JPEG, and BMP. To preserve optimal performance, there is a 10MB size limit for each upload.

• Label—Change the name of the page. This page label is also used in the experience's URL. 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.

  Note:

  If you change the name of a page after publishing, previously used URLs will still work.

• Open with window—Optionally, choose a window to appear in front of the page when the page opens. (You can only select fixed windows to open with a page.)
• Content width (scrolling page only)
  • Custom—Set a maximum width for the page.
  • Auto—Use the entire width of the page.
• Animation—Add animation for widgets in the body of the page. (Animation is applied to widgets in the top level of the outline.)
• Body
  • Fill—Choose a color for the page.
• Header—Display the header on the selected page. The following header settings are applied to all pages with a header enabled:
  • Height—Change the height of the header in pixels.
  • Fill—Change the color of the header.
  • Stays at the top of the page when scrolling (scrolling page only)—The header remains at the top of the page when users scroll down.
• Footer—Display the footer on the selected page. The following footer settings are applied to all pages with a footer enabled:
  • Height—Change the height of the footer in pixels.
  • Fill—Change the color of the footer.
• Layout (scrolling and grid pages only)
  • Gap—Define the gap (gutters) in pixels between the rows or grid items on the page. You can define the color of the gap for grid pages.
  • Padding—Define the padding in pixels on the four sides of the page.
• Grid items (grid pages only)—Define how users can interact with grid items at runtime.
  • Allow resize—Allow users to drag the gaps to resize grid items.
  • Allow expansion—Allow users to expand individual grid items.

Templates

The templates have preset layouts and themes that you can modify by unlocking the layout. The Lock layout button allows you to start with a template and modify it as needed. Unlocking the layout shows more options in the configuration panels and enables the Insert widget panel. When starting with a template from the Default gallery, you can click the Preview button for an example to help you choose a template that meets your needs. You can choose from most of the same templates when you add more pages to your app. (You can only choose the multipage templates when you first create the web experience.) Choose templates from the following categories:

• Mapcentric templates for common workflows, designed for standard full-screen apps. These templates come in the following categories:
  • Fixed—To configure these templates, select a map and add relevant widgets. Some examples are as follows:
    • Billboard is a simple map viewer that contains a map and a controller widget.
    • Foldable is a template with a simple, open interface that focuses on the map, featuring a heading with a controller widget.
    • JewelryBox is a template created to display features in a list combined with a map.
    • Launchpad is a template designed with the emphasis on the map and a controller widget anchored at the bottom of the page.
  • Grid—To configure these templates, which behave like full-page Grid widgets, add widgets as grid items and drag them and their borders to rearrange and resize them. The following is a list of available grid page templates:
    • Avatarboard displays multiple Card widgets with hover and flip-over effects, and you can add more details on the back, like flash cards.
    • Checkerboard is a grid page template with a map in the middle and map-related widgets around it.
    • Collage displays multiple Image widgets around a Fixed Panel widget.
    • Leaflet has Text widgets and Image widgets inside multiple Column widgets.
    • Mapflyer uses the Coordinates widget with the Map widget to display dynamic text and location information.
    • Multiverse is designed for working with multiple data sources. Its Add Data widget simplifies the process of importing data from various sources, allowing users to compare and analyze multiple sources through maps and tables.

    Grid pages, like Grid widgets, can have tabs, grid columns, and grid rows, all of which appear in the Page panel's outline. Just like any widget, you can select any grid row or grid column in the outline and click the More button for a menu of operations. Grid rows and grid columns have the Distribute space horizontally and Distribute space vertically buttons, respectively. If a row or column makes up a tab, you can rename the row or column. Individual widgets contained in a Grid widget have the Split horizontally and Split vertically buttons in the More menu.

  Note:

  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.

• Scrolling page templates organized in blocks or screen groups. A Block container is similar to a Row widget. Some examples are as follows:
  • Gallery is a template designed with prominent thumbnail images to highlight your content.
  • General provides a long scrolling template to share your content.
  • Introduction is a template with a modular layout designed to showcase your images and headlines.
  • Parallax is a template with a banner image at the top of the page followed by a screen group of scrolling panels.

• Blank templates for full-screen and scrolling pages that you build and design from scratch.
  • Blank scrolling page is a blank template to create your own design in a scrolling web page. When you add widgets to a scrolling page, they’re added to a block by default. Click the Insert block button to choose from some common block layouts, or click the Insert screen group button to choose from several screen templates.
  • Blank fullscreen is a blank template to create your own design in a full-screen app.
  • Blank grid is a blank template that behaves like a full-page Grid widget.