Develop your own ArcGIS Hub template

The City of Springfield's general plan is being updated to help create a sustainable future for the city by 2040. As a planner for Springfield, your task is to create a digital version of the update.

In this tutorial, you'll transform the city's general plan update into an interactive, collaborative website using ArcGIS Hub. Your site will present the update's purpose in a user-friendly way and provide surveys and events to drive community engagement. You'll also create a template based on your site so other departments can make similar sites for their own initiatives.

This tutorial was last tested on July 6, 2023.

Requirements

• ArcGIS Hub Premium
• ArcGIS organizational account with an Administrator role (see options for software access)

Create a home page

A website may be a good way to present Springfield's general plan update to the community, but you don't have time to build one from scratch. ArcGIS Hub Premium comes with templates to help build initiatives, which are sites hosted on ArcGIS Hub with improved options for community engagement. You'll choose a template and customize the theme to match your city's branding needs.

Choose a template

First, you'll open ArcGIS Hub and choose a template best suited to informing a community about a new project.

1. Sign in to your ArcGIS organizational account.

   Note:

   This tutorial requires an Administrator role or a custom Publisher role with permission to create groups with update capabilities and assign members. If you don't have an organizational account or Administrator privileges, see options for software access.

2. On the ribbon, click the Apps button and choose Hub.

   

   ArcGIS Hub opens. The overview page has options to create or manage initiatives, manage your content, or manage your community members.

3. For Initiatives, click New.

   

   Note:

   If you see Sites instead of Initiatives, you may be licensed for ArcGIS Hub Basic. This tutorial requires ArcGIS Hub Premium. To activate an ArcGIS Hub Premium license, see Activate ArcGIS Hub Premium.

   You have the option to name your initiative. Before you do that, you'll choose the template you want to use. Choosing an appropriate template will save you time when customizing your initiative to your needs.

4. Click Browse Templates.

   

   A list of templates appears. The list may be filtered to only show templates published by your organization. You'll search for templates published by Esri.

5. For Filters, uncheck any filters and check Esri.

   

   Esri has published over 40 initiative templates. (The number may be different than in the example images, as more templates are published periodically.)

6. Scroll through the list of templates and click More Results to see all the templates available.
7. In the search bar, type Project Site and press Enter.

   The list is filtered to one template: Project Site. The description for this template explains that it is useful for informing your community of a new or ongoing project. You want to inform the public of your city's new sustainable development update to its general plan, so this template suits your purposes.

8. Click the template's title.

   

   A preview of the initiative template appears.

9. Click Activate Template.
10. For Give Your Initiative a Name, type Springfield General Plan 2040, followed by your name or initials (for example Springfield General Plan 2040 YN).

    Note:

    You cannot create two initiatives in an ArcGIS organization with the same name. Adding your initials to the initiative name ensures that other people in your organization can also complete this tutorial.

11. Click Go.

    When the activation is complete, the template appears, as well as a Get Started window with information about the options available to you.

12. Close the Get Started window.

Customize basic settings

Next, you'll change some of the basic settings of your initiative, including the name and URL. When you created the initiative's name, you added your name or initials to ensure the name was unique within your organization. However, you don't want your name or initials to appear in the site itself, so you'll remove them.

1. In the Customize pane, click Settings.

   

2. In the About section, for Name, remove your name or initials, leaving only Springfield General Plan Update 2040.

   

   The changes are not applied automatically. You need to save them.

3. On the ribbon, click Save.

   

   After you save your changes, the ribbon updates to show the new name.

   

   Note:

   There are other options for saving or previewing your initiative. If you click the arrow next to the Save button, you can choose to preview a draft of your initiative without publishing the changes to the actual site (Preview Draft), publish your changes to the live version of the site (Publish Draft), view the currently published site (View Published), or delete the draft and revert the editor to the published version of the site (Delete Draft).

   Next, you'll change the site URL. For the purposes of this tutorial, you'll keep your name or initials in the URL to ensure the URL is unique in your organization. But you can still shorten the URL by removing some of the other words.

4. In the Customize pane, expand Domain Settings and click Modify Domain Settings.

   

   The Domain Settings window appears. The default subdomain is hub.arcgis.com. Although you can create a custom domain, it can take up to 24 hours to apply. You'll only modify the URL, which you can do immediately.

5. For Site URL, type springfield-general-plan and add your name or initials.

   

   The URL also includes the name of your ArcGIS organization. In the example images, this name is learngis. Your URL will differ if you're using your own organization.

6. Click Save.

   After the changes are saved, a window appears to explain that you need to go to the new URL to continue editing.

7. Click Go.

   You are redirected to the new URL.

Customize the header and theme

The header appears at the top of your initiative. Currently, the header only contains the initiative name, which is redundant because the name also appears on the banner under it. You'll change the header to instead include your city's logo. You'll also change the theme to use different colors and fonts.

1. In the Customize pane, click Header.

   

   The header's default appearance uses the Standard style. You intend to display your city's logo in the header, so you'll use the larger Prominent style to ensure the logo is displayed at an appropriate size.

