The following are a few examples of the options available for displaying your directory. Please ask for assistance in setting this up. Once the page is displaying the directory, you will use the Connections plug-in to update the content. (This could be done by the Admin Assistant or an office aide to ensure accuracy and timely updates.) If you would prefer NOT to use the Connections plug-in and instead manually edit the directory page, see the examples at the bottom of the list. Make sure the format you use looks good on mobile devices (don't use a table).
Connections Examples
- #1 Tile Template https://goldenfields.jordandistrict.org/staff/
All on one page, searchable by letter or category, clickable to see bio, link to back to school info(or website or whatever). - #2 Tile Template https://jordanhills.jordandistrict.org/staff/
All on one page but manually organized into different categories. Not searchable or clickable other than email. This also utilizes the ORDER feature to display the Principal, Asst. Principal, Admin Asst. in the desired order instead of alphabetically within the category.
Connections - Block Editor Examples
The following examples use the Connections plug-in, but they are creating the directory using the block editor instead of the classic editor. There are good and bad things about the block editor, but it is a new way of editing pages that would take some time to learn if you aren't familiar with it. You can however switch between the classic editor and the block editor. So you could just use the block editor for your directory pages and use the classic for everything else.
- #3 Block Card-flip Template https://montevista.jordandistrict.org/staff/
This example demonstrates the card template with a round picture and rounded borders on the card. It uses the flip feature to show the email when hovered over. There are some other interactive options as well. - #4 Block Card Template (with email icon) https://terralinda.jordandistrict.org/staff/ This shows the card template with square borders and a square picture. It also uses an email icon instead of displaying the actual email address which is so long that it often does not fit on one line. This is done by using the social media icon for email and entering the email in that field instead of the email field. It is probably wise to enter the email in both locations when adding staff members. That way you have both options.
Non - Connections Examples
The following are created manually without the Connections plug-in and database. This allows you to create the layout exactly the way you want it but does take a bit more work initially and more work to maintain it. Be careful when using this approach that when you update images and emails that you replace the email link to reflect the new person. This sometimes is overlooked.
- #5 Manual - All on one page https://rosecreek.jordandistrict.org/about/faculty-staff/
This layout was created using a 3 column layout for each row. When there aren't 3 staff members to fill a row, an empty column is still included. Insert a horizontal rule(hr) between each section might help add clarity to this layout. If an hr is added, a [clear-fix] utility shortcode would likely need to be added between sections as well.
- #6 Manual - Separate pages https://riverside.jordandistrict.org/office-support-staff/
This layout is similar to the one above but has different categories on separate pages. This allows users to find the category they are looking for quickly instead of scrolling through a long list (especially on a mobile device). - #7 Manual - No images https://coppercanyon.jordandistrict.org/faculty/office/
This option does not use images and separates the categories into pages. Using images is recommended if possible. Avoid using a table for your directory as that does not look as good on mobile devices.