Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 46 Next »

Status

NOT VISIBLE TO PUBLIC IN REVISION

Type

Explanation/reference

Reader

Clients

Reader goal

Know which layouts are best for which content. Be able to pick one quickly and visually. Then if needed-- get into the details to know which elements can be configured

Contributors

Nelly

JUNO version

Reviewers (check the box when you’re done!)

  • Scrilla
  • Travis
  • Renae

Review deadline

Notes for reviewers

  • This is part 1 of 2. The second doc will cover all options for pulling and sorting content.

  • And we'll also be making a list of "prebuilt" modules so clients don't have to look at all this detail if they don't want to.

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


How to choose a module layout

Modules are grouped into two categories: Rotators and grids.

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.

Follow these suggestions to select a specific module based on your content:

To highlight featured content…

To list sessions…

To list exhibitors, courses, or library content…

To list speakers…


Rotators

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.

 Configuration 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

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.

 Configuration 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

The square rotator showcases multiple items at once as it rotates. You can choose to show 3 or show 4.

 Configuration 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

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.

 Configuration 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

Two-column grid

Also known as Square Grid.
This grid is always two columns wide.

 Configuration 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

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 would 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).

 Configuration 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

We recommend only using this module to showcase speakers. This grid can have 2-6 columns.

 Configuration 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.

Search grid

The search grid includes a search bar and filter options. This grid can have 2-5 columns.

 Configuration 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

Filter button

(error) Remove button

4

Abstract

(error) Remove abstract

An example search grid. See the configuration options above.

Round search grid

We recommend only using this module to showcase speakers. It includes a search bar and filter options. This grid can have 2-5 columns.

 Configuration 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

Filter button

(error) Remove button

4

Speaker role

(error) Remove speaker’s company/role

An example round search grid. See the configuration options above.

  • No labels