Documentation for the software we use:

Divi Builder (web page editor and WordPress theme)
https://www.elegantthemes.com/documentation/divi/

Divi Update Blog about new features
https://www.elegantthemes.com/blog/theme-releases

Divi Resources Blog with design ideas
https://www.elegantthemes.com/blog/divi-resources

WordPress
https://codex.wordpress.org/Main_Page

Gravity Forms (creates a form)
https://www.gravityhelp.com/documentation/

Gravity Flow (creates an application process using Gravity Forms)
http://docs.gravityflow.io/

Gravity View (displays submitted forms on the website) – we haven’t installed this yet
http://docs.gravityview.co/


How to Save an Excel File of Students On A Workflow Step

Sometimes you may need a mailing list of students stuck on one workflow step. such as those whose applications will expire because they lack a recommendation or payment. Here’s how.

1) In WordPress Dashboard click Forms > Import/Export.
2) In Export Entries select the Student Application form for your year.
3) Check only the fields you need, like Odyssey ID, first name, last name, primary email
4) At bottom check Conditional Logic and select “Workflow Step” and set to IS and after that in the selection box choose the specific workflow step that your students you want to mail are on.
5) At bottom click Download Export File and save an Excel sheet of those students on your PC.


Evaluating a New Student Application in the Workflow

WordPress users assigned to a role are allowed to evaluate applications. Scroll down to User Roles to learn how to assign roles.
Two Ways to Evaluate
1) Click a Link in an Email Notification. You’ll get an email each time an application is waiting to be evaluated, with a link to one student’s application. You will edit it on a special page on OdysseyAtlanta.org without having to login to the WordPress Dashboard. Note: there is also in every email a link to reach without logging in your Workflow Inbox which lists every student you need to evaluate. Click on one to open the application.
OR
2) Log in to WordPress Dashboard at https://OdysseyAtlanta.org/wp-admin
In WordPress Dashboard in black left column under Workflow click Inbox
In the Inbox list find the Application to work with and click it to open it.
To Evaluate An Application
1) Scroll up and down in the application to review the students answers.
2) The fields at bottom highlighted in green are where you must enter your evaluation. Most of your evaluation answers give each student a score, so later it’s easy to find the highest scoring applicants.
Saving Your Evaluation
 
The Update button saves your work. If you in WordPress Dashboard the Update button is blue and in the top right column of the student’s application.
If you used an email link and are viewing on the OdysseyAtlanta.org special page, the Update button is red and is at the bottom of the application.
Before you click the Update button select either option above it…
 
1) “In Progress” will save your work and let you finish later. The evaluation isn’t complete yet.
2) “Complete” will save your work and finish the evaluation, moving the applicant to the next step in the application workflow, ready for a final decision of Approve or Reject.

How to Approve/Reject New Student Applications

Before anyone will Approve/Reject students check that the messages sent to students are defined the way you wish in the Workflow in the New Student: Approve/Reject step. They are in the Email section in that step, look for Approve Email and Reject Email tabs.

Only WordPress users who are assigned the roles Director: Elementary, Director: Middle, or Director: HIgh can view in the Workflow Inbox any first-time students who need Appove or Reject action. Scroll down to User Roles to learn how to assign roles.

In WordPress dashboard the Workflow > Inbox that lists new students to approve/reject doesn’t let you know the student’s application score, so the easiest way is open two browser tabs, one on Workflow Inbox, and the second tab on Forms -> Entries > Student Application to show a list of applications and set up that list like this: Then set up Entires as follows:

1) To display only students who need Approve/Reject, atop Entires set the filter drop downs to: Workflow Step -> Is -> New Student Approve/Reject

2) When the entries list appears, to change the columns shown in the list, click the GEAR icon at top right. You probably wish to display Quiz Score Total and Quiz Percentage. The first shows total points, the second is percentile the students falls in. The Quiz scores come from the Student Application questions the Odyssey evaluator uses to score applications, which are Gravity Forms Quiz type questions that have been assigned scores (see https://docs.gravityforms.com/quiz-add-on/ for documentation.)

3) In the Entries list click the Quiz Score Total header twice. The first clicks sorts low to high, the 2nd click changes to hi to low.

