Documentation for the software we use:
Divi Builder (web page editor and WordPress theme)
Divi Update Blog about new features
Divi Resources Blog with design ideas
Gravity Forms (creates a form)
Gravity Flow (creates an application process using Gravity Forms)
Gravity View (displays submitted forms on the website) – we haven’t installed this yet
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
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
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:
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…
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:
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.
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)
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.
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.
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
- 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
- Once you’ve added a CSS ID to a section, row or module, then you can link to it.
- 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.
- 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
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…
- Edit the ROW and in Design panel set Equalize Column Heights to Yes
- In the ROW Advanced panel for Column 1 CSS Class enter: vertical-center
- 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…
- In form add the Name field, and for it click on Appearance tab and in the Custom CSS Class box enter odysseyidname
- 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
- 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.