Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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.

(tick) 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…

Include Page
REUSE - New course limitations warning
REUSE - New course limitations warning

To list speakers…

...

Rotators
Anchor
Rotators
Rotators

...

Expand
titleConfiguration options for this module

Element

Options

1

Rotator width

Select one:
(tick) Full width
(tick) Partial width

Total number of items

(info) Choose the maximum number of items in the module (recommend 3-7)

2

Module title

(error) Remove title
(tick) Align title to the left, right, center, or bottom left

3

Item titles

(error) Remove overlaid item titles

4

Scroll

(error) Turn off automatic scrolling
(info) Change automatic scrolling speed 5 seconds
(plus) Show or hide indicator dots or arrows

...

An example featured rotator. See the configuration options above.

Billboard rotator
Anchor
Billboard-rotator
Billboard-rotator

...

Expand
titleConfiguration options for this module

Element

Options

1

Rotator width

Select one:
(tick) Full width
(tick) Partial width

Total number of items

(info) Choose the maximum number of items in the module (recommend 3-7)

2

Module title

(error) Remove title
(tick) Align title to the left, right, or center

3

Item titles

(error) Remove item titles

4

Scroll

(error) Turn off automatic scrolling
(info) Change automatic scrolling speed 5 seconds
(plus)Show or hide indicator dots or arrows

...

An example billboard rotator. See the configuration options above.

Square rotator
Anchor
Square-rotator
Square-rotator

...

Expand
titleConfiguration options for this module

Element

Options

1

Items shown

Select one:
(tick) Show 3 items at a time
(tick) Show 4 items at a time

Total number of items

(info) Choose the maximum number of items in the module (recommend 10)

Item arrangement

(tick) Align items to the left, right, or center when there aren’t enough to fill the row

2

Module title

(error) Remove title
(tick) Align title to the left, right, or center

3

Scroll

(error) Turn off automatic scrolling
(info) Change automatic scrolling speed 5 seconds
(plus) Show or hide arrows

...

An example square rotator. See the configuration options above.

Round rotator
Anchor
Round-rotator
Round-rotator

...

Expand
titleConfiguration options for this module

Element

Options

1

Items shown

Select one:
(tick) Show 3 items at a time
(tick) Show 4 items at a time

Total number of items

(info) Choose the maximum number of items in the module (recommend 10)

Item arrangement

(info) Change circle size
(tick) Align items to the left, right, or center when there aren’t enough to fill the row

2

Module title

(error) Remove title
(tick) Align title to the left, right, or center

3

Scroll

(error) Turn off automatic scrolling
(info) Change automatic scrolling speed 5 seconds
(plus) Show or hide arrows

...

An example round rotator. See the configuration options above.

...

Grids
Anchor
Grids
Grids

Two-column grid
Anchor
Two-column-grid
Two-column-grid

...

Expand
titleConfiguration options for this module

Element

Options

1

Total number of items

(info) Choose the maximum number of items in the grid (between 2-50)

2

Module title

(error) Remove title
(tick) 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

...

Expand
titleConfiguration options for this module

Element

Options

1

Number of columns

(tick) Show 2-5 columns

2

Total number of items

(info) Choose the maximum number of items in the grid (between 2-50)

3

Module title

(error) Remove title
(tick) Align title to the left, right, or center

4

Item titles

(error) Remove titles and abstracts

...

An example multi-column grid. See the configuration options above.

Round grid
Anchor
Round-grid
Round-grid

...

Expand
titleConfiguration options for this module

Element

Options

1

Number of columns

(tick) Show 2-6 columns

2

Total number of items

(info) Choose the maximum number of items in the grid (between 2-50)

3

Item arrangement

(info) Change circle size
(tick) Align circles to the left or center

4

Module title

(error) Remove title
(tick) Align title to the left, right, or center

5

Speaker role

(error) Remove speaker’s company/role

...

An example round grid. See the configuration options above.

...

Lists
Anchor

...

Lists
Lists

List page
Anchor
List-page
List-page

A list is a special page type that displays an infinite number of items that load as you scroll down the pageat the bottom of the page. It can have 2-5 columns. 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. We recommend using this grid to display all of a specific content type. For example, on your Courses 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 courses searchable. Note that if there are multiple modules on a page, the infinite search grid must come last.

...

titleConfiguration options for this module

sessions searchable.

Expand
titleConfiguration options for the list page

Element

Options

1

Number of columns

(tick) Show 2-5 columns

2

Search bar

(error) Remove search bar and filter button
(error) Remove filter button only

3

Tab navigation

Add one or more tabs to filter content:
(plus) All
(plus) My Favorites
(plus) …or any other content tags

4

Abstract

(error) Remove abstract

...

An example infinite search gridlist page. See the configuration options above.

Round

...

list page
Anchor
Round-

...

list-

...

page
Round-list-page

We recommend only using the round list to showcase speakers. It displays an infinite number of items at the bottom of the page. It can have 2-

...

Also known as Custom Module List.
We recommend only using this module to showcase speakers. It displays an infinite number of items that load as you scroll down 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 last5 columns. 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
titleConfiguration options for this module

Element

Options

1

Number of columns

(tick) Show 2-5 columns

2

Search bar

(error) Remove search bar and filter button
(error) Remove filter button only

3

Tab navigation

Add one or more tabs to filter content:
(plus) All
(plus) My Favorites
(plus) …or any other content tags

4

Speaker role

(error) Remove speaker’s company/role

...

An example round infinite search gridlist page. See the configuration options above.