Get started with ArcGIS Hub

Sacramento's Youth, Parks, and Community Enrichment department recently secured funding to add enhancements to William Land Park. You've been tasked with learning what the community would like to see improved so the department can make an informed decision on how to allocate funding.

To accomplish this, you've decided to create a site using ArcGIS Hub, which allows you to publish low- to no-code websites compatible with other ArcGIS apps and software. Your site will encourage users to provide feedback using an embedded survey and will also include a map of the park that shows the survey results, engaging the community in the park improvement process.

This tutorial was last tested on December 4, 2025.

View final result

Requirements

• ArcGIS organizational account with a Publisher, Facilitator, or Administrator role (see options for software access)
• ArcGIS Hub

Build a site

In ArcGIS Hub, you build a site and embed other elements such as maps, apps, and surveys into it. You'll combine several components to create an engaging website about park improvement.

Start creating a site

You'll start by creating a site that you can edit and populate. ArcGIS Hub includes drag-and-drop functionality for different website components and allows you to edit the HTML code for further customization.

1. Sign in to your ArcGIS organizational account.

   Note:

   If you don't have an organizational account, see options for software access.

2. On the ribbon, click the app launcher and choose Hub.

   

   ArcGIS Hub opens.

3. If the Welcome to workspaces window appears, click Use workspaces.

   The ArcGIS Hub workspace overview page provides access to several key workflows, such as creating and managing sites and adding content.

4. Click Create and choose Site.

   

   The Create site window appears.

5. For Title, type William Land Park Improvement Plan.

   You'll also add a subdomain, which will appear in the site's URL.

6. For Subdomain, type william-land-park-improvement.

   

   Next, you'll choose the default catalog and site layout. The catalog contains the site content and can be customized to include content items you want users to discover through the site's search bar. For this tutorial, you'll use a quick start catalog that automatically generates a basic catalog for you.

   For the layout, you'll use a simple layout that includes a few example elements you can edit to create your site.

7. For Catalog, choose Quick start catalog. For Site Layout, choose Simple.

   

8. Click Next.

   You have the option to share your site with groups on ArcGIS Online. For now, you won't share the site with any groups.

9. Click Create.

   The site is created. When you create a site item after choosing the Quick start catalog option, a group is created for you in ArcGIS Online. This group can be used to manage your site's content, but you won't need it to edit the site's layout.

10. Under the confirmation message, for your site, click Edit layout.

    

    Your site appears in editable form. Because you chose the Simple site layout, it already has some default content.

Add a title section

The audience for your site may include anyone who frequents the city's parks, which is why your goal is to share content in a clear and user-friendly way. To achieve this, you'll introduce the site using a high-contrast title and background image. First, you'll download the images you'll use to design the site.

1. Download the Images zipped folder.
2. Unzip the downloaded folder to a location you can easily remember, such as your Documents folder.

   Next, you'll upload one of the images from this folder to use as the banner at the top of your site. In ArcGIS Hub, content is organized into rows. The banner is the first row of your site.

3. In ArcGIS Hub, point to the first row (the banner with an image background). In the toolbar to the side of the banner, click the edit button.

   

   The Row side panel appears. Here, you'll configure design options specifically for this row.

4. In the Row side panel, under Background Image, click Upload. Click Browse for Image.

   

5. Browse to the unzipped Images folder. Double-click intro_image1.

   The image is uploaded as the background image for the row. You'll also change the row's transparent background color to provide a filter that complements the image.

6. For Background Color, type #6a9ab0.

   

7. For Image Transparency, type 30 percent.

   

   Next, you'll edit the title text.

8. Point to the Hero section text. On the Text toolbar, click the edit button.

   

   The text becomes editable. When editing text, you can use text formatting tools or you can insert custom HTML and CSS code. In this case, you'll do the latter.

9. At the bottom of the text editor, Click Edit in HTML.

   

   An HTML editor appears. You'll add HTML and CSS that makes the title and the banner larger to create an immediate impression on users.

10. In the HTML window, delete the existing code and paste the following code:
    <div class="banner-heading" style="text-align: center;"><span style="background-color: initial; color: currentcolor; font-size: 64px;"><strong>William Land Park Improvement Plan</strong></span></div>

11. Click Apply.

    You'll delete the other text card in the row, which provides some additional context that you don't need for this site.

12. Point to the text that starts This hero section is a row. On the Text toolbar, click the delete button.

    

13. In the Remove card from layout window, click Remove.

    The text is removed. Now, the row contains only the title of the site.

    

14. On the ribbon, click Save layout.

    

    Your changes are saved.

Define the purpose

Next, you'll add information to define the purpose of the site in the form of text with information on how the public can participate in adopting a park. The site layout you chose includes a row under the title row you can use to define the site's purpose.

1. Click the text card with the header text Section to edit it.

   