2. For Appearance, choose Prominent.

   

   Unlike the changes you made to the basic settings, this change is automatically applied to the editor. Next, you'll remove the name from the header.

3. In the Customize pane, turn off the Name option.

   

   The name is removed from the header. You'll add the Springfield logo next. You can either add the logo from a URL or upload it from your machine.

4. For Logo, confirm that Image URL is chosen. Paste the following URL into the text box:

   https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/logo-header.jpg

   The Springfield logo is added to the header, but only takes up part of the header's height. You'll change the logo alignment so it covers the entire height of the header.

5. For Logo Alignment, choose the Vertical logo option.

   

   The logo becomes larger on the header. It has a white background, so you'll change the header background color to match.

   Tip:

   In the Social Icons section, you have the option to turn on buttons that link to the city's social media. Icons for Facebook, Twitter, Instagram, and YouTube are available. Because this tutorial features a fictional city, you won't add any social media, but this option is useful when creating an initiative for a real city.

6. At the top of the pane, click Customize.

   

   You return to the Customize pane.

7. Click Theme.

   This pane includes options to change the color of various elements of the initiative, including text. You can change the color either by choosing from a color picker or typing a hexadecimal code.

   In addition to changing the header color to match the logo background, you'll also use dark gray colors for the fonts and icons instead of black, as black can be harsh to viewers.

8. Change the following theme colors:
   • For Global Nav Background Color, type #f7f7f7.
   • For Global Nav Text Color, type #7d7d7d.
   • For Header Background Color, type #ffffff.
   • For Header Text Color, type #6c6c6c.
   • Leave Body Background Color unchanged at #ffffff.
   • For Body Text Color, type #3c3c3c.
   • For Body Link Color, type #278dca.

   Next, you'll change the initiative's fonts.

9. For Base Font, click the settings button.

   

   The Customize Theme Fonts window appears. You can import a font based on a URL. A link to Google Fonts, a catalog of free fonts, is provided.

10. Click browse their collection.

    The Google Fonts website appears in a new browser tab. It lists fonts as part of a searchable gallery.

11. Click the Roboto font. If you can't find it in the list, search for it.

    This font contains numerous styles that make it thinner, bolder, or italicized. You will use the default style, which you can access by picking any style.

12. For the Thin 100 style, click Select this style.

    

    The Selected family pane appears. It includes a URL you can use to import the font into your initiative.

13. For Use on the web, choose @import. Copy the following portion of the URL:

    https://fonts.googleapis.com/css2?family=Roboto

    

14. Close the Google Fonts browser tab. In your initiative, in the Customize Theme Fonts window, for URL for @Import, paste the URL.
15. For Name of Font Family, type Roboto.

    

    You'll use the same font for the heading.

16. Confirm that you still have the font URL copied. Click the Heading Font tab.

    

17. For URL for @Import, paste the https://fonts.googleapis.com/css2?family=Roboto URL. For Name of Font Family, type Roboto.
18. Click Apply.

    The changes are applied. You've now branded your site with a logo, customized the theme, and added a new font.

Customize the banner

The banner is the section of the initiative under the header. It includes the name of the initiative and has room for a subheading. It's important for your initiative's banner to grab the attention of anyone who lands on the site. You also want the title to clearly convey what the initiative is about.

First, you'll replace the banner's plain background with a more eye-catching image.

1. Point to the banner.

   

   When you point to certain elements in the initiative editor, toolbars appear with options to move, edit, or delete the element. For the banner, the horizontal toolbar (above the banner) is for editing the text. The vertical toolbar (to the side of the banner) is for editing the background.

2. On the vertical toolbar, click the edit button.

   

   The Row pane appears. In ArcGIS Hub, a row is a horizontal section of a site, such as the banner. This pane has options to change the background color or upload a background image. You'll add an image that shows a city skyline.

3. For Background Image, paste the following URL:

   https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/header-image-skyline-color.jpg

   The image is added to the banner. You'll also change the background color to black so the white font stands out better.

4. For Background Color, type #000000. For Image Transparency, type 30 percent.
5. Turn on Fixed Background.

   

   Next, you'll change the text on the banner.

6. Point to the text on the banner. On the Text toolbar, click the edit button.

   

   The banner text becomes editable. A toolbar appears above the text, with standard text formatting options including options to bold and italicize the text, add hyperlinks, and change the text size. You can also go into an HTML view to add more advanced text formatting.

7. Delete all existing text and type The most important General Plan Update in the history of Springfield.
8. Highlight the text. On the toolbar, click the Style button and choose Banner.

   

9. If necessary, click the Paragraph button and choose Align center.
10. Click anywhere outside of the text to remove the text highlight.

    

    Next, you'll add a Spacer card to the banner. A spacer will increase the size of the banner, making the background image bigger and more eye-catching. You can add cards to the banner by dragging them onto it.

11. In the Layout pane, locate the Spacer card.

    

