Create your first web experience

Step 1
1Start with a template
Step 2
2Choose a theme
Step 3
3Select source data
Step 4
4Add and connect widgets
Step 5
5Refine layouts for all devices
Step 6
6Save, preview, and publish

1. Start with a template

Open ArcGIS Experience Builder and sign in with an ArcGIS organizational account with privileges to create content. Click Create new and review the templates available on all the tabs. Point to each for a short description or click the Preview button to see if the template meets your needs. Choose from single-page and multipage templates with full-screen and scrolling page layouts. The ArcGIS Online tab lists Esri and user-created public templates in the following categories:

  • New and noteworthy
  • 3D
  • People
  • Environment
  • Tourism
  • Infrastructure
  • Data
  • Document
  • Business Analyst
Tip:

To display a template in the gallery under one of these categories, assign it as the primary content category on the template's item page.

Once you've decided which template to use, return to the Select a template window, and click Create on the respective card. You can add or remove pages as you configure the web experience.

Tip:

You can also access Experience Builder from the app launcher in your portal, Map Viewer, the item page for a map or scene, or the My Content tab on the content page. When you start with a map or scene, the app already includes a Map widget that's connected to the data.

2. Choose a theme

Configure the look and feel of the app by choosing a theme. Theme colors are applied to the header, footer, and body of each app page, including the color settings for widgets unless you change them.

3. Select source data

On the Data tab, you can select multiple 2D and 3D data sources for use by the widgets in the app. You can connect to a variety of data types, such as web maps, web scenes, hosted layers, services, and feature tables.

4. Add and connect widgets

Widgets provide functionality in an app, such as menus to access multiple pages, the ability to find a place on a map, and a button to view more details. Most page, window, block, and screen group templates have their own set of widgets, but you can change them or add more by unlocking the layout. Use the buttons on widget toolbars to align, remove, or duplicate widgets and drag new widgets onto the canvas from the Insert widget panel. As you configure content, style, and action settings for each, set links and connect widgets to data or other widgets to customize the flow of the app. To save time, you can copy and paste widgets across pages using standard keyboard shortcuts.

5. Refine layouts for all devices

Use the options on the builder toolbar to view the app at different screen resolutions and to see how the design looks on small devices. The layouts are adaptive, but you can use the custom layout mode for more control. If a widget doesn't fit in the layout on a small screen, you can find it on the Pending tab to add manually and reconfigure. Use the live view to experiment with interactive widgets and designs.

6. Save, preview, and publish

When you're satisfied with the layout and design, save and preview the app to test the end-user experience before you publish and share it with your audience. You can also generate a Web Experience Template to use as a starting point so you can create a set of apps with a consistent design. To create a copy of a web experience or template, you can duplicate the item from the gallery or save a copy from the builder if you own the item or are an administrator.

Tip:

Explore the Experience Builder blog articles for the latest news, tips, and examples to get you started.