Skip to main content

Module - Grids

Default Migration User
Updated

Introduction

The grid module organizes site content into a cohesive layout, enabling customization of appearance and user interactions. Options include shape, size, title, sort, and filter. You can also create multiple tabs with distinct filters and sorting for effective content categorization.

 

Add a Grid module

  1. Click the gear icon in the upper right of the software.

  2. In the left navigation panel, click Pages in the Layout section.

  3. Click the desired page (or create a new page if needed). You can now customize this page. 

  4. In the left-hand panel, click the + to add a module. 

  5. Choose Grid from the list of modules. Grid will now be displayed in the left-hand panel.

  6. Click on Grid in the left-hand panel to configure the module. 

  7. Configure the following:

    • Name: Give the Grid a unique Name so that you can identify it later. The name doesn’t appear on the site page.

    • Tabs - Data Filtering: See instructions below. 

    • Show Title: When a title is selected for the grid, it will be displayed above the grid. This is on by default.

    • Show Filter Options: When selected, the front-end user can filter content. 

      Show Sort Options: When selected, the front-end user can sort content. For example, speakers can be filtered alphabetically by title. 

    • Variant: This allows you to choose the module shape from the drop-down menu. For example, Circular, rounded, or square. Note that a square can be a rectangle; it just means it has hard corners instead of rounded corners. The screenshot above is displaying a circle.

    • Text Align: This allows you to set the alignment of the titles of each slide (not the module title). Options for: Center, Left, and Right. We recommend using Left for most content, but Center for speakers (because they are circular).

    • Slide 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.

    • Spacing: 10 is the recommended spacing between each item on your grid. 

    • Item Title: Choose this option if you wish to display the title of the content. For example, if you have configured your groups with a title, that title will display beneath the group (as shown in the screenshot above).

    • Item Description: Choose this option if you wish to display the description of the content.  For example, if you have configured your groups with a description, that description will display beneath the group.

    • After completing your configuration, click the X at the top of the settings to collapse the grid configuration settings.

    • Click Save Page. 

Grid - Tab filtering options

  1. To begin, locate the Tabs - Data Filtering section in the left-hand panel.

     

  2. Use the + icon to add new tabs.

    • The content you pull and organize will be shown within a grid.

    • If you create multiple tabs, the Page will display each as an individual tab 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 as the first, leftmost. If only one tab is created, it will represent the entire page, and you will see no tabs.

       

       

  3. Configure tab settings. Settings will vary based on the type of content you select for each tab.  

  4. Choose the desired Content Type. The filter options will vary based on this selection. See the table below. 

 
 
 
 

Content Type

 

Filter Options

 
 

Content Type

 

Filter Options

 

Speaker

Tags(N/A at this time)

Dates: These options are pulled from the date sections within the speaker info page.

Time Ranges:

Specific: This option gives you a drop-down labeled Range and a Date field.

  • Previous: Choosing this option gives you an additional field labeled Days

  • Relative: This option gives you a drop-down labeled Value with time frame options.

  • Upcoming: Choosing this option gives you an additional drop-down labeled Days.

Sort Content:

  • Sort By:  

    Alphabetical: grids are sorted by speaker title alphabetically, with numbers appearing before letters

    Newest: The grids are sorted by speaker release date, with the latest releases appearing first

    Start Date: The girds are sorted by the nearest start date, with speakers starting in the past appearing last and the most recent start date appearing first.

  • Sort Order:

    • Ascending/Descending:

      All speakers, regardless of their dates, should be returned in an alphabetically organized fashion (NOTE: speakers that start with a number should appear before speakers that don’t in the Ascending fashion and vice version in the Descending fashion)

              Ascending: A - Z

              Descending: Z - A

 

Groups

Tags N/A at this time

Dates: 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.

  • 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 you choose After and add 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 Groups starting After May 31 and After June 31 only shows Groups meeting both criteria.  Groups I am a member of: If enabled  on groups that user is a member of will be displayed. 

Groups I am a member of: When enabled, only the groups to which the user belongs will display in the grid.

Privacy Level: Control which groups are displayed based on the privacy setting of the group. 

  • Public: Displays on groups listed as Public in the privacy setting within the group.

  • Private: Displays only grous listed as private in the privacy settings within the group. 

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 latest releases appearing first

 Sort Order: Sorting will be dependent on the Sort By selection.

  • If Sort By is set to 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

  • If Sort By is set to Newest: 

    All Groups whose Release Date IS NOT null and is before today AND whose End Date is after today

    • Ascending: oldest to newest

    • Descending: newest to oldest

 

Sessions

Tags N/A at this time.

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 latest releases appearing first

Sort Order: The sort order will be different based on the Sort By setting. 

  • If Sort By is set to 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

  • If Sort By is set to Newest:

    All Sessions 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

 

 

 

Related articles

Comments

0 comments

Please sign in to leave a comment.