4) Note the Entry ID for a top-ranked student you may wish to Approve, or a low ranked student who may wish to Reject.

You can’t Approve/Reject in a Gravity Forms list, so when ready, in the first tab in Workflow Inbox, find that student’s Entry Id and click it.

5) The Workflow Inbox screen opens showing the student’s application, so you can scroll to review it as needed, and in the top right column, are the Approve/Reject buttons, and a box where you can enter a note if needed. When you click either button the appropriate notification message is instantly sent to the student telling them they were accepted or rejected.

Another way to work would be to export a spreadsheet from Gravity Forms > Student Application selecting only New Students who are not Approve/Reject and sort the list in Excel by Quiz Score. Then use that list of Entry Id’s to lookup in Workflow Inbox.


Change a Recommender in an Application

1) In left black WordPress admin menu hover Forms then under it choose Entries
2) Find the student’s form and double click student’s name to open it.
3) Edit the recommender’s name and email address.
4) When done editing in right column of the editor click blue Update button.
5) Below the update button in Workflow box click View.
6) You will now be viewing in Workflow Inbox 
7) In right column under Admin for “select an action” choose under Send To Step choose Restart the Workflow.
That will send a new copy of application with the new recommender’s name in it to the student and then automatically move to next step to Email Application to Recommender.
Normally, you would not restart Workflow to beginning, but just use Send A Step to go right to the Email Application to REcommender. But since you edited the appplication to change that person’s name, in this case makes sense to restart the whole workflow to also send the revised app to the student, too.

Recover a Student’s Save and Continue Link

In a form the Save and Continue button when clicked goes to a web page that asks the user to then type in ANY email they wish, and then have an email sent there with a link to continue the form later on. Note that a user can give ANY email, not necessarily what was the primary email, etc. on the form. In other words, the Save and Continue email given has nothing to do with email fields on the form.

If a parent/student calls to say they lost their link,  when logged in as Admin in WordPress you can go to:

https://odysseyatlanta.org/wp-admin/tools.php?page=save-and-continue-link-recovery

Or in WordPress Dashboard click in black column on Tools then Save and Continue Link Recovery to get a list.

In that list, click on View Entry and it will display the application for a student, and the URL web address in the browser is the full link to email to a parent/student to get back to their application.

To find a student in the Recovery list requires looking to find the email address, and hopefully you will find the one the parent gave you.

But sometimes you may not IF they parent/student gave a different email to the Save and Continue popup.


Accepting a Cash or Check Application Fee

If a student pays an application fee by cash or check instead of using the online credit card form, you need to manually move the student off the payment form workflow step and onto the next step as follows…

1) In left black WordPress admin menu hover Forms then under it choose Entries
2) Find the student’s form and double click student’s name to open it.
3) In right column of the editor in Workflow box click View.
4) You will now be viewing in Workflow Inbox and need to
5) In right column under Admin for “select an action” choose under Send To Step choose Returning Student: Update 2018 Decision in Application. (No worry if the student is not a returning student because the workflow will know and automatically skip that step and move the student to New Student: Update 2018 Decision in Application.)
You will need to keep accounting records for cash or check payments because Stripe gateway only tracks accounting for credit card payments.

User Roles

In WordPress users are created with login credentials and then assigned to roles that define what they can/cannot do in the WordPress Dashboard.

The roles we use:

Director: High
Director: Middle
Director: Elementary
These are allowed to Approve or Reject First-Time Student Applications.

Evaluator roles exist for each grade level. These let the user grade Student Applications and then they are assigned to a Director to approve or reject.

To assign a user to one or more roles:
1) In WordPress Dashboard column at left click Users
2) Check the box to the left of the users to select one or more
3) Atop the list choose a role within either Add Role and click Add button, or Remove Role and click Remove.