12. Drag the Spacer card to the top of the banner and release it in the Insert above drop zone.

    

    The area above the banner becomes wider. You'll lower the size of the space and also hide it on mobile devices, so mobile users will not need to scroll so much to see your initiative's content.

13. In the Spacer pane, for Height, type 75 px. Turn on Hide On Mobile.

    

    You'll add another spacer under the text.

14. Click the Layout button to return to the list of cards. Drag a Spacer card under the text and release it in the Insert below drop zone.

    

15. In the Spacer pane, for Height, type 75 px. Turn on Hide On Mobile.

    With the spacers, the banner is large enough to cover the entire screen. You'll edit the banner's HTML to remove some default spacing. The result will be a banner that is of normal size for desktop users, but smaller for mobile users.

16. Click the banner text to edit it. Under the text, click Edit in HTML.

    

    An HTML view of the text appears. In HTML, formatting is depicted with code. First, you'll remove some HTML code that adds extra line breaks.

17. Delete the two sections of code that read <br><br><br><br><br><br> on the last few lines of the HTML code.

    

    You'll also add a few lines of code that will change paragraph spacing throughout the site. In code view, on lines 1 and 20, there is a <style> tag. Any code between these two tags defines the style of elements on the page.

18. Add two empty lines before the </style> tag on line 20, moving it to line 22. On the new line 20, paste the following code:
    div.b {
      line-height: 1.6;
    }

    

19. Click Apply.

    The banner's formatting is applied. The size of the banner is appropriate for both desktop and mobile users.

Edit and delete rows

Under the banner is a row with text. You'll edit this text to tell users more about the general plan. You'll also delete some rows you don't plan to use.

1. Under the banner, click the text that begins with Use this Hub site to edit it.

   

   You'll edit the text in HTML to apply formatting that is defined in the HTML of the banner.

2. Click Edit in HTML.
3. Delete the existing text and paste the following text:

   <div class="h1"><b>About the General Plan Update</b></div><h5><div class="b">The Springfield General Plan is used by the City of Springfield to guide long-range planning, the review of development proposals, and other activities that shape the built and natural environments. The plan helps the community create and preserve a sustainable future for the City of Springfield and a high quality of life.</div></h5>

   

   The part of the code that reads <div class="b"> refers to the div.b element you added to the banner code. The text after this tag will have a line height of 1.6, which means that there will be a small amount of spacing between each line of text. This spacing will make the text more legible to users.

   The <div class="h1"> tag refers to the Header 1 style that is included in the default text styles. The text in this tag will be larger, like a title.

4. Click Apply.

   The changes are applied. You'll also change the row's background color and font color.

5. Point to the text. On the vertical toolbar to the side of the row, click the edit button.
6. In the Layout pane, for Background Color, type #ffffff.

   A white background matches the header.

7. For Text Color, type #3c3c3c.

   The text changes to a dark gray color.

   

8. Scroll down the initiative page to the Achieving our Vision row.

   This row is included with the initiative template you chose, but you don't need it. You'll delete it.

9. Point to the row. On the vertical toolbar, click the delete button.

   

   A message appears, asking you to confirm that you want to remove this row from the layout.

10. Click Remove.

    You'll also delete the next row, which is titled Progress to Date.

11. Point to the Progress to Date row. On the vertical toolbar, click the delete button and click Remove.
12. On the ribbon, click Save. Click the Save drop-down menu and choose Publish Draft.

Add a row

So far, you've edited rows that came with the template you chose. Next, you'll create a simple row that includes a picture and a paragraph. This row will explain more about the update to the general plan.

1. In the Customize pane, click Layout.

   You used the Layout pane previously when you added spacers to the banner. Next, you'll use it to add a row.

2. Drag the Row card under the About the General Plan Update row and drop it in the Insert Below drop zone.

   

   An empty row is added to the initiative.

   

   The Row pane appears. It has basic settings for the row. First, you'll add a background image.

3. In the Row pane, for Background Image, paste the following URL and press Enter:

   https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/header-image-palms-bw.jpg

   Note:

   The image may not appear in the row immediately if you don't press Enter after pasting the URL.

   Next, you'll adjust the background color and image transparency. This image is black and white, so you'll add a color overlay to add depth to the image.

4. For Background Color, type #1c1f76. For Image Transparency, type 95 percent.

   Because this row has a dark background color, you'll change the text color to white.

5. For Text Color, type #ffffff.

   

   Next, you'll add text.

6. In the Row pane, click Layout to return to the list of cards. Drag the Text card to the empty row.

   

7. For the new text card, click Edit in HTML. In the HTML window, paste the following text:

   <div class="h1"><b>Purpose</b></div><h5><div class="b">This site is the Springfield General Plan Update, a visionary and aspirational data hub that includes a road map for the project, the vision for 2040 with a corresponding physical framework (please see The Spatial Strategy), and details on the areas of action that will guide implementation. The Springfield General Plan should serve as a road map for all projects moving forward, allowing everyone to understand the planning intent and trajectory.</div></h5>

8. Click Apply.

   Next, you'll add an image to go beside the text.

