To build your own module, start by choosing a layout. This guide lists all layouts and their configuration options. Go to our demo site to see the modules in action.
 Build your own module in two steps
|
|
Contents
How to choose a module layout
Rotators
Grids
Lists
...
How to choose a module layout
| Anchor |
|---|
| How-to-choose-a-module-layout |
|---|
| How-to-choose-a-module-layout |
|---|
|
Modules are grouped into two three categories: Rotators, grids, and gridslists.
Rotators scroll horizontally to show many items in a single row. They’re best for fitting a lot of content into a small vertical space. Grids show items in a grid pattern. They’re best for making sure items are always visible on the page. Lists display a large collection of content.
Follow these suggestions to select a specific module based on your content:
...
To list exhibitors, courses, or library on-demand content…
Square rotators, Two-column grids, and Multi-column grids show any specified content.
Infinite search grids List pages add a search bar and filter to a large collection (20+) of content.
| Include Page |
|---|
| REUSE - New course limitations warning |
|---|
| REUSE - New course limitations warning |
|---|
|
To list speakers…
Round rotators and Round grids show any specified speakers.
Round infinite search gridslist pages add a search bar and filter to a large collection (20+) of speakers.
...
Rotators
Featured rotator
| Anchor |
|---|
| Featured-rotator |
|---|
| Featured-rotator |
|---|
|
The featured rotator is a large banner used for featured content. It showcases one item at a time as it rotates. You can turn this module into a static banner image by only including one item total.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Rotator width | Select one:
Full width
Partial width | Total number of items |  Choose the maximum number of items in the module (recommend 3-7)
| 2 | Module title |  Remove title
Align title to the left, right, center, or bottom left
| 3 | Item titles | Remove overlaid item titles | 4 | Scroll | Turn off automatic scrolling
Change automatic scrolling speed 5 seconds
 Show or hide indicator dots or arrows |
