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 an initiative 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 September 6, 2023.

View final result

Requirements

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

Build a site

In ArcGIS Hub, initiatives are organized by building a site and embedding other elements such as maps, apps, surveys, and more. You'll combine several different components to create an engaging website around the park improvement initiative.

Create an initiative

You'll start by creating an initiative, which will automatically generate 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 initiatives, 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 Initiatives, click New.

   

4. For Title, type William Land Park Improvement Initiative.
5. Click Create Initiative.

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

   After your initiative 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 initiative 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 initiative. In ArcGIS Hub, content is organized into rows. The banner is the first row of your initiative.

3. In ArcGIS Hub, point to the first row (the banner with an image background and your initiative's title). In the toolbar that appears to the side of the banner, click the edit button.

   

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

4. In the Appearance 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 Appearance 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 Initiative</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 initiative 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 initiative
15. On the ribbon, click Save.

    

    Your changes are saved.

Define the initiative's purpose

Next, you'll add information to define the purpose of the initiative 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 Settings 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 Settings 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 initiative sites.

Note:

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

1. In the Image Settings 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 initiative, 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 (Learn ArcGIS) and press Enter.
8. In the list of results, check the box for Adopt a Park Form (Learn ArcGIS).

   

9. Click Save.

   The survey is added to the side panel.

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

    

    The Edit Link window appears.

11. For Link Name, delete the Learn ArcGIS 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. 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 initiative.
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 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 Initiative Template. All photos used on this site are from Unsplash, unDraw, and Pexels.

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 initiative 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. 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. Add a Spacer card to the row.
4. Under the Spacer card, add a Survey card.

   The Survey side panel appears.

5. Click Select Survey.

   

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

6. Under From, choose World (Public).
7. Search for William Land Parks Improvements Feedback (Learn ArcGIS). In the list of search results, click the button to select William Land Parks Improvements Feedback (Learn ArcGIS).

   

8. Click Save.
9. 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.

   

10. In the Survey side panel, under Options, for Height, type 945.
11. 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. To the right of the Survey card, add a Map card.

   The Map side panel appears.

2. Click Select Map.
3. In the Select a Map window, for From, choose World (Public). Search for and select Community Feedback for William Land Park (Learn ArcGIS).
4. Click Save.
5. In the Map side panel, under Options, change Title to Community Feedback for William Land Park.
6. For Height (px), type 900.
7. Turn on Enable Map Legend.

   

   The embedded map is configured in the initiative.

   

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

Create a call to action

A call to action at the end of your initiative's site prompts members of the public to sign up for a community account to receive emails related to your initiative. Community members who follow a call to action are added to your initiative'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 the initiative.

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

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

11. In the Follow Settings 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 Button Background Color, type #6a9ab0.
14. On the ribbon, click Save.

    You've finished your initiative. 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 initiative 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 initiative, you can manage them through the Community tab.

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

    

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

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 images used in this tutorial were acquired from Unsplash (license), unDraw (license), and Pexels (license).
• The Community Feedback for William Land Park web map was created by Esri.