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 or into ArcGIS Enterprise using a named user account.
    Note:

    If you don't have an organizational account, you can sign up for an ArcGIS free trial.

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

    ArcGIS Hub in the app launcher

    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.

    /''';';;;;;;;;;;;;;;;;;;;;pm
  3. Under Initiatives, click New.

    New button

  4. For Title, type William Land Park Improvement Initiative and add your name or initials to the end.
  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.

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. Go to the Images item on ArcGIS Online and click Download.
  2. Unzip the downloaded folder.
  3. On the first row card, click the Edit button.

    Row Settings button

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

  4. In the Apprearance side panel, under Background Image, click Upload. Click Browse for Image and choose intro_image1.
  5. For Background Color, type #6a9ab0.

    Background C olor setting

  6. In the Row Settings side panel, expand Appearance.
  7. If necessary, for Image Transparency, type 30.

    Image Transparency setting set to 30 percent

    Next, you'll edit the title text.

  8. Click the Edit button on the title text card.

    Title card settings button

  9. Delete all of the text.

    In the Editor view, you can use text formatting tools or you can insert custom HTML and CSS code. In this case, you'll do the latter.

  10. At the bottoms of the row, Click the </> Edit in HTML button.

    Code View button

  11. In the Editor, 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>
  12. Click Apply, then click the Edit button to save your edits.
  13. On the toolbar, click Save.

    New initiative sites display several examples of how to configure the page layout. Because you'll be building a customized site, you're going to 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.

  14. Scroll down. For the Our Progress So Far row, click the Delete button and click Remove.

    Delete button

  15. Delete the following rows:
    • Create your own initiative
    • 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
  16. Click Save.

Define the initiative's purpose

Next, you'll add information to define the purpose of the initiative.

To clearly explain the purpose of the initiative, you'll add 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. In the Customize side panel, click Layout.

    Customize side panel

  2. In the Layout side panel, drag a Row card under the Title row.

    Row card dragged between the two rows

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

  3. In the Row Settings side panel, click Layout to return to the Customize menu.

    Click Layout to go back.

  4. Drag a Text card into the row.

    Text card dragged into the row

    The text editor opens.

  5. Copy and paste the following text: We want your insight on how we can make William Land Park a cleaner, more beautiful space.
  6. Select the text, click the Style button, and choose Header 2.

    Style button

  7. Unselect all of the text.
  8. Press Enter one space before and after the sentence.
  9. In the Customize side panel, drag an Image card to the left of the text card.

    The Image Settings side panel appears. You'll upload a custom image.

  10. Click Upload and click Browse for Image. Upload park_image2.
  11. Point to the row card and use the left arrow to move the image one space to the left.

    Left arrow to move the image

  12. In the Image Settings side panel, expand Options.
  13. For Image Alt Text, type People enjoying their park.
  14. In the Image Settings side panel, click Layout and click Customize.
  15. On the navigation bar, 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. For more information, see Configure global navigation and menu links.

  1. In the Customize side panel, click Header.
  2. In the Header side panel, expand Branding.
  3. Under Branding, turn off Name.
  4. For Logo, click Upload and choose cpp-logo.
  5. Expand Menu, click Add Link, and choose to existing content.

    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.

  6. In the Add Content window, under Collection, click Feedback.
  7. Search for and select Adopt a Park Form.

    Adopt a Park Form survey

  8. Click Select.
  9. In the side panel, under Menu, click Add Link and choose to link.
  10. For Link Name, type What is Open Space?

    This link appears in the navigation bar on your site.

  11. For Link Destination, copy and paste the following URL: https://www.epa.gov/G3/green-streets-and-community-open-space
  12. Click Save.

    Next, you'll configure the background and text color for the header and navigation bar. These features are resized on mobile devices, and by choosing white and black colors, you're ensuring that both features remain accessible on smaller screens.

  13. On the side panel, click Customize and click Theme.
  14. If necessary, for Global Nav Background Color, type #ffffff.
  15. For Global Nav Text Color, type #000000.
  16. If necessary, for Header Background Color, type #ffffff.
  17. If necessary, for Header Text Color, type #000000.

    Background text color settings

  18. 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. Click Customize and scroll to the bottom of the page.
  2. Open theFooter section..

    Footer Settings section

    The Footer side panel appears.

  3. In the side panel, click None.
  4. In the Contact row, click the Edit button.

    Edit the Contact row.

  5. In the side panel, for Text Color, type #ffffff.
  6. For Background Color, type #32444d.
  7. Remove all text and type Acknowledgements.
  8. For Acknowledgements, type 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.

  9. Highlight all text.
  10. In the Text Editor, click the Paragraph button and choose Center alignment.

    Center alignment button

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

    Style Acknowledgments with Header 1

  13. 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.

    Row inserted between the Introduction and Footer rows

    The Row Setting side panel appears.

  2. Under Layout, click Wide.
  3. For Text Color, type #ffffff. For Background Color, type #6a9ab0.
  4. Click Layout and drag a Text card onto the empty row.
  5. 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.
  6. Press Enter to add a line before and after the text.
  7. Highlight all text.
  8. Click the Style button and choose Header 2.

    Engagement instructions

  9. Add an Image card to the right of the Text card.

    The Image Settings side panel appears.

  10. Under Image Settings, click Upload and click Browse for Image.
  11. Upload map_image4.
  12. Move the image two spaces to the right.

    Instructions and map image

  13. 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. Add a Row card below the instructions row.
  2. In the Row Settings side panel, for Layout, click Box.
  3. For Background Color, type #f5fcfc.

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

  4. Add a Text card to the row.
  5. In the Text card, type a single space.
  6. Under the Text card, add a Survey card.

    The Survey Settings side panel appears.

  7. Under Survey Settings, 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 and select William Land Parks Improvement Feedback. Click Select.

    Select a Survey window

  10. In the Survey Settings side panel, under Survey Settings, click Embed.

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

  11. For Height, type 945.
  12. Ensure Show Header is turned on.

    Embedded survey

  13. 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 Settings side panel appears.

  2. Under Map Settings, click Select Map.
  3. Search for and select Community feedback for William Land Park.
  4. In the Map Settings side panel, under Options, turn on Title and Enable Map Legend.
  5. For Height (px), type 900.

    Embedded map

  6. Below the Survey and Map cards, add a Text card with a single space.
  7. 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 and Footer rows.
  2. In the Row Settings 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.

    Instructional text

  5. Below the second line, 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.

    Unordered list formatting

  7. Style the list to Header 3.
  8. To the right of the Text card, add an Image card and upload mailbox_image5.
  9. Move the image two spaces to the right.
  10. Below the Text card, add a Follow Initiative card.
  11. In the Follow Settings side panel, delete the text in the Call-to-Action field. Click Layout and click Customize.
  12. Click Theme. For Button Background Color, type #6a9ab0.
  13. Click Save.
  14. On the Edit Navigation bar, click the Share button and on the side-panel click Public.

    Public visibility setting

  15. On the Edit Navigation bar, click View.

    Viewing the site allows you to review how your site will appear to your users. You can explore the functionality of the survey and map as well.

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

    Edit button

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

  17. On the Edit Navigation bar, click William Land Park Improvement Initiative and click Community.

    Initiative menu

    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. By default, every new initiative is shared with the core team, which is just you until a team member is added. 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 lessons in the Learn ArcGIS Lesson Gallery.