In today’s digitally connected world, Premium Community Learning Initiatives are crucial for fostering growth, engagement, and positive change. ArcGIS Hub offers a robust platform to organize and amplify these initiatives by building dynamic websites and embedding essential elements like maps, apps, surveys, and more. This guide will walk you through creating an engaging website for a park improvement initiative, demonstrating how ArcGIS Hub can be leveraged for premium community learning initiatives.
Crafting Your Initiative
Let’s begin by creating an initiative, which automatically sets up a website that you can customize and populate. ArcGIS Hub’s intuitive drag-and-drop interface simplifies website building, while also providing the flexibility to edit HTML code for advanced customizations. This blend of ease-of-use and deep customization makes it an ideal tool for developing premium community learning initiatives that are both accessible and impactful.
- Sign in to your ArcGIS organizational account.
Note:
If you don't have an organizational account, [explore options for software access](/en/become-a-member/).
- On the ribbon, click the app launcher and select Hub.
Alt text: Access ArcGIS Hub platform for creating premium community learning initiatives through the app launcher.
The ArcGIS Hub home page serves as your central hub for managing **premium community learning initiatives**. From here, you can create and manage initiatives, add valuable content, and access community organization tools. Navigate back to this overview at any time by clicking 'Edit Navigation' and choosing 'Overview', ensuring you are always in control of your **premium community learning initiative**.
- Under ‘Initiatives’, click ‘New’.
Alt text: Initiate a new premium community learning project by clicking the ‘New’ button in ArcGIS Hub.
-
For ‘Title’, type ‘William Land Park Improvement Initiative’. This clear and concise title immediately communicates the focus of your premium community learning initiative.
-
Click ‘Create Initiative’.
Creating an initiative in ArcGIS Hub automatically sets up a website and three essential groups within ArcGIS Online. These groups streamline the management of your premium community learning initiative’s content, team members, and community followers. The site’s automatic sharing with the Core Team group ensures seamless collaboration among team members contributing to the premium learning experience.
After your initiative is created, a ‘Get Started’ window might appear, offering valuable introductory information about ArcGIS Hub.
-
If necessary, close the ‘Get Started’ window to proceed with customizing your premium community learning initiative.
Designing an Engaging Title Section
To ensure your premium community learning initiative resonates with a broad audience, including park visitors and community members, clarity and user-friendliness are paramount. A high-contrast title section with a compelling background image is the first step in creating an engaging and accessible learning environment. Let’s enhance the visual appeal of your initiative by designing a captivating title section.
-
Download the Images zipped folder.
-
Unzip the downloaded folder to a location you can easily access, such as your ‘Documents’ folder.
Next, we will upload one of these images to serve as the banner for your initiative. In ArcGIS Hub, content is structured into rows, and the banner will be the first, visually impactful row of your premium community learning initiative site.
-
In ArcGIS Hub, hover over the first row (the banner area with an image background and your initiative’s title). In the toolbar that appears, click the edit button.
Alt text: Edit the banner row to customize the visual appeal of your premium community learning initiative.
The 'Row Appearance' side panel will appear, offering design options specifically for this row. These options allow you to tailor the visual elements of your **premium community learning initiative** to create a more engaging and branded experience.
- In the ‘Appearance’ side panel, under ‘Background Image’, click ‘Upload’. Then, click ‘Browse for Image’.
Alt text: Upload a background image to enhance the visual context of your premium community learning initiative.
-
Navigate to the unzipped ‘Images’ folder and double-click ‘intro_image1’. This image will now be the backdrop for the banner, setting the visual tone for your premium community learning initiative.
The image is uploaded as the background for the row. To further enhance visual appeal and readability, we’ll adjust the row’s transparent background color to create a filter that complements the image, ensuring the text stands out in your premium learning environment.
-
For ‘Background Color’, type ‘#6a9ab0’.
Alt text: Set a background color to complement the image and improve text visibility in your premium community learning initiative banner.
##### Note:
The default background transparency for this row is set to 30 percent. You can adjust this using the 'Image Transparency' parameter at the bottom of the 'Appearance' side panel to fine-tune the visual effect of your **premium community learning initiative**.
Next, we'll refine the title text to be more impactful.
- Hover over the title text in the banner row. Above the text, on the ‘Text’ toolbar, click the edit button.
Alt text: Edit the title card settings to refine the message of your premium community learning initiative.
The text area will become editable, allowing for direct modifications.
-
Delete all of the existing text.
When editing text in ArcGIS Hub, you have access to text formatting tools, as well as the option to insert custom HTML and CSS code for more advanced styling. For this premium community learning initiative, we will utilize the latter for greater control over the title’s appearance.
-
At the bottom of the row, click the ‘Edit in HTML’ button.
Alt text: Access the HTML editor for advanced customization of your premium community learning initiative title.
An HTML editor will pop up. We'll add HTML and CSS code to enlarge the title and banner, creating an immediate and lasting impression on users, which is vital for a **premium community learning initiative**.
- In the HTML window, delete any pre-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>
-
Click ‘Apply’. Above the text, on the ‘Text’ toolbar, click the edit button again to save your edits.
New initiative sites in ArcGIS Hub come with pre-populated template content to guide users. However, for a truly customized and premium community learning initiative, we need to remove any template elements that aren’t needed. Let’s delete the default template rows to tailor the site to our specific goals. In this case, we will remove 10 rows of content situated between the title row and the contact row.
-
Scroll down and hover over the ‘Our Progress So Far’ row. On the toolbar next to the row, click the delete button.
Alt text: Delete unnecessary rows to customize your premium community learning initiative site.
A confirmation window will appear, asking you to confirm the deletion of the row.
- In the ‘Remove row from layout’ window, click ‘Remove’.
- Delete the following rows in the same manner:
- 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
- On the ribbon, click ‘Save’.
Alt text: Save your changes to ensure the premium community learning initiative site reflects your customizations.
Your customizations are now saved, ensuring your **premium community learning initiative** site is taking shape.
Defining the Initiative’s Purpose for Premium Learning
Clearly outlining the purpose of your initiative is critical for engaging your community and fostering effective learning. In this section, we’ll add explanatory text and images to define the initiative’s goals, emphasizing how public participation can contribute to a premium community learning experience. We’ll create a new row and incorporate a text card detailing how the public can participate in park adoption.
- If necessary, in the side panel, click ‘Customize’ to return to the customization options.
Alt text: Return to the Customize side panel to further refine your premium community learning initiative.
- In the ‘Customize’ side panel, click ‘Layout’.
Alt text: Access layout options to structure the content of your premium community learning initiative.
- In the ‘Layout’ side panel, drag a ‘Row’ card below the title row and drop it in the ‘Insert below’ drop zone.
Alt text: Insert a new row to add content defining the purpose of your premium community learning initiative.
An empty row is now added. We will drag a text card into this row to articulate the initiative's purpose and learning objectives.
- In the ‘Row Settings’ side panel, click ‘Layout’ to navigate back to the Customize panel.
Alt text: Navigate back to the Layout settings to add more content elements to your premium community learning initiative.
You will be taken back to the 'Customize' panel, where you can add various content cards.
- Drag a ‘Text’ card into the empty row and drop it in the ‘Add to Row’ drop zone.
Alt text: Add a text card to the new row to explain the purpose and learning objectives of your premium community initiative.
A text editor will appear, allowing you to input the descriptive text.
- 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.’ This clear and direct message encourages community participation and sets the stage for collaborative learning within your premium initiative.
- Highlight the text. Click the ‘Style’ button and choose ‘Header 2’ to give prominence to this key message within your premium community learning initiative.
Alt text: Style the text as Header 2 to emphasize the initiative’s purpose in your premium learning site.
-
Deselect all of the text.
-
Press Enter to add a line space before and after the sentence, improving readability and visual separation within the premium learning content.
-
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 will appear, ready for image upload.
-
In the ‘Image’ side panel, click ‘Upload’ and then ‘Browse for Image’. Upload ‘park_image2’. This image adds visual context to the initiative’s purpose, enhancing the overall premium learning experience.
The image is now added to the row. To ensure visual harmony and alignment with the text, we will adjust its size.
-
Hover to the right of the image card and click the arrow to resize it.
Alt text: Resize the image card to achieve visual balance in your premium community learning initiative layout.
The image size is reduced to better align with the text. To improve accessibility and SEO for your **premium community learning initiative**, we will add alt text to the image.
- In the ‘Image Settings’ side panel, expand ‘Options’. For ‘Image Alt Text’, type ‘People enjoying their park’. This descriptive alt text ensures accessibility and SEO optimization for your premium community learning initiative.
Alt text: Add descriptive alt text to the image to improve accessibility and SEO for your premium community learning initiative.
- On the ribbon, click ‘Save’ to preserve these changes to your premium community learning initiative.
Configuring Branding and Global Navigation for Premium Experience
Branding and navigation are essential for creating a cohesive and user-friendly premium community learning initiative. Let’s add your organization’s logo and theme the site to reflect the park’s aesthetic. We will also configure the global navigation bar to enhance user experience and site navigation, critical components of a premium learning platform.
Note:
For more information, see Configure global navigation and menu links.
- In the ‘Image Settings’ side panel, click ‘Layout’ and then ‘Customize’ to return to the main customization options.
- In the ‘Customize’ side panel, click ‘Header’.
Alt text: Access header settings to configure branding and navigation for your premium community learning initiative.
- In the ‘Header’ side panel, turn off ‘Name’. We will replace the default name with a logo for better branding of our premium community learning initiative.
Alt text: Turn off the default name to customize the header with a logo for your premium community learning initiative.
-
For ‘Logo’, click ‘Upload’ and then ‘Browse for Image’. Navigate to your unzipped ‘Images’ folder and upload the ‘cpp-logo’ image. Adding a logo enhances brand recognition and provides a professional touch to your premium community learning initiative.
The logo is now added to the top of the initiative, above the first row. Next, we’ll add a preconfigured survey to gather user feedback, a key element for premium community learning initiatives that value community input.
-
Expand ‘Menu’. Click ‘Add Link’ and choose ‘to existing content’.
Alt text: Add a link to existing content to integrate valuable resources into your premium community learning initiative.
- In the ‘Add Content’ window, under ‘From’, click ‘World (Public)’. Under ‘Collection’, click ‘Feedback’. This will help us find relevant surveys to incorporate into our premium community learning initiative.
Alt text: Filter content by ‘World (Public)’ and ‘Feedback’ collection to find relevant surveys for your premium learning site.
- In the search bar, type ‘Adopt a Park Form (Learn ArcGIS)’ and press Enter.
- In the list of results, check the box for ‘Adopt a Park Form (Learn ArcGIS)’. This survey is perfect for gathering community feedback for our park improvement premium community learning initiative.
Alt text: Select the ‘Adopt a Park Form (Learn ArcGIS)’ survey to integrate into your premium community learning initiative.
- Click ‘Save’. The survey is now added to the side panel menu, making it easily accessible to users of your premium community learning initiative.
- In the side panel, for ‘Adopt a Park Form (Learn ArcGIS)’, hover over the settings button and choose ‘Edit’.
Alt text: Edit the settings of the ‘Adopt a Park Form’ survey to customize the link name in your premium learning platform.
The 'Edit Link' window will appear, allowing us to customize the link name.
-
For ‘Link Name’, delete the ‘Learn ArcGIS’ text, so that the link name is simply ‘Adopt a Park Form’. Click ‘Save’. Simplifying the link name enhances clarity and user experience in your premium community learning initiative.
We will also add a link to a site providing more information about open space, adding educational context to our premium learning initiative.
-
In the side panel, click ‘Add Link’ and choose ‘to link’.
-
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. Providing external resources enriches the learning content of your premium community learning initiative.
-
Click ‘Save’. Both of the links you’ve added will now appear in the header above the first row, next to the logo, providing easy navigation for users of your premium community learning initiative.
Alt text: Header of your premium community learning initiative site, featuring a logo and navigation links.
- Click ‘Save’ to ensure all header and navigation configurations are saved for your premium community learning initiative.
Adding Attribution to the Footer for a Trustworthy Premium Initiative
Footers provide space for essential information, such as contacts, terms of service, calls to action, and attribution for images. For a premium community learning initiative, proper attribution enhances trustworthiness and transparency. First, we’ll remove the default template footer and then design a custom, simple footer to give credit where it’s due and clarify the site’s instructional purpose.
- Scroll to the bottom of the initiative site.
- On the side panel, click ‘Customize’ to return to the customization options. Then, click ‘Footer’.
Alt text: Access footer settings to customize the footer of your premium community learning initiative.
The 'Footer' side panel will appear, offering customization options.
- In the side panel, click ‘None’. We will remove the default footer to create a custom footer that better suits our premium community learning initiative’s needs.
Alt text: Select ‘None’ to remove the default footer and create a custom footer for your premium learning site.
The default footer is now removed. Next, we'll edit the 'Contact' row to include acknowledgements and attribution, enhancing the credibility of our **premium community learning initiative**.
- Hover over the ‘Contact’ row. In the toolbar to the side of the row, click the edit button.
Alt text: Edit the Contact row to add acknowledgements and attribution to your premium community learning initiative.
- In the side panel, for ‘Background Color’, type ‘#32444d’. This sets a distinct background color for the footer, visually separating it and enhancing the professional look of your premium learning site.
- 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.
-
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.’
This attribution ensures transparency and gives credit to content sources, critical for a premium community learning initiative.
-
Delete any line breaks between each line of text to ensure a cleaner, more compact footer layout for your premium learning site.
-
Highlight all of the text. Click the ‘Paragraph’ button and choose ‘Align center’. Centering the text in the footer improves visual appeal and readability within your premium community learning initiative.
Alt text: Align the footer text to the center for improved visual presentation in your premium community learning initiative.
-
Highlight ‘Acknowledgements’. Click the ‘Style’ button and choose ‘Header 1’ to make it stand out as a clear section header in your footer.
The Acknowledgements section is now complete, providing essential attribution for your premium community learning initiative.
Alt text: Completed Acknowledgements section in the footer of your premium community learning initiative, enhancing transparency and credibility.
- On the ribbon, click ‘Save’ to finalize the footer design and attribution for your premium community learning initiative.
Adding Initiative Instructions for Enhanced Learning Engagement
Clear communication of your goals and how the community can contribute is crucial for maintaining audience engagement. For a premium community learning initiative, guiding users on how to interact and contribute is paramount. Next, we’ll describe the survey and illustrate how user responses have a real impact using a web map that displays results in real-time. This demonstrates the value of participation and enhances the learning experience.
- Between the introduction and footer rows, add another ‘Row’ card.
Alt text: Insert a new row to add instructions and enhance user engagement in your premium community learning initiative.
The 'Row' side panel will appear, allowing you to style the new row.
- For ‘Text Color’, type ‘#ffffff’. For ‘Background Color’, type ‘#6a9ab0’. This creates a visually distinct section for instructions, improving user guidance within your premium learning environment.
- Click ‘Layout’ to return to the ‘Customize’ side panel. Add a ‘Text’ card to the empty row.
- 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.’ This text clearly instructs users and highlights the impact of their participation in your premium community learning initiative.
- Press Enter to add a line before and after the text, improving readability and visual spacing in this instruction section of your premium learning site.
- Highlight all of the text. Click the ‘Style’ button and choose ‘Header 2’ to give prominence to these instructions, ensuring they are easily noticed by users of your premium community learning initiative.
Alt text: Engagement instructions styled as Header 2 to clearly guide users in your premium community learning initiative.
-
Add an ‘Image’ card to the right of the text card.
The ‘Image’ side panel will appear, ready for image upload to visually complement the instructions.
-
Click ‘Upload’ and then ‘Browse for Image’. Upload ‘map_image4’. This image provides a visual representation of the map and survey integration, enhancing user understanding and engagement in your premium community learning initiative.
-
Reduce the size of the image card so that the height of the image is approximately the same height as the text paragraph, ensuring visual balance and a professional layout for your premium learning site.
Alt text: Instructions paired with a map image to visually guide users and enhance engagement in your premium community learning initiative.
- On the ribbon, click ‘Save’ to finalize the addition of instructions and the map image to your premium community learning initiative.
With clear instructions and visual aids now integrated into your site, users will be more likely to understand the purpose of your premium community learning initiative and how to effectively interact with the map and survey, maximizing participation and learning outcomes.