Get started with ArcGIS Hub Premium

Sacramento's Youth, Parks, and Community Enrichment department recently secured grant funding to add enhancements to William Land Park. As the department's community outreach coordinator, you've been tasked with learning what the community would like to see improved so that your team can make an informed decision on how to allocate funding. You've decided to start a site using ArcGIS Hub Premium so that you can create a mobile-first and accessible website for generating feedback from the public.

This tutorial was last tested March 10, 2025.

View final result

Requirements

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

Build a site

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

Create an 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.

   

   The ArcGIS Hub home page provides access to several key workflows: creating and managing sites, adding content, and accessing the linked community organization to manage community accounts and content. You can return to the overview at any time by clicking the Edit Navigation bar and choosing Overview.

3. Under Sites, click New.

   

4. For Give your site a name, type William Land Park Improvement Plan.
5. Click Create Site.

   When you create a site item, three groups are created for you in ArcGIS Online. These groups can be used to manage your sites's content (Content group), team members (Core Team group), and the people who sign up to receive updates about the site (Followers group). The site is automatically shared to the Core Team group so that members of your team can update the site.

   After your site is created, a Get Started window may appear with information about ArcGIS Hub.

6. If necessary, close the Get Started window.

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 and your site's title). In the toolbar that appears 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.

   

   Note:

   By default, the background for this row has an image transparency of 30 percent. You can change this value with the Image Transparency parameter at the bottom of the Row side panel.

   Next, you'll edit the title text.

7. Point to the title text in the banner row. Above the text, on the Text toolbar, click the edit button.

   

   The text becomes editable.

8. Delete all of the text.

   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 row, Click the Edit in HTML button.

   

   An HTML editor appears. You'll add HTML and CSS that makes the title and the banner larger, so that it creates an immediate impression on users.

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

11. Click Apply. Above the text, on the Text toolbar, click the edit button to save your edits.

    New sites display several examples of how to configure the page layout. Because you'll be building a customized site, you'll delete all template information that won't be used. In this case, you'll delete 10 rows of content between the title row and the contact row.

12. Scroll down and point to the Our Progress So Far row. On the toolbar next to the row, click the delete button.

    

    A window appears, asking you to confirm that you want to delete the row.

13. In the Remove row from layout window, click Remove.
14. Delete the following rows:
    • Create your own initiative by combining existing applications with a custom site
    • Get Involved with the Community Today!
    • Our Focus
    • Don't just tell the story, show the story
    • See Our City in Action
    • List of upcoming events
    • Sign Up and Follow this site
15. On the ribbon, click Save.

    

    Your changes are saved.

Define the site's purpose

Next, you'll add information to define the purpose of the site in the form of explanatory text and additional images. You'll create a new row and then add and edit a text card with information on how the public can participate in adopting a park.

1. If necessary, in the side panel, click Customize.

   

2. In the Customize side panel, click Layout.

   

3. In the Layout side panel, drag a Row card under the title row and drop it in the Insert below drop zone.

   

   An empty row is created. You'll drag a text card into the row.

4. In the Row side panel, click Layout.

   

   You return to the Customize panel.

5. Drag a Text card into the empty row and drop it in the Add to Row drop zone.

   

   A text editor appears.

6. In the text editor, copy and paste the following text: We want your insight on how we can make William Land Park a cleaner, more beautiful space.
7. Highlight the text. Click the Style button and choose Header 2.

   

8. Unselect all of the text.
9. Press Enter one space before and after the sentence.
10. 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 one of the images from the Images folder.

11. In the Image side panel, click Upload and click Browse for Image. Upload park_image2.

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

12. Point to the right 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.

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

    

14. On the ribbon, click Save.

Configure branding and global navigation

You'll add your organization's logo and brand the site with a park-related theme to reflect the aesthetic of the park. Then, you'll configure the global navigation bar at the top of your site. This bar allows ArcGIS Hub Community users to sign in, manage their user profile and notifications, and navigate to other parts of ArcGIS Hub. The global navigation capability is automatically enabled for all new sites.

Note:

For more information, see Configure global navigation and menu links.

1. In the Image side panel, click Layout and click Customize.

   You return to the Customize side panel.

2. In the Customize side panel, click Header.

   

3. In the Header side panel, turn off Name.

   

4. For Logo, click Upload and click Browse for Image. 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. Next, you'll add a preconfigured survey that will allow users to give feedback about the condition of the parks and choose if they want to assist with park management.

5. Expand Menu. Click Add Link and choose to existing content.

   

6. In the Add Content window, under From, click World (Public). Under Collection, click Feedback.

   

7. In the search bar, type Adopt a Park Form (Esri Tutorials) and press Enter.
8. In the list of results, check the box for Adopt a Park Form (Esri Tutorials).

   

9. Click Save.

   The survey is added to the side panel.

10. In the side panel, for Adopt a Park Form (Esri Tutorials), point to the settings button and choose Edit.

    

    The Edit Link window appears.

11. For Link Name, delete the Esri Tutorials text, so that the link name is only Adopt a Park Form. Click Save.

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

12. In the side panel, click Add Link and choose to link.
13. For Link Name, type What is Open Space? For Link Destination, copy and paste the following URL: https://www.epa.gov/G3/green-streets-and-community-open-space
14. Click Save.

    Both of the links you added appear on the header above the first row, next to the logo.

    