Tricks for Editing Web Pages

Single Line Trick

When editing text in WordPress, when you click you Enter key, by default WordPress assumes you are starting a new paragraph, and adds extra space between the line above and the new line created. If you want to add a new line directly below without any space, then hold down the SHIFT key when pressing enter.  If by accident you get extra space between two lines, just put  your cursor in front of the second line, hit backspace to move it up to right of the line above, then hold SHIFT and press ENTER to move it directly below.

Section Colors

When adding a new section in the Divi Page Builder, by default it will have a white background. To use Odyssey’s standard blue background, change the Section in the Content tab so Transparent Background Color is Yes. This makes the section have no background color, letting the website’s default blue background show instead. Or course, you can turn Transparent off and then use any color background you choose, but it is good web design practice is to consistently use similar colors throughout the website.

The Color PIcker display that Divi shows when editing a section, row, or module is programmed with buttons for our standard Odyssey colors, so just click those buttons to choose our compatible colors which are…

#082e4e dark blue (body text)
#1e73be bright blue (our standard section background color)
#8fb9de skyblue (some section backgrounds)
#27c9b8 sea green – some section backgrounds
#ffffa0 light yellow – some section backgrounds
#7cda24 yellow green (donate button and some section backgrounds)
#dd3333 red (buttons and links – anything you want users to click on)
#d2e3f2 white blue (navigation header atop pages)
#00539a Odyssey logo (dark blue)

Text Colors

Within Divi modules, under the Design tab there is a Text Color setting that is by default set to Dark, which displays text in the dark blue color of the Odyssey logo. This works fine over light backgrounds, but you must always change this setting to Light when displaying text over dark backgrounds, which then displays text as white color.

Image Sizes

In our website, we define a Large Image at 1200 pixels wide or 800 pixels tall (whichever is greater) and also Medium Image at 600 pixels wide and 400 pixels tall (whichever is greater).  When you upload an image that is larger than this, it will be stored Full Size in original size in the Media Library, but when you use it on a web page, never use Full Size as this is too large and will download slow to mobile users, and then the browser is slowed because it must scale down the image size to fit on the page.

The solution: when using an image from the media library in a page or post, it is best to set that image’s SIZE box to either Large or Medium, depending how how wide it will display. For instance, for an image that will occupy 1/2 the width of a page or larger, or in the home page Slider slide show, use Large image.  For an image that is within a 1/3 or 1/4 width of page, use Medium.  The Divi theme will automatically then size the image up or down to fit the width of the column it displays within.

Website Width

When using a Standard Section within the Divi Page Builder, a Row by default displays 1331px (pixels) wide which fits well on PCs with 1366px wide screens, which is currently a common PC display.  On larger PC displays such as 1920px, this leaves space on either side of the row.

You can optionally within any Standard Section edit any Row in the Design tab and set Make This Row Fullwidth to Yes, in which case the row will expand to occupy almost the entire screen width on any PC. This is appropriate for some content, such as Video Slider or photo Gallery, but sometimes inappropriate for text blocks which are more easily read when confined to narrow columns. You can also Set Custom Width to Yes and the specify any row width in pixels you need, such as 1000px if you want the page to display in a narrower space.

On smaller tablets and mobile phones Divi automatically rearranges content to display full width on that device, ignoring the Row widths. While rarely needed, it is possible to apply the Custom Width settings to tablets and phones as described in the Divi documentation about Row settings.

In Divi How to Create Links to Page Areas

You can create a link that scrolls to any section, row, or module on a Divi page as follows.
  1. First, you must add a CSS ID to the section, row or module. In Divi Builder click on its hamburger button (3 lines) to edit it and then click on the Advanced Tab. There in the CSS ID box enter a name. It cannot have spaces, so use a – (hyphen) to separate words. For example, application-form
  2. Once you’ve added a CSS ID to a section, row or module, then you can link to it.
  3. If your link is on the same page, you can just create a link to /#application-form  (the name of your CSS ID with a # sign in front.) Of course, your link can be added to a word or words within text, or the URL that a button goes to.
  4. If you want to link to this item from a different page, then you need to make your link the domain plus page name followed by /#application-form . For instance, https://odysseyatlanta.org//my-page-name/#application-form
