Contacts

First, you would have had to create contact groups and new contacts. If you do not recall these steps, follow the ‘How to create contacts in your ProudCity powered government website‘ guide.

The contact list widget will display a list of staff members based on the selected group on an existing page.

1. Navigate to an existing page
   • Note: You should know you are on a page when the admin bar on top states ‘Edit page’
2. Click ‘Edit page’
3. Enable page builder by clicking on the ‘Pagebuilder’ tab, if there is no option to click on the tab, the page builder layout is enabled.
   • Note: In order to use the contacts list widget, the page builder has to be enabled
   • 
4. Click on the ‘Add widget’ icon tab
   • 
5. Add page title by selecting the ‘Page title’ widget
   • Note: You can scroll through the widgets or type in the widget name on the search bar.
6. Click on the ‘Add widget’ icon tab
7. Add the ‘Contact list’ widget
   • 
8. Hover over the ‘Contact list’  widget and click edit
   • Add widget title
   • Pick the category(ies) to display
   • Select display style
     • Contact lists are commonly displayed in the ‘Table View’ style but you can always go back and change the style that best matches your ProudCity site.
   • Insert a number of posts to show in the ‘Number of post to show’ field
     • Enter 0 for ‘Number of posts to show’ in order for all staff members that are attributed to the selected category to display.
     • Select ‘Sort By’ option
     • Select ‘Hide Columns’ option
       • If your contact list widget is being used on a department page, it is recommended to hide ‘Department’ and ‘Social’.  This eliminates redundant information and allows for a cleaner look.
       • Hide certain columns if they do not pertain to the list you’re creating.
     • Click done
   • 
   • 
9. Click ‘Update’
10.  Click ‘View Page’ on the top admin bar or  the permalink to view page
    •  Note: To go back into the page admin functionality click on ‘Edit Page’ on the top admin bar.

By creating a new contact that has staff member name, position, label, and form of communication either email or/and phone. We use labels to distribute where the contacts display throughout the site.

1. Got to the dashboard
2. Click on the ‘Contacts’ icon or the ‘Contacts’ label on the left navigation bar
3.  Click on ‘Add New’
4. Add new staff member
   • Type in staff name
5. In the ‘Staff Member Info’
   • Position
   • Email
   • Phone
   • Optional fields – Facebook URL, Twitter Username
   • Try to be consistent with the information you fill in for each staff member.
6. Add staff member bio in the visual editor, this is optional
7. Add Staff photo, the photo will display similar to the feature image style
   • Headshot photos should be portrait orientation.
   • The tool is going to crop and resize images for responsive design, so before uploading the headshots,  crop out areas with lots of space around the face area such as background or even chest and torso.
   • Pick from the media library
   • Click ‘Set Staff Photo’
8. Pick Group(s)
   • The staff member can belong to multiple groups, select all that apply. For example, if someone should be displayed in ‘City Staff’ AND ‘Administration Staff’ you should select both groups. This would also be the case if someone should be displayed in the elected ‘Elected Official’ or  ‘Council’ group.
   • 

By creating group categories we are able to distribute where the contacts display throughout the site. This is commonly used for lists for specific departments such as ‘Administration Staff’ to list the employees that make up that department. If you have already created a group category please skip to the “Create a contact” or “Display a list of contacts on a web page” section.

1. Go to dashboard
2. Click on ‘Contacts’  on the left navigation bar
3. Click on  ‘Groups’ on the left navigation bar
4. Add new contact  group
   • Write a name for the group
   • Leave the ‘Parent Category’ dropdown with the default text of ‘None’.
   • Click ‘Click ‘Add New Group’
   •