ArcGIS Experience Builder

Get started with ArcGIS Experience Builder - Gallery template

Under construction…

Apologies, this blog article is being updated.

Please check back soon, this resource will be even better once we finish.

ArcGIS Experience Builder enables you to deliver responsive web experiences without writing any code. You can create apps and/or pages that contain 2D and 3D maps, text, and media. Experiences can focus on one type of content or can combine and link many types of content to create a complete experience and destination for your audience.

To create an experience, drag, position, and configure widgets such as maps, images, text, and tools. You can add triggers and actions to make widgets work together, within a single app and across multiple pages. Start an experience using an existing template or create one from scratch. You can also save your work as a new reusable template. ArcGIS Experience Builder is built into ArcGIS Online, so you can leverage all of your existing content.

For more information on the basics see:


This tutorial

This tutorial explains how to get started with Experience Builder by building a simple, pagecentric experience. You can view the completed example that you will build in the following steps.


Create a pagecentric experience

Experience Builder enables you to build a variety of apps. Follow these steps to create a simple pagecentric experience using the Gallery template.

Step 1 – Sign in.

Go to and sign in to your ArcGIS account, or sign in and launch Experience Builder from the app launcher.

App launcher

After signing in, you will see a gallery where you will find experiences that you have created, have been shared with you, or are publicly available.

Step 2 – Click Create New

Create new experience

This step advances you to the template gallery, where you can choose from available templates and begin creating a new experience.

Step 3 – Choose a template.

The template gallery contains a variety of default templates, as well as templates that have been shared. To get more information about any template, hover over the thumbnail.

Template hover text

You can also Preview the template.

Preview template

In this tutorial we will use the Gallery template. Locate the template, and click Create to begin.

Create from template

Gallery is a basic template for a pagecentric experience. It includes an image at the top of the page and prominent thumbnails to highlight content. If you can’t see the entire template, fit the app to the the current window.

Fit to current window

In the panel on the left you will see the outline of the current page. Click the arrows to expand the view to show all the widgets in the template. Click any widget, or select it in the outline, to view it’s current settings and make changes in the settings panel on the right.

Gallery template

The header bar at the top of Experience Builder has additional tools that will be used to create the experience.

Lock layout prevents accidentally moving and removing some widgets. Live view lets you work with the app using its current settings. Additional tools let you preview the app on different size devices, undo/redo changes, save, and publish. Don’t forget to save your work from time to time.

Follow these steps to create your experience.


Configure the page

A page is a document that is the foundation for the app’s layout. For this example, the page should fill the entire width of the browser.

Step 1 – Select the page from the side panel.

Select page

Step 2 – Make a custom size page.

Note that in the page settings panel the default is Auto. This ensures that the page will fill the browser. However for this example, we will choose Custom and design a page around a width of 1280.

In Content width click Custom and set the Max width to 1280 pixels.

Page settings


Configure the Image widget

Follow these steps to edit settings for the image widget located at top of the page.

Step 1 – Select the Image widget at the top of the page. You can click the widget to select it, or select it from the outline panel on the left.

Step 2 – Add the image using a URL.

(a) – In the settings panel click Select an image

(b) – Select URL

(c) – Paste the following into the URL input:

Image widget settings

Step 3 – Set the image position to Fit.

Fit image


Change the title and subtitle

Step 3 – Double click the title and subtitle (which are text widgets) to enter enter new text.

Step 4 – Select the text to display the edit toolbar to make changes. Make changes as desired, such as color and typography.

Edit toolbar

You can also change the current settings in the settings panel.

Text format

After making edits to the title and subtitle, your app should look something like this, depending on the text and settings you chose.


Experience Builder


Gallery rows

The Gallery template includes several rows with image and text widgets. You can think of these as “cards” which can be used to highlight your content. In the steps below you will edit the settings for one of the cards, and can apply those steps to other cards.

Step 5 – Select the image widget in the first card.

You can click the widget to select it, or select it from the outline panel on the left.

Step 6 – Add an image using a URL.

(a) – In the settings panel click Select an image

(b) – Select URL

(c) – Paste the following into the URL input:


Image widget settings

Step 7 – Add a link to the image widget to open an app. This will open the app when the image in the card is clicked.

(a) – Click Set link.

(b) – Select Web address from the dropdown.

(c) – Enter the app URL. Use the following URL:

(d) – Choose to open the app in a New window.

(e) – When finished, click OK.

Image widget settings

Step 8 – Edit the card title text.

Double click to edit the card title text widget and enter “World Imagery Wayback.”

Step 9 – Edit the card summary text.

Double click to edit the card summary text widget and enter “Wayback is a digital archive providing access to the different versions of World Imagery created over time.”

The completed card should look like the following:


Completed card

Step 10 – Complete the remaining two cards in the row by repeating Step 5 through Step 9. The following can be used for the cards:


Second card:


App link:

Title: Sea Ice Aware

Description: This app displays the monthly mean sea ice extent for the Arctic and Antarctic along with the historical median extent.


Third card:


App link:

Title: USGS Historical Topo Explorer

Description: The USGS Historical Topographic Map Explorer delivers access to 177,000 topographic maps dating from 1882 to 2006.


After completing the above, the experience should look similar to the screen capture below:

Experience Builder

Step 11 – Complete your experience.

You can complete your experience by editing the settings for the rest of the widgets in the template. Click a widget, or select it from the outline, to display its settings and make changes.

The majority of the remaining widgets are the same as those described above. The rest are straightforward enough that what you have learned above can be easily applied to the rest of the template.

You can streamline the experience by removing entire rows. Select the row from the outline, then move your mouse to the top center of the row to display the edit toolbar where you can click Delete.


Delete row


More information

For more information see

This article was originally published on February 19, 2020, and has been updated.

About the author

Corporate technology evangelist and advocate at Esri, focusing on ways to broaden access to geographic information and helping customers succeed with the ArcGIS system. On a good day I'm making a map, on a great day I'm on one. Email or connect on LinkedIn (


Next Article

One-way feature service-to-feature service sync

Read this article