15. On the ribbon, click Save.

Add attribution to the footer

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

1. Scroll to the bottom of the site.
2. On the side panel, click Customize to return to the Customize side panel. Click Footer.

   

   The Footer side panel appears.

3. In the side panel, click None.

   

   The default footer is removed. Next, you'll edit the Contact row to include acknowledgements.

4. Point to the Contact row. In the toolbar to the side of the row, click the edit button.

   

5. In the Row side panel, for Background Color, type #32444d.
6. In the Contact row, click the text to edit it. Delete the existing text, including the Call To Action button, and type Acknowledgements.

   Tip:

   To paste text without formatting, press Ctrl+Shift+V when pasting.

7. Press Enter. Copy and paste the following text:

   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 Unsplash and Esri.

8. Delete any line breaks between each line of text.
9. Highlight all of the text. Click the Paragraph button and choose Align center.

   

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

    The Acknowledgements section is complete.

    

11. On the ribbon, click Save.

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.

   

   The Row side panel appears.

2. 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 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. Press Enter to add a line before and after the text.
6. Highlight all text. Click the Style button and choose Header 2.

   

7. Add an Image card to the right of the text.

   The Image side panel appears.

8. Click Upload and click Browse for Image. Upload map_image4.
9. Reduce the size of the image card so that the height of the image is about the same height as the text paragraph.

   

10. On the ribbon, click Save.

Now that your site includes instructions, users will be more likely to understand the purpose and how to interact with the map and survey.

Gather feedback from the community

Next, you'll create a new row and populate it with a preconfigured map and survey. The survey is designed to gather information about users who want to volunteer or give feedback about the park. The survey results feed directly into a web map that instantly updates to display the responses.

Add a survey

The survey questions ask users what is happening and where it is happening.

1. Use what you have learned to add a Row card below the instructions row.
2. In the Row side panel, for Background Color, type #f5fcfc.

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

3. In the Row side panel, click Layout.
4. Add a Spacer card to the row.
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 in your organization have created.

8. Under From, choose World (Public).
9. Search for William Land Parks Improvements Feedback (Esri Tutorials). In the list of search results, click the button to 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 and users will not have to open it in another window.

    

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

Add a feedback web map

You'll add a web map next to the survey that has been preconfigured to display the survey submissions in real time.

1. In the Survey side panel, click Layout.
2. To the right of the Survey card, 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). Search for and select Community Feedback for William Land Park (Esri Tutorials).
5. Click Save.
6. In the Map side panel, under Options, change Title to Community Feedback for William Land Park.
7. For Height (px), type 900.
8. Turn on Enable Map Legend.

   

   The embedded map is configured in the site.

   

9. Below the Survey and Map cards, add a Spacer card.
10. On the ribbon, click Save.

Create a call to action

A call to action at the end of your site prompts members of the public to sign up for a community account to receive emails related to your work. Community members who follow a call to action are added to your site's followers group so that you can send them emails.

1. Add a Row card between the survey row and the footer row.
2. In the Row side panel, for Text Color, type #32444d.
3. Add a Text card to the row. In the Text card, type the following text:

   Follow us!

   We'll reach out about once a month to share the following:

4. Style Follow us! using the Header 1 style. Style We'll reach out about once a month to share the following: using the Header 2 style.

   

5. Below the second line, add a line break and type the following text:

   Project updates

   New ways to get involved

   Upcoming events

   More feedback and opportunities

6. Highlight the text you typed in the previous step and click the Unordered list button.

   

7. Style the list using the Header 3 style.
8. To the right of the Text card, add an Image card and upload mailbox_image5.
9. Reduce the image size twice.

   Next, you'll add a button that users can click to follow your work.

10. Below the Text card, add a Follow card.

    A button to follow or unfollow the site is added. The button also has some explanatory text. Because you already added a text card with information about following the site, you can delete the text that came with the button.

11. In the Follow side panel, delete the text in the Call-to-Action field.

    

    The text is removed. Next, you'll change the button's color.

12. Click Layout and click Customize to return to the Customize side panel.
13. Click Theme. For Body Link Color, type #6a9ab0.
14. On the ribbon, click Save.

    You've finished your site. Now it's time to share it so others can view it.

15. On the ribbon, click the Groups with access can see this Hub Site Application button.

    

16. On the Share side panel, for Sharing Level, choose Public.

    Your site is now available to the public. Next, you'll publish it.

17. On the ribbon, point to the Save arrow and click Publish Draft.

    

    The site is published. You can now view the published site.

18. On the ribbon, point to the Save arrow and click View Published.

    

    You go to the published version of the site, which anyone can view. Viewing the site allows you to see how your site appears to your users. You can explore the functionality of the survey and map as well.

19. Click the Edit button to return to Edit mode.

    

    After people begin to follow your site, you can manage them through the Community tab.

20. On the ribbon, click William Land Park Improvement Plan and choose Community.

    

    The Community page appears. On this page, you can see a list of your site's followers, manage all followers, and send updates to followers about progress on your work.

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 Unsplash.
• The Community Feedback for William Land Park web map was created by Esri.
• Banner image by Mikolaj Niemczewski, accessed via Adobe Stock. All Adobe Stock images are © 2024 Adobe Stock. All rights reserved.
• 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