The grid module is a tool for organizing and structuring content on your site. It allows you to arrange content into a cohesive layout. Through the grid module, you can customize the modules' appearance and user interaction with options such as shape, size, title, sort, and filter options. Additionally, you can set up multiple tabs within the grid module, each with different filters and sorting options, to categorize and manage your site's content effectively.
Table of Contents
minLevel
1
maxLevel
6
outline
false
type
flat
separator
pipe
printable
false
Creating a grid module
Select the + to the right of the Page Title and select Grid.
Select the new Grid item that appeared in the content menu below to start configuring your new grid module.
Module
...
Configuration
Name: Give the grid a unique Name so that you can identify it later. The name doesn’t appear on the site page.
Fill out the fields listed below to customize your grid.
Select Save Module to save your changes when finished.
Tabs - Data Filtering
Tab Label
Content Type
Filter content
Specific to COURSE content type
...
Specific to GROUP content type
...
Sort Content
...
This is how you filter which content is pulled into the module and how it’s sorted.
Info
To create a simple grid without tab navigation, just create one tab. Once you create more than one tab, tab navigation appears.
Select the + to create a new tab.
Select the new Tab Menu Item to open a dialog. Fill out these fields:
...
Give your Tab a name that will be seen by the front end users.
Choose the content you want pulled into the module
Options include:
Course
Group
This is how you choose which content type is pulled into the module. Select the content type from the drop-down menu.
Note
The page builder is used for courses and community at this time. You might see other options as they are in progress, but you should only build a course or community pages at this time!
This was last reviewed .
Default - Off:
When selected additional options for:
Tags:
...
Tailor the module's appearance and user interaction through these fields:
Design options
Show Title
Check box: Default - On
when the check box is unselected:
the Title is not shown on the front end to users
Title
Add a title that will show above the module.
Show Filter Options
Check box: Default - Off
When selected:
Gives the front end user the front end user the ability to filter the content
Show Sort Options
Check box: Default - Off
When selected:
Gives the front end use the ability to sort the content
Variant
Select the module shape from the drop down menu. For example: Circular, rounded, or square. Note that “square” can be a rectangle; It just means it has hard corners instead of rounded corners.
Text align
Aligns the titles of each slide (not the module title). We recommend using Left for most content, but Center for speakers (because they are circular).
Item width and height
Input 355 (width) x 200 (height) for a standard 16:9 ratio image. This corresponds to the image size (800 x 450) that we request from clients for most rectangular images
Item spacing
10 is the standard recommended spacing.
Item title
Check this box to show the content’s title beneath the slide.
Item description
Check this box to show the content’s preview text beneath the slide.
Show progress
For courses only, check this box to show the progress indicator in the corner of the slide.
Setting up tabs
To begin, locate the Tabs - Data Filtering section.
Use the + icon to add new tabs.
The content you pull and organize will be shown within a grid.
If you create multiple tabs with different filters, the Page will display each as individual tabs above the grid for easy access.
You can reorder tabs by dragging and dropping them.
The tabs are aligned from left to right on the page, with the top tab being the first, leftmost tab.
If only one tab is created, it will represent the entire page, and you will see no tabs.
Configuring tab settings
Once you've created a tab, select it to adjust its settings.
Tab Label: This is the name visible to users if multiple tabs are created.
Content-Type: You can choose between Course, Group, and Session. Your selection impacts the filtering and sorting options available.
The Tab Settings window determines how the page/tab is pre-filtered and sorted, controlling how information appears when a user lands on the tab. Users can filter or sort the information further, but it will revert to the settings configured here upon leaving and returning.
Courses filter and sort options
Open the sections below for details on filter and sort options.
Expand
title
Course filter content options
Filter Content
Options
Options
Examples
Tags
Default Off
When selected, additional options appear for:
Required Tag(s): The content pulled Must have ALL of these tags
Optional
...
Tag(s): The content pulled Can have ANY of these tags
Exclude
...
Tag(s): Content with these tags will NOT be included
User Actions
...
Default
...
Off
...
When selected,
...
additional drop down appears for:
Optional User Actions:
Complete: Courses
...
the user has Completed.
Enroll:
...
Courses the user is Enrolled in.
Start: Courses
...
the user has started.
Waitlist add:
...
courses the User is Waitlisted for.
Dates
...
Default
...
Off
When selected
...
Date Type:
Close enrollment: Course is no longer accepting enrollment requests.
End Date: Course has ended.
Open Enrollment Date: Course enrollment has opened.
Release Date: When the course is viewable on the front end.
Start Date: The date the course can be taken.
Time Range:
Specific: At this exact date.
Additional options
Before, After, Between.
Previous: # of days
Relative: a period of time in relationship to a specified date
Additional options:
Last month, last week, last year, next month, next week, next year, this month, this week, this year, today
Upcoming: # of days
Dates: Deafult - Off:
When selected additional Options include:
Date Type:
Release Date:When the group is viewable/accessibleon the front end.
End Date: The group is over and no longer viewable/accessible on the front end.
Time Range:
Specific:
Previous:
Relative:
Upcoming:
Groups I am a member of:
Will only show groups the individual user is a member of.
Check box: Default - Off.
Privacy Level:
Check box: Default - Off:
When selected additional options include:
Public:
Private:
...
Your selected sorting preferences will determine the order in which content is displayed in the grid upon page load.
Note
As an admin, you have the capability to pre-sort the content displayed in a grid on your page/tab. This allows you to control what content users see first, enhancing their experience.
Warning
Once set you cannot remove them completely, you can only update them.
Sort By:
Alphabetical: Sorts content alphabetically.
Most Popular: Places the most popular content at the top.
Newest: Displays the newest content first.
Start Date: Sorts content based on the start date.
Upcoming: Highlights content with upcoming events or dates.
Sort Order:
Ascending: Sorts content in ascending order (A-Z).
Descending: Sorts content in descending order (Z-A).
Customize how the module looks with these fields:
Design
...
Show Title
...
Check box: Default - On
whenthe check box is unselected:
the Title is not shown on the front end to users
...
Title
...
Add a Title that will show above the module.
...
Show filters
...
Check box: default - Off
When the checkbox is selected:
Additional check box options appear:
Instructors:
Start Date:
Course tags are organized by Tag Types.
Dropdown lists all vNext tags, organized under Tag Types alphabetically.
Tags sorted alphabetically within each Tag Type.
Added tags automatically appear in Tag(s) field and allow front end users to filter content by those tag types.
...
Variant
...
Select the module shape from the drop down menu. For example: Circular, rounded, or square. Note that “square” can be a rectangle; It just means it has hard corners instead of rounded corners.
...
Text align
...
Aligns the titles of each slide (not the module title). We recommend using Left for most content, but Center for speakers (because they are circular).
...
Item width and height
...
Input 355 (width) x 200 (height) for a standard 16:9 ratio image. This corresponds to the image size (800 x 450) that we request from clients for most rectangular images
...
Item spacing
...
10 is the standard recommended spacing.
...
Item title
...
Check this box to show the content’s title beneath the slide.
...
Item description
...
Check this box to show the content’s preview text beneath the slide.
...
Show progress
...
a + icon becomes available so you can add multiple date types and time ranges to function on the tab simultaneously.
Date Type: Choose the date type you want from the list of options. Explanation of each in next cell.
Time Range: Choose the time range you want from the list of options. Explanation of each in next cell.
Date Types:
These options are pulled from the date sections within course settings. If I choose any date type I will be filtering the tab by that specific date on courses
Close enrollment:
End Date:
Open Enrollment:
Release Date:
Start Date:
Time Ranges:
Specific: Choosing this option gives you an additional drop down labeled Range and a Date field.
Previous: Choosing this option give you an addition field Labled Days
Relative: Choosing this option give you an additional drop down labeled Value with time frame options.
Upcoming: Choosing this option gives you an additional drop down labeled Days
When setting dates in the Grid Tab:
Date Type Selection: Choosing a Date Type filters courses based on that specific date.
Relative Timeframe: If selecting Relative and a timeframe, only courses matching the selected Date Type will appear if their date falls within the specified timeframe. For example, choosing Start Date and Next Week shows courses starting anytime the following week.
Before Date: When selecting Before and adding a Date, only courses with a date before the specified one will appear. For instance, picking End Date and May 27, 2023 displays courses ending before that date.
After Date: If choosing After and adding a date, only courses with a date after the specified one will appear. For example, selecting End Date and May 27, 2023 displays courses ending after that date.
Date Range: Choosing Between and setting a date range only shows courses with dates falling within that range. For instance, selecting End Date and From: May 27, 2023 To: June 27, 2023 displays courses ending between those dates.
Combining Restrictions: Each set of date restrictions acts as an AND statement, narrowing down the results. For example, filtering for courses starting After May 31 and After June 31 only shows courses meeting both criteria.
Expand
title
Course sort content options
Sort Content
Options
Example
Sort By:
Alphabetical: grids are sorted by course title alphabetically with numbers appearing before letters
Newest: The grids are sorted by course release date, with the newest releases appearing first
Start Date: The girds are sorted by the nearest start date, with courses starting in the past appearing last and the most recent start date appearing first
Sort Order:
Default: Ascending
Ascending: Changes depending on sort by options see next cell.
Descending: Changes depending on sort by options see next cell.
Alphabetical:
All Courses, regardless of their dates should be returned in an alphabetically organized fashion (NOTE: courses that start with a number should appear before courses that don’t in the Ascending fashion and vice version in the Descending fashion)
Ascending: A - Z
Descending: Z - A
Newest:
All Courses whose Release Date both IS NOT null and is before today AND whose End Date is after today
Ascending: oldest to newest
Descending: newest to oldest
Start Date:
All Courses whose Start Date field IS NOT null
Ascending: oldest to newest
Descending: newest to oldest
Group filter and sort options
Open the sections below for details on filter and sort options.
Expand
title
Group filter content options
Filter Content
Options
Options
Examples
Tags
Default Off
When selected, additional options appear for:
Required Tag(s): The content pulled Must have ALL of these tags
Optional Tag(s): The content pulled Can have ANY of these tags
Exclude Tag(s): Content with these tags will NOT be included
Dates
Default Off
When selected a + icon becomes available so you can add multiple date types and time ranges to function on the tab simultaneously.
Date Type: Choose the date type you want from the list of options. nation of each is in the next cell.
Time Range: Choose the time range you want from the list of options. The explanation of each is in the next cell.
Date Types:
These options are pulled from the date sections within Group settings. If I choose any date type, I will filter the tab by that specific date from the Group
Release Date:
End Date:
Time Ranges:
Specific: This option gives you an additional drop down labeled Range and a Date field.
Previous: This option give you an addition field Labled Days
Relative: This option give you an additional drop down labeled Value with time frame options.
When setting dates in the Grid Tab:
Date Type Selection: Choosing a Date Type filters Groups based on that specific date.
Relative Timeframe: If selecting Relative and a timeframe, only Groups matching the selected Date Type will appear if their date falls within the specified timeframe. For example, choosing Release Date and Next Week shows Groups starting anytime the following week.
Before Date: When selecting Before and adding a Date, only Groups with a date before the specified one will appear. For instance, picking End Date and May 27, 2023 displays Groups ending before that date.
After Date: If choosing After and adding a date, only Groups with a date after the specified one will appear. For example, selecting End Date and May 27, 2023 displays Groups ending after that date.
Date Range: Choosing Between and setting a date range only shows Groups with dates falling within that range. For instance, selecting End Date and From: May 27, 2023 To: June 27, 2023 displays Groups ending between those dates.
Combining Restrictions: Each set of date restrictions acts as an AND statement, narrowing down the results. For example, filtering for Group starting After May 31 and After June 31 only shows Groups meeting both criteria.
Groups I am a member of
Default: Off
No additional options
displays only groups the user is a member of.
Privacy Level
Default: Off
Public: The group is public.
Private: the group is Private
Public: Displays only groups that are listed as Public in the privacy setting within the group.
Private: Displays only Groups that are listed as Private in the privacy settings within the Group.
Expand
title
Group sort content options
Sort Content
Options
Example
Sort By:
Alphabetical: grids are sorted by Group title alphabetically with numbers appearing before letters
Newest: The grids are sorted by Group release date, with the newest releases appearing first
Sort Order:
Default: Ascending
Ascending: Changes depending on sort by options see next cell.
Descending: Changes depending on sort by options see next cell.
Alphabetical:
All Groups, regardless of their dates should be returned in an alphabetically organized fashion (NOTE: Groups that start with a number should appear before Groups that don’t in the Ascending fashion and vice version in the Descending fashion)
Ascending: A - Z
Descending: Z - A
Newest:
All Groups whose Release Date both IS NOT null and is before today AND whose End Date is after today
Ascending: oldest to newest
Descending: newest to oldest
Session filter and sort options
Open the sections below for details on filter and sort options.
Expand
title
Session filter content options
Filter Content
Options
Options
Examples
Tags
Default Off
When selected, additional options appear for:
Required Tag(s): The content pulled Must have ALL of these tags
Optional Tag(s): The content pulled Can have ANY of these tags
Exclude Tag(s): Content with these tags will NOT be included
Dates
Default Off
Not configured for Sessions yet.
Check back later for updates.
When selected a + icon becomes available so you can add multiple date types and time ranges to function on the tab simultaneously.
Expand
title
Session sort content options
Sort Content
Options
Example
Sort By:
Alphabetical: grids are sorted by Session title alphabetically with numbers appearing before letters
Newest: The grids are sorted by Session release date, with the newest releases appearing first
Sort Order:
Default: Ascending
Ascending: Changes depending on sort by options see next cell.
Descending: Changes depending on sort by options see next cell.
Alphabetical:
All Sessions, regardless of their dates should be returned in an alphabetically organized fashion (NOTE: Sessions that start with a number should appear before Sessions that don’t in the Ascending fashion and vice version in the Descending fashion)
Ascending: A - Z
Descending: Z - A
Newest:
All Sessions whose Release Date both IS NOT null and is before today AND whose End Date is after today