9. Drag the Image card to the left of the text and drop it in the Insert Left drop zone.

   

   A placeholder image is added next to the text and the Image pane appears with more options. You'll upload a different image.

10. In the Image pane, for Image URL, paste the following URL and press Enter:

    https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/mic-meeting.jpg

    You'll also add spacers above and below this row, similar to the banner.

11. Click Layout to return to the list of cards. Drag one Spacer card above the Purpose row.
12. In the Spacer pane, turn on Hide On Mobile.
13. Return to the list of cards, add a Spacer card below the Purpose row, and turn on Hide On Mobile.

    

    Next, you'll adjust the size of the image. Currently, the image is a little larger than the text. It would look better if it were smaller.

14. Point to the right edge of the microphone image and click the arrow button.

    

    The image size is reduced. It's now better aligned with the text.

15. Save and publish the initiative draft.

Configure a more complex row

The next row is the Primary Focus Areas row. This row is more complex than the previous one, as it includes text, images, and buttons that can link to other initiatives, websites, or surveys. You'll change the text and settings to provide information about the general plan's activities.

1. Click the Primary Focus Areas text to edit it.

   

2. Click Edit in HTML. Delete all existing text and paste the following text:

   <div class="banner-heading"><b>General Plan Activities</b></div>

3. Click Apply.

   This row has two subsections, each titled Focus Area. These subsections have a space for an image (currently blank). You'll add an image for the first subsection and change the text.

4. Point to the empty area to the left of the first Focus Area subsection. On the Image toolbar, click the edit button.

   

5. For Image URL, delete the existing URL. Paste the following URL and press Enter:

   https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/get-involved.jpeg

   The image is added.

6. Click the Focus Area text to edit it.

   This text box also includes a button. You'll keep the button when you edit the text.

7. Click Edit in HTML. Delete all existing text and paste the following text:
   <h1><b>1. Get Involved</b></h1>
   <h5><div class="b">There are many ways for you to get involved! The first way is to be a part of Springfield's walking tour. We need your help to make the City's walking tour successful by using our great community as volunteers to help participants navigate our city.</div></h5>
   <br>
   <p><a href="#" class="btn btn-primary" style="min-width: 200px;" target="_self">Get Involved</a></p>

   This text includes a header, descriptive text, and a button at the end. The button uses the tag <a href="#" class="btn btn-primary" style="min-width: 200px;" target="_self">. In this tag, the # symbol is a placeholder for the URL to which the button will navigate. The class="btn btn-primary" component determines the appearance of the button, the style="min-width: 200px;" component determines the size, and the target="_self" component ensures that the URL will open in a new browser tab, instead of the same one.

8. Click Apply.

   The changes are applied. The image is larger than the text, so you'll decrease its size.

9. Point to the right side of the image and click the arrow button. Click the arrow button a second time.

   The image size is now more appropriate for the text.

   

   You'll delete the second Focus Area subsection.

10. Under the Get Involved subsection, point to the Focus Area text. On the Text toolbar, click the delete button.

    

11. When asked to confirm whether you want to delete the card, click Remove.

    The text is deleted, but a blank image and a blank text card remain, as well as a line that divided the two Focus Area subsections.

12. Point to the blank image. On the Image toolbar, click the delete button and click Remove.
13. Point to the empty space again. On the Text toolbar, click the delete button and click Remove.
14. Point to the horizontal line under the Get Involved row. On the Text toolbar, click the delete button and click Remove.

    You'll also delete some other rows that were added by the template that you don't need.

15. Under the General Plan Activities row, point to the Resources and Tools row. On the vertical toolbar, click the delete button and click Remove.
16. Delete the Frequently Asked Questions row.
17. Save and publish your draft.

You've configured the home page for your initiative site.

Create a page for a walking tour

When updating a general plan, it's important to engage your community throughout the process. The Springfield general plan update includes multiple activities to promote community participation. One of those activities is a walking tour, which you describe in the Get Involved row. Walking tours involve a group of residents exploring a city's architecture, urban design, and history while walking through the city. They promote conversations about planning, development, and general urban life.

You'll make a new page focused on the walking tour. This page will help volunteers lead the walking tour and give residents a place to sign up to attend.

Create a page

First, you'll make a new page for the walking tour and link the page to the home page.

1. If necessary, open the editor for your Springfield General Plan Update 2040 initiative.
2. In the Customize pane, click the page button.

   Note:

   You may need to click the back button one or more times to return to the Customize pane.

   

   You have the option to create a new page or link a page.

3. Click New Page. In the New Page window, for Save as a page, type Get Involved and click Next.

   A new page named Get Involved is created. The header, logo, font, and theme you configured for the first page is automatically applied to this page. However, the paragraph spacing that you added to the HTML is not applied to this page, so you'll add it again later.

   Before you edit any of the rows or text on this page, you'll add the page's URL to the Get Involved row of the home page.

4. On the ribbon, click the arrow next to the Save button and choose View Published.

   

   The browser navigates to the live version of the page.

