Create a New Experience

[#1]

1. In Experience Builder, click + Create New > Blank Full Screen App and click Create.
2. At the top of the header, click “Untitled experience” and rename it to “Hello Map”.
3. On the right-hand side under Home, slide the toggle for the Header and type “68” into Height (px). Click Fill for the Header and copy “00AAFF” into the Hex.
4. In the Header of the page (where it just changed to blue), click Edit Header, in the toolbar, click the Add Widget Icon  and click Text widget > drag it to the left side of the Header.
5. Click the X to close the widgets panel.
6. Click the middle of the Header and on the right-hand side under Row 1 in the padding, type in “10” for T, “2” for R, “5” for B and “40” for L.
7. Click the text widget in the Header and on the right-hand side under the Style tab, type in “50” for the Height.
8. Click the save button in the toolbar to save your app.
9. Click the text widget in the Header, delete the default text and type “Hello Map” in the text widget. Select the Hello Map text. Click the Text format icon and to the right of the font name, click px > rem and type 1.25 for the font size. Click the A icon to change the font color and click the white background.
10. Click the X to close the text tool panel and click the body of the Canvas it will turn from gray to white.
11. Click the Add Widget icon, click Map widget > drag it to the body of the Canvas. Click the X to close the widgets panel.
12. In the Content tab for the map, Click Set data > + Add data and set the following:
    
    • Click Public, type “ExB Eat in Downtown” into search under the Web Map tab.
    • Click the thumbnail to select the web map > Done.
    • Click the “ExB Eat in Downtown San Diego” web map in the “Set data” panel to add the map.
    • Click the X to close the panel.
13. In the Tools section under the Content tab, slide the toggle to activate Zoom and Locations search widgets.
14. Hover over the positional tools  and click Full size to occupy the entire width and height of the body.
15. Click the save button to save your app.
16. Click and change the edit page tool  to see your design in medium and small screen devices. Notice to the right of the header that Auto is enabled for those two screen sizes. Experience Builder automatically adjusted your design to support multiple screen sizes. The Custom option gives you unique settings for each layout (e.g., large, medium, and small screen sizes). For instance, suppose your content and design requires you to have three separate layouts to ensure a good user experience across multiple devices, using the custom option allows you to support these requirements. 
17. Click Live View to see your designs live in the builder. Now you can either click Preview to see your app in the full browser or click Publish to deploy to ArcGIS Online.

Next Steps

• Learn how to create an app using the List and Map Widget in these two videos:
  • Building an App in Experience Builder Part 1.
  • Building an App in Experience Builder Part 2. 
• Create an app with one of our templates to see how you can use the custom option for responsive apps.