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. 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. Some 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.
Tip:
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 also provides a preview of the page hierarchy and window types.
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 end 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 page only)
- Gap—Define the gap (gutters) in pixels between the rows on the page.
- Padding—Define the padding in pixels on the four sides of the page.
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. To configure these templates, select a map, add relevant widgets to the widget controller, configure the widgets, save your experience, and publish. Some examples are as follows:
- 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.
- Billboard is a simple map viewer that contains a map and a controller widget.
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:
- 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.
- Gallery is a template designed with prominent thumbnail images to highlight your content.
- Parallax is a template with a banner image at the top of the page and concludes with 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 app is a blank template to create your own design in a full-screen app.