5. Copy the page's URL.
6. On the left side of the site, on the toolbar, click the Edit button.

   

   You return to the editor. The editor shows the new page you created, so you'll switch to the home page.

7. On the ribbon, click Springfield General Plan Update 2040 and choose Site Home.

   

8. On the home page, scroll down to the Get Involved row. Click the Get Involved text and click Edit in HTML.

   The HTML for this row contains code for a button that can link to a URL. When you configured this row, you used a # sign as a placeholder for the URL. You'll replace the # with the URL to the walking tour page.

9. On the line of code that starts with <p><a href="#", delete the # and paste the URL you copied.

   

10. Click Apply.

    The button at the end of the row now links to the walking tour page.

11. Save and publish your draft.

Edit the page

Next, you'll edit the page for the walking tour to add images and text.

1. In the Customize pane, click the page button.
2. Click the Get Involved page.

   

   Next, you'll edit the page's banner to include HTML style information and the page title.

3. Click the Our Community text to edit it.

   

4. Click Edit in HTML. Delete all text and paste the following code:
   <style>
   .primary-color {
     color: #585fcc;
   }
   .primary-fill {
     fill: #585fcc;
   }
   
   .steps-wrapper li::before {
     color: #585fcc;
     border-color: #585fcc;
   }
   .steps-wrapper li::after {
     background-color: #585fcc;
   }
   div.b {
     line-height: 1.6;
   }
   </style>
   <h1 style="text-align: center;"><span style="font-weight: 700; font-family: Roboto, &quot;Avenir Next&quot;; font-size: 62px;">Get Involved</span><br></h1>
   <p style="text-align: center; font-size: 22px"><br></p>

5. Click Apply.

   The banner now only has the name of the page (Get Involved). You'll also add an image to the banner background.

6. Point to the Get Involved row. On the vertical toolbar to the side of the row, click the edit button.
7. In the Layout pane, for Background Image, paste the following URL and press Enter:

   https://downloads.esri.com/LearnArcGIS/develop-your-own-arcgis-hub-template/header-image-bike-lane-color.jpg

8. For Text Color, type #ffffff, and for Background Color, type #000000. For Image Transparency, type 30 percent.

   The banner now has an image and an appropriate text color and overlay.

   

   The banner is narrow, so you'll add spacers above and below it.

9. In the Row pane, click the Layout button to return to the list of cards.
10. Drag one Spacer card above the banner and one Spacer card below it. For each spacer, turn on Hide On Mobile.

    

    Under the banner, you'll create a row with some text describing the walking tour.

11. In the Spacer pane, click Layout to return to the list of cards. Drag a Row card under the banner.

    

12. Return to the list of cards and drag a Text card into the empty row.
13. In the text editor, click Edit in HTML. In the HTML window, paste the following code:

    <div class="h1"><b>1. Walking Tour</b></div><h5><div class="b">There are many ways to get involved throughout the Springfield General Plan update. The first way is through the walking tour. This walking tour will allow you to explore our city's heritage, culinary markets, open space and parks, neighborhoods, and so much more! Help us lead our community on a fun and enthralling walk around our city. </div></h5>

14. Click Apply.

    The text is added.

    

    Before you continue, you'll delete some unneeded rows.

15. Near the bottom of the page, point to the Where We're Going row.

    

16. In the vertical toolbar, click the delete button and click Remove.
17. Delete the empty row under where the Where We're Going row used to be.
18. Save and publish the initiative draft.

Add a survey

A walking tour allows community members to get involved and learn about Springfield's history, but you also want to collect feedback from the community to promote engagement. A good way to collect feedback is with an ArcGIS Survey123 survey. Next, you'll create and embed a survey into your site.

1. Under the Walking Tour row, add a Row card.

   

2. Return to the list of cards and drag a Survey card into the empty row.

   The survey only includes a placeholder image until you choose a survey to use. Creating a new survey takes you to a new page, so you'll make sure you save and publish your draft before continuing.

3. Save and publish your draft. In the Survey pane, click Create Survey.

   

   The Create a Survey page appears.

4. On the What kind of feedback do you want? page, choose Questionnaire.

   After a few moments, the survey is created and the survey builder appears. You can use this builder to add questions to your survey.

5. Next to the About pane, click the More Info button to hide the pane.

   

6. At the top of the page, click Questionnaire to edit the survey's header.
7. In the Edit pane, for Text, type Springfield General Plan Survey.

   

8. Under the header, click the survey description text and replace it with the following: Please take this survey to the help the City of Springfield with the General Plan update. Your feedback is valued and it is used to ensure we are planning the best future for the city.

   

   The survey comes with some sample questions about public transportation. You'll delete these questions.

9. Click the first question on the survey to select it. Click the Delete button.

   

10. Delete the other questions as well.

    Next, you'll add a question. The Add pane includes a list of question types that you can add to the survey. You'll add a multiple select question about how the user wants Springfield's resources used.

