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 a layout, decide how best to present the 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. To include a menu in an 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 in the Outline section of the Page panel. 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 the content and the expected flow of the app. Example scenarios 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 an app, a breadcrumb navigational aid also appears at the bottom of the builder window. The breadcrumbs show 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 an 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 custom 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 a box appears 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. Choose icons from the General and Arrows galleries, or add icons from a file. Click the Delete button to remove an unused icon from the My icons gallery.

• 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.

• 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 run time.

  • Allow resize—Allow users to drag the gaps to resize grid items.

  • Allow expansion—Allow users to expand individual grid items.

  • Set a main item for small screen devices—Choose a grid item to appear first when the app is being viewed on a small-screen device. This option is only available when the small-screen app layout is set to Auto.

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, 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 an app. (You can only choose the multipage templates when you 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 Widget Controller widget.
    • Foldable is a template with an open interface that focuses on the map, featuring a heading with a controller widget.
    • JewelryBox is a template that includes a placeholder and a map.
    • Launchpad is a template with the emphasis on the map and a controller widget anchored at the bottom of the page.
    • Tab is a template with a Views Navigation widget on the left that opens different sections.

  • Grid—To configure these templates, which behave in the same way as 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 details on the back, similar to 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 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.
    • Panorama features a Map widget and two Chart widgets. Users can interact with Chart, List, and Filter widgets to interpret data from the map.

    Grid pages, like Grid widgets, can have tabs, grid columns, and grid rows, all of which appear in the Page panel's outline. As with 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 composes 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.

• 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 with prominent thumbnail images to highlight the content.
  • General provides a long scrolling template to share the content.
  • Introduction is a template with a modular layout that showcases 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 a custom 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 common block layouts, or click the Insert screen group button to choose from several screen templates.
  • Blank fullscreen is a blank template to create a custom design in a full-screen app.
  • Blank grid is a blank template that behaves in the same way as a full-page Grid widget.