The grid module organizes site content into a cohesive layout, enabling appearance and user interaction customization. Options include shape, size, title, sort, and filter. You can also create multiple tabs with distinct filters and sorting for effective content categorization.
| Table of Contents | ||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
|
...
Creating a grid module | Module configuration | Design options | Setting up tabs | Configuring tab settings | Courses-tab filter and sort options | Groups tab filter and sort options | Sessions tab filter and sort options
...
Creating a grid module
| Anchor | ||||
|---|---|---|---|---|
|
Select the + to the right of the Page Title and select Grid.
Select the new Grid item in the content menu below to start configuring your new grid module.
Module configuration
| Anchor | ||||
|---|---|---|---|---|
|
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.
...
| Tip |
|---|
Remember to save your page updates when you are done editing any module to avoid losing progress by selecting the Save Page button. |
...
Design options
| Anchor | ||||
|---|---|---|---|---|
|
Tailor the module's appearance and user interaction through these fields:
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 ability to filter the content |
Show Sort Options | Check box: Default - Off When selected: Gives the front-end user the ability to sort the content |
Variant | Select the module shape from the drop-down menu. For example, it can be Circular, rounded, or square. Note that “square” can also be a rectangle; it just means it has hard corners instead of rounded corners. |
Text align | Align 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 see the title of the content 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
| Anchor | ||||
|---|---|---|---|---|
|
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
| Anchor | ||||
|---|---|---|---|---|
|
...
Once you've created a tab, select it to adjust its settings.
...
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 tab filter and sort options
| Anchor | ||||
|---|---|---|---|---|
|
Open the sections below for details on filter and sort options.
...
| Expand | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
...
Groups tab filter and sort options
| Anchor | ||||
|---|---|---|---|---|
|
Open the sections below for details on filter and sort options.
...
| Expand | |||||||||
|---|---|---|---|---|---|---|---|---|---|
| |||||||||
|
Session tab filter and sort options
| Anchor | ||||
|---|---|---|---|---|
|
Open the sections below for details on filter and sort options.
...