11. In the Add pane, under Choice click Multiple select.

    

    A multiple select question is added to the survey and the Edit pane appears. In this pane, you can change the question and its possible answer choices.

12. In the Edit pane, for Label, type How would you prioritize Springfield's resources in your community? For Choices, add the following choices (to add more choices, click the add button next to the third choice):
    • For Choice 1, type Pedestrian Safety.
    • For Choice 2, type Bus Improvements.
    • For Choice 3, type Bicycle Infrastructure.
    • For Choice 4, type Lighting.
    • For Choice 5, type Street Furniture.
    • For Choice 6, type Community Programming.
    • For Choice 7, type Reclaimed Space.
    • For Choice 8, type Public Art.
    • For Choice 9, type Enhanced Landscape.

    

    The choices are automatically added to the survey question. Next, you'll add a single choice question to gauge whether the user has previously participated in community planning efforts.

13. Click the Add tab. In the Add pane, click Single select.

    

14. In the Edit pane, enter the following information:
    • For Label, type Have you participated in previous planning efforts in your community?
    • For Choice 1, type Yes.
    • For Choice 2, type No.
    • For Choice 3, click the minus sign to remove it.

    

    You'll add another question that users can answer by writing text.

15. In the Add pane, under Text, number, date, and time, click Multiline text.
16. In the Edit pane, for Label, type What buildings have meaning in your community? For Hint, type Please explain and include an address.

    

    Lastly, you'll add a question for users to mark where they are taking the survey on a map. This question is key for engaging with the community. As a planner, you can analyze where most survey responses are coming from and coordinate outreach in areas where you want more survey responses. This is also important to encourage participation and build trust in communities who historically may not participate.

17. In the Add pane, under Location click Map. In the Edit pane, for Label, type Where are you taking this survey?

    

    Your survey has four questions. Next, you'll save and publish the survey.

    Tip:

    If you want, you can also change your survey's appearance by changing the options in the Appearance tab.

18. At the bottom of the Edit pane, click Save and click Publish. When asked to confirm that you want to publish the survey, click Publish.

    The survey is published. Next, you'll share it with the public.

19. On the ribbon, click Share.

    

20. In the Share pane, click Survey. For Sharing Level, choose Public.

    Next, you'll update the name of the survey.

21. Next to the Sharing pane, click the More Info button.

    

22. Click the Edit Details button. Under Basic Info, for Title, type Springfield General Plan Survey.
23. On the ribbon, click Save.

    Next, you'll return to your site and embed the survey.

24. On the ribbon, point to the More Actions button and click Springfield General Plan 2040.

    

25. In the Customize pane, click the page button and choose the Get Involved page. Scroll down the page and click the placeholder image representing the survey (under the Walking Tour section).
26. In the Survey pane, click Select Survey.
27. In the Select a Survey window, for From, choose My Content. Select Springfield General Plan Survey.

    

28. Click Save.

    A link to the survey is added to the initiative. However, clicking the link will cause users to navigate away from the page. Rather than a link, you'll embed the survey itself.

29. In the Survey pane, click Embed.

    

    The survey is embedded directly into the initiative. Users are asked questions and can provide answers without navigating to a new page. You'll make the survey bigger.

30. For Height, type 800.

Add a link to the home page

To create a good web experience for your users, you'll add a link from the walking tour page back to the home page. This way, users will always be able to return where they started.

1. Scroll down to the Intro row.

   This row already includes a button, so you'll modify it.

2. Point to the Intro row. In the vertical toolbar to the side of the row, click the edit button.
3. In the Row pane, for Background Color, type #c6d6e3.
4. Click the Intro text to edit it and click Edit in HTML. In the HTML window, delete all text and paste the following text:
   <h1><b>Go Home</b></h1>
   <h5><div class="b"> If you would like to learn more about Springfield's General Plan update, go back to the home page. The home page includes a high level introduction to the update's principles, planning objectives, strategies, and actions.</div></h5>
   <br>
   <p><a href="#" class="btn btn-primary" style="min-width: 200px;" target="_self">Get Involved</a></p>

   Like the button on the home page, this button uses # as a placeholder symbol for the URL.

5. Click Apply. Save and publish the initiative draft.

   You'll open the home page in a new tab to copy its URL.

6. On the ribbon, click Springfield General Plan Update 2040. Right-click Site Home and choose Open link in new tab.

   Note:

   The option to open the link in a new tab may have a different name on certain browsers or operating systems.

   

7. In the new tab, click the arrow next to the Save button and choose View Published.

   The published version of the home page appears.

8. Copy the URL of the published home page. Close the tab.

   You are returned to the Get Involved page editor. You'll add the URL you copied to the button.

9. If necessary, click the Go Home text to edit it. Click Edit in HTML.
10. In the HTML window, in the line that begins with <p><a href="#", replace the # with the URL you copied.
11. Click Apply. Click the photo or survey to stop editing the text.

    

    The row now includes a button that takes users back to the home page.

12. Save and publish the initiative draft.

Add the option to follow the initiative