|
...
An example featured rotator. See the configuration options above.
Billboard rotator
| Anchor |
|---|
| Billboard-rotator |
|---|
| Billboard-rotator |
|---|
|
The billboard rotator is wide and skinny. It’s typically used for advertisements. It showcases one item at a time as it rotates. You can turn this module into a static banner image by only including one item total.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Rotator width | Select one:
Full width
Partial width | Total number of items | Choose the maximum number of items in the module (recommend 3-7) | 2 | Module title | Remove title
Align title to the left, right, or center | 3 | Item titles | Remove item titles | 4 | Scroll | Turn off automatic scrolling
Change automatic scrolling speed 5 seconds
Show or hide indicator dots or arrows |
|
...
An example billboard rotator. See the configuration options above.
Square rotator
| Anchor |
|---|
| Square-rotator |
|---|
| Square-rotator |
|---|
|
The square rotator showcases multiple items at once as it rotates. You can choose to show 3 or show 4.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Items shown | Select one:
Show 3 items at a time
Show 4 items at a time | Total number of items | Choose the maximum number of items in the module (recommend 10) | Item arrangement | Align items to the left, right, or center when there aren’t enough to fill the row | 2 | Module title | Remove title
Align title to the left, right, or center | 3 | Scroll | Turn off automatic scrolling
Change automatic scrolling speed 5 seconds
Show or hide arrows |
|
...
An example square rotator. See the configuration options above.
Round rotator
| Anchor |
|---|
| Round-rotator |
|---|
| Round-rotator |
|---|
|
We recommend only using this module to showcase speakers. It showcases multiple speakers at once as it rotates. You can choose to show 3 or show 4.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Items shown | Select one:
Show 3 items at a time
Show 4 items at a time | Total number of items | Choose the maximum number of items in the module (recommend 10) | Item arrangement | Change circle size
Align items to the left, right, or center when there aren’t enough to fill the row | 2 | Module title | Remove title
Align title to the left, right, or center | 3 | Scroll | Turn off automatic scrolling
Change automatic scrolling speed 5 seconds
Show or hide arrows |
|
...
An example round rotator. See the configuration options above.
...
Grids
Two-column grid
| Anchor |
|---|
| Two-column-grid |
|---|
| Two-column-grid |
|---|
|
Also known as Square Grid.
This grid is always two columns wide.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Total number of items | Choose the maximum number of items in the grid (between 2-50) | 2 | Module title | Remove title
Align title to the left, right, or center |
|
...
An example two-column grid. See the configuration options above.
Multi-column grid
...
| Anchor |
|---|
| Multi-column-grid |
|---|
| Multi-column-grid |
|---|
|
Also known as Grid Image.
This grid can have 2-5 columns.
It’s often used for displaying exhibitors in multiple levels. For example, higher-level exhibitors appear larger in a grid with two columns, while lower-level exhibitors appear smaller in a grid with 3 columns.We don’t recommend using this module for sessions because it doesn’t include the session status (like Live or Past) or type (like Main stage or Panel).
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Number of columns | Show 2-5 columns | 2 | Total number of items | Choose the maximum number of items in the grid (between 2-50) | 3 | Module title | Remove title
Align title to the left, right, or center | 4 | Item titles | Remove titles and abstracts |
|
...
An example multi-column grid. See the configuration options above.
Round grid
We recommend only using this module to showcase speakers. This grid can have 2-6 columns.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Number of columns | Show 2-6 columns | 2 | Total number of items | Choose the maximum number of items in the grid (between 2-50) | 3 | Item arrangement | Change circle size
Align circles to the left or center | 4 | Module title | Remove title
Align title to the left, right, or center | 5 | Speaker role | Remove speaker’s company/role |
|
...
An example round grid. See the configuration options above.
Infinite search grid
...
Lists
List page
A list is a special page type that displays an infinite number of items at the bottom of the page. It can have 2-5 columns. Above it, you can include a search bar and filter options. We recommend using this grid . Any other rotators or grids can be added above the list and search bar, but none can be added below it. Only the list is searchable.
If you have 20+ items to display in a grid, a list is the best choice. It helps pages load faster because items load as you scroll, instead of all at once.
We recommend using a list to display all of a specific content type. For example, on your Courses Sessions page, you could make all courses searchable. Note that if there are multiple modules on a page, the infinite search grid must come last.
...
sessions searchable.
| Expand |
|---|
| title | Configuration options for the list page |
|---|
|
Element | Options |
|---|
1 | Number of columns | Show 2-5 columns | 2 | Search bar | Remove search bar and filter button
Remove filter button only | 3 | Tab navigation | Add one or more tabs to filter content:
All
My Favorites
…or any other content tags | 4 | Abstract | Remove abstract |
|
...
An example infinite search gridlist page. See the configuration options above.
...
| -list-page | | Round-list-page |
|---|
|
We recommend only using this module the round list to showcase speakers. It displays an infinite number of items that load as you scroll down at the bottom of the page. It can have 2-5 columns. Above it, you can include a search bar and filter options. Note that if there are multiple modules on a page, the round infinite search grid must come lastcolumns. Above it, you can include a search bar and filter options. Any other rotators or grids can be added above the list and search bar, but none can be added below it. Only the list is searchable.
If you have 20+ items to display in a grid, a list is the best choice. It helps pages load faster because items load as you scroll, instead of all at once.
We recommend using a list to display all of a specific content type. For example, on your Sessions page, you could make all sessions searchable.
| Expand |
|---|
| title | Configuration options for this module |
|---|
|
Element | Options |
|---|
1 | Number of columns | Show 2-5 columns | 2 | Search bar | Remove search bar and filter button
Remove filter button only | 3 | Tab navigation | Add one or more tabs to filter content:
All
My Favorites
…or any other content tags | 4 | Speaker role | Remove speaker’s company/role |
|
...
An example round infinite search gridlist page. See the configuration options above.