2. In the text editor, delete all existing text. Copy and paste the following text without formatting: We want your insight on how we can make William Land Park a cleaner, more beautiful space.

   Tip:

   To paste without formatting, either right-click where you want to paste and choose Paste as plain text or paste by pressing Ctrl+Shift+V.

3. Highlight the text. Click the Style button and choose Header 2.

   

4. Unselect the text. Place the cursor before the first letter in We and press Enter to add a line break before the text.
5. Place the cursor after the period and press Enter to add a line break after the text.
6. In the Customize side panel, drag an Image card to the left of the text card and drop it in the Insert Left drop zone.

   

   The Image side panel appears. You'll upload an image from the Images folder.

7. In the Image side panel, click Upload. Click Browse for Image.
8. Upload park_image2.

   The image is added to the row. You'll adjust its size so it better aligns with the text.

9. Point to the right side of the image card and click the arrow.

   

   The image is reduced in size. You'll also add alt text to the image to improve accessibility.

10. In the Image side panel, expand Options. For Image Alt Text, type People enjoying their park.

    

    Lastly, you'll remove the spacers above and below the text and image that add unnecessary empty space.

11. Point to the empty space above the text and image. On the Spacer toolbar, click the delete button.

    

12. In the Remove card from layout window, click Remove.
13. Similarly, remove the spacer card below the text and image.
14. On the ribbon, click Save layout.

Configure the header

The header appears at the top of every page in the site, making it an ideal location for branding. You'll add your organization's logo and a link with more information related to parks and open space.

1. In the Customize side panel, click Header.

   

2. In the Header side panel, turn on Logo.

   

3. For Logo, click Upload. Click Browse for Image.
4. Browse to your unzipped Images folder and upload the cpp-logo image.

   The logo is added to the top of the site, above the first row. You could also add the name of the site to the header, but because the name of the site is already in the title row, doing so would be redundant. You'll remove the name from the header entirely.

5. Turn off Name.

   

   You'll also add a link to a site with more information about open space.

6. Expand Menu. Click Add Link and choose to link.

   

   The Add Link window appears.

7. For Link Name, type What is Open Space?
8. For Link Destination, copy and paste the following URL: https://www.epa.gov/G3/green-streets-and-community-open-space
9. Click Save.

   The link you added appears on the header, next to the logo.

   

10. On the ribbon, click Save layout.

Configure the footer

Footers appear at the bottom of the site and provide space for important information, such as terms of service, calls to action, and attribution for any images on the page. First, you'll delete the template footer. Then, you'll design a simple custom footer that gives credit to any unoriginal content and indicates that this site is for instructional purposes only.

1. On the side panel, click Customize to return to the Customize side panel.
2. Click Footer.

   

3. In the Footer side panel, click None.

   

   The default footer is removed. Next, you'll create a new row to include the information you want.

4. In the Footer side panel, click Customize. Click Layout.

   

5. In the Layout side panel, drag a Row card to the bottom of the site and drop it in the Insert Below drop zone.

   

   You'll give the row a different text and background color to distinguish it from the rest of the site content.

6. In the Row side panel, for Text Color, type #ffffff. For Background Color, type #32444d.

   

   Next, you'll add text.

7. In the Row side panel, click Layout to return to the Layout side panel.
8. Drag a Text card to the empty row and drop it in the Add To Row drop zone.
9. In the text editor, copy and paste the following text without formatting:

   Acknowledgements

   This is not an official website of Sacramento and is used for demonstration purposes only.

   Sacramento Parks data was provided by Sacramento County Open Data.

   © Custom Site Template. All photos used on this site are from iStock and Esri.

10. Delete any empty line breaks between the lines of text.
11. Highlight all of the text. Click the Paragraph button and choose Align center.

    

12. Highlight Acknowledgements. Click the Style button and choose Header 1.

    The Acknowledgements section is complete.

    

13. On the ribbon, click Save layout.

Add instructions

Clearly communicating your goals and how your community can help are important to keeping the attention of your audience. Next, you'll talk about the survey and show people how their responses have impact using a web map that displays results in real time. You'll describe what people need to do to share their insight and describe how the web map will update with their responses.

1. Between the introduction and footer rows, add another Row card.

   

2. In the Row side panel, for Text Color, type #ffffff. For Background Color, type #6a9ab0.
3. Click Layout to return to the Customize side panel. Add a Text card to the empty row.
4. In the text card, type (or copy and paste) the following text: Please take the survey below to add your insight to the map. Your responses will help us to identify what and where improvements can be made.
5. Add an empty line before and after the text by placing the cursor in the appropriate locations and pressing Enter.
6. Highlight all of the text. Click the Style button and choose Header 2.

   

7. Add an Image card to the right of the text.
8. In the Image side panel, click Upload and click Browse for Image. Upload map_image4.
9. Point to the left side of the image and click the arrow to reduce the image size. Continue to reduce the image size until the height of the image is about the same height as the text paragraph.

   