This page is for users who want to get involved. You've added a survey to help engage the community; next, you'll add a row that allows your community members to sign up to follow the initiative. These users can sign up for events, receive updates via email, and even help create content for the site. The site manager can monitor these users (you'll learn about that later in the lesson).

Note:

This section requires you to have ArcGIS Hub Premium and an Administrator role in your ArcGIS organization.

1. Under the survey, add a Row card.

   

2. Return to the list of cards. Drag a Follow Initiative card onto the empty row. (You may need to scroll down the list of cards to find the Follow Initiative card.)

   

   By default, you are following the initiative because you created it. The text before the button to follow is called a call to action. You'll change the text to be more specific to your initiative.

3. In the Follow pane, for Call-to-Action, delete the existing text and paste the following text: By following this initiative you're signing up to help the city with our walking tour! You can help lead community members around the city and enable discussions and give city planners insight into what our neighbors want.
4. Save and publish your initiative draft.

   Your site is now fully functional. There are a few more things you plan to add to it, but right now it's ready to be shared with the public.

5. On the ribbon, click the Groups with access can see this Hub page button.

   

   The Share pane appears. Currently, only the owner (you) can see your initiative.

6. For Sharing Level, choose Public.

   

   Now, anyone can see your initiative.

Create an event

Next, you'll add an event card to the page. An event card provides the time and location of some event, with the specific details being up to you. Your event will be for the walking tour that is talked about on the page. With ArcGIS Hub's event manager, you can track who is attending the events and send updates to participants.

1. Next to the Share pane, click the Customize Toggle button.

   

   You return to the Customize pane.

2. Click Layout. Drag a Row card under the Follow Initiative row.

   

3. Return to the list of cards. Drag a Featured Event card onto the empty row. (You may need to scroll down the list of cards to find the Featured Event card.)

   Like the survey you added, only a placeholder image appears. You have to either select an event or create one.

4. Save and publish your initiative draft.
5. In the Event pane, click Create Event.

   

   A new page appears. This page contains options to edit information about the event. First, you'll add an image to represent the event.

6. Save the Walking Tour image to your computer.
7. At the top of the list of event parameters, for Add Event Image, click Browse for Image. Browse to and choose the Walking Tour image you downloaded.

   You have the option to reposition the image. The default position is fine.

8. Click Done.
9. For Title, type Walking Tour. For Description, copy and paste the following text:

   On this walking tour, explore our city's heritage, culinary markets, parks, and so much more! Help us lead our community on a fun and enthralling walk around our city. During this tour, you'll learn about Springfield's General Plan update and how you can help us achieve our vision!

   By default, you are added as the event's organizer. You can add other organizers and also sponsors, if necessary. You can also choose whether the event will be in-person, online, or both. By default, In-Person is selected.

   You can also give the venue or address where the event will begin. If you add an address, it will appear on a map next to the event information. Normally, you would choose a specific address or a landmark that is easily found. For the purposes of this lesson, you'll use the address of Esri headquarters as a placeholder address, because Springfield, California, is a fictional city.

10. For Address, type 380 New York St, Redlands, California, 92373 and choose the matching address from the list of addresses that appears.

    You can also set the date. The date you choose should be far enough in the future so people can make plans to attend.

11. Optionally, set a start and end date for the event.

    All you need to do now is save and publish the event.

12. On the ribbon, click Save as Draft. Once the event is saved, click Publish and choose Public.

    

    The event is published. A page with information about the event appears. The page also includes options to share the event via social media, edit the information, and track the attendees who have signed up.

    

    You'll return to the editor for your initiative and add this event to it.

13. On the side of the screen, click the Edit button.
14. On the ribbon, click Springfield General Plan Update 2040 and choose Site Home.
15. In the Customize pane, click the page button. Click the Get Involved page.

    You return to editing the Get Involved page.

16. Scroll down to the event (between the Follow/Unfollow button and the Go Home row). Click the placeholder image of the event.

    The Event pane appears.

17. In the Event pane, click Select Event.

    

    The Select an Event window appears.

18. In the Select an Event window, select the Walking Tour event and click Save.

    The event is added to your initiative.

    

    The Event pane now includes options for changing the event's appearance, but you'll use the default values.

19. Save and publish your initiative draft.

Move rows

Your site is completely set up. However, the button to follow or unfollow the initiative is located between the survey and the event, which isn't very prominent. You'll move the row above the survey so it appears near the top of the page.

1. Point to the button to follow or unfollow the initiative (between the survey and the event).
2. In the vertical toolbar to the side of the row, click the move button.

   

3. Drag the button above the survey row.

   

   The row is moved closer to the top of the page.

4. Save and publish the initiative draft.

You've completed your initiative. You have a home page as well as a page that drives community engagement through surveys and events.

Manage your site

Now that you've completed your site, you'll manage it and its users. ArcGIS Hub includes several managing tools to help you track activity and community members. You'll also export the site as a template that other departments in the city can use for their own initiatives.

Manage the community

First, you'll explore the dashboard that tracks how many views your site has received and the average time each user spends on the site, among other information. You'll also explore your list of followers.

1. If necessary, open the editor for your Springfield General Plan Update 2040 initiative.
2. On the ribbon, click Springfield General Plan Update 2040 and choose Dashboard.

   

   The Dashboard page appears. It includes a breakdown of key metrics—such as views, sessions, and average time on site—as well as a bar graph that shows the amount of views over time. Because you just launched your site, you probably don't have too many views right now.

   Note:

   Your page may have a different number of views and other metrics than the example image.

   

   Next, you'll explore the Community page, which lists your followers.

3. On the ribbon, click Springfield General Plan Update 2040 and choose Community.

   

   The Community page appears. When you created your site, you added a button to follow the initiative. Users who click that button are added to this page. However, you probably don't have any followers yet.

   You also have the option to invite followers.

4. Click the Invite Followers button.

   

   The Invite Followers window appears. You can choose to invite followers from your organization, your community, or the world. You can use this window to invite members of the Springfield community or coworkers who are also involved with the initiative.

5. Close the Invite Followers window.

   Next, you'll create a supporting team. Supporting teams are similar to groups in ArcGIS Online but are hosted in ArcGIS Hub. You can use them to organize trusted collaborators or other important categories of followers. Members aren't limited to site followers and can include any ArcGIS Online user. You'll create a supporting team to organize users who volunteer to lead walking tours.

6. On the ribbon, click Springfield General Plan Update 2040 and choose Teams.

   

   The Teams page appears. You already have one team, called Springfield General Plan 2040 Core Team. Any time you create an initiative, a core team is automatically created for it. A core team has access to all data, maps, apps, and other types of content in your site. They also have the ability to edit the site. By default, you are the only member of the core team. If you wanted to add another site administrator, you can add them to the core team and give them the same permissions you have.

   For now, you'll create a team.

7. On the ribbon, click New and choose Supporting Team.

   

   The What kind of supporting team do you want? page appears. You can give the team members viewing or editing access.

8. Choose Edit Access.
9. For Team Name, type Walking Tour Volunteers. Click Save.

   Tip:

   Team names need to be unique to your organization. If this name is taken, you can add your name or initials to make the name unique.

   The team is created. You are added as a member of the team by default. You have options to edit the team profile, add members, and message all members.

10. Click the Add Members button.

    

    The Add Members window appears. You can add members from your organization, your community, or the world.

11. Close the Add Members window. Click the Message All button.

    

    The Send a message window appears. Using this window, you can write a message that will be sent to all members of your team. You don't have any other members right now, so you won't send a message, but once volunteers have signed up to lead walking tours, you can send them messages regarding when the tours will begin or points of interest the tours should cover.

12. Close the Send a message window. On the ribbon, click Teams.

    

    You return to your list of teams, which now includes the team you created.

Save your initiative as a template

Other departments or organization in your city may want to create an initiative that is similar to yours. You'll save your initiative as a template so anyone can use what you made for their own needs.

1. On the ribbon, click Springfield General Plan Update 2040 and choose Site Home.

   You return to the editor for your initiative. You cannot save your initiative as a template if there are unpublished changes. Just to make sure, you'll publish your initiative one more time.

2. Save and publish your draft.
3. On the ribbon, point to the More Actions button and choose Save as Template.

   

   The Bundling your initiative's templates window appears. After a few moments, your initiative's templates are bundled.

   

   Note:

   If your initiative contains content that isn't hosted in your organization, such as a web map or survey that you didn't create, you cannot save your initiative as a template.

4. Click the Open Template Editor button.

   You can upload a thumbnail image, but it's not necessary. The title, link, and summary for your template are already filled out based on information from your initiative.

5. Click the Share button.

   

   You can choose who can access the template. You only want to share this template with other Springfield departments, so you'll share it with your organization.

6. For Sharing Level, choose Organization.

   The Update Sharing window may appear. You must share all content in your initiative the same way as the template. Using this window, you can quickly update the sharing level of the other content (such as your pages, your survey, or any maps you may add to your site).

7. In the Update Sharing window, click Update. In the Successfully Shared Templates window, click Close.
8. On the ribbon, click the Save button.

You've created and shared a site for Springfield's general plan update. Your site can also be used as a template for the sites of other departments in the city or for whenever the next update occurs. By changing the sharing level, you can share your template with other cities that may want to make similar sites. Your site is not only informative but also interactive, and it will help your department gather feedback from the community for further plans.

You can find more tutorials in the tutorial gallery.

Acknowledgements

• Cover photo: saksit - stock.adobe.com
• City logo: created by the author
• Roboto font: designed by Christian Robertson, Google Fonts
• City skyline photo: justin - stock.adobe.com
• Palm trees photo: sumikophoto - stock.adobe.com
• Microphone photo: Kathy Images - stock.adobe.com
• Get Involved graphic: arloo - stock.adobe.com
• Bike lane photo: EdNurg - stock.adobe.com
• Walking tour photo: Mirko Vitali - stock.adobe.com