That will take the user to the new page and then scroll to the specific item with that CSS ID.
A Divi page can also have a special side menu that let’s users easily reach any part of a page. See Single Page Navigation at https://www.elegantthemes.com/documentation/divi/one-page-website/

In Divi How to Hide a Section, Row, Column or Module

To hide a section, row, or module, edit it and click on Advanced panel in the CLASS box for the item enter: hide

In a row on Advanced panel is also a CLASS box for each column. To hide the column enter: hide

In Divi How to Vertically Center Column Content

Sometimes you have one or more columns within a Divi row, and you wish the content (text, image, etc.) in each column to center vertically in the middle of the column. Here’s how…

  1. Edit the ROW and in Design panel set Equalize Column Heights to Yes
  2. In the ROW Advanced panel for Column 1 CSS Class enter: vertical-center
  3. Also enter vertical-center in any other Column CSS Class that also needs to be centered vertically.

In Divi How to Create 5 to 10 Columns

While Divi normally allows up to 4-columns in a row, it is possible to display 5 to 10 columns within a row, like we did for the 5 graphic icons on the Quest Run page. Here’s how…
1) Create a row and assign a 1 column layout to the row
2) Edit the row in the Design tab by choosing either Set Fullwidth to Yes or Use Custom Width to Yes and then enter a width in PX (pixels) such as 1366px.
3) In the Advanced tab for the row in CSS class enter five-columns to create 5 columns, or ten-columns to create 10, etc.
4) Save & Exit the row.
5) Into the single column for this row, create a number of modules equal to the number of rows you specified (create 5 modules for 5 columnns). While in the Divi Page Builder they stack atop each other within 1 row, the CSS Class you added to the row will make them display on the web page within a single line in that row, with each module in one of the 5 columns, in the order they are stacked in Page Builder within the single column.


In Gravity Forms Control Capitalization for Data Collected

In Gravity Forms for any field you can now click on Appearance tab and in the Custom CSS Class box optionally enter one of these:

  • capitalize – will force any entry in this field so every word has first letter capitalized and rest lower case
  • upperlower – best for name fields, if user enters all uppercase or all lowercase it converts to capitalized, but if user enters both upper and lower it leaves it as user typed it. This keeps McAfee or O’Neil instead of making Mcafee or O’neil
  • uppercase – will force the entry to all uppercase
  • lowercase – will force the entry to all lowercase. I always apply this to email address fields so they are all lower. Email addresses are not case sensitive.
  • readonly – user can only view but not edit this field

Gravity Forms OdysseyID Field

The OdysseyID is important because if it exists in every form’s data we can link data in both together in reports. The Gravity View Form Connector has the ability in a Workflow to copy the id (and other fields) from the Student Application form into another form later on in the workflow, insuring that these two forms belong to the same student.

Any form, such as the application form, can automatically create an OdysseyID composed of the first 3 letters of the last name, first 3 characters of the first name, followed by numbers for birthdate in format mmddyyyy. Example: COHJEF03011977

Steps to do this in a form…

  1. In form add the Name field, and for it click on Appearance tab and in the Custom CSS Class box enter odysseyidname
  2. Anywhere in the form, but AFTER the Name field, add a Date of Birth field styled as month, day, year boxes, and add the Custom CSS Class odysseyiddate
  3. Anywhere in the form, but AFTER the Date of Birth field, enter a one-line text input named OdysseyID and in Custom CSS Class write two classes: odysseyid readonly

Readonly class makes sure the user cannot edit this field.

You can add in Gravity Forms a good description for the field: This is your OdysseyID composed for your name and birth date. You cannot change it.