Portal authors will need to take the AEM basic training:
- AEM Part A and
- AEM Part B on ConservationTraining.org.
After taking the basic training, you should have the skills needed to author basic pages, page properties, and most components. The resources on this page will help authors understand the role of different pages and components on the portal and how to author some of the components not covered in the basic training.
The overview video (~18min) will cover the basic navigation and layout of the portal, and the following resources will go over individual component authoring.
For help and questions you can reach out to JFalcao@tnc.org.
Portal Overview
Watch the short video walkthrough of an example donor portal.
Portal Layout - Images
There are a few steps to follow to include collections of images on the portal. If you plan to have collections of images displayed on the My Library page of the portal, you will need to follow the steps below in order.
- Photo Folders - before you create a photo album page, a portal component page with a photo album detail component, you will need to create a folder with images. In the Assets console, navigate to the Portal folder, and then the folder named for your donor. With the donor folder highlighted, create a new folder and name it after the photo collection, such as "VLS Dinner 2019." Add all photos from that event to the folder, fill out metadata, and publish.
- Photo Album Detail pages - to create a new Photo Album page, create a new Portal Content Page as a child page under the My Library landing page. Fill out the page metadata. Then add and author a hero component. Then you will add the photo album detail component (C113) to the page. Use the folder that you created with images from a single event as the source for the photo album.
- Photo Album Aggregation component - the photo album aggregation component is added to the My Library page. It is important that you have added and published both photo folders and photo album detail pages BEFORE you try and author the Photo Album Aggregation (C112) component. Once you have done these two steps, you can add and author the photo album aggregation component. For assistance, watch the video below.
Portal Layout - Events
- Event Detail Pages - any events or trips that are pulled into the Events and Trips aggregation page must be individually authored as event/trip pages on the donor's portal. You cannot pull in events or trips posted in other places. You will need to author and event page as a child page to the Events & Trips portal page, and publish. Then the event will be pulled into the aggregation component, depending on the parameters that you set.
- See Event Authoring Tips at the bottom of this page for important event authoring information.
Portal Page & Asset Trees
See a labeled example page and recommended layout
Feature Collection component (C104)
Use on Portal: The feature collection is typically used as the hero image on the donor portal landing page. When the donor logs into the portal, this is the first component that they will see below the header.
Overview: The component includes a greeting to the donor and an opportunity to link them to content or contact info. The component also features 2-4 content items, which can include a new report, an interesting article, a new photo album posted, an event, and so forth.
View Component Example w/ Transparent Black Theme
View Component Example w/ Solid White Theme
Statistics component (C105)
Use on Portal: Typically found on the portal homepage below the feature collection and on impact detail pages below the hero image. It is used to highlight a donor's overall impact on the homepage and to highlight important project achievements on impact detail pages.
Overview: The C105 Statistics component is used to highlight important figures and statistics using numbers and icons. Icons are optional as are CTA links.
Feature Content Initiative (C86)
Use on Portal: Typically found on the portal homepage (also on the nature.org homepage) and below the statistics component.
Overview: This component is very visually appealing and can employ multiple CTAs, a Quote, and two images to bring the viewer into the highlighted content. On the portal we sometimes use the second image and the quote field for a quote about how much we value the donor with a headshot of the speaker.
Feature Content component (C13)
Use on Portal: The C13 Feature Content component is typically used on the portal landing page, below the feature content initiative component, to highlight an upcoming event or trip. C13 is also used as the main component on the Your Impact landing page to link to impact detail pages on the portal.
Overview: The component can be full bleed of a smaller variation. Typically, on the portal, the component is meant to entice a viewer to click on the CTA and view an event or an impact page. It provides enough detail with the photo, headline, and description to let donor know what they should expect to find at the link.
Image Mosaic component (C111)
Use on Portal: Typically used on the portal homepage below the Feature Content -Event component.
Overview: The Image Mosaic is often used on the portal to show a gallery of selected photos from a donors event or trip, or photos from a project that the donor supports. The component can feature 5 or 10 images.
Vimeo Video component (C115)
Use on Portal: Typically used in the body of impact detail pages to help describe the donor's impact on a project.
Overview: An impact page may feature a video of the project or a thank you video to the donor for their support of a project.
Globe component (C116)
Use on Portal: Typically used on the "Your History" (or Your Giving History) page beneath the RTE or Text asset component with a summary of the donors global impact.
Overview: The component is used to show the global impact of the donor's support. The places the donor has given to or volunteered can be plotted on the map to show their global reach.
View Example of Globe Hover (marker expands on hover)
View Example of Globe Detail (detail panel shows when marker is clicked)
List Hover (list item brightens and focuses upon hover)
View Example of List Detail (detail panel shows when list item clicked)
Map component (C24)
Use on Portal: The map component can be used in place of the Globe component, on the Your History landing page.
Overview: The map or globe is used to show the geographic impact of the donor's support. If the donor's giving is more geographically limited to a single area (like one country, state, or province) you might want to use the map component rather than a globe where all the markers would be gathered in one place.
Pie Chart component (C106)
Use on Portal: Typically used on the Your History/Your Giving History page below the Map or Globe component.
Overview: Component is typically used to show where the donor has focused support. The breakdown can be geographic/regional or by priority. Typically the Pie is used for geographic breakdown and the column component is more likely to be used for priority giving breakdown. The giving in each slice can be further subdivided to show a more detailed giving record, for example if divided by region, you could show states that have recieved funding within a North America slice.
Column component (C107)
Use on Portal: The column component is typically used on the Your History/Your Giving History landing page to show a breakdown of the donors giving by priority.
Overview: The Pie chart is more likely to be used to show giving breakdown by geography and the column chart is more likely to show giving breakdown by priority.
View Example - 10 stacked columns
Line Chart component (C108)
Use on Portal: The Line Chart component is typically used on the Your History/Your Giving History page below the Globe or Map component to show change over time.
Overview: The line chart is useful for showing changes in populations, in funding, in acreage, and other measurable variables over time. It could also be used on an impact detail page as part of a report on changes that have occured during the time that the donor has supported a project.
Scrolling Slideshow Component (C117)
Use on Portal: The scrolling slideshow component is typically used at the bottom of the Your History/Your Giving History landing page. Since the component essentially "locks in" the user to scroll through the milestones, it is recommended that the component is used as the last component on the page.
Overview: The scrolling slideshow is an immersive component that takes the user on a journey. There are infinite ways this component could be used. If we use a chapter board chair as an example, this might be used to explore the history of the Chapter they are serving. Or it could show their history with the chapter - when they became a member, when they joined the board, when they became chair, when they took a trip with TNC, when they joined the legacy club, and so on.
View Example Image (static)
Document Download component (C109)
Use on Portal: The Document Download component is used on the Your Library/Your Downloads landing page below the hero.
Overview: The component is used to collect all documents in one easily accessible place where they can be downloaded. Since the portal is password secured, this might be a place to include tax documents, project reports, annual reports, board books, proposals, and more. Documents can be searched, viewed by a list of titles or with thumbnails.
View Example - Thumbnails (thumbnail images will generate from first page of doc)
Photo Album Aggregation (C112)
Use on Portal: The Photo Album Aggregation component is used on the Your Library page below the document downloads and links to Photo Album detail pages to show all photo collections (albums) in one place.
Overview: The Photo Album Aggregation allows the donor to see all of their photos in one place, by switching to photo view, or to link to individual album pages. Photos may be from events or trips the donor attended or preserve or project site photos shared with the donor.
Video Aggregation (C114)
Use on Portal: The Video Aggregation component is typically used on the Your Library/Your Downloads page below the Album Aggregation component.
Overview: The Video Aggregation is used to gather all videos that have been shared with the donor in one place so that they can view them easily at any time. All videos must be on YouTube or Vimeo in order to be shared in this component.
Events & Trips Aggregation (C110)
Use on Portal: The Events & Trips Aggregation component is typically used on the Your Events & Trips landing page below the hero image.
Overview: The Events & Trips Aggregation component is used as the main tool that donors will use to see the upcoming and past events and trips to which they have been invited and to link to individual event and trip pages.
AEM Component Visuals
Authoring Tips for Event Detail Page
- Off Time: When you build an event detail page for the portal, you will fill out the page properties with the event times. This will automatically set an Off Time in the basic tab of the Page Properties. Because you want the event to show up in Past Events after it has passed, you do not want the page to unpublish. Therefore, when you complete the page properties, do so normally and save and close. Then, go back in and open the page properties and change the offtime to a date far in the future. Now the event will pass from the upcoming/future events tab to the past events tab when the event ends (because of the event end time authored in the template-detail tab) but the page will NOT unpublish until a far future date.
- RSVP field in C50 Event Details Component: When you are authoring the C50 Event Details component, you will have the option to include the RSVP field. If the donor is not attending or has not replied, leave the "Has The User RSVPed?" field to the default value of "No." Only change this to "Yes" if the donor has indicated that they are attending.
Authoring a Tab Container Component
- You may want to use the Tab Container on an Event Detail page in order to include an event overview and visit information. I recommend that you watch the video on the tab container component linked below, and read the style guide on Event Detail Pages:
- Video Tutorial
- Style Guide