10. On the ribbon, click Save layout.

Now that your site includes instructions, users will be more likely to understand its purpose and how to interact with the map and survey that you'll add next.

Gather feedback from the community

ArcGIS Hub can integrate ArcGIS content like maps and surveys that promote more user interaction than a static site. Now that you've created a site with basic information and branding, you'll add interactive elements to engage the community with the park improvement plan.

Add a survey

You'll create a new row and populate it with a preconfigured map and survey. The survey is designed to gather feedback about the park. The survey results feed directly into a web map that instantly updates to display the responses.

1. In the Image side panel, click Layout. Add a Row card between the instructions row and the acknowledgements row.
2. In the Row side panel, for Background Color, type #f5fcfc.

   You'll add a spacer card to create extra space in the row.

3. In the Row side panel, click Layout.
4. Add a Spacer card to the row.

   Next, you'll add the survey. The survey has already been created for you using ArcGIS Survey123.

   Note:

   Survey123 is a form-based data gathering platform that can be integrated with ArcGIS maps and apps. This tutorial won't cover how to create a survey. If you want to learn, try the tutorial Get started with the ArcGIS Survey123 web designer.

5. In the Spacer side panel, click Layout.
6. Under the Spacer card, add a Survey card.

   The Survey side panel appears.

7. Click Select Survey.

   

   The Select a Survey window appears. You can select surveys that you or others have created.

8. Under From, choose World (Public).
9. Search for William Land Park Improvements Feedback (Esri Tutorials). In the list of search results, select William Land Parks Improvements Feedback (Esri Tutorials).

   

10. Click Save.
11. In the Survey side panel, click Embed.

    

    The survey is now embedded into the site. Users will not have to open it in another window.

    

    You'll increase the height of the survey so users don't need to scroll to see most of the questions.

12. In the Survey side panel, under Options, for Height, type 945.
13. On the ribbon, click Save layout.

Add a web map

You'll also add a web map to the survey that has been preconfigured to display the survey submissions in real time. When users fill out the survey, a point will be added to the map with the answers they gave to the survey questions.

Note:

Like the survey, the map you'll use in this tutorial has already been created for you. To learn how to make a web map, try the tutorial Get started with ArcGIS Online.

1. In the Survey side panel, click Layout.
2. To the right of the survey, add a Map card.

   The Map side panel appears.

3. Click Select Map.

   

4. In the Select a Map window, for From, choose World (Public).
5. Search for Community Feedback for William Land Park (Esri Tutorials). In the list of results, select Community Feedback for William Land Park (Esri Tutorials).

   The map is added.

6. Click Save.
7. In the Map side panel, under Options, change Title to Community Feedback for William Land Park.
8. For Height (px), type 900.
9. Turn on Enable Map Legend.

   

   The embedded map is configured in the site. It appears beside the survey form.

   

10. In the Map side panel, click Layout.
11. Add a Spacer card below the survey and map.
12. On the ribbon, click Save layout.

Publish the site

You've finished your site. You'll publish it so others can view it.

1. On the ribbon, click Publish layout.

   

   The site is published. Currently, it's not shared, so only you are able to view it. Before you share it, you'll view it to ensure it looks correct.

2. On the ribbon, click View and choose View published.

   

   You go to the published version of the site. Viewing the site allows you to see how your site appears to your users.

3. Explore your published site. Ensure that all elements of the site appear and function correctly.
4. Optionally, if you see something wrong or need to make further edits to the site, click the Edit button.

   

5. Optionally, make any changes you want to make. Save the layout and return to viewing the published version of the site.

   Once you are satisfied with the site, you can share it so anyone can view it.

6. When viewing the published site, click the Manage site button.

   

   You return to your workspace.

7. If the Welcome to workspaces window appears, click Use workspaces.
8. On the ribbon, click Share.

   

9. For Sharing level, choose Public.

   Now, anyone with a link to your site can view it.

   Tip:

   To return to your published site, click View site.

In this tutorial, you created a site using ArcGIS Hub. You added a title, modified the header and footer, and created rows with information about the site's purpose. You also embedded a survey and web map to provide interactive elements and engage the community.

Now that you've created your first site, you can share it with the right audience. Your site can stand on its own as something you promote using social media, or it can be embedded in your organization's other sites and pages.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• The image used with the site's title was acquired from iStock.
• The Community Feedback for William Land Park web map was created by Esri.
• Banner image by Mikolaj Niemczewski and gallery card image by Swetlana Wall, accessed via Adobe Stock. All Adobe Stock images are © 2024 Adobe Stock. All rights reserved.
• World Imagery layer sources: Esri, Maxar, Earthstar Geographics, and the GIS User Community
• World Topographic Map sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community
• Colored Pencil sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community
• Outline sources: Esri, TomTom, Garmin, FAO, NOAA, USGS, OpenStreetMap contributors, and the GIS User Community